h5页中引用
公众号配置
-
公众号登录微信公众平台;
-
设置——公众号设置——功能设置——JS接口安全域名——设置得下图:
引入JSSDK文件
<script src="//res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
js逻辑
所有说明都在代码注释中,有不明白的地方请参考代码注释
-
wechatConfig()方法作用:请求后台接口拿到相关的签名信息
wechatConfig() {
const url = '请求相关签名信息的后台url'
this.axiosMethod({
url,
data: {
appId: '公众号的appId',
url: window.location.href // 当前文章的全路径地址
}
}, 'POST').then(res => {
if (res.code === 1) {
this.wechatStart(res.data) // 微信sdk相关逻辑函数,接下来会介绍
}
})
},
-
wechatStart()方法作用:开始处理分享相关配置项
wechatStart(obj) {
wx.config({
debug: false, // true时,手机微信环境访问会alert一些errmsg信息,如果显示errmsg:ok表示正常,否认表示出了问题
appId: '公众号appId', // 必填,公众号的唯一标识
timestamp: parseInt(obj.timestamp), // 后台返回的数据中取
nonceStr: obj.nonce, // 后台返回的数据中取
signature: obj.signature, // 后台返回的数据中取
jsApiList: ["updateTimelineShareData", "updateAppMessageShareData"] // 必填,需要使用的JS接口列表
})
// 需在用户可能点击分享按钮前就先调用,说白了就是放在文章详情信息读取完后就可以执行下面的wx.ready()方法
wx.ready(function() {
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
wx.updateAppMessageShareData({
title: '文章标题', // 分享标题
desc: '文章摘要', // 分享描述
link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '文章封面图', // 分享图标
success: function() {
// 设置成功
}
})
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
wx.updateTimelineShareData({
title: '文章标题', // 分享标题
link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '文章封面图', // 分享图标
success: function() {
// 设置成功
}
})
})
},
注意事项
测试环境下不要直接使用ip作为域名访问,否则会报:permission denied
- 不要使用:http://192.168.1.11:9999/h5/articleShare.html?articleId=123456
- 正确使用:http://api.taobao.cn/h5/articleShare.html?articleId=123456
即把测试环境的IP192.168.1.11:9999映射成api.taobao.cn的别名,然后使用api.taobao.cn调用测试环境
文章的.html文件应该放到当前域名的目录下,否则会报:invalid url domain