Appearance
多端适配
项目多端兼容策略和注意事项。
支持平台
| 平台 | 编译命令 | 说明 |
|---|---|---|
| H5 | pnpm dev:h5 | 浏览器端,支持企微内嵌 H5 |
| 微信小程序 | pnpm dev:mp-weixin | 企微小程序环境 |
| Tauri 桌面端 | pnpm tauri:dev | Windows 桌面应用 |
平台差异处理
条件编译
UniApp 支持条件编译,通过特殊注释区分平台代码:
ts
// #ifdef H5
// 仅 H5 端执行的代码
// #endif
// #ifdef MP-WEIXIN
// 仅微信小程序执行的代码
// #endif
// #ifdef APP
// 仅桌面端(Tauri)执行的代码
// #endif平台工具
src/utils/platform.ts 提供平台判断工具函数。
兼容红线
禁止事项
- 禁止使用小程序不支持的 Web API(如
document、window.location等) - 禁止在样式中使用不支持的 CSS 属性
- 禁止硬编码平台特定路径
必须遵守
- 弹窗使用 UniApp 统一 API(
uni.showModal等),不用浏览器原生弹窗 - 路由跳转使用
uni.navigateTo等 UniApp API - 存储使用
uni.setStorage/uni.getStorage - 图片资源使用
rpx单位适配
企业微信适配
企微 SDK
- 通过
src/composables/useWxWorkSdk.ts管理 SDK 初始化 - 支持企微免密登录、JSSDK 鉴权
- 横屏禁止旋转(
wxwork-loading.vue处理)
企微浮窗返回
src/composables/useWxWorkFloatBack.ts处理企微浮窗返回逻辑
桌面端适配
Tauri 集成
- 通过
@tauri-apps/api与系统交互 - 支持系统通知(
@tauri-apps/plugin-notification) - 支持本地存储(
@tauri-apps/plugin-store) - 支持 Shell 调用(
@tauri-apps/plugin-shell) - 支持开机自启(
@tauri-apps/plugin-autostart)
桌面端特有页面
pages/settings/desktop.vue:桌面端专属设置