useWechatJSSDK

微信网页 JS-SDK 的封装 Hook，提供加载、配置和初始化微信 JS-SDK 的功能。

前置依赖

依赖参数

参数名	类型	说明
deps.vue.ref	<T>(value: T) => Ref<T>	Vue ref 函数
deps.window	Window & { wx?: WxWeb }	窗口对象
deps.document	Document	文档对象
deps.navigator	Navigator	导航器对象
deps.isServer	() => boolean	判断是否在服务端环境的函数
deps.fetch	FetchFunction	网络请求函数
deps.getCurrentUrl	() => string	获取当前页面 URL 的函数
deps.getConfigApiUrl	() => string	获取 JS-SDK 配置 API 地址的函数
deps.setInterval	typeof setInterval	定时器函数
deps.clearInterval	typeof clearInterval	清除定时器函数
deps.jssdkScriptUrl	string	（可选）自定义 JS-SDK 脚本地址

环境要求

微信网页 JSSDK: 必须在微信内置浏览器中使用

后端 API: 需要提供获取 JS-SDK 配置的接口，接口应返回：

{
  "code": 0,
  "data": {
    "appId": "微信AppID",
    "timestamp": "时间戳",
    "nonceStr": "随机字符串",
    "signature": "签名"
  }
}

函数签名

function useWechatJSSDK(
  deps: UseWechatJSSDKDeps
): UseWechatJSSDKReturn

interface UseWechatJSSDKDeps {
  vue: Pick<Required<VueCompositionAPI>, 'ref'>
  window: Window & { wx?: WxWeb }
  document: Document
  navigator: Navigator
  isServer: () => boolean
  fetch: FetchFunction
  getCurrentUrl: () => string
  getConfigApiUrl: () => string
  jssdkScriptUrl?: string
  setInterval: typeof setInterval
  clearInterval: typeof clearInterval
}

interface UseWechatJSSDKReturn {
  isJSSDKLoaded: Ref<boolean>
  isLoading: Ref<boolean>
  error: Ref<string | null>
  loadWechatJSSDK: () => Promise<void>
  getJSSDKConfig: (url?: string) => Promise<WechatJSSDKConfig>
  initWechatJSSDK: (jsApiList?: string[], url?: string) => Promise<void>
  isJSSDKReady: () => boolean
  getWx: () => WxWeb | undefined
  isWechatBrowser: () => boolean
}

参数

参数名	类型	必填	说明
deps	UseWechatJSSDKDeps	是	依赖注入对象

返回值

属性	类型	说明
isJSSDKLoaded	Ref<boolean>	是否已加载 JS-SDK 脚本
isLoading	Ref<boolean>	是否正在加载
error	Ref<string | null>	错误信息
loadWechatJSSDK	() => Promise<void>	加载微信 JS-SDK 脚本
getJSSDKConfig	(url?: string) => Promise<WechatJSSDKConfig>	获取 JS-SDK 配置
initWechatJSSDK	(jsApiList?: string[], url?: string) => Promise<void>	初始化微信 JS-SDK
isJSSDKReady	() => boolean	检查 JS-SDK 是否已初始化
getWx	() => WxWeb | undefined	获取微信 JS-SDK 实例
isWechatBrowser	() => boolean	检测是否在微信浏览器中

工作原理

1. 环境检测: 检查是否在微信浏览器环境中
2. 脚本加载: 动态加载微信官方 JS-SDK 脚本（jweixin-1.6.0.js）
3. 配置获取: 从后端 API 获取 JS-SDK 配置（包含签名等信息）
4. 初始化: 调用 wx.config() 初始化 JS-SDK
5. 状态管理: 通过响应式状态跟踪加载和错误状态

默认 JS API 列表:

• updateAppMessageShareData - 分享到好友
• updateTimelineShareData - 分享到朋友圈
• onMenuShareTimeline - 分享到朋友圈（旧版）
• onMenuShareAppMessage - 分享给朋友（旧版）
• chooseImage - 选择图片
• previewImage - 预览图片
• uploadImage - 上传图片
• downloadImage - 下载图片
• getLocation - 获取地理位置
• openLocation - 打开地图
• scanQRCode - 扫一扫

使用流程:

1. 调用 initWechatJSSDK() 自动完成加载和初始化
2. 或分别调用 loadWechatJSSDK() 和 getJSSDKConfig() 进行自定义控制

异常

• Error: 微信 JS-SDK 只能在客户端加载 - 在服务端调用时抛出
• Error: 当前不在微信浏览器环境中 - 非微信环境调用时抛出
• Error: 获取 JS-SDK 配置失败 - 配置获取失败时抛出
• Error: 微信 JS-SDK 配置失败 - JS-SDK 初始化失败时抛出