vue中使用微信JSSDK,在IOS端会授权出错

因为最近的项目需要用到vue开发微信公众号,需要调用微信的扫码和打开地图定位。所以就用到了微信JSSDK。

但是使用之后,问题来了,从/login的页面跳转至/home页面的时候,在IOS中是授权失败,但是在android中是百分百成功的。


后来,通过了解得知:

vue-router切换的时候操作的都是浏览器的历史记录,iOS会把第一次刚进入时的URL作为真实URL,安卓会把当前URL作为真实URL。

所以导致后端在配置好的授权参数获得的config参数和微信sdk获取的参数是不一样的。

最后的解决办法:

微信的官方文档建议: SPA单页应用应该在每次切换页面的时候实例化sdk

但是由于遇到这个问题,我就将授权的部分放在了App.vue这个部分来完成,App.vue包含了。而且因为我并没有使用history模式, 也就是说vue的history模式下你并不能这么来。  在hash模式下,页面的路径格式是 https://www.xxx.com/#/xxx?xx=xx&...,这样的话,你初始化的路径就是https://www.xxx.com/,#后面的算是页内跳转不会影响jssdk的配置。当然啦,你如果用的histroy模式,那么页面路径不带#就会配判断为一直在变动,就需要你每个页面都去配置。

贴代码:

app.vue

toWXconfig(){

        var _this = this;

        let para = {};

        WXconfig(para).then(data => {

            if(data.code == 200) {

              wx.config({

                  debug : false, 

                  appId : data.content.appId, // 必填,公众号的唯一标识

                  timestamp : data.content.timestamp, // 必填,生成签名的时间戳

                  nonceStr : data.content.nonceStr, // 必填,生成签名的随机串

                  signature : data.content.signature,// 必填,签名,见附录1

                  jsApiList : [ 'scanQRCode', 'openLocation','getLocation']

              // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

              });

            } 

        })

      },

  },

home.vue

wxConfigSao(){

    wx.scanQRCode({

        needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,

        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有

        success: function (res) {

            var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果;

            alert(result)

        }

    });

},

你可能感兴趣的:(vue中使用微信JSSDK,在IOS端会授权出错)