# Uniapp说明

> 移动端uniapp开发说明

- Skill: `crmeb/uniapp` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add crmeb/uniapp`
- Raw SKILL.md: https://api.skillmd.com/api/skills/crmeb/uniapp/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: crmeb (https://skillmd.com/u/crmeb)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/crmeb/uniapp

---


# uniapp 说明

## 0. 自动触发说明

### 0.1 触发条件

#### 0.1.1 操作触发
- **文件浏览时**: 当浏览 uniapp 相关目录时自动调用
  - 打开 uniapp 项目根目录时触发
  - 打开 pages 目录时触发
  - 浏览 components 目录时触发
  - 查看 uniapp 配置文件时触发
- **文件操作时**: 当对 uniapp 文件进行操作时自动调用
  - 创建新页面文件时触发
  - 修改组件文件时触发
  - 删除 uniapp 文件时触发
  - 修改配置文件时触发
- **目录操作时**: 当对 uniapp 目录进行操作时自动调用
  - 创建新页面目录时触发
  - 重命名组件目录时触发
  - 删除 uniapp 目录时触发

#### 0.1.2 内容触发
- **关键词触发**: 当文件内容包含以下关键词时自动调用
  - 移动端关键词: `移动端`、`app`、`手机`、`小程序`、`H5`
  - uniapp 关键词: `uniapp`、`uni-app`、`uView`、`uniCloud`
  - 功能关键词: `登录`、`注册`、`首页`、`商品`、`购物车`、`订单`
- **代码触发**: 当查看特定类型 uniapp 代码时自动调用
  - 页面代码 (`*.vue`)
  - 组件代码 (`components`)
  - 配置代码 (`pages.json`、`manifest.json`)
  - API 调用代码 (`uni.` 开头的 API)

#### 0.1.3 命令触发
- **终端命令触发**: 当执行以下命令时自动调用
  - `npm run dev:h5` (启动 H5 开发)
  - `npm run dev:mp-weixin` (启动微信小程序开发)
  - `npm run build:h5` (构建 H5)
  - `npm run build:mp-weixin` (构建微信小程序)
  - `uni` 相关命令

### 0.2 适用场景

#### 0.2.1 核心场景
- **移动端开发**: 开发 uniapp 移动应用时
- **页面开发**: 创建或修改 uniapp 页面时
- **组件开发**: 开发可复用的 uniapp 组件时
- **功能集成**: 集成新功能到移动端应用时

#### 0.2.2 辅助场景
- **跨端调试**: 调试不同平台的兼容性问题时
- **性能优化**: 优化移动端应用性能时
- **样式调整**: 调整移动端界面样式时
- **API 调用**: 使用 uniapp 原生 API 时

### 0.3 触发机制

#### 0.3.1 调用时机
- **实时触发**: 页面文件操作时立即触发
- **延迟触发**: 复杂配置修改时延迟1秒触发
- **批量触发**: 批量文件操作时合并触发

#### 0.3.2 调用频率
- 文件浏览: 最多每10秒触发一次
- 文件操作: 最多每5秒触发一次
- 命令执行: 最多每3秒触发一次

#### 0.3.3 调用优先级
- **优先级等级**: 中优先级 (3/5)
- **竞争处理**: 当多个技能同时触发时
  - 最高优先级: 系统核心技能
  - 高优先级: 代码结构技能
  - 中等优先级: uniapp 技能、管理端前端技能
  - 低优先级: 辅助工具技能
- **触发限制**: 仅在 uniapp 相关操作时被触发，不影响其他技能的正常使用

### 0.4 触发后行为

#### 0.4.1 自动分析
- **结构分析**: 分析 uniapp 项目目录结构
- **组件分析**: 分析页面组件依赖关系
- **配置分析**: 分析 uniapp 配置文件
- **性能分析**: 分析移动端性能瓶颈

#### 0.4.2 自动展示
- **目录结构**: 展示 uniapp 项目目录结构
- **页面说明**: 展示核心页面功能说明
- **技术栈**: 展示 uniapp 技术栈
- **开发规范**: 展示移动端开发规范

#### 0.4.3 自动建议
- **开发建议**: 提供 uniapp 开发建议
- **优化建议**: 提供移动端性能优化建议
- **规范建议**: 提供代码规范遵循建议
- **跨端建议**: 提供跨端兼容性建议

## 1. uniapp 架构介绍

### 1.1 整体架构
- **跨端框架**: 基于 Vue 2.x 的跨端应用框架
- **多端发布**: 支持 H5、小程序、App 等多端发布
- **组件化开发**: 基于 Vue 组件化开发模式
- **原生能力**: 调用各平台原生 API 能力
- **状态管理**: Vuex 或 Pinia 状态管理

### 1.2 技术栈
- **核心框架**: Vue 2.x / Vue 3.x
- **UI 组件库**: uView UI、ColorUI、uni-ui
- **状态管理**: Vuex 3.x / Pinia
- **HTTP 客户端**: uni.request、axios
- **构建工具**: Webpack、Vite
- **包管理器**: npm/yarn
- **代码规范**: ESLint + Prettier

### 1.3 目录结构

#### 1.3.1 核心目录
```
uniapp/
├── pages/               # 页面目录
├── components/          # 组件目录
├── static/              # 静态资源目录
├── utils/               # 工具函数目录
├── api/                 # API 接口目录
├── store/               # 状态管理目录
├── common/              # 公共目录
├── mixins/              # 混合器目录
├── pages.json           # 页面路由配置
├── manifest.json        # 应用配置
├── main.js              # 入口文件
├── App.vue              # 根组件
└── uni.scss             # 全局样式
```

#### 1.3.2 页面目录
```
pages/
├── index/               # 首页
├── goods/               # 商品
├── cart/                # 购物车
├── order/               # 订单
├── user/                # 用户中心
├── login/               # 登录
└── detail/              # 详情页
```

## 2. 核心功能模块

### 2.1 登录认证模块
- **功能**: 用户登录、注册、密码找回、第三方登录
- **关键页面**: `login.vue`、`register.vue`
- **核心功能**: 
  - 手机号密码登录
  - 验证码登录
  - 微信登录
  - 注册功能
  - 密码找回
  - 登录状态管理

### 2.2 首页模块
- **功能**: 应用入口、轮播图、推荐商品、分类入口
- **关键页面**: `index.vue`
- **核心功能**: 
  - 轮播图展示
  - 分类导航
  - 推荐商品
  - 活动入口
  - 搜索功能
  - 快捷入口

### 2.3 商品模块
- **功能**: 商品列表、商品搜索、商品筛选、商品详情
- **关键页面**: `goods/list.vue`、`goods/detail.vue`
- **核心功能**: 
  - 商品列表展示
  - 商品搜索
  - 商品筛选
  - 商品详情
  - 商品评价
  - 商品分享

### 2.4 购物车模块
- **功能**: 商品管理、数量调整、价格计算、结算
- **关键页面**: `cart/index.vue`
- **核心功能**: 
  - 商品添加/删除
  - 数量调整
  - 价格计算
  - 商品结算
  - 购物车清空
  - 选择商品

### 2.5 订单模块
- **功能**: 订单创建、订单列表、订单详情、订单支付
- **关键页面**: `order/create.vue`、`order/list.vue`、`order/detail.vue`
- **核心功能**: 
  - 订单创建
  - 订单列表
  - 订单详情
  - 订单支付
  - 订单取消
  - 订单退款

### 2.6 用户中心模块
- **功能**: 用户信息、收货地址、优惠券、收藏、历史记录
- **关键页面**: `user/index.vue`、`user/info.vue`
- **核心功能**: 
  - 用户信息管理
  - 收货地址管理
  - 优惠券管理
  - 商品收藏
  - 浏览历史
  - 个人设置

## 3. 技术特点

### 3.1 跨端开发
- **一次开发多端发布**: 支持 H5、小程序、App 等多端
- **条件编译**: 根据不同平台编写特定代码
- **平台差异处理**: 处理各平台 API 差异
- **原生能力调用**: 调用各平台原生能力

### 3.2 组件化开发
- **页面组件**: 页面级组件开发
- **通用组件**: 可复用的通用组件
- **业务组件**: 特定业务逻辑组件
- **组件通信**: Props/Events、Vuex、EventBus

### 3.3 状态管理
- **Vuex 模块化**: 按功能模块划分 store
- **状态持久化**: 使用 localStorage/sessionStorage
- **异步操作**: 使用 Actions 处理异步请求
- **getters**: 派生状态计算

### 3.4 API 调用
- **uni.request**: uniapp 内置请求方法
- **请求封装**: 统一 API 调用方式
- **拦截器**: 请求/响应拦截器
- **API 模块化**: 按功能模块划分 API

## 4. 开发规范

### 4.1 代码规范
- **Vue 风格指南**: 遵循 Vue 官方风格指南
- **ESLint 规则**: 严格遵循 ESLint 规则
- **代码缩进**: 4空格缩进
- **命名规范**: 
  - 组件名: PascalCase
  - 方法/变量: camelCase
  - 常量: 全大写
  - 文件名: kebab-case

### 4.2 目录规范
- **页面目录**: 按功能模块组织页面
- **组件目录**: 按类型组织组件
- **资源目录**: 分类存放静态资源
- **工具目录**: 按功能分类工具函数

### 4.3 命名规范
- **页面命名**: 使用语义化的页面名称
- **组件命名**: 与功能模块名称对应
- **store 命名**: 与功能模块名称对应
- **API 命名**: 与后端接口名称对应

### 4.4 注释规范
- **页面注释**: 页面功能、参数说明
- **组件注释**: 组件功能、props、events 说明
- **方法注释**: 方法功能、参数、返回值说明
- **复杂逻辑注释**: 关键逻辑步骤说明

## 5. 性能优化

### 5.1 加载优化
- **路由懒加载**: 按需加载页面组件
- **组件懒加载**: 按需加载大型组件
- **图片优化**: 图片压缩、懒加载、WebP 格式
- **资源压缩**: JS/CSS 压缩
- **预加载**: 预加载关键资源

### 5.2 渲染优化
- **虚拟列表**: 长列表使用虚拟滚动
- **计算属性缓存**: 使用 computed 缓存计算结果
- **避免频繁更新**: 使用 v-once、v-memo
- **合理使用 key**: 列表渲染时使用唯一 key
- **减少 DOM 操作**: 批量更新 DOM

### 5.3 网络优化
- **API 请求合并**: 合并相同请求
- **请求缓存**: 缓存重复请求结果
- **防抖节流**: 优化频繁触发的事件
- **WebSocket**: 实时数据使用 WebSocket
- **HTTP/2**: 启用 HTTP/2 协议

### 5.4 构建优化
- **Tree Shaking**: 移除未使用的代码
- **代码分割**: 按路由分割代码
- **环境变量**: 区分开发/生产环境
- **分包加载**: 小程序分包加载

## 6. 跨端兼容

### 6.1 平台差异
- **H5 端**: 浏览器兼容性
- **小程序端**: 各平台小程序限制
- **App 端**: iOS/Android 差异

### 6.2 兼容策略
- **条件编译**: 使用 `#ifdef`/`#endif` 处理平台差异
- **API 兼容**: 封装统一的 API 调用
- **样式兼容**: 处理各平台样式差异
- **功能降级**: 不支持的功能提供降级方案

