微信分享卡片--前端部分

微信JS-SDK官方文档

前提准备

• 绑定域名: 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
• 将文件放置在域名服务器中(可通过nginx转发)
• 引入js文件

  在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

  如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

代码部分

<script>
    //后端配置接口    
    fetch("https://api.xxx(服务器域名)/api/wechat?url=" + location.href).then(r => {
        return r.json()
    }).then(res => {
        wx.config({
            // debug: true,
            //true:开启调试模式
            appId: "xxx", //公众号唯一标识
            timestamp: res.data.timestamp, //生成签名的时间戳
            nonceStr: res.data.nonceStr, //生成签名的随机串
            signature: res.data.signature, //签名
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
        });
        console.log('wx')
            wx.ready(function () {
                wx.updateAppMessageShareData({
                    title: "xxx",  // 分享标题
                    desc: "xxx",  // 分享描述
                    link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: "https://xxx",// 分享图标
                    success: function () {
                        // 设置成功
                        // alert("yes")
                    }
                })
                wx.updateTimelineShareData({
                    title: "xxx",  // 分享标题
                    desc: "xxx",  // 分享描述
                    link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: "https://xxx",// 分享图标
                    success: function () {
                        // 设置成功
                        // alert("yes")
                    }
                })

            });
        wx.error(function (res) {
            // alert("操作失败：" + JSON.stringify(res));
        });
    })
</script>

注意: 如果调试状态下返回"ok"无报错,但是分享依然是链接,将页面使用二维码打开,微信扫码后再分享