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

好久没有写文章了，最近项目是基于微信公众号的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接口就能够完成分享配置。

以上就是咱们开发微信公众号项目遇到的一些问题，分享给你们，但愿能帮助到被这些问题困扰的小伙伴，有其余问题欢迎留言询问。