首先感谢娇娇jojojo同学的博客分享，滴水之恩还没涌泉相报，先记账，不然你咬我啊，娇娇同学的博客写的很详细了 地址：https://my.oschina.net/u/2941696/blog/755725
这里我只贴vue相关的
涉及到调用微信功能的就要调用微信的sdk,vue下可以直接使用npm安装
npm install weixin-js-sdk -save
然后在页面中引入
import wx from 'weixin-js-sdk'
首先第一步，在调用分享功能的页面要通过config接口注入权限验证配置，
wx.config({
debug: false, // 开启调试模式,开发时可以开启
appId: Data.appId, // 必填，公众号的唯一标识 由接口返回
timestamp: Data.timestamp, // 必填，生成签名的时间戳 由接口返回
nonceStr: Data.nonceStr, // 必填，生成签名的随机串 由接口返回
signature: Data.signature, // 必填，签名 由接口返回
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 此处填你所用到的方法
});
}
这里要先让后端提供接口，前端通过接口获取以上参数值，这个接口最好能直接让前端把当前调用分享功能的页面URL直接传递给后端，后端根据这个URL生成签名，否则会报签名无效。
还要注意后端生成签名时要在公众平台中设置白名单，把项目所在的服务器IP加入白名单；
第二步 调用获取“分享到朋友圈”和“发送给好友”接口
注意这个接口时获取按钮点击状态的，所以H5页面是无法自己写个按钮来直接调用分享到朋友圈的，只能使用微信右上角的分享到朋友圈或发送给好友的按钮
wx.ready(() => {
//分享给朋友
wx.onMenuShareAppMessage({
title: '您的好友邀请您注册秒单之家', // 分享标题
desc: '快来注册秒单之家，一大笔订单等你来拿', // 分享描述
link: _this.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: window.document.location.protocol + '//' + window.document.location.host + '/zhanghuifeng/static/img/logo.png', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
_this.$router.push({path:'/me',query:{}})
},
cancel: function () {
// 用户取消分享后执行的回调函数
// alert('cancel')
_this.wxShare() //这是用户撤销后重新执行第一步验证签名的方法名 根据自己的命名写
}
})
//分享到朋友圈
wx.onMenuShareTimeline({
title: '您的好友邀请您注册秒单之家', // 分享标题
link: _this.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: window.document.location.protocol + '//' + window.document.location.host + '/zhanghuifeng/static/img/logo.png', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
_this.$router.push({path:'/me',query:{}})
},
cancel: function () {
// 用户取消分享后执行的回调函数
_this.wxShare()
}
})
})
这里的link参数就是你要分享的页面的URL ，如果要分享的页面是当前页 而且是vue的路由页面（hash模式页面），那么就直接用location.href就可以，不需要用娇娇同学的split[0]方法截取URL，如果是其他页面就写全那个页面的地址就行，我的是其他路由页面，不是当前页面 所以我的_this.shareUrl对应的值是
_this.shareUrl = window.document.location.protocol + '//' + window.document.location.host + '/zhanghuifeng/#/registerShare?icode=' + res.data
icode是我分享的页面带的参数;
还有要注意的是我的cancel事件中调用了一个method _this.fetchData()；这是用来在用户取消后重新执行上两步，尤其是验证签名，否则用取消后再次分享则会不成功；
贴出 完整的方法代码：
wxShare() {
let _this = this
this.API.get('/uc/wx_params'+'?channel=h5'+'&url='+window.location.href).then(function(res){
if(res.code==200){
var Data = res.data;
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作
wx.config({
debug: false, // 开启调试模式,开发时可以开启
appId: Data.appId, // 必填，公众号的唯一标识 由接口返回
timestamp: Data.timestamp, // 必填，生成签名的时间戳 由接口返回
nonceStr: Data.nonceStr, // 必填，生成签名的随机串 由接口返回
signature: Data.signature, // 必填，签名 由接口返回
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 此处填你所用到的方法
});
}else if(res.code==50107){
$.toptip('用户不存在', 'warning');
}else if(res.code == 40002){
$.toptip('参数缺失', 'warning');
}else if(res.code == 500){
$.toptip('系统异常，请稍后再试', 'warning');
}else{
$.toptip('系统繁忙，请稍后再试', 'warning');
}
}).catch(function(error){
console.log('wx_params', error);
});
wx.ready(() => {
//分享给朋友
wx.onMenuShareAppMessage({
title: '您的好友邀请您注册秒单之家', // 分享标题
desc: '快来注册秒单之家，一大笔订单等你来拿', // 分享描述
link: _this.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: window.document.location.protocol + '//' + window.document.location.host + '/kwd/static/img/logo.png', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
_this.$router.push({path:'/me',query:{}})
},
cancel: function () {
// 用户取消分享后执行的回调函数
// alert('cancel')
_this.fetchData()
}
})
//分享到朋友圈
wx.onMenuShareTimeline({
title: '您的好友邀请您注册秒单之家', // 分享标题
link: _this.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: window.document.location.protocol + '//' + window.document.location.host + '/kwd/static/img/logo.png', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
_this.$router.push({path:'/me',query:{}})
},
cancel: function () {
// 用户取消分享后执行的回调函数
_this.fetchData()
}
})
})
}
网友评论