功能流程:
1、用户进入A 页面,然后使用vue-router4中的push方法,从 A 页面 跳转到 B 页面 ,并引导用户进行分享;
2、然后用户在 B 页面 点击分享按钮,调用js-sdk中的 wx.config 方法,此时 location.href.split('#')[0] 读取到的是正确的B页面, 但wx.config读取到的realAuthUrl却是路由跳转前的 A 页面 ????
Bug如图: (此时其实已经是在B页面了,而且代码执行都是在B页面执行的,但wx.config方法一直读取到的是A页面的路径!!!)
此时,使用 location.href.split('#')[0] 读取到的页面是正确的, 但 wx.config 读取到的却是错误的,且无法手动上传url,导致bug无法被解决!
这一情况仅仅只会出现在 iPhone手机中,而且是概率出现,大概失败几十次之后偶尔可以成功一次。 安卓手机一切正常,可以正常获取签名完成后续的自定义分享功能。(所有设备的微信版本均为 8.0.54)
安卓手机一直可以成功运行,证明我们的签名算法正确,代码逻辑无误,是wx.config 函数本身的bug,请尽快修复!
---------------------------------------------------------------------------------------------------------------------
经测试:ios手机不经过A页面,直接在B页面调用 wx.config方法时,wx.config方法和 location.href的路径一致,可以完成后续自定义分享功能,请尽快排查bug原因。
解决了,这个bug存在几年了,都成特性了改不了了是吧。服了
原因是:IOS设备会把首次进入的A页面的地址当做 realAuthUrl,而安卓会把当前页面的地址当做realAuthUrl,所以wx.config的url和实际页面的url是有可能不一致的。
解决方案:在入口文件中,记录用户首次访问地址 (即A页面),然后当用户在B页面调用wx.config代码时,进行判断 ——
如果是IOS设备,取A页面的地址传给后端,让后端根据A页面的路径去生成签名。
如果是安卓设备,则取当前B页面的地址给后端, 让后端根据B页面的路径去生成签名即可。
(在vue中,我是在 App.vue 的onMounted里面记录首次访问地址的,记录在localStorage中,效果很好,问题解决了)
真正的解决办法在这里,先声明:安卓没有任何问题,是微信jssdk内部对ios判断错误的问题,所以我们代码不管怎么读取路由,都是错误的,因为微信sdk对ios取的仍然是第一次访问的路由。所以我们只能在路由强刷上下功夫,让微信jssdk认为我们是新的路由
router.beforeEach((to, from, next) => { const url = location.href.split('#')[0] const newPath = location.origin + to.fullPath if (url !== newPath && /micromessenger/i.test(navigator.userAgent) && /iPhone|iPad|iPod/i.test(navigator.userAgent)) { // iOS 微信环境,强制刷新页面 location.href = newPath } else { next() } })
真是麻了,排查了两天,原来是这
我也遇到了,这个bug是真的恶心