本文实例为大家分享了vue微信分享展示的具体代码，供大家参考，具体内容如下
首先以分享给朋友为例
1、先看官方文档
title: '',// 分享标题
desc: '',// 分享描述
link: '',// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '',// 分享图标
type: '',// 分享类型,music、video或link，不填默认为link
dataUrl: '',// 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// <a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>确认<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>},cancel: function () {
// <a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>取消<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>}
});
2、vue分享踩的坑
* 1、微信分享中获取动态的url * 2、 微信二次分享自动添加的参数 form=singlemessage * 3、vue中各个页面都可以调用分享
3、直接代码分析
为了保证每个页面都可以调起微信分享,需要在vue根组件中,添加 watch监听 代码
调用分享链接
"$route"(to,from) {
let currentRouter = this.$router.currentRoute.fullPath;
if(currentRouter.indexOf('userShare') == -1){
//如果不是userShare分享页面,则分享另外一个接口
this.shareOut();
}else{
this.shareOutTwo();
//当前页面是userShare页面时分享调用另外一个接口
}
}
},
4、shareOut()函数
{
//拼接sha1加密字符串
signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + window.location.href;
var signature = SHA1(signStr);
wx.config({
debug: false,appId: "wx6957b3a945a05e90",//appId
timestamp: timestamp,//时间戳
nonceStr: nonceStr,//加密需要字符串(自己定义的)
signature: signature,//sha1加密后字符串
jsApiList: [ 'onMenuShareTimeline','onMenuShareAppMessage']
});
wx.ready(function () {
//分享到朋友圈"
wx.onMenuShareTimeline({
title: obj.title,link: obj.link,// 分享链接
imgUrl: obj.imgUrl,// 分享图标
success: function () {
// console.log('分享到朋友圈成功')
},cancel: function () {
// console.log('分享到朋友圈失败')
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title: obj.title,// 分享标题
desc: obj.desc,// 分享描述
link: obj.link,// 分享图标
success: function () {
// console.log('分享到朋友成功')
},cancel: function () {
// console.log('分享到朋友失败')
}
});
})
},isLayer: false
})
5、需要注意的事
*1、url是直接通过 window.location.href 获取的,不是使用 window.location.href.split(“#”)[0]来获取,因为我的vue项目是通过hash模式来进行路由跳转的,直接使用 window.location.href.split(“#”)[0]会导致签名失败