微信小程序客服消息开发实战：实时在手机上接收小程序客服消息通知，以及在手机上回复

在微信小程序开发中，可以非常方便的集成客服功能，只需要一行代码便可以将用户引导至客服会话界面。这行代码就是：

<button open-type="contact" bindcontact="handleContact">联系我们</button>   

当用户点击这个【联系我们】的按钮时，便会进入微信自带的小程序客服会话界面。如下图：

虽然只能发送表情和照片，但是对于小程序来讲，已经是非常不错的功能了。

但是，虽然可以一行代码让我们的小程序拥有客服功能，但是当用户给我们小程序发消息的时候，我们小程序的管理员或运营者并不能实时收到消息通知，这就导致经常不能及时回复用户信息，导致销售机会的流失。

如果想要在手机上实时接收小程序客服消息通知，以及在手机上回复用户信息，那就得自己写代码了，或者更简单的，使用第三方平台的服务。

下面，笔者就详细介绍这两种实现方式。

方式一：自己写代码

首先，需要按照官方提供的消息推送文档，完成消息推送接口的开发。请参考这里。这一步通常是比较难的，如果是第一次尝试对接，建议加密方式采用明文方式。

当消息推送接口开发完成后，需要到小程序后台，在「开发」-「开发设置」-「消息推送」中，管理员扫码启用消息服务，填写服务器地址（URL）、令牌（Token） 和 消息加密密钥（EncodingAESKey）等信息。如下图所示：

在上图中的页面提交成功之后，即表示你们开发的消息推送接口反应正常，可以正常收到用户的客服消息了。

接下来，便是接收文字消息和图片消息。

1.1 文本消息

文本消息对接非常的简单，其XML数据格式如下：

 <xml>
    <ToUserName><![CDATA[toUser]]></ToUserName>
    <FromUserName><![CDATA[fromUser]]></FromUserName>
    <CreateTime>1482048670</CreateTime>
    <MsgType><![CDATA[text]]></MsgType>
    <Content><![CDATA[this is a test]]></Content>
    <MsgId>1234567890123456</MsgId>
 </xml>

你只需要将Content的值通过微信或者短信，或者任何方式发送给你们运营者（或管理员）即可，建议通过微信公众号的模板消息发送，当然，这得要求你们要有已认证的服务号，并且已申请模板消息。

当然运营者收到模板消息通知后，点开消息即可进行回复。这里得需要开发一个聊天界面，方便运营者直接给用户发消息。

这个聊天界面可简单可复杂，但是最基本的应该要支持输入文字和上传图片。所以，开发起来其实也很复杂。

1.2 图片消息

图片消息XML数据格式如下：

 <xml>
       <ToUserName><![CDATA[toUser]]></ToUserName>
       <FromUserName><![CDATA[fromUser]]></FromUserName>
       <CreateTime>1482048670</CreateTime>
       <MsgType><![CDATA[image]]></MsgType>
       <PicUrl><![CDATA[this is a url]]></PicUrl>
       <MediaId><![CDATA[media_id]]></MediaId>
       <MsgId>1234567890123456</MsgId>
 </xml>

可以看到这里提供了PicUrl图片链接地址，首先需要下载该图片到本地服务器，然后再创建消息并推送给运营者。

1.3 发送小程序客服消息

当运营者通过你们自己开发的聊天界面发送消息时，这时需要调用小程序的API。请参考这篇API文档。

调用发送消息接口的时候，需要先获取accesstoken，并且要求你们服务器自行维护一份可用的accesstoken，这对于很多新手开发人员来讲也是比较难以理解的。

而如果是发送图片消息，则需要通过新增临时图片素材接口获得media_id，然后才能调用发送图片接口。

总的来讲，实现消息的发送也是比较复杂的。

下面，笔者给大家分享第二种实现在手机上实时接收小程序客服消息通知的方式，也是最为推荐的方式。

方式二：直接使用第三方平台的服务

关注下图所示公众号，完了之后点击公众号底部自定义菜单【新增授权】。

重要提示：授权的时候 只勾选客服消息权限，其他权限一个都不要选，否则可能对原有的小程序造成影响。

授权完成后，可以进入自己的小程序，给自己的小程序发一个消息，是不是立即收到了来自微小助公众号的消息通知。点击这个通知就可以直接回复，支持文本、相册选择、拍照。

这时候，你可能已经发现，在第三方平台的聊天界面无法显示粉丝头像和昵称。这是因为小程序只能通过小程序内获取用户信息，而不能通过服务器端获取。

没关系，该第三方平台提供了对接头像昵称的接口。

对接原理：

作为小程序的开发方，通常我们都会将用户头像、昵称和openid存到自己的数据库。那么只需要我们的WEB服务器开放一个根据openid返回头像昵称的接口，那么当第三方平台需要显示用户头像昵称的时候，传一个openid过来就可以显示头像昵称了。而对于小程序开发方，只需要开放一个非常简单的数据接口，并且数据多来自已有的数据库，直接返回即可。

该接口的文档获取方式：微小助公众号 - 底部菜单【管理中心】 - 进入自己的小程序。点击如下图所示一栏：

在接下来的页面中，便会弹出接口对接说明，如下图：

请看.NET示例代码：

 [TokenAuthorize(Anonymous = true), HttpGet]
 public ActionResult GetStudentNameAndAvatar(string openId)
 {
     var service = Ioc.GetService<IStudentService>();
     var user = service.GetOauthAppletUser(openId);
     if (user == null)
     {
         return null;
     }
     return Json(new
     {
         avatarUrl = user.AvatarUrl,
         nickname = user.NickName
     }, JsonRequestBehavior.AllowGet);
 }

下面是java版的API接口实现示例：

 @RequestMapping(value = "/get-user-info", method = RequestMethod.GET)
 @ResponseBody
 @Authorize(anonymous = true)
 public UserInfoDto getUserInfo(String openId) {
     OAuthWeixinUser user = this.userService.getUserByOpenId(openId);
     UserInfoDto dto = new UserInfoDto();
     dto.setAvatarUrl(user.getHeadimgUrl());
     dto.setSex(user.getGender().getValue());
     dto.setNickname(user.getNickname());
     dto.setRemark(user.getRemark());
     return dto;
 }

其中UserInfoDto类的定义如下：

 public class UserInfoDto {
     private String avatarUrl;
     private String nickname;
     private int sex;
     private String remark;

     public String getAvatarUrl() {
         return avatarUrl;
     }

     public void setAvatarUrl(String avatarUrl) {
         this.avatarUrl = avatarUrl;
     }

     public String getNickname() {
         return nickname;
     }

     public void setNickname(String nickname) {
         this.nickname = nickname;
     }

     public int getSex() {
         return sex;
     }

     public void setSex(int sex) {
         this.sex = sex;
     }

     public String getRemark() {
         return remark;
     }

     public void setRemark(String remark) {
         this.remark = remark;
     }
 }

接口开发完成后，发布到生成环境，可以随便从数据库取一个openid拼接成URL之后在浏览器中测试。测试正确返回数据后，将此URL回填到第三方平台内的URL配置地方。

现在，再次用自己的微信给小程序发一个消息，你会看到，在运营者（或管理员）打开通知的聊天界面，已经可以正常显示粉丝头像昵称了。

是不是非常的简单呢！（如果需要更完善的第三方平台操作步骤，请点击这里继续阅读）

THE END.