微信调用jssdk全流程详解

微信调用jssdk全流程详解

系统框架使用的是前后端分离，前端使用vant，后端是springboot

一、网页授权的时序图

二、公众号配置

1. 绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。也就是这样：

点击设置之后，弹出这样一个输入框，输入服务器所在的域名：

2：引入js文件

直接在你的页面里引入js文件就行

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

三、前端方法

1. 初始化方法，从后台获取基本的参数

前端进入需要扫一扫功能的页面时候，在mounted方法里面，执行微信配置getWxConfig()，此方法主要是获取jssdk所需要的参数，先检查本地缓存的是否过期，过期则请求后台获取

export function getWxConfig() {
  //判断signature是否过期
  if (expireSign()) {
    let data = {};
    data.appId = localStorage.getItem('appId');
    data.timestamp = localStorage.getItem('timestamp');
    data.nonceStr = localStorage.getItem('nonceStr');
    data.signature = localStorage.getItem('signature');
    setWxConfig(data);
  } else {
    //如果过期了，请求后台获取
    let url = location.href.split('#')[0]; //获取锚点之前的链接,防止出现invalid signature错误
    wxSign({ url: url })
      .then(res => {
        console.log(res);
        if (res.code == 200) {
          localStorage.setItem('appId', res.data.appId);
          localStorage.setItem('timestamp', res.data.timestamp);
          localStorage.setItem('nonceStr', res.data.nonceStr);
          localStorage.setItem('signature', res.data.signature);
          localStorage.setItem('expireSignTime', res.data.expireTime);
          setWxConfig(res.data);
        } else {
          localStorage.removeItem('expireSignTime');
          Toast.fail('网络故障，请退出重新加载页面');
        }
      })
      .catch(error => {
        localStorage.removeItem('expireSignTime');
        Toast.fail('网络故障，请退出重新加载页面');
      });
  }
}

2：注入config配置

上面获取到后台的参数后，在页面使用wx.config接口注入权限验证配置

function setWxConfig(data) {
  console.log(data);
  wx.config({
    debug: false, // true是开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: data.appId, // 必填，公众号的唯一标识
    timestamp: data.timestamp, // 必填，签名的时间戳，后台生成的
    nonceStr: data.nonceStr, // 必填，签名的随机串，后台生成的
    signature: data.signature, // 必填，签名，后台生成的
    jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，scanQRCode是调用扫一扫二维码
  });
  wx.error(function(res) {
    localStorage.removeItem('expireSignTime');
    Toast.fail('网络故