前提
- 以下内容为测试公众号实现的demo
- 这里仅前端部分代码
实现
准备工作
- 申请测试账号
在微信官方文档中申请一个测试的公众号
微信扫码后,会分配一个测试的appID和appsecret
- 获取权限验证信息
这一步需要后端开发人员配合,将当前的appID和appsecret提供给后端,去获取对应的token等验证信息 - 设置JS接口安全域名
将需要分享的页面地址的IP和端口号设置在测试账号的下图位置。
只设置IP地址和端口号,否则不生效
功能开发
<body>
<div>分享页面</div>
</body>
// 引入微信js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
// axios文件 调接口使用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const sharePage = location.href
const curUrl = sharePage.split("#")[0]
// 向后端查询权限验证信息
axios({
method: 'get',
url: '获取验证信息的接口',
params: {
url: curUrl // 这里的url要不带参的
}
}).then((res) => {
const {nonceStr, signature, timestamp} = res.data.obj
// 通过 config 接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
appId: '测试公众号的appid', // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature,// 必填,签名
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData'
] // 必填,需要使用的 JS 接口列表
});
// 设置分享信息
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
//"分享给朋友”及“分享到QQ”
wx.updateAppMessageShareData({
title: '测试分享标题', // 分享标题
desc: '测试分享描述', // 分享描述
link: sharePage, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: 'http://10.64.6.69:3000/image/icon.jpg', // 分享图标
success: function () {
// 设置成功
}
})
// “分享到朋友圈”及“分享到 QQ 空间”
wx.updateTimelineShareData({
title: '测试分享标题', // 分享标题
link: sharePage, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: 'http://10.64.6.69:3000/image/icon.jpg', // 分享图标
success: function () {
// 设置成功
}
})
});
});
</script>
此时浏览器访问页面,在控制台看到以下打印信息,就说明设置成功了
将 当前页面转化为二维码,用手机扫描即可查看效果。
一定要转成二维码,否则分享出来的只有链接,不是卡片效果
遇到的问题
以上流程都正确设置,到这步应该看见效果如下:
但有几个可能遇到的问题
- 手机开启调试时,页面报错 require subscribe
这是因为我们用的调试测试账号,需要去关注公众号。
在安全域名设置下方可看到测试账号的二维码,扫一扫添加即可
- ios生效的情况下,安卓手机设置未生效
查看设置的封面图片协议是否与当前协议相同。例如,当前我本地的服务是http,但设置的图片地址协议为https,就可能导致安卓手机整体设置失效 - 页面优化
页面加载完成,微信相关设置还未完成时,点击分享仍会失效。可以在页面添加一个loading遮罩层,等微信相关设置结束后在移除。