微信H5分享需用JS-SDK而非onShareAppMessage:必须调用wx.updateAppMessageShareData等接口,签名URL须与当前页地址(不含hash)完全一致,且在每个页面onLoad/onShow中动态设置分享内容。
微信 H5 分享不生效,onShareAppMessage 根本没触发
uni-app 的 onshareappmessage 在 h5 环境下默认不执行——它只在小程序里起作用。h5 微信分享必须走 js-sdk,和小程序逻辑完全隔离。
- 别在页面里写
onShareAppMessage期待它在 H5 生效,纯属白忙活 - H5 分享必须调用
wx.updateAppMessageShareData和wx.updateTimelineShareData,且前提是 JS-SDK 已正确注入并签名成功 - uni-app 官方封装的
uni.showShareMenu和uni.onShareAppMessage对 H5 无效,不能替代 JS-SDK
JS-SDK 签名失败:错误信息 invalid signature
这个错不是前端代码写错了,而是后端返回的 signature、nonceStr、timestamp 和当前 URL 不匹配——哪怕多一个斜杠、少一个参数都会挂。
- 前端传给后端签名的
url必须和浏览器地址栏**完全一致**(包括 hash 后面的#部分?不,JS-SDK 要求去掉 hash) - uni-app 的路由是 hash 模式(
https://xxx.com/#/pages/index/index),签名时要传https://xxx.com/#/pages/index/index?错,得传https://xxx.com/或带完整 path 但**不含 # 及之后内容**,即https://xxx.com/pages/index/index - 后端生成签名用的
jsapi_ticket必须是有效的,且未被缓存过期(有效期 2 小时,需自行缓存+刷新)
分享标题/图片始终是首页配置,改不了当前页内容
因为 wx.updateAppMessageShareData 和 wx.updateTimelineShareData 是「覆盖式」调用,必须在页面 ready 后、用户触发分享前调用,且每次跳转新页面都得重新设一遍。
- 别只在 App.vue 里调一次;要在每个需要自定义分享的页面
onLoad或onShow中调用(H5 下onShow更稳妥) - 图片链接必须是**绝对路径、HTTPS、可直接访问**(微信会抓取,404 或跨域或非 HTTPS 都会导致 fallback 到默认图)
- 标题长度建议 ≤ 32 字符,超长可能被截断;描述建议 ≤ 50 字符,否则部分安卓微信会忽略
- 示例片段:
wx.updateAppMessageShareData({ title: '这是当前文章标题', desc: '简短说明', link: location.href, imageUrl: 'https://xxx.com/share.png' })
uni-app 编译 H5 后,uni.getSystemInfoSync().platform === 'h5' 判断不准
这个判断在开发环境(npm run dev:h5)下可能返回 devtools,而不是 h5,导致 JS-SDK 初始化被跳过。
- 更可靠的判断方式是:
typeof wx !== 'undefined' && wx.updateAppMessageShareData(确保微信环境) +location.href.indexOf('mp.weixin.qq.com') > -1 || /MicroMessenger/i.test(navigator.userAgent) - 不要把 JS-SDK 加载逻辑写死在
mounted;H5 页面可能异步加载 SDK,需加 loading 状态或重试机制 - 微信内置浏览器对
document.write敏感,用动态script标签加载 JS-SDK 时,务必等script.onload触发后再调用wx.config
微信分享的坑不在前端代码多难写,而在于签名 URL、JS-SDK 加载时机、页面生命周期钩子三者必须严丝合缝。漏掉任意一环,都会表现为“点了分享,弹出来的还是公众号默认卡片”。










