版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
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