204 lines
4.9 KiB
Markdown
204 lines
4.9 KiB
Markdown
|
|
# 藤编企业移动端应用 (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
|