When to use this skill
Use this skill whenever the user wants to:
Use any uni-app built-in component or uni-ui component Use any uni-app API (network, storage, device, UI, navigation, media, etc.) Access per-component or per-API examples with official doc links Check platform compatibility for components and APIs Build cross-platform uni-app applications with official patterns How to use this skill
This skill is organized to match the official uni-app components and API documentation:
Choose component or API category:
Components → examples/components/built-in/ and examples/uni-ui/ APIs → examples/api/ (categorized by domain)
Open the matching example file:
Each component or API has its own example file Each example includes the official documentation URL Examples mirror the official documentation examples
Use references when you need full specs:
references/components/built-in/ for built-in components references/components/uni-ui/ for uni-ui components references/api/ for API parameter/return/compatibility details Examples and References Components (Built-in) Examples: examples/components/built-in/.md References: references/components/built-in/.md Official docs: https://uniapp.dcloud.net.cn/component/ Components (uni-ui) Examples: examples/uni-ui/.vue and examples/uni-ui/README.md References: references/components/uni-ui/.md Official docs: https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html Plugin: https://ext.dcloud.net.cn/plugin?id=55 APIs Examples: examples/api/{category}/.md References: references/api/.md Official docs: https://uniapp.dcloud.net.cn/api/ Best Practices One file per component/API: Each component and API has an independent example file with official doc link. Follow platform compatibility: Check the compatibility section in each example/reference. Use conditional compilation: Use #ifdef/#endif for platform-specific logic. Keep examples aligned: Use the official documentation examples as the source of truth. Prefer references for specs: Use references/ for full parameter tables and compatibility. Resources Components: https://uniapp.dcloud.net.cn/component/ APIs: https://uniapp.dcloud.net.cn/api/ uni-ui: https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html Plugin Market: https://ext.dcloud.net.cn/ Keywords
uniapp, uni-app, components, api, built-in components, uni-ui, examples, references, pages.json, manifest.json, H5, App, mini program, 跨平台, 组件, API, 官方文档
examples/api/network/ - 网络请求 API 示例 examples/api/storage/ - 数据存储 API 示例 examples/api/device/ - 设备信息 API 示例 examples/api/ui/ - 界面交互 API 示例 examples/api/location/ - 位置服务 API 示例 examples/api/media/ - 媒体处理 API 示例 examples/api/navigation/ - 页面路由 API 示例 examples/api/file/ - 文件操作 API 示例 examples/api/payment/ - 支付 API 示例 examples/api/share/ - 分享 API 示例 examples/api/other/ - 其他 API 示例 examples/uni-ui/ - uni-ui 组件的完整示例代码（每个组件一个独立的 .vue 文件）
使用场景：当需要查看组件或 API 的完整使用示例时，参考此目录下的示例文件。每个示例文件包含官网展示的所有示例场景，可直接复制使用。
注意：
references/ 和 examples/ 职责不同，不应合并。references/ 提供文档说明，examples/ 提供可运行代码。 每个组件和 API 都有独立的示例文件，包含原文档地址和官网全部示例 内置组件的示例代码在 examples/components/built-in/ 目录 API 的示例代码在 examples/api/ 目录，按分类组织 uni-ui 组件的完整示例代码在 examples/uni-ui/ 目录 平台支持
uni-app 支持以下平台：
H5：Web 浏览器 微信小程序：WeChat Mini Program 支付宝小程序：Alipay Mini Program 百度小程序：Baidu Smart Program 字节跳动小程序：ByteDance Mini Program QQ 小程序：QQ Mini Program 快手小程序：Kuaishou Mini Program App：iOS、Android（nvue、vue） 快应用：Quick App
每个组件和 API 的详细平台支持情况见对应文档。
参考资源 官方文档：https://uniapp.dcloud.net.cn/ 组件文档：https://uniapp.dcloud.net.cn/component/ API 文档：https://uniapp.dcloud.net.cn/api/ 插件市场：https://ext.dcloud.net.cn/ 社区问答：https://ask.dcloud.net.cn/ 使用示例 组件使用示例
基础组件使用示例：
更多组件示例：
内置组件示例：请参考官方文档或 references/components/built-in/ 目录下的组件文档 uni-ui 组件完整示例：见 examples/uni-ui/ 目录（每个组件都有独立的 .vue 示例文件） 组件详细文档：见 references/components/built-in/ 和 references/components/uni-ui/ 目录（每个组件都有独立的文档文件，包含属性、事件、平台兼容性、使用示例） API 使用示例 // 网络请求 uni.request({ url: 'https://api.example.com/data', method: 'GET', success: (res) => { console.log(res.data) }, fail: (err) => { console.error(err) } })
// 数据存储 uni.setStorage({ key: 'userInfo', data: { name: 'John', age: 30 }, success: () => { console.log('存储成功') } })
// 页面跳转 uni.navigateTo({ url: '/pages/detail/detail?id=123' })
更多 API 示例：见 references/api/ 目录中的详细文档
注意事项 组件层级：原生组件（如 video、map）层级高于普通组件，需要使用 cover-view 覆盖 条件编译：使用 #ifdef、#endif 处理平台差异 生命周期：注意 uni-app 的页面生命周期和组件生命周期 样式单位：推荐使用 rpx 作为响应式单位 性能优化：合理使用组件，避免过度嵌套，注意长列表优化