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

更新日期: 2019-06-01阅读: 3.3k标签: 公众号

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

微信分享是微信生态很重要的一个功能,特别对于公众号项目,有些靠这个恰饭的啊
我们先看文档,有什么供我们使用

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

来自:https://segmentfault.com/a/1190000019342737


链接: https://fly63.com/article/detial/3498

推荐几款常用的微信公众号排版工具

作为一个新媒体小编,我们常接触的几个工具,莫过于排版、素材、图片这几个了。今天天天主要是想给大家介绍几款我常用的微信排版工具,希望对大家有用。

微信公众号默认背景为灰色的解决方法

最近公司有一个项目,使用Vue开发微信公众号,开发过程遇到一个问题,即设计图的整体背景是白色的,但是公众号里默认的背景是浅灰色,如果某个页面高度没能占满一屏,就会露出浅灰色的默认背景,会显得很不协调。 使用单纯的CSS没能解决这个问题,在网上查了些资料也没发现特别好的方法,最后还是采用了JS解决这个问题。

Node微信公众号开发 cheerio网页抓取和memory-cache缓存模块

运用以上模块,对我个人的公众号做了如下修改:access_token 存储方式由 fs.writeFile 写入本地文件改为利用缓存,由于 wp-json 会导致原站点安全性降低,故数据获取改用 cheerio 爬取网站内容对象获得

公众号网页开发经验总结

用户通过扫码生成带有参数的二维码后可以获得微信的推送,拿到 openid 和订阅状态,然后通过 openid 可以获取 unionid 和微信基本信息,在与我们的数据做一个绑定,然后订阅之后可以获得推送

微信公众号网页授权

在微信公众号开发时候,一般需要使用到微信登录功能,这里就需要加入微信授权,来获取用户的openid(或unionid),利用openid(或unionid)做唯一的身份识别。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!