微信jssdk在IOS系统下第一次进入页面无法成功调用

问题描述

react开发微信h5网页，IOS真机下调试，调用wx.chooseImage接口，第一次进入页面出现invalid signature签名错误（开启debug模式）。刷新一次页面之后可以正常调用。在安卓和微信开发者工具中没问题。

问题分析

由于在安卓和开发者工具中是完全可行的，所有排除签名算法、书写错误、access_token和jsapi_ticket没有缓存等问题。而且已经使用location.href.split(’#’)[0]对url进行处理，微信后台也已经将域名加入白名单。
排除掉以上错误，根据查阅资料，进入页面后获取当前的url作为参数获取签名时发生错误，可以大概定位到错误是由于url参数错误造成。但是从后台获取url参数，第一次进入页面（此时无法调用jssdk），和刷新页面后（此时可以调用jssdk）获取的url是一致的，可刷新页面之后就可成功调用。目前这个地方我也有点疑惑。

解决方案

亲测没有解决方法

1.在IOS中进入h5首页是可以调用成功的，所有只在首页中调用一次，其他页面不调用。
2.在其他页面调用时使用首页的url。
3.判断机型（自行查找资料），如果是IOS系统就使用location.href.split("#")[0]对url处理。
注：以上方法亲测都没有成功，可能写法有误

成功解决方法

这两种方法都需要先判断机型
1.当进入页面后，在componentDidMount声明周期中直接强制刷新页面window.location.href = location.href.split(’#’)[0] + ‘?r=’ + new Date().getTime(),记得对当前url做判断，否则会一直刷新页面，如果页面有参数把？换成&此方法有个小问题，可能回退不到上一级页面。

2.当进入页面后，在componentDidMount声明周期中直接强制刷新页面 window.location.replace(location.href.split(’#’)[0] + ‘?r=’ + new Date().getTime());

 const isIOS = phoneType();
    if(isIOS){
      if(location.href.indexOf('?uid') > -1){
        //第一次进入该页面，需要授权登录，此时链接中包含参数
        window.location.replace(location.href.split('#')[0] + '&r=' + new Date().getTime());
      }else{
        window.location.replace(location.href.split('#')[0] + '?r=' + new Date().getTime());
      }
    }

isIOS参数判断是否为IOS系统，大家可以自行判断。此项目中当前页面如果第一次进入需要授权的话url有参数，所有走if语句，如果不是第一次进入走else语句，这个试情况而定。