# 藤编企业移动端应用 (uni-app x) 基于 **uni-app x** 开发的跨平台移动端应用,**原生支持 Android、iOS、鸿蒙系统**。 ## 🚀 技术栈 - **uni-app x** - 下一代跨平台框架 - **Vue 3** - 前端框架 - **UTS** - Uni Type Script(类 TypeScript) - **Pinia** - 状态管理 - **Vite** - 构建工具 - **Sass** - CSS 预处理器 ## 📱 支持平台 | 平台 | 支持状态 | 打包格式 | |------|---------|---------| | **Android** | ✅ 原生支持 | APK | | **iOS** | ✅ 原生支持 | IPA | | **鸿蒙 (HarmonyOS)** | ✅ 原生支持 | HAP | | **H5** | ✅ 支持 | - | | **微信小程序** | ✅ 支持 | - | ## 📁 项目结构 ``` app/ ├── api/ # API 接口封装 (UTS) │ ├── index.uts # 接口统一导出 │ ├── request.uts # 请求封装 │ └── user.uts # 用户相关接口 ├── components/ # 公共组件 (.uvue) ├── pages/ # 页面 (.uvue) │ ├── index/ # 首页 │ ├── login/ # 登录页 │ └── mine/ # 我的页面 ├── static/ # 静态资源 │ └── tabbar/ # 底部导航图标 ├── store/ # 状态管理 (Pinia) ├── utils/ # 工具函数 ├── App.uvue # 应用入口 ├── main.uts # 入口文件 ├── manifest.json # 应用配置(含鸿蒙配置) ├── pages.json # 页面路由配置 ├── uni.scss # 全局样式变量 ├── vite.config.ts # Vite 配置 ├── index.html # H5 入口页面 └── package.json # 依赖配置 ``` ## 🛠️ 开发环境 ### 环境要求 - **Node.js** >= 18.0 - **HBuilderX** Alpha 版本(用于打包) - **Android Studio**(Android 打包) - **Xcode**(iOS 打包,仅 macOS) - **DevEco Studio**(鸿蒙打包) ### 安装依赖 ```bash cd app npm install ``` ### 开发运行 ```bash # H5 开发 npm run dev:h5 # Android 开发 npm run dev:app-android # iOS 开发 npm run dev:app-ios # 鸿蒙开发 npm run dev:app-harmony ``` ### 构建打包 ```bash # H5 构建 npm run build:h5 # Android APK 构建 npm run build:app-android # iOS IPA 构建 npm run build:app-ios # 鸿蒙 HAP 构建 npm run build:app-harmony ``` ## 📦 使用 HBuilderX 打包 ### 1. 安装 HBuilderX Alpha 下载地址:https://www.dcloud.io/hbuilderx.html > **注意:uni-app x 需要使用 Alpha 版本的 HBuilderX** ### 2. 导入项目 1. 打开 HBuilderX Alpha 2. 选择「文件」->「导入」->「从本地目录导入」 3. 选择 `app` 目录 ### 3. 运行调试 - **Android**: 连接手机,选择「运行」->「运行到手机或模拟器」 - **iOS**: 连接 iPhone,选择「运行」->「运行到手机或模拟器」 - **鸿蒙**: 连接鸿蒙设备,选择「运行」->「运行到手机或模拟器」 ### 4. 云端打包 1. 选择「发行」->「原生App-云打包」 2. 选择打包平台(Android/iOS/鸿蒙) 3. 填写证书信息 4. 点击「打包」 ### 5. 本地打包 #### Android 1. 选择「发行」->「原生App-本地打包」->「生成本地打包App资源」 2. 使用 Android Studio 打开生成的项目 3. 构建 APK #### iOS 1. 选择「发行」->「原生App-本地打包」->「生成本地打包App资源」 2. 使用 Xcode 打开生成的项目 3. 构建 IPA #### 鸿蒙 1. 选择「发行」->「原生App-本地打包」->「生成本地打包App资源」 2. 使用 DevEco Studio 打开生成的项目 3. 构建 HAP ## 🔧 API 配置 修改 `api/request.uts` 中的 `BASE_URL`: ```typescript const BASE_URL: string = 'http://your-server:9010' ``` ## 🆕 UTS 语法说明 UTS (Uni Type Script) 是 uni-app x 的开发语言,语法类似 TypeScript: ```typescript // 变量声明 const name: string = '藤编企业' const count: number = 100 // 函数定义 func add(a: number, b: number): number { return a + b } // 类型定义 type User = { id: number name: string } // 响应式数据 const userName = ref('') const isLoading = ref(false) // 计算属性 const fullName = computed((): string => { return `${firstName.value} ${lastName.value}` }) ``` ## 📝 开发注意事项 1. **文件后缀**: - 页面文件使用 `.uvue` - 脚本文件使用 `.uts` 2. **静态资源**:请替换 `static/` 目录下的占位图片 3. **鸿蒙开发**:需要安装 DevEco Studio 和鸿蒙 SDK 4. **调试**:推荐使用真机调试,模拟器可能有性能差异 ## 🔗 相关链接 - [uni-app x 官方文档](https://doc.dcloud.net.cn/uni-app-x/) - [UTS 语法指南](https://doc.dcloud.net.cn/uni-app-x/uts/) - [HBuilderX Alpha 下载](https://www.dcloud.io/hbuilderx.html) - [鸿蒙开发者中心](https://developer.harmonyos.com/) ## 📄 License MIT License