问题定位
路由切换时操作的是浏览器的历史记录,iOS会把第一次刚进入时的URL作为真实URL,安卓会把当前URL作为真实URL,导致后端在配置好的授权参数获得的config参数和微信sdk获取的参数是不一样的,所以ios的url参数对不上会一直报错realAuthUrl invalid signature 当然别忘记ios是哈希路由模式 也需要将#后面部分进行截取否则也会导致无法对应
解决过程
在app.vue中将第一次进入的url进行存储 然后在需要使用分享功能的页面进行安卓ios判断 若为安卓直接使用当前地址 若为ios则使用存储地址
//app.vue
onMounted(()=>{
//因为部分情况会导致这边存入未更新 所以进行更保险的清除
localstorage.removeItem('WxcodeUrl')
localstorage.setItem('wxcodeUrl', location.href.split('#')[0])
})
//分享页面的url生成事件
const getSignUrl = () => {
let signLink = ''
let ua = navigator.userAgent.toLowerCase()
if (/iphone|ipad|ipod/.test(ua)) {
//ios
signLink = localStorage.getItem('WxCodeUrl') || ''
if (!signLink) signLink = location.href.split('#')[0]
} else {
//安卓
signLink = location.href.split('#')[0]
}
//进行编码防止传参时路径错误 后端对应解码即可
return encodeURIComponent(signLink)
}