Vue单页面开发的一个文章小应用,打开先跳转到授权页面,授权成功后跳转到文章列表页,然后再跳转到文章详情页,当通过微信自带分享功能分享文章出去后,别人点击链接会出现授权问题的坑,以及单页面哈希路由无法正确跳转详情页的坑。
data() {
return {
configInfo: {},
newDetailObj: {
img_url: '',
title: '',
desc: '',
},
linkUrl:'',
}
},
wx.onMenuShareAppMessage({
title: _this.newDetailObj.title, // 分享标题
desc: _this.newDetailObj.desc, // 分享描述
//link: window.location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: _this.linkUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: _this.newDetailObj.img_url, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function (res) {
// 用户确认分享后执行的回调函数
console.log("分享给朋友成功返回的信息为:",res);
},
cancel: function (res) {
// 用户取消分享后执行的回调函数
console.log("取消分享给朋友返回的信息为:",res);
}
});
首先,分享的链接不能直接通过window.location获取,需要经过加工,因为“#”后面的内容会自动被屏蔽,所以可以通过某个标识名称,将参数传过去。例如:
var linkUrl = 'https://api.xxxxxxx.com/mp/message?path=messagedetailaaamessageId='+messageId
_this.linkUrl = linkUrl
然后,分享的页面中进行判断
var path = getUrlParam('path');
if (path != undefined || path != null) {
} else {
}
如果path不为空的话,对url进行重组,然后重定向到文章详情页。
注意:分享的页面也会先跳转到授权页面,授权的时候也要判断一下链接来源是通过正常途径还是分享途径,微信授权规则还是很严谨的,各个参数的顺序不要随意更换,注意"#",防止出现奇奇怪怪的BUG。。。