关于Vue单页面实现微信分享的Bug

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

// 问题描述在微信中分享到朋友圈或好友时，分享出去的路由被破坏，打开分享的链接，路由中的“#”会被去掉并追加？from= & Timeline= 之类的后缀参数，这就造成了分享出去的链接只能进入首页，无法正常跳转到其他路由。

//该问题产生的原因可能是由于vue的hash模式，微信浏览器只记录了第一次访问的页面，而跳转路由改的hash值，浏览器并没有把他识别为一个新的页面链接，导致每次分享的链接都会跳到初次访问的页面。

//此处我的解决方案是在每个页面加载的时候都调用微信的api获取签名

//二次分享签名失败的解决方法需要后台从Refere中获取链接换取签名

import axios from 'axios'
const rootPath = process.env.NODE_ENV === 'development'
? `/api`
: ``
export default {
wxShowMenu : function() {
var href = window.location.href.split('#')[0];
//删除二次分享时微信在链接中拼接的部分（该部分当时考虑的是解决二次分享签名失败，但是并没有起效，需要后台从Refere中获取链接）
if(href.indexOf('?from=singlemessage&isappinstalled=0') > -1) {
href = href.replace('?from=singlemessage&isappinstalled=0', '')
}else if(href.indexOf('?from=timeline&isappinstalled=0') > -1) {
href = href.replace('?from=timeline&isappinstalled=0', '')
}else if(href.indexOf('?from=groupmessage&isappinstalled=0') > -1) {
href = href.replace('?from=groupmessage&isappinstalled=0', '')
};
axios.get(rootPath + `/weixin/jsSignature?url=` + href).then((res) => {
wx.config({
debug: false,
appId: res.data.appid,
timestamp: res.data.timestamp,
nonceStr: res.data.noncestr,
signature: res.data.signature,
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline'
]
});
wx.ready(function () { // 分享给朋友
wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: "", // 分享描述
link: window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1], // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// window.alert('已分享给好友');
},
cancel: function () {
// 用户取消分享后执行的回调函数
},
fail: function (res) {
// window.alert(JSON.stringify(res));
}
}); // 分享到朋友圈
wx.onMenuShareTimeline({
title: '', // 分享标题
desc: "", // 分享描述
link: window.location.href.split('#')[0]+'#'+window.location.href.split('#')[1], // 分享链接
success: function () {
// window.alert('已分享到朋友圈');
},
cancel: function () {
},
fail: function (res) {
// window.alert(JSON.stringify(res));
}
});
});
})
}
}