微信小程序客服消息開發實戰：實時在手機上接收小程序客服消息通知，以及在手機上回復

在微信小程序開發中，可以非常方便的集成客服功能，只需要一行代碼便可以將用戶引導至客服會話界面。這行代碼就是：

<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.