微信分享网页时自定义标题、描述和图片

2024-02-29 23:50:40

用微信打开一个网页，选择右上角的“发送给朋友”后，分享出去的东西有标题有图片

如图：

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script type="text/javascript" src="./jquery-1.9.0.min.js"></script>
    <title>战“疫”关键节点xxx</title>
</head>
<body>
   
</body>
</html>

 <script>
        var signature = {};
        var con = {};
        con["appTag"] = 'ZXB';
        con["url"] = window.location.href;
        var json = JSON.stringify(con);
        
        $.ajax({
            url: 'http://xxxxxx/policy/orderShare/logoConfig',
            timeout: 10000, // 超时时间 10 秒
            type: 'post',
            data: { jsonData: json },
            async: false,
            cache: false,
            dataType: 'json',
            success: function (data) {
                if (data.code == 'success') {
                    signature = data.result;
                }
            },
            error: function (data) {
            }
        });

        wx.config({
            debug: false,
            appId: signature.appId, // 必填，公众号的唯一标识
            timestamp: signature.timestamp, // 必填，生成签名的时间戳<?= $data['timestamp']?>
            nonceStr: signature.nonceStr,// 必填，生成签名的随机串<?= $data['noncestr']?>
            signature: signature.signature,// 必填，签名<?= $data['signature']?>
            jsApiList: ['onMenuShareTimeline',
                        'onMenuShareAppMessage'
            ]// 必填，需要使用的JS接口列表
        });

        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.checkJsApi({
                jsApiList: [
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage'
                ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function (res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    console.log(res);
                }
            });

            wx.onMenuShareAppMessage({
                title: '战“疫”关键节点', // 分享标题
                desc: '自新冠病毒爆发以来xxxxx', // 分享描述
                link: 'http://base.xxx.com/base/regulations/fesco/20200228/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://base.xxx.com/base/regulations/fesco/20200228/logo.jpg', // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户点击了分享后执行的回调函数
                }
            });

            wx.onMenuShareTimeline({
                title: '战“疫”关键节点：新冠病xxx', // 分享标题
                link: 'http://base.xxx.com/base/regulations/fesco/20200228/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://base.xxx.com/base/regulations/fesco/20200228/logo.jpg', // 分享图标
                success: function () {
                    // 用户点击了分享后执行的回调函数
                }
            });
        });

    </script>

自己试过的，按照上面这样可以很简单实现啦~

码农公寓

相关文章