### 6.3 测试策略
- **多端测试**: 在各平台进行测试
- **兼容性测试**: 测试不同版本的兼容性
- **性能测试**: 测试各平台性能表现
- **用户体验测试**: 测试各平台用户体验

## 7. 安全防护

### 7.1 数据安全
- **敏感数据加密**: 加密存储敏感信息
- **本地存储安全**: 合理使用 localStorage
- **API 接口安全**: HTTPS、接口签名
- **数据验证**: 前端数据验证

### 7.2 权限管理
- **权限申请**: 合理申请设备权限
- **权限提示**: 向用户说明权限用途
- **权限降级**: 无权限时提供降级方案

### 7.3 防作弊措施
- **请求频率限制**: 防止恶意请求
- **参数验证**: 验证请求参数
- **签名验证**: 验证请求签名
- **设备标识**: 合理使用设备标识

## 8. 最佳实践

### 8.1 开发流程
1. **需求分析**: 明确功能需求
2. **设计阶段**: 设计页面结构和组件
3. **编码实现**: 遵循开发规范编码
4. **多端测试**: 在各平台进行测试
5. **性能优化**: 优化应用性能
6. **发布上线**: 构建和发布

### 8.2 页面开发
- **布局规范**: 遵循移动端布局规范
- **响应式设计**: 适配不同屏幕尺寸
- **用户体验**: 优化移动端交互体验
- **性能考虑**: 页面加载和渲染性能

