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

2json 发布于2019-08-23 17:52 / 3427人阅读

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

很久没有写文章了，最近项目是基于微信公众号的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不同

微信分享是微信生态很重要的一个功能，特别对于公众号项目，有些靠这个恰饭的啊

云服务器 GPU云服务器微信公众号留言功能分享java视频的微信公众号微信公众号留言功能怎么开通微信公众号不能使用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104276.html

vue使用微信JS-SDK实现分享功能

摘要：最近开发微信公众号内嵌页面，使用搭建的项目，由于业务需求，需要实现微信自定义分享功能，所以项目中集成微信。最近开发微信公众号内嵌H5页面，使用vue搭建的项目，由于业务需求，需要实现微信自定义分享功能，所以项目中集成微信JS-SDK。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、...

ShowerSun 2019-08-26 10:58 评论0 收藏0
vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

lieeps 2019-08-30 15:55 评论0 收藏0
vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

jsdt 2019-08-02 14:00 评论0 收藏0
vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

nodejh 2019-08-23 14:24 评论0 收藏0
微信公众号页面(VUE)中如何配置微信JS-SDK和高德地图,以及遇到的一些问题记录

摘要：安装并引入依赖包这里是说明文档下载依赖包在需要用到的模块引入检查是否引入成功可以在引入的模块中执行控制台显示以上代码表示引入成功配置微信所有需要使用的页面必须先注入配置信息，否则将无法调用开启调试模式调用的所有的返回值会 1.安装并引入JS-SDK依赖包这里是JS-SDK说明文档 1.1 npm 下载依赖包 npm install weixin-js-sdk --save 1.2.在...

Joyven 2019-08-23 17:05 评论0 收藏0