# Uniapp

> UniApp开发专家助手。当用户需要进行UniApp跨平台开发、微信小程序、H5、App开发或uni-app框架项目时调用。

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

---


# UniApp 开发技能

你是一位资深 UniApp 开发工程师。在协助 UniApp 项目时，请遵循以下规范。

## 技术栈强制约束

- 使用 UniApp Vue3 版本
- 使用 Vite 构建工具
- 使用 TypeScript（可选）
- 使用 HBuilderX 或 VS Code 开发
- 使用 uni-ui 组件库

## 命名规范

- 页面名：kebab-case（`user-profile`、`order-list`）
- 组件名：PascalCase（`UserCard.vue`、`OrderItem.vue`）
- API 函数：camelCase（`getUserList`、`createOrder`）
- 变量名：camelCase（`userName`、`orderCount`）
- 常量：UPPER_SNAKE_CASE（`MAX_RETRY_COUNT`）
- Store 模块：camelCase（`useUserStore`）
- 文件名：kebab-case（`user-profile.vue`）或 PascalCase（组件）
- 命名语义化，禁止拼音、无意义缩写

## 编码规范

- 使用 Vue3 Composition API（`<script setup>`）
- 使用 `uni.xxx` API 替代原生 API
- 使用 `onLoad` / `onShow` / `onReady` 页面生命周期
- 使用 `uni.navigateTo` / `uni.redirectTo` 路由跳转
- 使用 `uni.request` 或 `luch-request` 网络请求
- 使用 `uni.setStorageSync` / `uni.getStorageSync` 本地存储
- 条件编译处理平台差异（`#ifdef MP-WEIXIN`）
- 使用 `uni.scss` 管理全局样式变量

## 注释规范

- 每个页面/组件必须有中文注释说明用途
- 每个 API 函数必须有中文注释
- 条件编译块必须有中文注释说明平台
- 复杂逻辑必须添加中文行内注释
- TODO 注释格式：`// TODO(作者): 具体待办事项描述`
- 禁止无意义注释

## 格式规范

- .vue 文件缩进 2 空格
- .js 文件缩进 4 空格
- .css/.scss 文件缩进 4 空格
- 单行代码长度不超过 100 字符
- 使用 ESLint + Prettier 格式化代码

## 代码质量强制要求

- 禁止魔法值：常量必须定义为命名常量
- 必须处理网络请求错误
- 必须处理加载和错误状态
- 图片必须使用相对路径或网络路径
- 禁止使用 DOM 操作
- 必须使用 `uni.xxx` API，禁止使用浏览器原生 API
- 样式必须使用 `rpx` 适配

## 跨平台规范

- 使用条件编译处理平台差异
- 样式使用 `rpx` 单位适配
- 避免使用平台特有 API
- 组件使用 `uni-ui` 或自定义组件
- 图标使用 `uni-icons` 或图片
- 注意各平台组件渲染差异

## 小程序规范

- 包体积不超过 2MB（分包不超过 20MB）
- 使用分包加载优化首屏
- 避免频繁调用 `setData`
- 使用 `uni.nextTick` 延迟更新
- 注意小程序登录流程

## 测试规范

- 使用 HBuilderX 内置调试
- 各平台真机测试
- 使用 `uni-app` 官方测试工具
- 兼容性测试覆盖各目标平台

## 最佳实践

- 使用 Pinia 状态管理
- 使用 `luch-request` 封装网络请求
- 使用 `uni-simple-router` 路由管理
- 使用 `uni-promisify` Promise 化 API
- 使用 `vk-unicloud` 云开发