IOS端调用微信jssdk失败的踩坑之路

最近开发一个基于vue的spa应用，在调用微信扫描二维码jssdk的时候发现在ios上有时可以，有时失败，但Android设备上没问题。经过多次测试发现，ios端直接进入需要扫码的页面没问题，从其他页面跳到扫码页的情况下不行。
翻阅微信官方文档，只发现这段话：

与我遇到的情况并不相符。

官方明确给出SPA在每次url变化时进行调用,于是我之前代码是这样的：

/*在需要调用微信扫码的页面*/

created() {
            this.requestWxStr()
        },
methods: {
           // 请求微信签名等相关字段
            async requestWxStr() {
                var params = {
                    "localUrl": location.href.split('#')[0]
                }
                let res = await queryWxStr(params)
                if(res.data){
                    let wxdata = res.data
                    wx.config({
                        debug: false,
                        appId: wxdata.appId,
                        timestamp: parseInt(wxdata.timestamp),
                        nonceStr: wxdata.nonceStr,
                        signature: wxdata.signature,
                        jsApiList: [
                            'scanQRCode'
                        ]
                    });
                }

            },
            //点击扫描按钮的时候执行scan
            scan(shopId,index) {
                let _this = this
                let code
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        code = result.substring(result.indexOf('n=') + 2)
                        _this.verifyCodeFuc(code,index)
                    }
                });
            }
}

因为我只有这个页面用到了微信jssdk，在进入这个页面的时候调取微信初始化，完全是按照官方文档来的，并且Android环境下正常运行。
经过各种排查，我猜测，在ios环境下，需要且只能在网站第一次打开的时候初始化config配置。这样也印证了从应用的其他页面跳入扫码页面，调用失效，直接进入扫码页面扫码成功的现象。

知道了原因，该怎么解决呢？怎么知道用户什么时候第一次进入应用？

我使用的是vue-router中勾子函数beforeEach的from参数，如果第一次进入应用，from.path === '/'。
最终我的代码是这样的。

//main.js
router.beforeEach((to, from, next) => { // beforeEach是router的钩子函数，在进入路由前执行
  /* vue-router用的history模式，在微信签名验证的时候iOS验证URL第一次进来的URL */
  if (isIOS()) {
    if (from.path === '/') {
      requestWxStr() //该函数和之前一样，被单独提取出来了
    }
  }

  if (to.meta.title) { // 判断是否有标题
    document.title = to.meta.title
  }
  next()// 执行进入路由，如果不写就不会进入目标页
})

//提取出来的公共方法
/*
* 判断是否IOS环境
* */
export function isIOS () {
  let isIphone = navigator.userAgent.includes('iPhone')
  let isIpad = navigator.userAgent.includes('iPad')
  return isIphone || isIpad
}

/*
* 获取微信签名，注入权限验证配置
* */
export async function requestWxStr () {
  var params = {
    'localUrl': location.href.split('#')[0]
  }
  let res = await queryWxStr(params)
  if (res.data) {
    let wxdata = res.data
    wx.config({
      debug: true,
      appId: wxdata.appId,
      timestamp: parseInt(wxdata.timestamp),
      nonceStr: wxdata.nonceStr,
      signature: wxdata.signature,
      jsApiList: [
        'scanQRCode'
      ]
    })
  }
}

//扫码页面
created() {
  if(!isIOS()){
    requestWxStr()
  }
}

通过以上修改，在Android和ios环境下都可以正常调用jssdk了。应该是ios的微信对pushState的H5新特性没有很好地兼容造成的。在vue的mode: 'history'模式，或者react使用browserHistory会出现这种情况。最坑爹的是官方文档并没有任何相关说明。

最后编辑于：2018.11.07 16:12:29