如何正确解决vue路由模式weixin-jssdk授权问题
第一种情况:最常用的history模式
这里根据项目出现做出总结:
1、Android手机:
android手机基本会兼容授权,但是时不时出现授权失败的情况,或者是出现授权成功,打开失败的情况。结果查找,大多都说android不需要处理直接使用href签名:
await API.wxSign(
{
clientId: wxAppId,
url: window.location.href
},
signatureUrl
);
但事实是什么呢?乖乖,根本没人给你说当你的某个页面需要暴露链接作为单链接引用的时候根本不行的,会让你懵逼,左检查右检查,各种查,各种console.log,最后甚至找后端吵架,哈哈,各种让你傻眼。此时你这个链接签名后执行wx.config会成功,但是当你调用sdk的时候微信会告诉你,access permission denied!反正我直接一脸懵逼。
2、IOS手机:
IOS我相信不用多说了,所有页面都不能成功授权jssdk,要么报access permission denied,要么报signature validate,要么就在调用jssdk方法(比如openLocation)的时候报参数错误,我劝各位这种情况就不要查什么原因了,完全就是history这个模式不行的,ios中只会认为第一次进入的路径就是那个,不会变的,所以呢,你们猜网上怎么说的,各种routeAfter里面一顿操作:
router.afterEach((to, from) => {
// window.__wxjs_is_wkwebview
// true 时 为 IOS 设备
// false时 为 安卓 设备
if (window.__wxjs_is_wkwebview) { // IOS
if (window.entryUrl == '' || window.entryUrl == undefined) {
var url = `${FRONT_BASE}${to.fullPath}`
window.entryUrl = url // 将后面的参数去除
}
getWxAuth(to.fullPath,"ios")
}else { // 安卓
setTimeout(function () {
getWxAuth(to.fullPath,"android")
}, 500);
}
})
一样的问题:他并没有告诉你,当你的某个页面需要暴露链接作为单链接引用的时候根本不行的,注意黄色背景的字,多念几遍理解一下。
总结下来:history模式授权,对于整体应用并没有问题,但是对于你要拆解,分解到不同平台去集成的情况下,建议舍去这个方案,不要使用history模式,而我们应该使用hash模式,这才是正确的选择!但是我只是建议,大家有更完美的方法,欢迎多多共享!
第二种也比较常用,hash模式
这种模式没什么可说的,直接:
await API.wxSign(
{
clientId: wxAppId,
url: window.location.href.split('#')[0]
},
signatureUrl
);
这种都能完美授权,完美执行wx.config,不会有问题!
第三种就是memoryHistory
这种比较少见,但是正对完整的应用比较友好,因为它的路径永远都是一个,也就是域名本身加上nginx路径组成的那一窜,对于内部的路由毫不关心,你直接授权一个即可,全局只需要授权一个地址url,但是有个弊端,这种模式不能拆分到其他地方去集成,只能在当前完整的应用下进行,扩展拆分url到其他平台使用,因为你访问具体路径的时候会直接跳转到首页,不支持链接外部使用,这个时候跳转完全是页面栈自己的事情。对于h5而言,这种方式显然只能用在需要完整打包为APP的应用上,其他场景扩展性差,不建议使用。当然这里只讨论微信js-sdk授权问题,其他不过多讨论了
总结
1、建议对于微信开发h5,同时需要使用weixin-js-sdk的情况下,使用hash模式优先考虑,其次才是其他模式。
2、微信js-sdk授权按照官方文档,他并没有说的那么细致,描述也不清楚,对微信开发文档只能这样形容【一句话文档,外加几句useless的代码,再加几个只会发链接给你的客服】,大家是否深有体会呢?结果各种踩坑以后,发现一些问题,希望能帮助正在困扰的童鞋,如果是大神,请忽略本文。这只是一些小小的发现,I hope it works for the needy!