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 官方文档
• uView UI 文档
• Vue 官方文档
• 微信小程序文档

12.2 学习资源

• uni-app 教程
• Vue Mastery
• MDN Web Docs
• CSS-Tricks

12.3 社区资源

• uni-app 社区
• GitHub
• Stack Overflow
• 掘金

12.4 本地参考文档

• UniApp 目录结构文档
• UniApp API 开发流程文档
• UniApp 代码规范文档

13. 团队协作

13.1 协作流程

• 需求评审: 团队评审需求
• 任务分配: 合理分配开发任务
• 代码审查: 代码质量检查
• 多端测试: 团队成员负责不同平台测试

13.2 规范约定

• 代码规范: 统一代码风格
• 命名规范: 统一命名规则
• 文档规范: 统一文档格式
• 提交规范: 统一提交信息格式

13.3 工具协作

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