微信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语句,这个试情况而定。

你可能感兴趣的:(微信jssdk在IOS系统下第一次进入页面无法成功调用)