describe
Using the sharing function provided by WeChat is actually used by JSSDK, using the interface function provided by it.
You can first look at the WeChat official account development document, which is described in detail. Provide those functions, how to use them.
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#67
the code
There is no need to talk about binding domain names.
If you import the js file, find the index.html file directly in the Vue project and write it
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
Inject permission verification through the config interface
// 注册微信权限，这个方法打开页面的时候就要调用，因为是分享接口。
getWxInfo() {
/*
这里发起请求，获取签名，接口和返回的东西应该是你们自己的事了，我这里是用data接收
*/
// 通过config接口注入权限验证配置
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名
jsApiList: [
"updateAppMessageShareDatam",
"onMenuShareAppMessage",
"openLocation",
"onMenuShareTimeline"
] // 必填，需要使用的JS接口列表
});
// 通过ready接口处理成功验证
wx.ready(function() {
//需在用户可能点击分享按钮前就先调用
wx.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
// console.log(res);
})
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: newUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: img, // 分享图标
type: "", // 分享类型,music、video或link，不填默认为link
dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户点击了分享后执行的回调函数
// alert("分享成功");
},
cancel: function() {
// 用户取消分享后执行的回调函数
// alert("分享取消");
}
})
wx.onMenuShareTimeline({
title: title, // 分享标题
link: newUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: img, // 分享图标
success: function() {
// 用户点击了分享后执行的回调函数
// alert("分享成功");
},
cancel: function() {
// 用户取消分享后执行的回调函数
// alert("分享取消");
}
})
})
}
The main thing is to pay attention to the order and nesting relationship. In fact, just study the official documentation carefully, most of which are these steps.
The personal level is limited. If you have any questions, please leave a message for guidance. It is only for learning and reference.
There is no limit to learning! Work hard, encourage each other!