乐趣区

Vue微信公众号兼容微信JSSDK使用分享等功能

jiezi

很久没有写文章了，最近项目是基于微信公众号的 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 端不可共用一个分享代码，需要分开讨论并分开配置。

解决方案：

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

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

退出移动版