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

栏目: JavaScript · 发布时间: 5年前

内容简介:很久没有写文章了,最近项目是基于微信公众号的Vue项目,有一个非常重要的分享功能,不搞不知道一搞不得了,发现vue-router和微信SDK配置有很大的兼容性问题,翻遍文档,社区,博客,都没有找到可以适合解决我这个问题的方法,最后是我们一起一个一个方法、一个一个api尝试才找到解决办法,现在和大家分享一下我们遇到的问题和解决方案。先附上微信SDK文档地址:当使用vue-router跳转的SPA单页面项目,在IOS端只要不刷新页面,页面URL永远是

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

解决方案:

//因为问题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不同

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

我们先看文档,有什么供我们使用

请注意,原有的 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接口就可以完成分享配置。

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

生物信息学算法导论

生物信息学算法导论

N.C.琼斯 / 第1版 (2007年7月1日) / 2007-7 / 45.0

这是一本关于生物信息学算法和计算思想的导论性教科书,原著由国际上的权威学者撰写,经国内知名专家精心翻译为中文,系统介绍推动生物信息学不断进步的算法原理。全书强调的是算法中思想的运用,而不是对表面上并不相关的各类问题进行简单的堆砌。 体现了以下特色: 阐述生物学中的相关问题,涉及对问题的模型化处理并提供一种或多种解决方案: 简要介绍生物信息学领域领军人物; 饶有趣味的小插图使得概念更加具体和形象,方......一起来看看 《生物信息学算法导论》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具