微信自定义分享链接、图片与描述的完整实现指南（版）

微信自定义分享的实现方法

在微信内置浏览器中，用户点击“发送给朋友”、“分享到朋友圈”等菜单时，默认会抓取当前页面的标题、描述和首张图片。若需自定义分享的链接、图片和描述，需要使用微信的 JS-SDK 或旧版的 WeixinJSBridge API。

重要说明：WeixinJSBridge 已过时

原文提供的 WeixinJSBridge 方法属于微信早期的私有接口，目前（2023年后）已不再推荐使用。微信官方要求开发者统一使用 JS-SDK 来实现自定义分享功能，以确保兼容性和稳定性。

标准实现方案：使用微信 JS-SDK

以下是使用微信 JS-SDK 1.6.0+ 版本实现自定义分享的标准步骤和代码示例。

第一步：引入 JS 文件并配置

在需要分享的页面引入微信 JS-SDK，并通过后端接口获取签名配置。

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
    // 假设从后端获取的配置数据为 configData
    wx.config({
        debug: false, // 开启调试模式，调用的所有api的返回值会在客户端alert出来
        appId: 'YOUR_APPID', // 必填，公众号的唯一标识
        timestamp: configData.timestamp, // 必填，生成签名的时间戳
        nonceStr: configData.nonceStr, // 必填，生成签名的随机串
        signature: configData.signature, // 必填，签名
        jsApiList: [ // 必填，需要使用的JS接口列表
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'onMenuShareWeibo'
        ]
    });
</script>

第二步：定义分享内容

在 wx.ready 回调中，调用接口定义分享给朋友、分享到朋友圈等按钮的分享内容。

<script>
    wx.ready(function () {
        // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
        wx.updateAppMessageShareData({
            title: '自定义分享标题', // 分享标题
            desc: '自定义分享描述', // 分享描述
            link: 'https://www.yourdomain.com/custom-path', // 分享链接，该链接域名必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'https://www.yourdomain.com/custom-image.jpg', // 分享图标
            success: function () {
                // 设置成功后的回调
                console.log('分享给朋友设置成功');
            }
        });

        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
        wx.updateTimelineShareData({
            title: '自定义朋友圈标题', // 分享标题（朋友圈只显示标题）
            link: 'https://www.yourdomain.com/custom-path', // 分享链接
            imgUrl: 'https://www.yourdomain.com/custom-image.jpg', // 分享图标
            success: function () {
                // 设置成功后的回调
                console.log('分享到朋友圈设置成功');
            }
        });

        // 自定义“分享到微博”按钮的分享内容（此接口可能已调整，请以最新文档为准）
        wx.onMenuShareWeibo({
            title: '自定义微博标题', // 分享标题
            desc: '自定义微博描述', // 分享描述
            link: 'https://www.yourdomain.com/custom-path', // 分享链接
            imgUrl: 'https://www.yourdomain.com/custom-image.jpg', // 分享图标
            success: function () {
                // 设置成功后的回调
                console.log('分享到微博设置成功');
            },
            cancel: function () {
                // 用户取消分享后的回调
            }
        });
    });
</script>

关键注意事项

• 域名校验：分享链接（link）的域名必须在公众号后台的“JS接口安全域名”中设置。
• 签名获取：所有需要使用 JS-SDK 的页面都必须先注入配置信息。签名应由后端服务器生成，前端不可泄露 AppSecret。
• 图片要求：分享图标（imgUrl）需使用绝对路径，且图片尺寸建议为 300x300 像素或以上，长宽比 1:1。
• API 更新：微信 JS-SDK 接口可能更新，请务必参考微信官方文档获取最新信息。

旧版 WeixinJSBridge 代码（仅作参考）

以下为原文中基于旧版 WeixinJSBridge 的代码，现已不保证可用，仅供历史参考。

var imgUrl = 'https://www.example.com/xxx.jpg'; // 修正了错误的协议和域名格式
var lineLink = 'https://www.example.com/904';
var descContent = "这是自定义描述";
var shareTitle = '自定义标题';
var appid = ''; // 通常留空

function shareFriend() {
    WeixinJSBridge.invoke('sendAppMessage',{
        "appid": appid,
        "img_url": imgUrl,
        "img_width": "200",
        "img_height": "200",
        "link": lineLink,
        "desc": descContent,
        "title": shareTitle
    }, function(res) {
        console.log('分享给朋友:', res.err_msg);
    });
}
// ... 其他函数（shareTimeline, shareWeibo）结构类似

强烈建议：新项目请直接采用上述微信 JS-SDK 方案进行开发。