关于 uni-app
uni-app 是基于 Vue.js 的跨平台开发框架，面向需要构建移动端、Web 和小程序应用的开发者。它提供通用组件与 API，并可通过条件编译处理平台差异。
主要功能
- 01支持 iOS、Android、HarmonyOS 和 Web
- 02支持多个小程序平台
- 03提供可复用的界面与表单组件
- 04提供网络、存储和设备 API
- 05通过条件编译适配平台差异
适用场景
- 01构建适配多个移动平台的应用
- 02开发响应式 Web 应用
- 03开发小程序应用
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/uni-app确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/config-manifest.mdconfig-pages.mdcore-form-components.mdcore-framework.mdcore-view-components.mdfeature-file-operations.mdfeature-lifecycle.mdfeature-location.mdfeature-media-components.mdfeature-navigation.mdfeature-network.mdfeature-storage.mdfeature-system-info.mdfeature-ui-feedback.md详细介绍
此技能基于 uni-app 文档生成，生成时间为 2026-01-30。
uni-app 是一个基于 Vue.js 的跨平台框架，用于开发可在 iOS、Android、HarmonyOS、Web（响应式）和各种小程序平台（微信／支付宝／百度／抖音／飞书／QQ／快手／钉钉／淘宝／京东／小红书）上运行的应用。
核心
| 主题 | 描述 | 参考 |
|---|---|---|
| 核心框架 | 项目结构、平台支持、条件编译 | core-framework |
| 视图组件 | view、scroll-view、swiper、movable-area、cover-view | core-view-components |
| 表单组件 | input、textarea、picker、checkbox、radio、switch、slider | core-form-components |
功能
UI 组件
| 主题 | 描述 | 参考 |
|---|---|---|
| 媒体组件 | image、video、camera、live-player、map | feature-media-components |
| 导航 | navigator、路由、页面导航 | feature-navigation |
| UI 反馈 | toast、modal、loading、action sheet、下拉刷新 | feature-ui-feedback |
API
| 主题 | 描述 | 参考 |
|---|---|---|
| 网络 | HTTP 请求、文件上传／下载、WebSocket | feature-network |
| 存储 | 本地存储、文件系统、缓存 | feature-storage |
| 系统信息 | 设备信息、网络状态、屏幕、振动 | feature-system-info |
| 文件操作 | 图片／视频选择、文件系统操作 | feature-file-operations |
| 位置 | 地理定位、地图组件、地址选择 | feature-location |
| 生命周期 | 应用和页面生命周期钩子 | feature-lifecycle |
配置
| 主题 | 描述 | 参考 |
|---|---|---|
| pages.json | 页面路由、标签栏、全局样式、分包 | config-pages |
| manifest.json | 应用配置、权限、平台设置 | config-manifest |
平台支持
| 平台 | 支持级别 |
|---|---|
| iOS 应用 | 完全支持 |
| Android 应用 | 完全支持 |
| HarmonyOS Next | 完全支持 |
| H5／Web | 完全支持 |
| 微信小程序 | 完全支持 |
| 支付宝小程序 | 完全支持 |
| 百度智能小程序 | 完全支持 |
| 抖音小程序 | 完全支持 |
| QQ 小程序 | 完全支持 |
| 快手小程序 | 完全支持 |
| 飞书小程序 | 完全支持 |
| 京东小程序 | 完全支持 |
| HarmonyOS 元服务 | 完全支持 |
核心概念
条件编译
使用特殊注释编写特定平台的代码：
<view>App only</view>
<view>WeChat only</view>
API Promise 支持
大多数 uni-app API 在未提供回调时支持 Promise：
const res = await uni.request({ url: 'https://api.example.com' })
跨平台最佳实践
- 使用 uni-app 组件和 API，而非特定平台的组件和 API
- 使用条件编译实现特定平台的功能
- 在所有目标平台上进行测试
- 使用 rpx 实现响应式布局
- 在 manifest.json 中处理平台差异
评论
支持 Markdown