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

2019年9月16日 117次阅读 来源: 你响度讲D咩嘢

很久没有写文章了，最近项目是基于微信公众号的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会随着页面跳转而改变。

你要是问我为什么会出现这种情况，等我什么时候进微信团队了，我再给大家解答。。。
《Vue微信公众号兼容微信JS-SDK，使用分享等功能》
因为在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端使用！

你要是问我为什么会出现这种情况，等我什么时候进微信团队了，我再一并给大家解答。。。
《Vue微信公众号兼容微信JS-SDK，使用分享等功能》

问题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接口就可以完成分享配置。

以上就是我们开发微信公众号项目遇到的一些问题，分享给大家，希望能帮助到被这些问题困扰的小伙伴，有其他问题欢迎留言询问。

    原文作者：你响度讲D咩嘢
    原文地址: https://segmentfault.com/a/1190000019342737
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