H5 在微信里能做什么

公众号文章里跳的 H5、活动页、营销页，只要在微信里打开，就能通过 JS-SDK 调起微信原生能力：分享、扫一扫、定位、图片预览。配合网页授权，还能拿到用户的 openid，识别是谁在访问。

JS-SDK 让 H5 从普通网页变成半个小程序。

HS5 签名与网页授权是两回事：签名让 JS-SDK 能用，授权让后端认得出用户。别把 ticket 和 access_token 混在一起，各自缓存各自的失效时间。

两个关键能力
  • JS-SDK调起微信原生接口。
  • 网页授权拿 openid 与昵称。
JS-SDK 配图：左侧一部发光手机轮廓，屏幕亮起，一道发光光路通向空中的云朵轮廓，光路中间悬浮一个小型浏览器窗口轮廓
手机在左下，光路通向云朵，浏览器窗口浮在光路中央。

JS-SDK 签名流程

每个调用 JS-SDK 的页面，都要先在后端用 ticket 加当前 URL 算出签名，再由前端 wx.config 注入。签名必须在页面加载前算好，URL 不能带多余 hash。ticket 有有效期，后端要缓存。

// 后端伪代码：用 jsapi_ticket + url 生成签名
const sign = { nonceStr, timestamp, url, signature };
// 前端
wx.config({ debug:false, appId, timestamp, nonceStr, signature, jsApiList:['updateAppMessageShareData'] });

网页授权拿 openid

用户第一次访问 H5，没登录态时跳到微信授权页，用户同意后微信回跳带回 code。后端拿 code 换 openid 与 access_token。拿到 openid 就能关联用户身份。静默授权拿 openid，显式授权再拿昵称头像。

常见能力调用

自定义分享卡片、扫一扫、地理位置、图片预览，都是 JS-SDK 常见调用。分享接口要在 wx.ready 里设置，否则用户点分享时卡片是空的。

安全与域名配置

公众号后台要配 JS 安全域名、网页授权域名。域名必须 ICP 备案、HTTPS。签名 ticket 不能放前端，放后端。这两件事配错，所有调用都失败。

HS5 签名与网页授权是两回事：签名让 JS-SDK 能用，授权让后端认得出用户。别把 ticket 和 access_token 混在一起，各自缓存各自的失效时间。

落地清单
  • ticket后端缓存。
  • 签名URL 不带 hash。
  • 域名后台配好。
  • 分享在 ready 里设。