Vue微信公众号兼容微信JS-SDK,使用分享等功能
前端  /  管理员 发布于 5年前   226
很久没有写文章了,最近项目是基于微信公众号的vue项目,有一个非常重要的分享功能,不搞不知道一搞不得了,发现vue-router和微信SDK配置有很大的兼容性问题,翻遍文档,社区,博客,都没有找到可以适合解决我这个问题的方法,最后是我们一起一个一个方法、一个一个api尝试才找到解决办法,现在和大家分享一下我们遇到的问题和解决方案。
先附上微信SDK文档地址:https://mp.weixin.qq.com/wiki
这里只针对讨论Vue脚手架搭建,vue-router跳转的SPA单页面项目!!很多是Vue-router和微信js-SDK之间的BUG
当使用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即可}
微信分享是微信生态很重要的一个功能,特别对于公众号项目,有些靠这个恰饭的啊
我们先看文档,有什么供我们使用
上面是文档的原话,即将废弃是什么意思?又不告诉我为什么废弃,什么时候废弃,那我全部用updateAppMessageShareData、updateTimelineShareData这两个是不是就可以了?
经过我们上百次的测试和试验得出的结果是:
updateAppMessageShareData、updateTimelineShareData 接口 只能在IOS端使用!你要是问我为什么会出现这种情况,等我什么时候进微信团队了,我再一并给大家解答。。。
不可以在第一次进入项目使用定向!否则在ios端会导致首页wx.config失败!{ path: '/', redirect:"/home"},
例如供签名的url为www.baidu.com:8080会导致wx.config失败!
以上部分方案仅针对使用vue-router的SPA单页面项目,如果使用a链接跳转或者直接window.location.href跳转的小伙伴,直接使用wx.onMenuShareTimeline、wx.onMenuShareAppMessage接口就可以完成分享配置。
来自:https://segmentfault.com/a/1190000019342737
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号