深度解决方案，有教无会，只因陷阱无数，希望大家前端菜鸟有所收获，因为项目需要对接微信的jssdk，所以对接需要签名认证，但是安卓和IOS都有自己的坑。本文仅讨论签名和一个共同的陷阱。希望你能有所收获，解决问题。如果解决不了，请在评论区排查留言，本文综合了所有的答案，然后调试出了坑需求：使用微信功能的原因：1.项目基于Vue，一个web微信上的应用2.要用上传功能（不同系统的兼容性真的是很多BUG，最后只能用微信解决），支付功能，定位...3.总是有bug和问题在签名里，所以后面的功能将无法（偶尔）调出签名1.具体过程请参考文档，反正能力有限，没看出什么花样。一句话概括，就是先签后用。大坑，所以这次重构的时候，要特别注意这一点）安利一个可以检测微信下内核的判断：window.__wxjs_is_wkwebview（是否是webview内核），如果是就成真，因为SPA在应用中，会出现一定的问题。路由采用历史模式（不带#号）。因为签名授权是在每个??页面进入路由后获取的，所以方法一般写在路由模块下whenfalse//Android设备if(window.__wxjs_is_wkwebview){//IOSif(window.entryUrl==''||window.entryUrl==undefined){varurl=`${FRONT_BASE}${to.fullPath}`window.entryUrl=url//去掉下面的参数}getWxAuth(to.fullPath,"ios")}else{//AndroidsetTimeout(function(){getWxAuth(to.fullPath,"android")},500);}})window.entryUrl是什么鬼？这是我自己定义的一个全局属性，在IOS第一次进入页面时存储。如果IOS的签名的路径不是第一次进入的页面，肯定会失败，所以这个路由是第一次进入。它必须被存储。为什么要写在router.afterEach中，因为页面是在申请和签名之前进入的。如果是在beforeEach，会导致页面还在上一个页面的时候申请签名，但是到了一个新的页面，却没有注册和签名，或者因为签名的路径不一样，这会导致签名无效。为什么要在Android上加延迟器呢，因为在Android中会出现一些情况，就是即使签名成功了，功能还是不会被激活。这似乎是一个相对安全的解决方案。看完路由模式，我们进入逻辑部，看看如何解决一些同学对这个encodeURIComponent是干什么用的疑惑。其实细节很简单，因为我们微信分享的时候，它会自动给我们带上参数（记得告诉后端小伙伴decodeURIComponent），记得只要有参数就转码！对于IOS系统，会自动添加以下参数：朋友圈from=timeline&isappinstalled=0微信群from=groupmessage&isappinstalled=0好友分享from=singlemessage&isappinstalled=0Android系统会自动添加以下参数：朋友圈from=timeline微信群from=groupmessage好友分享from=singlemessage然后直接求签名，写法就不细说了，getWeChat是封装好的axios，只是为了统一管理而写的。可以像axios('xxxx.com/get-wx',obj).then()这样写一个普通的请求，这里也是一样的效果一步基本就是请求签名成功了，但是有同学会疑惑，IOS会不会每次分享都是第一条进入的路线吗？我的回答是可以（需要稍微处理一下）然后关注这个链接，每次分享都需要记录当前的路线。如果在IOS端直接读取location.href，在Android端进入的第一个页面就是它。没有问题，所以我统一使用我记录的参数。这个参数可以直接在方法传完之后，路由afterEach的to.fullpage，然后加上自己的域名就OK了。最后写几句。希望大家能顺便解决一下BUG，希望能对大家有所帮助。如果大家遇到一些其他的问题，欢迎在评论区留言，只要大家有时间，我会及时和大家交流的！
