uniapp-project

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

当用户有以下需求时，可使用此技能：

使用任何uni-app内置组件或uni-ui组件
使用任何uni-app API（网络、存储、设备、UI、导航、媒体等）
获取带有官方文档链接的单个组件/API示例
查看组件和API的平台兼容性
使用官方模式构建跨平台uni-app应用

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

此技能的组织方式与官方uni-app组件和API文档保持一致：

选择组件或API类别:
- 组件 →
```
examples/components/built-in/
```
  和
```
examples/uni-ui/
```
- APIs →
```
examples/api/
```
  （按领域分类）
打开对应的示例文件:
- 每个组件或API都有独立的示例文件
- 每个示例都包含官方文档URL
- 示例与官方文档示例保持一致
需要完整规格时参考参考文档:
- ```
references/components/built-in/
```
  用于内置组件
- ```
references/components/uni-ui/
```
  用于uni-ui组件
- ```
references/api/
```
  用于API的参数/返回值/兼容性细节

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/

示例：
```
examples/components/built-in/*.md
```
参考文档：
```
references/components/built-in/*.md
```
官方文档：https://uniapp.dcloud.net.cn/component/

Components (uni-ui)

组件（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

示例：

examples/uni-ui/*.vue

和

examples/uni-ui/README.md

参考文档：
```
references/components/uni-ui/*.md
```
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html
插件：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/

示例：
```
examples/api/{category}/*.md
```
参考文档：
```
references/api/*.md
```
官方文档：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.

每个组件/API对应一个文件：每个组件和API都有独立的示例文件，包含官方文档链接。
遵循平台兼容性：查看每个示例/参考文档中的兼容性部分。
使用条件编译：使用
```
#ifdef
```
/
```
#endif
```
处理平台特定逻辑。
保持示例一致：以官方文档示例为标准。
优先参考规格文档：使用
```
references/
```
获取完整的参数表和兼容性信息。

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/

组件：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
插件市场：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/
```
目录

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 的详细平台支持情况见对应文档。

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/

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

使用示例

组件使用示例

基础组件使用示例：

vue

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="handleClick">点击按钮</button>
    <image :src="imageUrl" mode="aspectFit"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello UniApp',
      imageUrl: '/static/logo.png'
    }
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮被点击',
        icon: 'success' 
      })
    }
  }
}
</script>

更多组件示例：

内置组件示例：请参考官方文档或
```
references/components/built-in/
```
目录下的组件文档
uni-ui 组件完整示例：见
```
examples/uni-ui/
```
目录（每个组件都有独立的 .vue 示例文件）
组件详细文档：见
```
references/components/built-in/
```
和
```
references/components/uni-ui/
```
目录（每个组件都有独立的文档文件，包含属性、事件、平台兼容性、使用示例）

基础组件使用示例：

vue

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="handleClick">点击按钮</button>
    <image :src="imageUrl" mode="aspectFit"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello UniApp',
      imageUrl: '/static/logo.png'
    }
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮被点击',
        icon: 'success' 
      })
    }
  }
}
</script>

更多组件示例：

内置组件示例：请参考官方文档或
```
references/components/built-in/
```
目录下的组件文档
uni-ui 组件完整示例：见
```
examples/uni-ui/
```
目录（每个组件都有独立的 .vue 示例文件）
组件详细文档：见
```
references/components/built-in/
```
和
```
references/components/uni-ui/
```
目录（每个组件都有独立的文档文件，包含属性、事件、平台兼容性、使用示例）

API 使用示例

javascript

// 网络请求
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/

目录中的详细文档

javascript

// 网络请求
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 作为响应式单位
性能优化：合理使用组件，避免过度嵌套，注意长列表优化

组件层级：原生组件（如 video、map）层级高于普通组件，需要使用 cover-view 覆盖
条件编译：使用
```
#ifdef
```
、
```
#endif
```
处理平台差异
生命周期：注意 uni-app 的页面生命周期和组件生命周期
样式单位：推荐使用 rpx 作为响应式单位
性能优化：合理使用组件，避免过度嵌套，注意长列表优化