其他分享
首页 > 其他分享> > 解决微信公众号网页第一次调用扫一扫失败的问题

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

作者:互联网

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

思路

  1. 检查引入微信js-sdk版本
<!-- 微信JSSDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>
  1. 检查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()中写逻辑即可

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

微信开发文档

新手上路,如有错误,劳请评论指出,谢谢!

标签:调用,网页,微信,扫一扫,接口,res,config,wx
来源: https://blog.csdn.net/qq_44260798/article/details/115016638