微信分享网页自定义标题和图片

Li_na_na01

已于 2022-10-26 10:28:53 修改

阅读量855

点赞数 1

文章标签：微信前端 javascript

于 2022-10-14 16:20:48 首次发布

本文链接：https://blog.csdn.net/Li_na_na01/article/details/127313353

版权

前提

以下内容为测试公众号实现的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遮罩层，等微信相关设置结束后在移除。