在开发的一个公司网站,为了优化在微信内转发网页链接时的展示效果,使用了微信 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 聊聊,或者关注我的个人公众号“大象工具”, 查看更多联系方式