1. 注册成为微信开放平台开发者
首先,你需要有一个微信公众平台的账号,并且你的小程序或公众号需要获得网页授权能力。这一步骤涉及在微信开放平台注册并创建小程序或公众号,获取AppID和AppSecret。
2. 配置安全域名
在微信公众平台的小程序或公众号后台,你需要将你的H5项目的域名添加到“公众号/小程序”的“JS接口安全域名”中,这样微信JS-SDK才能在该域名下正常工作。
3. 获取Access Token和JSAPI Ticket
为了使用微信JS-SDK,你需要先通过AppID和AppSecret从微信服务器获取Access Token,然后再用Access Token换取JSAPI Ticket。这一步通常在你的服务器端完成,因为AppSecret不应暴露在前端。
4. 引入微信JS-SDK
在你的H5页面中,通过以下方式引入微信JS-SDK:(全局配置,建议在index.html页面)
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
5. 配置微信JS-SDK(通过后端接口获取参数)
在页面加载完成后,使用获取到的JSAPI Ticket配置微信JS-SDK:
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: 'yourAppId', // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareAppMessage',
'onMenuShareTimeline'
] // 必填,需要使用的JS接口列表
});
6. 设置分享内容
配置好JS-SDK后,你可以设置分享到朋友圈或发送给朋友的分享卡片内容:
wx.ready(function() {
// 分享给朋友
wx.updateAppMessageShareData({
title: 'title', // 分享标题
desc: 'describ', // 分享描述
link: 'link', // 分享链接,必须与当前页面对应的公众号 JS 接口安全域名一致
imgUrl: 'imgurl', // 分享图标
success: function(res) {
// 分享成功后的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
});
7. 完整代码如下:
getWxConfig(title, describ, imgurl, link) {
console.log("这是getWxConfig")
const self = this;
var url = window.location.href;
$.ajax({
url: 'common/wxSharing',
data: {
url: url,
},
method: 'GET',
success(res) {
var configData = JSON.parse(res.data.signData)
if (res.code == 200) {
wx.config({
debug: false, 生产环境需要关闭debug模式
appId: configData.appId, //appId通过微信服务号后台查看
timestamp: configData.timestamp, //生成签名的时间戳
nonceStr: configData.nonceStr, //生成签名的随机字符串
signature: configData.signature, //签名
jsApiList: ['updateAppMessageShareData']
});
wx.ready(function() {
// 分享给朋友
wx.updateAppMessageShareData({
title: title, // 分享标题
desc: describ, // 分享描述
link: link, // 分享链接,必须与当前页面对应的公众号 JS 接口安全域名一致
imgUrl: imgurl, // 分享图标
success: function(res) {
// 分享成功后的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
});
// 配置失败的回调
wx.error(function(res) {
console.log('微信配置错误:', res);
});
}
},
complete(data) {}
})
}