首页 > 编程知识 正文

自定义微信分享卡片工具

时间:2023-05-06 07:46:51 阅读:267185 作者:1372

h5页中引用 微信JS-SDK说明文档 公众号配置

公众号登录微信公众平台;

设置——公众号设置——功能设置——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

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。