vue 公众号h5分享功能 监听微信右上角…
第一步：vue npm下载 weixin-js-sdk
第二步：utils文件夹新建share.js
import wx from 'weixin-js-sdk'
import { getWxGetShareData } from '@/api/Login'
/*
* 微信分享
* 获取微信加签信息
* @param{data}:获取的微信加签
* @param{shareData}:分享配置参数
*/
const wexinShare = function (shareData) {
var url = window.location.href
let params = {
url: url
}
getWxGetShareData(params).then(res => {
console.log(res.data)
if (res.data && res.data.code == 200) {
//分享数据，这段主要是为了在hash模式下分享出去的链接不被浏览器截取，保证完全把链接分享出去
//引用
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
appId: res.data.data.appid, // 必填，公众号的唯一标识
timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.data.noncestr, // 必填，生成签名的随机串
signature: res.data.data.signature, // 必填，签名，见附录1
jsApiList: ['updateAppMessageShareData',
'updateTimelineShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
})
wx.ready(function () {
// //分享到朋友圈”及“分享到QQ空间”
wx.updateTimelineShareData({
title: shareData.title, // 分享标题
link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareData.imgUrl, // 分享图标
success: function (res) {
// 设置成功
// console.log('分享朋友圈成功返回的信息为:', res)
}
})
//“分享给朋友”及“分享到QQ”
wx.updateAppMessageShareData({
title: shareData.title, // 分享标题
desc: shareData.desc, // 分享描述
link: shareData.link, // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareData.imgUrl, // 分享图标
success: function (res) {
// console.log('分享朋友成功返回的信息为:', res)
}
})
})
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log('验证失败返回的信息:', res)
})
} else {
this.Toast.fail(res.msg)
}
}).catch(err => {
console.log(err)
})
}
export default wexinShare
说明：import { getWxGetShareData } from ‘@/api/Login’ 是公司后端的接口主要返回
appId: res.data.data.appid, // 必填，公众号的唯一标识
timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.data.noncestr, // 必填，生成签名的随机串
signature: res.data.data.signature, // 必填，签名，见附录1
jsApiList: [‘updateAppMessageShareData’,
‘updateTimelineShareData’] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
开发文档：http://caibaojian.com/wxwiki/0030551f015f01ecaa56d20b88ee3c6cb32503bf.html
获取“分享到朋友圈”按钮点击状态及自定义分享内容接口wx.onMenuShareTimeline
获取“分享给朋友”按钮点击状态及自定义分享内容接口onMenuShareAppMessage
怎么监听微信右上角…中底部弹出的转发朋友圈，转发朋友事件
首先先调用配置：
调用完成这个配置后在调用：
然后不管再页面什么情况下点击微信右上角…中底部弹出的转发朋友圈，转发朋友
都会监听到这样就可以再成功的回调中执行自己的代码