解决微信公众号网页第一次调用扫一扫失败的问题

运行环境：真机测试
开发技术：Vue项目
问题描述：Vue开发的公众号网页，第一次调用扫一扫功能总是失败

思路

1. 检查引入微信js-sdk版本

<!-- 微信JSSDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>

2. 检查config接口注入权限验证配置参数是否正确

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

点击函数调用扫一扫完整代码

   let obj = {
       url: location.href,
       jsApiList: ["scanQRCode"],
   };
   // 通过当前url以及js接口列表请求接口，获取所有配置信息
   get("api/login/get_jssdk_config", obj).then((res) => {
       if (res.code == 200) {
           wx.config(res.data);

           wx.ready(function () {
               // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
               wx.scanQRCode({
                   desc: "scanQRCode desc",
                   needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                   scanType: ["qrCode"], // 可以指定扫二维码还是一维码barCode，默认二者都有
                   success: function (res) {
                       // 扫码成功（res.resultStr为扫码返回的结果）
					   // do something
                   },
                   error: function (res) {
                       if (res.errMsg.indexOf("function_not_exist") > 0) {
                           alert("当前版本过低，请进行升级");
                       }
                   },
               });
           });
           //初始化jsapi接口 状态
           wx.error(function (res) {
               alert("调用微信jsapi返回的状态:" + res.errMsg);
           });
       }
   });

一顿操作猛如虎，一看页面还是如此。。。哎，没办法一顿苦思冥想，想起要不要刷新页面看看。？？可行！为此我们只需要在我们需要调用wx.config是，在wx.error里面监听，一旦触发此事件直接location.reload();刷新页面。

   //初始化jsapi接口 状态
   wx.error(function (res) {
     // alert("调用微信jsapi返回的状态:" + res.errMsg);
     location.reload();
   });

但现在又有另一个问题，每次我们点击调取扫一扫时，第一次总会出现刷新的效果，然后方可调用成功，这样用户体验不好，我们在页面加载的时候调用一次，但成功后不执行任何操作。

<script>
// 页面全局声明一个对象用于存储配置参数，方便多次调用
var config = {};
export default {
  data() {
    return {};
  },
  created() {
    this.renderCode();
  },
  methods: {
    renderCode() {
      let obj = {
        url: location.href,
        jsApiList: ["scanQRCode"],
      };
      // 同样是请求接口获取配置参数
      get("api/login/get_jssdk_config", obj).then((res) => {
        if (res.code == 200) {
          config = res.data;
          wx.config(config);

          wx.ready(function () {
            // 不做任何操作
          });

          //初始化jsapi接口 状态
          wx.error(function (res) {
            // 第一次初始化失败，问题不打，直接强刷页面即可，当我们再点击调用上面的点击函数即可成功
            location.reload();
          });
        }
      });
    },
  },
};
</script>

总结：

1. 微信js-sdk版本
2. wx.config()配置参数
3. wx.error()中记得location.reload()刷新页面
4. 页面加载中，记得调用一次wx.config，其它时候直接在wx.ready()中写逻辑即可

有疑问阅读下方微信开发文档！

微信开发文档

新手上路，如有错误，劳请评论指出，谢谢！