1.问题原因:
(1)在调用微信jssdk中的方法之前,需要执行微信config
(2)目前的原因是,我们从路由A跳转到路由B,我们将config注册到了路由A,实际上是路由B需要注册config
(3)所以当浏览器的地址发生变化的时候,需要重新初始化微信的jssdk(config)。单页应用使用H5 的history API 改变了浏览器地址,但是没有重新初始化jssdk(config)
2.解决方法:
(1)React的解决方法:
export default (params) => {
// 执行微信config
doConfig(params.getDeffer);
return {
// 初始化微信jssdk
getWXBrowserSDK: () => {
if (wxReady) {
return Promise.resolve(sdk);
}
return new Promise((resolve) => {
wxReadyCallBacks.push(() => {
resolve(sdk);
});
});
},
// 路由切换钩子回调函数,将ready标识置为false,重新执行微信config
onLocationChange: (curSt ate, nextState, replace, next) => {
next();
wxReady = false;
// 执行微信config
doConfig(params.getDeffer);
},
};
};
<Route path="/" component={App} onChange={appApi.onLocationChange}>
(2)Taro的解决方法:
解决方法一:
Taro和React不同的是:Taro没有给全局暴露Router,不能够实现routerChange的监听,没有路由钩子函数
所以Taro的处理方式是,在调用微信jssdkAPI页面中ComponentDidmount生命周期内,重新初始化微信config,用此方法去代替路由钩子
componentDidMount() {
await weixin().onLocationChange();
}
解决方法二:
taro里面提供的是taro的路由跳转方式,改成location.href,但是用户体验不好
因为location.hreft跳转需要重新加载页面的js,会导致跳转时出现空白页面
VUE建议:
建议在vue的afterRouter生命周期刷新一下config,afterRouter里面设置一个要使用jsapi的路由白名单,白名单内的路由刷新wx-js-config