### 8.3 组件开发
- **单一职责**: 组件功能单一
- **可配置性**: 组件参数可配置
- **跨端兼容**: 考虑各平台兼容性
- **性能优化**: 优化组件性能

### 8.4 调试技巧
- **uni-app 开发工具**: 使用官方开发工具
- **真机调试**: 使用真机进行调试
- **控制台调试**: 合理使用 console 方法
- **网络调试**: 分析 API 请求和响应

## 9. 常见问题

### 9.1 兼容性问题
- **API 兼容性**: 处理各平台 API 差异
- **样式兼容性**: 处理各平台样式差异
- **功能兼容性**: 处理各平台功能差异

### 9.2 性能问题
- **启动速度**: 优化应用启动速度
- **页面加载**: 优化页面加载速度
- **滚动性能**: 优化页面滚动性能
- **内存占用**: 优化应用内存占用

### 9.3 打包问题
- **包体积**: 优化应用包体积
- **分包加载**: 合理使用分包加载
- **资源文件**: 优化资源文件大小

### 9.4 上架问题
- **应用商店审核**: 遵循各应用商店审核规则
- **小程序审核**: 遵循各小程序平台审核规则
- **内容合规**: 确保应用内容合规

## 10. 部署与发布

### 10.1 构建流程
- **H5 构建**: `npm run build:h5`
- **微信小程序构建**: `npm run build:mp-weixin`
- **App 构建**: 使用 HBuilderX 云打包

