最近做vue项目的微信公众号项目,涉及到微信分享,记录一下心得,以备后用,vue路由用的是hash模式;
该项目只是公众号里面的h5链接,不需要获取code获取access_token的票据,因此前端只需要将当前页面链接处理后发给后端回去分享参数即可;
分享参数包含:
wx.updateTimelineShareData({
title: option.title, // 分享标题
link: option.link, // 分享链接,该链接必须与当前页面对应的公众号的JS安全域名一致
imgUrl: option.imgUrl, // 分享图标 300*300
desc: option.desc, // 分享描述
success (res) {
// 用户成功分享后执行的回调函数
option.success(res)
},
cancel (error) {
// 用户取消分享后执行的回调函数
option.error(error)
}
})
1、第一步获取页面url;
通过window.location.href.split('#')[0]获取到页面的url,而且需要encodeURIComponent处理后发给后端来获取签名,否则签名无效;页面链接需要是动态获的,否则将导致分享后的页面签名失败。
2、第二步定义分享参数;
分享链接要求该链接域名或路径必须与当前页面对应的公众号JS安全域名一致,就是该链接必须是在公众号的JS安全域名接口中配置好的;
分享图片大小最好是300*300的,大小没有查到是否限制,但是尽量小,避免出现分享的链接无法记载出来图片;
3、第三步,调试;
由于公众号的各种限制,导致无法进行本地调试(大神请忽略,具体实现请百度),因此项目最好有个测试环境,新项目也可以直接在线上环境测试;
因为分享参数初始化的时候会判断当前页面的url与分享的link是否一致,不一致会报错,就导致无法在本地调试分享;
4、第四步解决ios和安卓分享后链接不一致的问题;
测试环境在ios端,分享参数正常,点击后,根据vue路由跳转也正常,ios分享给安卓后的链接,安卓也可以正常跳转页面,但是安卓从测试环境进去后,分享出来的参数显示正常,但是无法跳转到指定页面,只能跳转到路由首页;
通过复制链接发现,安卓获取的href是无法获取到#以及后面的路由参数的,导致页面只能是路由首页。但是安卓通过ios分享的链接点击进去后,再点击分享,发现路由跳转是正常的。
也就是说,如果安卓是通过带有#和路由参数的路径进去的项目,那么再获取的href则跟ios是一致的,路由也是正常跳转的;
处理方案有两种:第一种是判断当前机型是ios还是安卓,然后对获取的link进行不同的处理;ios无需处理,安卓拼接‘#’和当前路由参数即可;
第二种是公众号的点击链接不要只写域名,而是加上带有#和默认路由的,这样安卓点击进去获取的href也是正常的;