- 后端: 新增 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>
119 lines
3.1 KiB
JavaScript
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;
|