Vue微信公众号兼容微信JS-SDK，使用分享等功能

前端  /  管理员 发布于 6年前   297

很久没有写文章了，最近项目是基于微信公众号的vue项目，有一个非常重要的分享功能，不搞不知道一搞不得了，发现vue-router和微信SDK配置有很大的兼容性问题，翻遍文档，社区，博客，都没有找到可以适合解决我这个问题的方法，最后是我们一起一个一个方法、一个一个api尝试才找到解决办法，现在和大家分享一下我们遇到的问题和解决方案。

先附上微信SDK文档地址：https://mp.weixin.qq.com/wiki

这里只针对讨论Vue脚手架搭建，vue-router跳转的SPA单页面项目！！很多是Vue-router和微信js-SDK之间的BUG

问题1.url在IOS端和Android端表现不同

当使用vue-router跳转的SPA单页面项目，在IOS端只要不刷新页面，页面URL永远是第一次进来的url！
例如：

项目首页地址为：www.baidu.com/home项目详情页地址为：www.baidu.com/detail当你在首页点击详情页跳转按钮触发了this.$router.push('/detail')且！页面已经跳转至详情页，但是你复制当前链接查看后会惊讶的发现，url还是www.baidu.com/home但！你强制刷新页面后，url会变成www.baidu.com/detail

有趣的是，Android端不会出现这种情况，url会随着页面跳转而改变。你要是问我为什么会出现这种情况，等我什么时候进微信团队了，我再给大家解答。。。

因为在wx.config中配置需要使用当前url进行签名，这种问题出现导致IOS端和Android端不可共用一个wx.config分享代码，需要分开讨论并分开配置。

解决方案：

//因为问题1，所以我们要在IOS端进入项目时，记住第一次进来的url地址，供签名使用// 判断浏览器是 Android端 or IOS端let userAgent = navigator.userAgent;let isAndroid =  userAgent.indexOf("Android") > -1 || userAgent.indexOf("Adr") > -1; let isIOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isIOS) {  // 是IOS，这里用Vuex进行储存  this.$store.commit("isIosFun", true);  //记录好第一次进项目的URL，供签名使用  this.$store.commit("firstUrlFun", window.location.href.split("#")[0]); } else if (isAndroid) {  // Android  this.$store.commit("isIosFun", false);  //安卓无需记录，因为url会随着页面跳转而改变，签名使用window.location.href即可}

问题2.微信分享配置在IOS端和Android端api不同

微信分享是微信生态很重要的一个功能，特别对于公众号项目，有些靠这个恰饭的啊
我们先看文档，有什么供我们使用

请注意，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。请尽快迁移使用客户端6.7.2及jsSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、updateTimelineShareData 接口。  

上面是文档的原话，即将废弃是什么意思？又不告诉我为什么废弃，什么时候废弃，那我全部用updateAppMessageShareData、updateTimelineShareData这两个是不是就可以了？

经过我们上百次的测试和试验得出的结果是：

updateAppMessageShareData、updateTimelineShareData 接口 只能在IOS端使用！
onMenuShareTimeline、onMenuShareAppMessage 接口 只能在Android端使用！

你要是问我为什么会出现这种情况，等我什么时候进微信团队了，我再一并给大家解答。。。

问题3.进入Vue项目不可以使用定向

不可以在第一次进入项目使用定向！否则在ios端会导致首页wx.config失败！{  path: '/',  redirect:"/home"},

问题4.微信分享地址不可以有端口号！

例如供签名的url为www.baidu.com:8080会导致wx.config失败！

以上部分方案仅针对使用vue-router的SPA单页面项目，如果使用a链接跳转或者直接window.location.href跳转的小伙伴，直接使用wx.onMenuShareTimeline、wx.onMenuShareAppMessage接口就可以完成分享配置。

来自：https://segmentfault.com/a/1190000019342737