uniapp

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 开发流程 需求分析 : 明确功能需求 设计阶段 : 设计页面结构和组件 编码实现 : 遵循开发规范编码 多端测试 : 在各平台进行测试 性能优化 : 优化应用性能 发布上线 : 构建和发布 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 发布 : 部署到静态文件服务器 小程序发布 : 提交到各小程序平台