1、引入微信js
// index.html <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2、配置wxshare.js
// assets => js => 新建 wxshare.js export function wxShare ({title, desc, link, imgUrl,success}) { let wxShare = { title: title || ‘默认标题‘, // 分享标题 desc: desc || ‘默认分享文案‘, // 分享描述 link: link || window.location.href, // 分享链接 imgUrl: imgUrl || ‘https://cn.vuejs.org/images/logo.png‘, // 分享图标 success: function () { // 用户点击了分享后执行的回调函数 success && success() } } wx.ready(() => { //需在用户可能点击分享按钮前就先调用 // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容 // wx.updateAppMessageShareData(wxShare) // 自定义“分享到朋友圈”及“分享到qq空间” // wx.updateTimelineShareData(wxShare) // 以上新分享方法的成功回调不是转发成功回调,而是自定义内容成功回调 //获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃) wx.onMenuShareAppMessage(wxShare); //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃) wx.onMenuShareTimeline(wxShare); }) wx.error(res => { // config信息验证失败会执行error函数 console.log(res) }) }
3、配置微信转发
// app.vue created(){ this.wxShareConfig(); }, methods: { //配置微信转发 wxShareConfig(){ // 方便从接口中获取配置参数 let appId = "wx7f963082054fe371"; let nonceStr = "JrLvVC3ygqSlcBnc"; let signature = "66c459474ebbea661b38be92149c5f60d91d05ed"; let timestamp = "1592445883"; // 配置信息 wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: appId, // 必填,公众号的唯一标识 timestamp: timestamp, // 必填,生成签名的时间戳 nonceStr: nonceStr, // 必填,生成签名的随机串 signature: signature,// 必填,签名 jsApiList: [‘onMenuShareAppMessage‘,‘onMenuShareTimeline‘] // 必填,需要使用的JS接口列表 }) } }
4、使用