H5页面分享失效排查：微信JS-SDK签名的配置与验证
上个月帮客户做 H5 活动页，投放后用户转发出去，卡片没有缩略图、标题显示一串乱码。排查发现是微信 JS-SDK 签名配置出问题：签名时用的 URL 带了 hash，和实际分享时的地址对不上。这篇把 JS-SDK 签名的完整配置和验证过程记录下来。
一、JS-SDK 签名前的三个前置
JS-SDK 用于 H5 页面调用微信能力（分享、定位、扫码），配置前必须满足三个条件：
| 前置条件 | 说明 |
|---|---|
| 已认证服务号 | 个人号/未认证号无 JS-SDK 权限 |
| 绑定域名 | 公众号后台配置 JS 接口安全域名，最多 5 个 |
| 域名备案 | 安全域名必须是已备案域名，且与页面域名完全一致 |
最容易卡住的是第 3 条：安全域名写的是主域名，页面实际跑在二级域名下，签名一直报 invalid signature。
二、签名生成流程
签名核心是拿 jsapi_ticket 拼参数字符串做 SHA1：
1. 后端用 access_token 换 jsapi_ticket
2. 组装字符串：jsapi_ticket + noncestr + timestamp + url
3. 按字典序排列参数
4. SHA1 加密得到 signature
5. 返回给前端：appId + timestamp + nonceStr + signature
string1 = "jsapi_ticket=" + ticket
+ "&noncestr=" + nonceStr
+ "×tamp=" + timestamp
+ "&url=" + pageUrl
signature = sha1(string1)
三、三个最容易出错的参数
url 必须去掉 hash：页面地址如果带 #/detail 这类 hash，签名时要把 hash 去掉，否则前后端算出来的 signature 不一致。
jsapi_ticket 要缓存：ticket 有效期 7200 秒，且调用有频率限制。我们把它缓存到 Redis，有效期设 7000 秒，定时刷新，避免每次请求都去换。
access_token 也不能每次现换：access_token 同样 7200 秒有效，且公众号接口有每日调用上限。缓存策略和 ticket 一致。
四、验证签名是否生效
签名配完用三步验证：
- 前端 debug：
wx.config传debug: true，打开页面看控制台输出，ok: true表示签名正确 - 接口比对：后端打印生成签名用的 url，和前端实际请求的 url 逐字符对比（常见差异：大小写、尾部斜杠、hash）
- 真实分享：转发到文件传输助手，检查卡片标题、缩略图、描述是否正确
五、踩坑清单（这 5 个坑都踩过）
- url 带了 hash 没去掉，签名必失败，页面一直报 invalid signature
- jsapi_ticket 没缓存，高峰期频繁换 ticket 被限流
- 安全域名填了主域名，页面在二级域名下，权限不生效
- 前后端用的 url 一个带
www一个不带，签名不一致 - 换过公众号后没有同步更新 appId，老页面还在用旧 appId
这次 H5 活动页是在乔拓云的公众号助手产品里配的 JS-SDK，ticket 缓存和签名接口后台已经封装好，我这边主要是核对 url 参数和 debug 验证，改完分享卡片正常显示了。
复盘要点
- 签名 url 必须去掉 hash，且和前端请求地址逐字符一致
- jsapi_ticket 和 access_token 都要缓存，按 7200 秒减 200 秒做刷新
- 配完先开 debug 验证，再真实转发检查卡片
以上是个人实践记录，各平台具体功能以官方实时信息为准。
开放问题：你们配 JS-SDK 时还遇到过哪些奇怪的不生效场景？
