h5使用微信扫码功能，提示config:invalid signature，有效解决。-小祥驿站

简介使用微信二维码扫码核销，第一次进入页面后提示config:invalid signature，点击扫码提示没有权限。文章介绍如何避免这个问题，有效解决。

第一步引入wx.js的文件

使用npm工具安装使用

import wx from "weixin-js-sdk";

使用外部js

// https://res.wx.qq.com/open/js/jweixin-1.6.0.js

第二步代码实现

全局定义微信sdk需要的参数

let params = ref({
  appId: '',
  timestamp: 0,
  nonceStr: '',
  signature: '',
});

微信官方签名校验工具
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

在页面加载完成后请求后端获取签名signature

const getfindSign = async () => {
  const currentUrl = window.location.href.split("#")[0];
  try {
    let res = await findSign({
      url: currentUrl,
    });

    if (res.status == 0) {
      // 给全局变量赋值
      params.value = res.data;
    }
  } catch (error) {}
};

点击页面按钮拉取扫码功能

const startScan = async () => {
  if (!isWxBrowser()) {
    uni.showToast({ title: "请在微信中使用此功能", icon: "none" });
    return;
  }
  // 异步从后台拉取新的签名，避免用户停留在页面的时间过长，导致签名过期失效
  getfindSign();
  try {
    wx.config({
      debug: false,
      appId: params.value.appId,
      timestamp: params.value.timestamp,
      nonceStr: params.value.nonceStr,
      signature: params.value.signature,
      jsApiList: ["scanQRCode"],
    });
    wx.ready(async () => {
      wx.scanQRCode({
        debug: false,
        needResult: 1,
        scanType: ["qrCode"],// 默认是配置了二维码和条形码，如果代码没有问题，但是还是拉取不了扫码，请先去掉条形码后，再试试。
        success: (res) => {
            // 处理扫码成功的业务
        },
        fail: (res) => {
          uni.showToast({ title: res.errMsg, icon: "none" });
          console.log("startScan ~ res:", res);
        },
      });
    });
  } catch (error) {
    console.log("startScan ~ error:", error);
  }
};