uni-app如何实现在H5端调用微信JS-SDK进行分享定制-uni-app-PHP中文网

必须在微信 webview 中运行才能调用 wx 对象，因其仅存在于微信内置浏览器中；chrome、safari 及微信跳转的外部浏览器均不支持，唯一判断依据是 useragent 包含 micromessenger/wechat 且由微信 webview 渲染。

uni-app如何实现在h5端调用微信js-sdk进行分享定制

必须运行在微信 WebView 中才能调用 wx 对象

不是代码写错了，是环境根本不对——wx 对象只存在于微信内置浏览器（即微信客户端打开的网页）里。Chrome、Safari、甚至微信内嵌的「外部浏览器」（比如 iOS 上点击链接跳转到 Safari）都不行。process.env.NODE_ENV === 'production' 也没用，localhost、127.0.0.1、代理转发全无效。唯一判断依据是：/(MicroMessenger|WeChat)/.test(navigator.userAgent) 为 true 且页面实际由微信 WebView 渲染。

常见错误现象：控制台报 ReferenceError: wx is not defined 或 Cannot read property 'config' of undefined，本质就是没进微信环境，不是配置漏了。

测试必须用真机微信扫码或从公众号菜单/收藏里打开 H5 页面
开发阶段无法本地调试，连 ngrok 代理都不行；可先 mock wx.ready 和 wx.updateAppMessageShareData 做 UI 逻辑验证
不要在 main.js 或页面 onLoad 里提前加载 SDK，等用户触发分享动作时再加载更安全

URL 必须与地址栏完全一致，且不含 hash

后端签名用的 url 参数，必须和用户当前浏览器地址栏显示的 URL 完全相同（协议、域名、路径、查询参数），但要主动去掉 # 及之后部分。uni-app 的哈希路由（如 https://example.com/#/pages/index/index?id=123）直接传给后端会签名失败。

正确做法是：window.location.href.split('#')[0]，而不是 window.location.origin + window.location.pathname + window.location.search——后者会丢掉可能存在的端口、子路径等细节。

如果用了 vue-router 的 history 模式，在 Android 微信 6.2 以下仍可能因 pushState 不被支持导致签名失效，建议优先用 hash 模式并手动截断
分享卡片里的 link 字段可以带 hash（用于跳转到具体页面），但签名用的 url 不能含 hash
注意 URL 编码：后端接收前需 decodeURIComponent，前端传参时用 encodeURIComponent 包一层更稳妥

必须动态加载官方 CDN 的 jweixin-1.6.0.js

npm install weixin-js-sdk 只提供类型定义和轻量包装，不包含真实 SDK。真正执行逻辑依赖微信官方 CDN：https://res.wx.qq.com/open/js/jweixin-1.6.0.js。硬引入或打包进项目会导致版本过期、HTTPS 失效、CDN 负载不可控等问题。

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

推荐封装一个按需加载函数，避免重复插入 script 标签：

function loadWxSdk() {
  return new Promise((resolve, reject) => {
    if (window.wx) return resolve(window.wx)
    const script = document.createElement('script')
    script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
    script.onload = () => resolve(window.wx)
    script.onerror = reject
    document.head.appendChild(script)
  })
}

不要用 document.write，它会清空整个 DOM
不要在多个组件里各自加载，加个全局 flag 防重复（如 window.__WX_SDK_LOADED__）
备用 CDN 地址：https://res2.wx.qq.com/open/js/jweixin-1.6.0.js，可在主地址失败时 fallback

分享接口必须在 wx.ready 后调用，且用 updateXXXShareData

旧版 onMenuShareTimeline 等接口已废弃，微信 1.4.0+ 强制要求用 updateAppMessageShareData（分享给朋友）和 updateTimelineShareData（分享到朋友圈）。它们必须在 wx.ready 回调里执行，且每次分享前都要调用——不能只配一次就一劳永逸。

常见坑点：

imgUrl 必须是 HTTPS 地址，且尺寸建议 ≥ 120×120px，否则 iOS 微信可能不显示图
link 必须和签名时用的 URL 同源，否则安卓微信可能拒绝渲染分享卡片
Android 和 iOS 对 desc 字数限制不同（iOS 更严），超长会被截断，建议 ≤ 30 字
调试时设 debug: true，但上线前务必关掉，否则用户会看到 alert 弹窗

最易被忽略的是：分享行为本身不触发 wx.ready，它只在页面首次加载 SDK 后执行一次。所以每次点击分享按钮，都要确保先等 wx.config 完成、再进 wx.ready、再调 updateXXXShareData——三步缺一不可，且不能靠全局变量缓存 config 结果，因为 URL 变化后签名就失效了。