monisuo/app

藤编企业移动端应用 (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（鸿蒙打包）

安装依赖

cd app
npm install

开发运行

# H5 开发
npm run dev:h5

# Android 开发
npm run dev:app-android

# iOS 开发
npm run dev:app-ios

# 鸿蒙开发
npm run dev:app-harmony

构建打包

# 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：

const BASE_URL: string = 'http://your-server:9010'

🆕 UTS 语法说明

UTS (Uni Type Script) 是 uni-app x 的开发语言，语法类似 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 官方文档
• UTS 语法指南
• HBuilderX Alpha 下载
• 鸿蒙开发者中心

📄 License

MIT License