vue微信分享 vue实现当前页面分享其他页面
发布时间：2020-12-17 02:41:32 所属栏目：百科 来源：网络整理
导读：本文实例为大家分享了vue微信分享展示的具体代码，供大家参考，具体内容如下 首先以分享给朋友为例 1、先看官方文档 title: '',// 分享标题 desc: '',// 分享描述 link: '',// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl:
|
本文实例为大家分享了vue微信分享展示的具体代码，供大家参考，具体内容如下 首先以分享给朋友为例 1、先看官方文档 title: '',// 分享标题
desc: '',// 分享描述 link: '',// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '',// 分享图标 type: '',// 分享类型,music、video或link，不填默认为link dataUrl: '',// 如果type是music或video，则要提供数据链接，默认为空 success: function () { },cancel: function () { } }); 2、vue分享踩的坑 * 1、微信分享中获取动态的url * 2、 微信二次分享自动添加的参数 form=singlemessage * 3、vue中各个页面都可以调用分享 3、直接代码分析 为了保证每个页面都可以调起微信分享,需要在vue根组件中,添加 watch监听 代码 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]会导致签名失败 相关内容
|