第一步: 登录微信公众平台,在公众号设置下的功能设置中配置JS接口安全域名。
JS接口安全域名中配置的地址与下方代码中process.env.VUE_APP_FRONT_URL相同
第二步:在需要调用该接口的页面引入JS文件
可以在index.html中引入
<script src="//res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
第三步:在分享页面中对分享内容进行配置
async mounted() {
await this.injectAuth();
},
methods:{
async injectAuth(){
const res = await this.$get(`xxxx/aa/bb`)
// res返回的接口为 以下形式,可以根据自己场景获取
/** {
* appId: '', // 必填,公众号的唯一标识
* timestamp: , // 必填,生成签名的时间戳
* nonceStr: '', // 必填,生成签名的随机串
* signature: '',// 必填,签名
} */
window.wx.config({
...res,
jsApiList:['updateAppMessageShareData','updateTimelineShareData']
})
let share = {
title: '点击链接成为我的课程顾问', // 分享标题
desc: ‘邀请您成为我的课程顾问', // 分享描述
link: `${process.env.VUE_APP_FRONT_URL}home/aaa/cccc?code=${this.code}`, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: this.staffInfo.logo, // 分享图标
}
// 分享给朋友、分享到QQ
window.wx.ready(function () { //需在用户可能点击分享按钮前就先调用
window.wx.updateAppMessageShareData({
...share,
})
})
// 分享到朋友圈、分享到QQ空间
window.wx.ready(function () { //需在用户可能点击分享按钮前就先调用
window.wx.updateTimelineShareData({
...share,
})
});
},
}
实践时的总结,希望可以对你有所帮助~