Files
vf_react/src/components/MiniProgramLauncher/hooks/useWechatEnvironment.js
zdl 154bb76212 feat: 添加 H5 跳转小程序功能
- 后端: 新增 JS-SDK 签名接口和 URL Scheme 生成接口
- 前端: 创建 MiniProgramLauncher 组件,支持环境自适应
  - 微信内 H5: 使用 wx-open-launch-weapp 开放标签
  - 外部浏览器: 使用 URL Scheme 拉起微信
  - PC 端: 显示小程序码引导扫码
- 引入微信 JS-SDK (jweixin-1.6.0.js)
- 新增 miniprogramService 服务层封装 API 调用

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-12 16:56:04 +08:00

119 lines
3.1 KiB
JavaScript

/**
* 微信环境检测 Hook
* 用于判断当前运行环境,选择合适的小程序跳转方式
*/
import { useMemo } from 'react';
/**
* 跳转方式枚举
*/
export const LAUNCH_METHOD = {
OPEN_TAG: 'openTag', // 微信内使用开放标签
URL_SCHEME: 'urlScheme', // 外部浏览器使用 URL Scheme
QR_CODE: 'qrCode', // PC 端显示小程序码
};
/**
* 检测是否在微信浏览器内
*/
export const isWeChatBrowser = () => {
if (typeof window === 'undefined') return false;
const ua = navigator.userAgent.toLowerCase();
return ua.includes('micromessenger');
};
/**
* 检测是否为移动端设备
*/
export const isMobileDevice = () => {
if (typeof window === 'undefined') return false;
const ua = navigator.userAgent;
return /iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua);
};
/**
* 检测是否为 iOS 设备
*/
export const isIOSDevice = () => {
if (typeof window === 'undefined') return false;
const ua = navigator.userAgent;
return /iPhone|iPad|iPod/i.test(ua);
};
/**
* 检测是否为 Android 设备
*/
export const isAndroidDevice = () => {
if (typeof window === 'undefined') return false;
const ua = navigator.userAgent;
return /Android/i.test(ua);
};
/**
* 获取微信版本号
* @returns {string|null} 版本号字符串,如 "7.0.12"
*/
export const getWeChatVersion = () => {
if (typeof window === 'undefined') return null;
const ua = navigator.userAgent.toLowerCase();
const match = ua.match(/micromessenger\/(\d+\.\d+\.\d+)/i);
return match ? match[1] : null;
};
/**
* 检测微信版本是否支持开放标签
* 开放标签需要微信 7.0.12 及以上版本
*/
export const isOpenTagSupported = () => {
const version = getWeChatVersion();
if (!version) return false;
const [major, minor, patch] = version.split('.').map(Number);
// 7.0.12 及以上支持
if (major > 7) return true;
if (major === 7) {
if (minor > 0) return true;
if (minor === 0 && patch >= 12) return true;
}
return false;
};
/**
* 微信环境检测 Hook
* @returns {Object} 环境信息对象
*/
export const useWechatEnvironment = () => {
const environment = useMemo(() => {
const isWechat = isWeChatBrowser();
const isMobile = isMobileDevice();
const isIOS = isIOSDevice();
const isAndroid = isAndroidDevice();
const wechatVersion = getWeChatVersion();
const openTagSupported = isOpenTagSupported();
// 确定跳转方式
let launchMethod;
if (isWechat && openTagSupported) {
launchMethod = LAUNCH_METHOD.OPEN_TAG;
} else if (isMobile) {
launchMethod = LAUNCH_METHOD.URL_SCHEME;
} else {
launchMethod = LAUNCH_METHOD.QR_CODE;
}
return {
isWechat, // 是否在微信内
isMobile, // 是否移动端
isIOS, // 是否 iOS
isAndroid, // 是否 Android
wechatVersion, // 微信版本
openTagSupported, // 是否支持开放标签
launchMethod, // 推荐的跳转方式
};
}, []);
return environment;
};
export default useWechatEnvironment;