文件浏览时: 当浏览 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 开发流程

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

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 官方文档

12.2 学习资源

12.3 社区资源

12.4 本地参考文档

13. 团队协作

13.1 协作流程

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

13.2 规范约定

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

13.3 工具协作

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

name	uniapp说明
description	移动端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 开发流程

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

uniapp

More from this repository

More from this repository

uniapp 说明

0. 自动触发说明

0.1 触发条件

0.1.1 操作触发

0.1.2 内容触发

0.1.3 命令触发

0.2 适用场景

0.2.1 核心场景

0.2.2 辅助场景

0.3 触发机制

0.3.1 调用时机

0.3.2 调用频率

0.3.3 调用优先级

0.4 触发后行为

0.4.1 自动分析

0.4.2 自动展示

0.4.3 自动建议

1. uniapp 架构介绍

1.1 整体架构

1.2 技术栈

1.3 目录结构

1.3.1 核心目录

1.3.2 页面目录

2. 核心功能模块

2.1 登录认证模块

2.2 首页模块

2.3 商品模块

2.4 购物车模块

2.5 订单模块

2.6 用户中心模块

3. 技术特点

3.1 跨端开发

3.2 组件化开发

3.3 状态管理

3.4 API 调用

4. 开发规范

4.1 代码规范

4.2 目录规范

4.3 命名规范

4.4 注释规范

5. 性能优化

5.1 加载优化

5.2 渲染优化

5.3 网络优化

5.4 构建优化

6. 跨端兼容

6.1 平台差异

6.2 兼容策略

6.3 测试策略

7. 安全防护

7.1 数据安全

7.2 权限管理

7.3 防作弊措施

8. 最佳实践

8.1 开发流程

8.2 页面开发

8.3 组件开发

8.4 调试技巧

9. 常见问题

9.1 兼容性问题

9.2 性能问题

9.3 打包问题

9.4 上架问题

10. 部署与发布

10.1 构建流程

10.2 发布流程

10.3 版本管理

11. 开发工具推荐

11.1 IDE 推荐

11.2 插件推荐

11.3 工具推荐

12. 参考资源

12.1 官方文档

12.2 学习资源

12.3 社区资源

12.4 本地参考文档

13. 团队协作