uniapp-project

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, cross-platform, components, API, official documentation

examples/api/network/ - Network request API examples
examples/api/storage/ - Data storage API examples
examples/api/device/ - Device information API examples
examples/api/ui/ - UI interaction API examples
examples/api/location/ - Location service API examples
examples/api/media/ - Media processing API examples
examples/api/navigation/ - Page routing API examples
examples/api/file/ - File operation API examples
examples/api/payment/ - Payment API examples
examples/api/share/ - Share API examples
examples/api/other/ - Other API examples
examples/uni-ui/ - Complete example code for uni-ui components (each component has an independent .vue file)

Use cases: When you need to view complete usage examples of components or APIs, refer to the example files in this directory. Each example file contains all example scenarios shown on the official website and can be copied and used directly.

Note：

references/ and examples/ have different responsibilities and should not be merged. references/ provides documentation, and examples/ provides runnable code.
Each component and API has an independent example file, including the original documentation address and all examples from the official website
The example code for built-in components is in the examples/components/built-in/ directory
The example code for APIs is in the examples/api/ directory, organized by category
The complete example code for uni-ui components is in the examples/uni-ui/ directory

Platform support

uni-app supports the following platforms:

H5: Web browser
WeChat Mini Program：WeChat Mini Program
Alipay Mini Program：Alipay Mini Program
Baidu Mini Program：Baidu Smart Program
ByteDance Mini Program：ByteDance Mini Program
QQ Mini Program：QQ Mini Program
Kuaishou Mini Program：Kuaishou Mini Program
App：iOS、Android（nvue、vue）
Quick App：Quick App

For detailed platform support of each component and API, see the corresponding documentation.

Reference resources

Official documentation：https://uniapp.dcloud.net.cn/
Component documentation：https://uniapp.dcloud.net.cn/component/
API documentation：https://uniapp.dcloud.net.cn/api/
Plugin market：https://ext.dcloud.net.cn/
Community Q&A：https://ask.dcloud.net.cn/

Usage examples

Component usage examples

Basic component usage examples:

<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>

More component examples：

Built-in component examples: Please refer toofficial documentationor references/components/built-in/ component documentation in the directory
Complete uni-ui component examples: See examples/uni-ui/ directory (each component has an independent .vue example file)
Detailed component documentation: See references/components/built-in/ and references/components/uni-ui/ directory (each component has an independent documentation file, including properties, events, platform compatibility, and usage examples)

API usage examples

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

More API examples: See references/api/ detailed documentation in the directory

Notes

Component hierarchy: Native components (such as video, map) have a higher hierarchy than ordinary components and need to be covered with cover-view
Conditional compilation: Use #ifdef、#endif to handle platform differences
Lifecycle: Pay attention to uni-app's page lifecycle and component lifecycle
Style units: It is recommended to use rpx as the responsive unit
Performance optimization: Use components appropriately, avoid excessive nesting, and pay attention to long list optimization