### 10.2 发布流程
- **H5 发布**: 部署到静态文件服务器
- **小程序发布**: 提交到各小程序平台
- **App 发布**: 提交到应用商店

### 10.3 版本管理
- **版本号规范**: 遵循语义化版本规范
- **发布日志**: 记录版本变更内容
- **灰度发布**: 采用灰度发布策略

## 11. 开发工具推荐

### 11.1 IDE 推荐
- **HBuilderX**: uniapp 官方推荐 IDE
- **VS Code**: 配合 uniapp 插件使用
- **WebStorm**: 专业的前端 IDE

### 11.2 插件推荐
- **uni-app 插件市场**: 官方插件市场
- **uView UI**: 移动端 UI 组件库
- **ColorUI**: 移动端 UI 组件库
- **uni-ui**: 官方 UI 组件库

### 11.3 工具推荐
- **Charles**: 网络调试工具
- **Postman**: API 测试工具
- **Figma/Sketch**: UI 设计工具
- **Lighthouse**: 性能分析工具

## 12. 参考资源

### 12.1 官方文档
- [uni-app 官方文档](https://uniapp.dcloud.io/)
- [uView UI 文档](https://uviewui.com/)
- [Vue 官方文档](https://v2.vuejs.org/)
- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)

### 12.2 学习资源
- [uni-app 教程](https://uniapp.dcloud.io/tutorial/)
- [Vue Mastery](https://www.vuemastery.com/)
- [MDN Web Docs](https://developer.mozilla.org/zh-CN/)
- [CSS-Tricks](https://css-tricks.com/)

### 12.3 社区资源
- [uni-app 社区](https://ask.dcloud.net.cn/forum-79-1.html)
- [GitHub](https://github.com/)
- [Stack Overflow](https://stackoverflow.com/)
- [掘金](https://juejin.cn/)

### 12.4 本地参考文档
- [UniApp 目录结构文档](./references/directory_structure.md)
- [UniApp API 开发流程文档](./references/api_flow.md)
- [UniApp 代码规范文档](./references/code_style.md)

## 13. 团队协作

### 13.1 协作流程
- **需求评审**: 团队评审需求
- **任务分配**: 合理分配开发任务
- **代码审查**: 代码质量检查
- **多端测试**: 团队成员负责不同平台测试

### 13.2 规范约定
- **代码规范**: 统一代码风格
- **命名规范**: 统一命名规则
- **文档规范**: 统一文档格式
- **提交规范**: 统一提交信息格式

### 13.3 工具协作
- **项目管理**: 使用项目管理工具
- **代码托管**: 使用代码托管平台
- **CI/CD**: 持续集成/持续部署
- **文档协作**: 团队文档协作工具