uniapp-project by teachingai/full-stack-skills
npx skills add https://github.com/teachingai/full-stack-skills --skill uniapp-project当用户想要:
此技能的组织方式与官方 uni-app 组件和 API 文档相匹配:
examples/components/built-in/ 和 examples/uni-ui/examples/api/(按领域分类)references/components/built-in/ 用于内置组件references/components/uni-ui/ 用于 uni-ui 组件广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
references/api/ 用于 API 参数/返回值/兼容性详情examples/components/built-in/*.mdreferences/components/built-in/*.mdexamples/uni-ui/*.vue 和 examples/uni-ui/README.mdreferences/components/uni-ui/*.mdexamples/api/{category}/*.mdreferences/api/*.md#ifdef/#endif。references/ 获取完整的参数表和兼容性信息。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 的完整使用示例时,参考此目录下的示例文件。每个示例文件包含官网展示的所有示例场景,可直接复制使用。
注意:
examples/components/built-in/ 目录examples/api/ 目录,按分类组织examples/uni-ui/ 目录uni-app 支持以下平台:
每个组件和 API 的详细平台支持情况见对应文档。
基础组件使用示例:
<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/ 目录下的组件文档examples/uni-ui/ 目录(每个组件都有独立的 .vue 示例文件)references/components/built-in/ 和 references/components/uni-ui/ 目录(每个组件都有独立的文档文件,包含属性、事件、平台兼容性、使用示例)// 网络请求
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/ 目录中的详细文档
#ifdef、#endif 处理平台差异Weekly Installs
413
Repository
GitHub Stars
205
First Seen
Jan 24, 2026
Security Audits
Installed on
opencode282
codex276
gemini-cli272
claude-code264
github-copilot261
amp249
Use this skill whenever the user wants to:
This skill is organized to match the official uni-app components and API documentation:
Choose component or API category :
examples/components/built-in/ and examples/uni-ui/examples/api/ (categorized by domain)Open the matching example file :
Use references when you need full specs :
references/components/built-in/ for built-in componentsreferences/components/uni-ui/ for uni-ui componentsreferences/api/ for API parameter/return/compatibility detailsexamples/components/built-in/*.mdreferences/components/built-in/*.mdexamples/uni-ui/*.vue and examples/uni-ui/README.mdreferences/components/uni-ui/*.mdexamples/api/{category}/*.mdreferences/api/*.md#ifdef/#endif for platform-specific logic.references/ for full parameter tables and compatibility.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 示例使用场景 :当需要查看组件或 API 的完整使用示例时,参考此目录下的示例文件。每个示例文件包含官网展示的所有示例场景,可直接复制使用。
注意 :
examples/components/built-in/ 目录examples/api/ 目录,按分类组织examples/uni-ui/ 目录uni-app 支持以下平台:
每个组件和 API 的详细平台支持情况见对应文档。
基础组件使用示例:
<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/ 目录下的组件文档examples/uni-ui/ 目录(每个组件都有独立的 .vue 示例文件)references/components/built-in/ 和 references/components/uni-ui/ 目录(每个组件都有独立的文档文件,包含属性、事件、平台兼容性、使用示例)// 网络请求
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/ 目录中的详细文档
#ifdef、#endif 处理平台差异Weekly Installs
413
Repository
GitHub Stars
205
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode282
codex276
gemini-cli272
claude-code264
github-copilot261
amp249
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
138,300 周安装
examples/api/share/examples/api/other/ - 其他 API 示例examples/uni-ui/ - uni-ui 组件的完整示例代码(每个组件一个独立的 .vue 文件)