ios端通过微信小程序客服助手进行支付

---

前言

小程序的ios端在众所周知的原因无法支付虚拟商品信息，互联网公司的处理方案：1.引导客户在H5页面进行支付，2.通过微信小程序客服助手引导客户授权公众号进行JSAPI调用支付

题主在查阅网上资料的时候，发现网上只是总结了大概得实现方案，并没有相关的实际案例代码给大家参考，如是题主使用的是接入小程序客服助手引导客户进行微信公众号授权后的JSAPI支付写了一套支付逻辑代码供大家参考。

---

一、如何开通微信小程序客户助手？

进入到微信公众平台—>登录选择–>开发–>开发管理–>开发设置–>消息推送

设置小程序客服消息需要转发到后端的url地址，设置token，数据格式题主选的xml，大家根据实际场景选择，影响不大。

注意：我们配置后端的url地址时，微信小程序提交的校验接口需要和服务器接收的转发的url地址保持一致，服务器校验的接口使用GET请求，小程序将用户消息转发到后端的接口需要用POST。例如：/wxMini//msg GET作为校验，/wxMini//msg POST作为处理接口转发请求的接口，在此接口里实现业务逻辑

---

二、如何配置小程序消息回复的接口校验？

    @GetMapping("/msg")
    @ResponseBody
    public String wechatInitCheck(HttpServletRequest request, HttpServletResponse response) {
        // 微信加密签名，signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。
        String signature = request.getParameter("signature");
        // 时间戳
        String timestamp = request.getParameter("timestamp");
        // 随机数
        String nonce = request.getParameter("nonce");
        // 随机字符串
        String echostr = request.getParameter("echostr");
        log.info("signature:{},timestamp:{},nonce:{},echostr:{}", signature, timestamp, nonce, echostr);
       //这边的数组排序，大家一定要按照这个要求来，这个是微信官方文档的要求
       //，不然校验会报错
        String[] sort = {wxConfig.getMiniAppToken(), timestamp, nonce};
        Arrays.sort(sort);
        String sign = SecureUtil.sha1(StringUtils.join(sort));
        if (sign.equals(signature)) {
            return echostr;
        }
        return "接入失败";
    }

接入成功后的小程序消息推送的配置效果，这样我们就完成了接收小程序客服消息的能力。

---

三、小程序客服消息如何处理？

    @ApiOperation(value = "微信小程序消息回复处理")
    @PostMapping("/msg")
    public ResponseEntity<String> disposeEvent(HttpServletRequest request) throws IOException {
        //解析
        BufferedReader br = request.getReader();
        StringBuilder xmlData = new StringBuilder();
        String temp;
        while ((temp = br.readLine()) != null) {
            xmlData.append(temp);
        }
        //将收到的xml文件转换成map，大家可以根据具体的业务场景再次转换成对象
        Map<String, Object> msgMap = XmlUtil.xmlToMap(xmlData.toString());
        //处理转发过来的微信小程序客服消息
        wxMiniService.disposeMsg(msgMap);
        return ResponseEntity.ok("");
    }

处理收到的小程序转发的客服消息，解析消息后，可以在消息体当中解析出，用户小程序的openid参数为FromUserName，以及消息的类型参数为MsgType，然后内容content，大家根据实际的场景去debug下消息的格式，下面是一个示例。

{
	AppId=xxxxxxxxxxxxx,
 	PagePath=pages/mine/vip/index, 
	Title=AI短视频, 
	ToUserName=xxxxx, 
	//解析出来的用户的小程序openid
	FromUserName=xxxxx, 
	//解析出来的消息类型，此处为小程序卡片消息
	MsgType=miniprogrampage, 
	ThumbMediaId=xxxxxxx,
	MsgId=24659455xxxxxxx}

    @Override
    public Object disposeMsg(Map<String, Object> msgMap) {
        if (Objects.isNull(msgMap)) {
            return null;
        }
        log.info("微信客服消息事件处理:{}", msgMap);
        String msgType = (String) msgMap.get("MsgType");
        if (StringUtils.isBlank(msgType)) {
            return null;
        }
        //题主这边处理的是小程序消息和普通文本类型的消息，实际应用场景大家可以自行转换
        if (!msgType.equals("miniprogrampage") && !msgType.equals("text")) {
            return null;
        }
        String userOpenId = (String) msgMap.get("FromUserName");
        //todo 获取当用户的小程序openid，就可以通过小程序客服助手给指定的
        //openid的小程序用户发送消息
	}

效果如下图所示，我这边处理的的小程序卡片消息，小程序卡片消息当中包含了订单信息，后端根据这个订单消息进行后续处理，然后返回给用户一个包含一个跳转地址的图文连接消息。

四、小程序客服消息已经回复了，如何使用公众号授权让用户进行微信付款了？

题主当时想到的办法是，返回一个包含一个H5页面地址给前端，前端在根据打开的H5页面地址进行，后续的微信公众号的授权及付款操作。但是这样处理起来整个流程就会特别复杂，链路会很长，于是题主采用了一种更简单的方式，就是返回的小程序卡片消息中直接包含了微信公众号授权跳转地址，用户点击授权地址授权完成后，携带用户的授权code查询出用户的微信公众号的openid，然后携带订单号
和用户的公众号的openid重定向到前端地址，前端通过调用JSAPI的支付接口就可以完成支付了。卡片消息的内容为吊起微信微信公众号授权接口，具体参照微信接口文档。示例如下：整个流程图如下：

//授权重定向时记得带上订单编号或者订单id
    public static String OPEN_LINK_URL = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            WX_PUB_APP_ID + "&redirect_uri=" + REDIRECT_URI + "%3ForderNo%3D" +
            ORDER_NO_PLACEHOLDER + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";

总结

通过微信小程序客服消息，以及微信公众号授权，既可以通过在微信内通过JSAPI进行支付。具体的业务处理流程大家可以根据实际的业务场景去调整。如果对您有帮助，麻烦点赞收藏，谢谢！