微信内分享转发网页链接,使用微信 JS-SDK 优化消息卡片展示

更新日期: 2026-01-08 阅读次数: 54 字数: 1386 分类: 微信公众号

在开发的一个公司网站,为了优化在微信内转发网页链接时的展示效果,使用了微信 JS-SDK 来实现更好的分享效果。 如果不使用微信 JS SDK, 微信内分享出去的链接消息卡片显示效果很差,缺失描述部分,及缩略图或 logo 部分。

参考

官方文档:

https://developers.weixin.qq.com/doc/subscription/guide/h5/jssdk.html

微信 JS SDK 的作用

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

其实我主要是想用它来实现微信内的分享功能。

引入 JS 文件

https://res.wx.qq.com/open/js/jweixin-1.6.0.js

wx.config 配置

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的JS接口列表
});

signature 的生成需要在后端完成。

jsApiList 里需要填写你要使用的接口名称,例如分享给朋友,分享到朋友圈这两个接口名称分别是:

  • updateAppMessageShareData
  • updateTimelineShareData

golang 生成 signature

https://developers.weixin.qq.com/doc/subscription/guide/h5/jssdk.html#%E9%99%84%E5%BD%95-JS-SDK%E4%BD%BF%E7%94%A8%E6%9D%83%E9%99%90%E7%AD%BE%E5%90%8D%E7%AE%97%E6%B3%95

生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。

看上去跟微信小程序的机制类似。

我直接把之前开发的微信小程序获取 access token 的逻辑拿过来用了。 然后参考官方文档,让 AI 直接完成了生成 signature 的代码。一次完成,没有任何问题。

access token 的获取

参考:

https://developers.weixin.qq.com/doc/service/guide/dev/api/#%E7%94%9F%E6%88%90-Access-Token

参考获取接口调用凭据接口 或 获取稳定版接口调用凭据 传入上一步获取的 AppID 和 AppSecret 获取 Access Token,两者都可以正常获取,推荐使用稳定版接口。

我是不太理解这个为何要区分稳定版和非稳定版的接口,我发现我之前小程序用的也是非稳定版接口。也没有出现过什么问题。所以我这里直接用非稳定版接口了。

分享接口

包括分享给朋友,和分享到朋友圈的接口。

https://developers.weixin.qq.com/doc/subscription/guide/h5/jssdk.html#%E5%88%86%E4%BA%AB%E6%8E%A5%E5%8F%A3

例如:

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

实际测试时,还是发现了几个配置问题:

config invalid signature

开启了 debug 模式,alert 信息里显示 signature 无效。 从 golang 的日志看,是获取 access token 失败了:

2026/01/08 12:00:00 {{40164 invalid ip x.x.x.x ipv6 x.x.x.x, not in whitelist rid: xxx} 0} 2026/01/08 12:00:00 {{41001 access_token missing rid: xxx} 0}

到微信开发者平台的后台设置 API IP 白名单即可。

https://developers.weixin.qq.com/

注意,请使用 Chrome 或者 Edge 浏览器。如果使用其他浏览器,可能看到这里时灰色的,无法设置。

config: invalid url domain

我怀疑是添加域名时,验证时加了一个 public 前缀。即:

https://www.sunzhongwei.com/public

因为我把验证的 txt 文件放到 public 目录下了,访问路径也带上了 public。

解决的办法是,把验证路径改成:

https://www.sunzhongwei.com

在 Nginx 里加一条规则,把 txt 文件的请求,映射到 public 目录下即可。

# 精确匹配 a.txt
location = /MP_verify_xxx.txt {
    alias /home/test/some/public/MP_verify_xxx.txt;
}

然后就可以了。

朋友圈分享,不能使用透明背景的图片

需要变成白色背景才行。否则背景会变成黑色,看上去很难看。

微信 JS 接口签名校验工具

如果,确实是 signature 生成有问题,可以使用官方的签名校验工具来调试:

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

好在,AI 比较聪明,一次就生成了正确的 signature 代码,没有出错。

关于作者 🌱

我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊,或者关注我的个人公众号“大象工具”, 查看更多联系方式