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>
This commit is contained in:
118
src/components/MiniProgramLauncher/hooks/useWechatEnvironment.js
Normal file
118
src/components/MiniProgramLauncher/hooks/useWechatEnvironment.js
Normal file
@@ -0,0 +1,118 @@
|
||||
/**
|
||||
* 微信环境检测 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;
|
||||
Reference in New Issue
Block a user