微信公众号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);
    }
}

npm install weixin-js-sdk

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可以在这里更新签名。
  });
}

// 如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);
  }
});

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