gxt_app

UniApp X 跨平台应用

基于 uni-app x 的跨平台移动应用基础框架，支持 Android 和 HarmonyOS 双平台原生渲染。

项目信息

• 项目名称: uniappx-init
• 版本号: 1.0.01
• 支持平台: Android、HarmonyOS（鸿蒙系统）
• 开发语言: UTS (强类型跨平台语言)

核心功能

1. 登录模块

• 账号密码登录
• 记住密码功能
• Token 自动管理
• 登录状态持久化

2. 首页

• 数据统计卡片
• 快捷入口（网格布局）
• 通知公告列表
• 自定义 TabBar

3. 工作台

• 列表页: 支持搜索、下拉刷新、上拉加载更多
• 表单页: 集成文件/图片/视频上传组件
• 地图页: 位置服务、标记点管理、路线绘制

4. 个人中心

• 用户信息展示
• 功能菜单
• 退出登录

项目结构

uniappx-init/
├── .cursor/rules/        # 开发规范文档
├── api/                  # API 接口（按模块分类）
│   ├── auth/            # 认证模块
│   ├── workbench/       # 工作台模块
│   ├── user/            # 用户模块
│   └── upload/          # 上传模块
├── components/          # 公共组件
│   ├── custom-tabbar/   # 自定义 TabBar
│   ├── upload-file/     # 文件上传
│   ├── upload-image/    # 图片上传
│   ├── upload-video/    # 视频上传
│   └── map-view/        # 地图组件
├── composables/         # 组合式函数
│   ├── useAuth.uts      # 认证管理
│   └── useEventBus.uts  # 事件总线
├── pages/               # 页面
│   ├── index/           # 首页
│   ├── login/           # 登录页
│   ├── workbench/       # 工作台
│   └── profile/         # 个人中心
├── types/               # 类型定义
├── utils/               # 工具函数
├── static/              # 静态资源
├── docs/                # 项目文档
├── App.uvue            # 应用配置
├── pages.json          # 页面路由配置
├── manifest.json       # 应用配置
└── uni.scss            # 全局样式变量

技术栈

• 框架: uni-app x
• 语言: UTS (类 TypeScript 的强类型语言)
• UI: uvue (类 Vue 3 单文件组件)
• 样式: ucss (CSS 子集，支持原生渲染)
• Vue 版本: Vue 3 (组合式 API)

开发规范

UTS 语言规范

• 强类型语言，不支持隐式类型转换
• 条件判断必须使用布尔类型：if (a != null) 而不是 if (a)
• 可空类型使用 | null 或 ? 定义
• 对象类型使用 type 而不是 interface
• 使用 let/const，不使用 var
• 使用 == 和 !=，避免 === 和 !==

样式规范 (UCSS)

• 仅使用 Flex 布局或绝对定位
• 仅支持类选择器
• 文字样式只能设置在 <text> 或 <button> 组件上
• 支持单位：px、rpx、百分比
• 不支持 Grid、Float、@media 等

条件编译

// Android 平台
// #ifdef APP-ANDROID
// Android 特有代码
// #endif

// 鸿蒙平台
// #ifdef APP-HARMONY
// 鸿蒙特有代码
// #endif

快速开始

1. 安装依赖

使用 HBuilderX 打开项目

2. 运行项目

• Android: 连接 Android 设备或模拟器，点击运行
• HarmonyOS: 连接鸿蒙设备，点击运行

3. 配置接口地址

修改 utils/request.uts 中的 BASE_URL：

const BASE_URL = "http://your-api-server.com"

API 接口

登录接口

• 地址: /sys/loginByAcount
• 方法: POST
• Content-Type: multipart/form-data
• 参数: username, password

退出登录

• 地址: /sys/logout
• 方法: GET
• Header: accesstoken

组件使用

文件上传组件

<upload-file 
  v-model="files"
  :max-count="5"
  @change="handleFilesChange"
/>

图片上传组件

<upload-image 
  v-model="images"
  :max-count="9"
  @change="handleImagesChange"
/>

视频上传组件

<upload-video 
  v-model="videos"
  :max-count="3"
  @change="handleVideosChange"
/>

地图组件

<map-view 
  ref="mapViewRef"
  :latitude="latitude"
  :longitude="longitude"
  :markers="markers"
  @markerClick="handleMarkerClick"
/>

Git 提交规范

提交类型

• feat: 新功能
• fix: 修复 Bug
• docs: 文档更新
• style: 代码格式调整
• refactor: 重构
• perf: 性能优化
• test: 测试相关
• chore: 构建/工具相关

中文提交方法

# 使用 write 工具创建临时文件
# 执行 git commit -F commit-msg.txt
# 删除临时文件

注意事项

1. API 接口必须按模块分类：不允许直接在 api/ 根目录创建接口文件
2. 严格遵守 UTS 类型规范：不能使用隐式类型转换
3. 使用条件编译：平台特定代码必须使用条件编译包围
4. 页面必须有滚动容器：使用 <scroll-view> 或 <list-view>
5. 文字样式规范：只能在 <text> 或 <button> 中设置文字样式

参考文档

• uni-app x 官方文档
• UTS 语法说明
• UCSS 样式规范
• 条件编译说明

License

MIT