【SpringBoot学习】42、SpringBoot 集成 wxJava 微信小程序：客服消息

SpringBoot 集成 wxJava 微信小程序：客服消息

1、小程序后台配置客服

左手边点击客服，右边添加配置，然后添加客服微信，用来处理用户发送的信息

然后修改消息推送配置

• URL(服务器地址) ：微信收到消息回调的地址
• Token(令牌) ：随机生成一个字符串，长度为 32
• EncodingAESKey(消息加密密钥) ：秘钥点击右侧的自动生成即可
• 消息加密方式：微信推荐安全模式
• 数据格式：JSON

随机 32 位，可以使用以下方法

import java.util.UUID;

/**
 * @author Tellsea
 * @date 2022/3/25
 */
public class TestMain {

    public static void main(String[] args) {
        String substring = UUID.randomUUID().toString().replace("-", "").substring(0, 32);
        System.out.println(substring);
        System.out.println(substring.length());
    }
}

2、修改 application.yml

下面 5 个参数都需要配置

# 微信配置
wx:
  miniapp:
    configs:
      - appid: #微信小程序的appid
        secret: #微信小程序的Secret
        token: #微信小程序消息服务器配置的token
        aesKey: #微信小程序消息服务器配置的EncodingAESKey
        msgDataFormat: JSON

3、后端处理

两个接口，一个是用户发送消息的回调，另一个是服务端主动发送消息

    @ApiOperation("发送客服消息")
    @PostMapping("sendKefuMessage")
    public AjaxResult sendKefuMessage(@RequestBody WxKefuMessageVo entity) {
        return wxMiniappService.sendKefuMessage(entity);
    }

    @ApiOperation("发送客服消息-微信回调")
    @RequestMapping("sendKefuMessageBack")
    public String sendKefuMessageBack(WxKefuMessageBackVo entity) {
        return wxMiniappService.sendKefuMessageBack(entity);
    }

service 接口

    /**
     * 发送客服消息
     *
     * @param entity
     * @return
     */
    AjaxResult sendKefuMessage(WxKefuMessageVo entity);

    /**
     * 发送客服消息-微信回调
     *
     * @param entity
     * @return
     */
    String sendKefuMessageBack(WxKefuMessageBackVo entity);

实现类

    @Override
    public AjaxResult sendKefuMessage(WxKefuMessageVo entity) {
        try {
            String appid = wxMaProperties.getConfigs().get(0).getAppid();
            final WxMaService wxService = WxMaConfiguration.getMaService(appid);
            String openId = SecurityUtils.getLoginUser().getUser().getOpenId();

            WxMaKefuMessage message = WxMaKefuMessage.newTextBuilder()
                    .toUser(openId)
                    .content(entity.getContent())
                    .build();
            wxService.getMsgService().sendKefuMsg(message);
            return AjaxResult.success("发送成功");
        } catch (WxErrorException e) {
            log.error(e.toString());
            return AjaxResult.error(e.getError().getErrorMsg());
        }
    }

    @Override
    public String sendKefuMessageBack(WxKefuMessageBackVo entity) {
        log.info("微信客服回调：{}", entity);
        return entity.getEchostr();
    }

微信客服消息参数

import lombok.Data;
import lombok.experimental.Accessors;

/**
 * 微信客服消息参数
 *
 * @author Tellsea
 * @date 2022/3/25
 */
@Data
@Accessors(chain = true)
public class WxKefuMessageVo {

    /**
     * 消息内容
     */
    private String content;
}

微信客服消息回调参数

import lombok.Data;
import lombok.experimental.Accessors;

/**
 * 微信客服消息回调参数
 * https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html#%E5%BC%80%E5%8F%91%E8%80%85%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%8E%A5%E6%94%B6%E6%B6%88%E6%81%AF%E6%8E%A8%E9%80%81
 *
 * @author Tellsea
 * @date 2022/3/25
 */
@Data
@Accessors(chain = true)
public class WxKefuMessageBackVo {

    /**
     * 微信加密签名，signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。
     */
    private String signature;
    /**
     * 时间戳
     */
    private String timestamp;
    /**
     * 随机数
     */
    private String nonce;
    /**
     * 随机字符串
     */
    private String echostr;
}

4、客户消息限制

客服不能主动发消息给用户，只能用户主动发消息给客服，然后客服回复消息，且连续回复不能超过 5 条

• 微信开发文档：客服功能使用指南
  

5、前端处理

必须使用微信的 button，才能打开联系客服界面

<button type="default" open-type="contact" @getphonenumber="linkKefu">联系客服</button>

完整逻辑如下

<template>
  <view style="padding: 15px;">
    <button type="default" open-type="contact" @getphonenumber="linkKefu">联系客服</button>
    <u-form :model="form" ref="uForm" label-width="140">
      <u-form-item label="消息内容"><u-input v-model="form.content" /></u-form-item>
      <u-button @click="submit" type="primary">发送消息</u-button>
    </u-form>
  </view>
</template>

<script>
let that;
export default {
  name: "createOrder",
  data() {
    return {
      form: {
        content: '我是发送的消息！！！'
      }
    }
  },
  onLoad() {
    that = this;
  },
  methods: {
    linkKefu(e) {
      console.log(e);
    },
    submit() {
      that.$u.post('/au/wxMiniapp/sendKefuMessage', that.form).then(res => {
        that.$msg(res.msg);
      });
    }
  }
}
</script>

<style scoped>

</style>

用户先主动联系客服

然后客服才能回复消息，且一次连续只能回复 5 条

6、使用官方客服小程序

使用官方客服小程序需要关闭消息推送，让微信服务器把消息直接发送到客服小程序

可以直接点击进入查看消息

OK，到这里全部测试完成

微信公众号