公众号登录微信公众平台;
设置——公众号设置——功能设置——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