微信公众号JS-SDK使用

先看下微信官网的JS-SDK介绍

前期准备

1. 微信测试公众号
2. 内网穿透（frp、花生壳、路由侠、ngrok）
3. 服务端程序

上面这三个东西能简单介绍下，微信测试公众号是用来给本地开发测试微信接口用的；内网穿透是因为微信的回调接口、校验接口、js安全域名都是用的公网ip或者域名（线上只能用域名）；服务端程序是用来处理一些存储的问题；

具体实现

微信测试公众号配置

下面是具体的配置和需要注意的地方，特别注意就是js安全域名和页面调用wx.config的域名需要是同一个

服务端程序配置

后端是springboot, 用的wxJava工具类便捷请求，也可以用JS-SDK介绍的附录1-JS-SDK使用权限签名算法替换
具体代码如下

import lombok.RequiredArgsConstructor;
import me.chanjar.weixin.common.bean.WxJsapiSignature;
import me.chanjar.weixin.common.error.WxErrorException;
import me.chanjar.weixin.mp.api.WxMpService;
import org.springframework.web.bind.annotation.*;

/**
 * 微信功能控制器
 */
@RestController
@RequiredArgsConstructor
@RequestMapping(value = "/wx")
public class WxController {

    private final WxMpService wxService;

    /**
     * 校验指定公众号的签名
     * 设置URL和TOKEN时，微信服务器会发送GET请求到该地址，并携带参数
     * 请求方向：wx---》业务系统
     * URL: http://{host:port或domain}/wx/{appId}/checkSignature
     * @param appId 公众号appId
     * @param signature 微信加密签名，signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。
     * @param timestamp 时间戳
     * @param nonce 随机数
     * @param echostr 随机字符串
     * @return echostr或者空， 如果返回echostr，则说明校验通过，否则不通过
     */
    @GetMapping("/{appId}/checkSignature")
    public String checkSignature(
            @PathVariable(value = "appId") String appId,
            @RequestParam(value = "signature") String signature,
            @RequestParam(value = "timestamp")String timestamp,
            @RequestParam(value = "nonce")String nonce,
            @RequestParam(value = "echostr")String echostr) {
        boolean flag = this.wxService.switchoverTo(appId).checkSignature(timestamp, nonce, signature);
        return flag ? echostr : "";
    }

    /**
     * 获取JS-SDK所需要的签名参数
     * @param appId 公众号的应用Id
     * @param pageUrl 前端的访问地址
     * @return 返回值 如{"code": 200, "data": {"appid": "", "nonceStr": "", "timestamp": 0, "url": "", "signature": ""}}
     */
    @GetMapping("/{appId}/jsapi/getJsapiTicket")
    public AjaxResult<WxJsapiSignature, Object> getJsapiTicket(
            @PathVariable(value = "appId") String appId,
            @RequestParam(value = "pageUrl") String pageUrl) throws WxErrorException {
        final WxJsapiSignature jsapiSignature = this.wxService.switchoverTo(appId).createJsapiSignature(pageUrl);
        return AjaxResult.success(jsapiSignature);
    }
}

前端配置

安装weixin-js-sdk

npm install weixin-js-sdk

写一个工具类，传入/jsapi/getJsapiTicket接口的返回值

import wx from 'weixin-js-sdk';

export const wxConfig = async (params) => {
  const {appId, timestamp, nonceStr, signature} = params;
  wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: appId, // 必填，公众号的唯一标识
    timestamp: Number(timestamp), // 必填，生成签名的时间戳
    nonceStr: nonceStr, // 必填，生成签名的随机串
    signature: signature,// 必填，签名
    jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
  });

  wx.ready(function(){
    wx.checkJsApi({
      jsApiList: ['chooseImage', 'scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      success: function(res) {
        console.log(res.checkResult);
        // 以键值对的形式返回，可用的api值true，不可用为false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      }
    });
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  });

  wx.error(function(res){
    console.log(res)
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
  });
}

调用方法
!!!最容易出错的就是这个pageUrl, 如果wx.config 报错：config:fail,invalid signature? 一定要检查下这个，绝大部分就是这个错微信要求调用wx.config的这个页面和你获取参数请求传的url一定要一样。所以这个pageUrl在前端传给后端，后端拿着这个去请求微信获取签名参数。

// 如http://${js安全域名}/#/devtoolUi/pages/index/index 转为http://${js安全域名}/ ，注意最后的/不能缺，有?param=xxx也要包含
let pageUrl = location.href.split('#')[0];
// 请求后端接口获取配置信息
request({
  url:`wx/${userConfig.option.devtoolUi.wx.h5.appid}/jsapi/getJsapiTicket?pageUrl=${pageUrl}`,
  method: 'GET',
  header: {}
}).then((res) => {
  if (res.code === 200) {
    // console.log('获取配置信息成功', res)
    wxConfig(res.data);
  }
});

如果想要知道自己的参数对不对可以用这个微信 JS 接口签名校验工具

附录

js获取签名参数方法

1.获取token
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

2.获取tticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

3.获取签名参数
noncestr=Wm3WZYTPz0wzccnW(自拟的随机字符串)
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg（步骤二所得）
timestamp=1414587457(事件字符串)
url=http://mp.weixin.qq.com?params=value（前端当前访问的url）

对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串

得到下面字符串
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

进行sha1签名，得到signature：0f9de62fce790f9a083d5c99e95740ceb90c27ed

const CryptoJS = require("crypto-js");
// 待加密的数据
const data = "Hello, World!";
// 使用SHA-1算法加密
const hash = CryptoJS.SHA1(data);