前提
以下内容为测试公众号实现的demo这里仅前端部分代码实现
准备工作
申请测试账号在微信官方文档中申请一个测试的公众号
微信扫码后，会分配一个测试的appID和appsecret
获取权限验证信息
这一步需要后端开发人员配合，将当前的appID和appsecret提供给后端，去获取对应的token等验证信息设置JS接口安全域名
将需要分享的页面地址的IP和端口号设置在测试账号的下图位置。
只设置IP地址和端口号，否则不生效
功能开发
官方具体流程文档
<body><div>分享页面</div></body>// 引入微信js文件<script src="http://res./open/js/jweixin-1.6.0.js"></script>// axios文件 调接口使用<script src="/axios/dist/axios.min.js"></script><script>const sharePage = location.hrefconst 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遮罩层，等微信相关设置结束后在移除。
