前言
你是否曾经遇到过这样的场景：向 AI 助手询问 uni-app 开发问题，却得到的是通用 Vue 代码，无法直接在 uni-app 中使用？或者 AI 生成的代码完全忽略了 uni-app 的平台差异和特殊 API？
现在，这一切都将成为历史！
uni-app 技能集项目正式发布，为 uni-app 生态带来了革命性的 AI 开发体验。这个项目通过从官方文档自动生成 AI 技能，让 AI 助手能够深度理解 uni-app 的每一个细节，真正成为你的跨平台开发专家。
什么是 Skills？
在 AI 开发领域，"Skills" 是指赋予 AI 助手特定领域知识和能力的技能包。就像人类需要学习专业技能一样，AI 也需要"学习"才能在特定领域发挥最大价值。
uni-app Skills 就是专门为 uni-app 开发定制的 AI 技能包，它包含：
- ✅ uni-app 核心框架知识
- ✅ 跨平台 API 使用规范
- ✅ 条件编译最佳实践
- ✅ uni-helper 生态工具
- ✅ Vue 3 + TypeScript 最佳实践
- ✅ 跨平台性能优化技巧
为什么 uni-app 需要 Skills？
传统 AI 开发的痛点
在 uni-app Skills 出现之前，使用 AI 辅助 uni-app 开发存在以下问题：
1. API 调用不准确
// AI 可能生成的错误代码
axios.get('/api/data') // ❌ uni-app 中应该使用 uni.request
// 正确的代码
uni.request({ url: '/api/data' }) // ✅
2. 忽略平台差异
<!-- AI 可能生成的不兼容代码 -->
<video src="movie.mp4" /> <!-- ❌ 在小程序中可能不兼容 -->
<!-- 正确的代码 -->
<video :src="movieUrl" controls /> <!-- ✅ 使用 uni-app 组件 -->
3. 不了解条件编译
// AI 可能生成的通用代码
if (platform === 'wechat') {
// 微信特定逻辑
}
// 正确的代码
// #ifdef MP-WEIXIN
// 微信特定逻辑
// #endif
uni-app Skills 带来的改变
有了 uni-app Skills，AI 助手将能够：
- 🎯 精准理解 uni-app API：不再混淆 Web API 和 uni-app API
- 🌍 自动处理平台差异：智能使用条件编译
- 📱 生成跨平台兼容代码：一次编写，多端运行
- 🚀 应用最佳实践：遵循 uni-app 官方推荐的开发模式
- 🔧 集成 uni-helper 工具：自动使用插件和工具库
uni-app Skills 的核心能力
1. 深度理解 uni-app 框架
AI 助手现在完全理解 uni-app 的核心概念：
平台支持
- iOS、Android、HarmonyOS Next
- H5/Web
- 微信、支付宝、百度、抖音、飞书、QQ、快手、京东、小红书等 10+ 小程序平台
组件系统
- 视图组件：view、scroll-view、swiper、movable-area
- 表单组件：input、textarea、picker、checkbox、radio、switch
- 媒体组件：image、video、camera、live-player、map
API 能力
- 网络：uni.request、uni.uploadFile、uni.downloadFile、uni.connectSocket
- 存储：uni.setStorage、uni.getStorage、uni.getFileInfo
- 系统：uni.getSystemInfo、uni.getNetworkType、uni.vibrate
- 位置：uni.getLocation、uni.chooseLocation
2. 智能条件编译
AI 助手能够智能使用条件编译处理平台差异：
<template>
<!-- AI 会自动添加条件编译 -->
<view>
<!-- #ifdef APP-PLUS -->
<button @click="scanQRCode">扫码</button>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<button open-type="getUserInfo">获取用户信息</button>
<!-- #endif -->
<!-- #ifdef H5 -->
<button @click="loginWeb">Web 登录</button>
<!-- #endif -->
</view>
</template>
<script setup>
// AI 会根据平台生成不同的实现
// #ifdef APP-PLUS
import { scanQRCode } from '@/utils/native'
// #endif
// #ifdef MP-WEIXIN
import { getUserProfile } from '@/utils/wechat'
// #endif
// #ifdef H5
import { loginWeb } from '@/utils/web'
// #endif
</script>
3. uni-helper 生态集成
AI 助手完全理解 uni-helper 生态，能够智能使用各种插件和工具：
Vite 插件自动配置
// AI 会按照最佳实践配置插件
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import UniComponents from 'vite-plugin-uni-components'
import UniPages from 'vite-plugin-uni-pages'
import UniLayouts from 'vite-plugin-uni-layouts'
export default defineConfig({
plugins: [
UniComponents(),
UniPages(),
UniLayouts(),
Uni(),
],
})
工具库智能调用
// AI 会推荐使用 uni-network 而不是原生 uni.request
import { un } from '@uni-helper/uni-network'
const data = await un.get('/api/users')
4. Vue 3 + TypeScript 最佳实践
AI 助手遵循 Vue 3 和 TypeScript 的最佳实践：
<script setup lang="ts">
// AI 会使用 Composition API 和 TypeScript
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
interface User {
id: number
name: string
avatar: string
}
const users = ref<User[]>([])
const loading = ref(false)
const userCount = computed(() => users.value.length)
onLoad(() => {
fetchUsers()
})
async function fetchUsers() {
loading.value = true
try {
const res = await uni.request({
url: '/api/users',
method: 'GET',
})
users.value = res.data
} finally {
loading.value = false
}
}
</script>
5. MCP 扩展支持
AI 助手集成了 uni-app 官方文档查询工具（MCP），能够：
- 🔍 实时查询官方 API 文档
- 📖 获取最新的代码示例
- ✅ 了解 API 的平台兼容性
- 🎯 提供准确的参数说明
实际开发体验对比
场景 1：实现下拉刷新
没有 Skills 的 AI 回答：
// ❌ 通用 Vue 代码，无法在 uni-app 中使用
import { ref } from 'vue'
const isRefreshing = ref(false)
function onRefresh() {
isRefreshing.value = true
fetchData().finally(() => {
isRefreshing.value = false
})
}
有 Skills 的 AI 回答：
<script setup lang="ts">
import { ref } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
const loading = ref(false)
// ✅ 使用 uni-app 生命周期和 API
onPullDownRefresh(async () => {
loading.value = true
try {
await fetchData()
} finally {
loading.value = false
uni.stopPullDownRefresh() // 停止下拉刷新动画
}
})
</script>
<!-- pages.json 中配置 -->
{
"enablePullDownRefresh": true
}
场景 2：实现图片上传
没有 Skills 的 AI 回答：
// ❌ 使用 Web API，无法在 uni-app 中使用
const input = document.createElement('input')
input.type = 'file'
input.onchange = (e) => {
const file = e.target.files[0]
const formData = new FormData()
formData.append('file', file)
fetch('/upload', { method: 'POST', body: formData })
}
有 Skills 的 AI 回答：
// ✅ 使用 uni-app API，跨平台兼容
async function uploadImage() {
try {
// 选择图片
const res = await uni.chooseImage({
count: 1,
sizeType: ['compressed'],
})
// 上传图片
const uploadRes = await uni.uploadFile({
url: 'https://api.example.com/upload',
filePath: res.tempFilePaths[0],
name: 'file',
})
const data = JSON.parse(uploadRes.data)
console.log('上传成功', data)
} catch (error) {
console.error('上传失败', error)
}
}
场景 3：实现跨平台路由跳转
没有 Skills 的 AI 回答：
// ❌ 使用 Vue Router，无法在 uni-app 中使用
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/pages/detail')
有 Skills 的 AI 回答：
// ✅ 使用 uni-app 路由 API
function navigateToDetail(id: number) {
uni.navigateTo({
url: `/pages/detail/index?id=${id}`,
success: () => {
console.log('跳转成功')
},
fail: (err) => {
console.error('跳转失败', err)
},
})
}
如何使用 uni-app Skills？
安装 Skills
# 安装 uni-app 技能集
pnpx skills add uni-helper/skills
# 或全局安装所有技能
pnpx skills add uni-helper/skills --all -g
在 AI 助手中使用
安装后，AI 助手会自动加载这些技能。你可以：
- 直接提问：向 AI 询问任何 uni-app 开发问题
- 代码生成：让 AI 生成符合 uni-app 规范的代码
- 问题排查：让 AI 帮助诊断和修复 uni-app 相关问题
- 最佳实践：获取 uni-app 开发的最佳实践建议
技术原理
自动文档同步
uni-app Skills 的核心优势在于自动文档同步：
- 从 uni-app 官方文档自动生成技能
- 从 uni-helper 仓库自动生成插件技能
- 定期同步更新，保持与官方文档一致
- 支持增量更新，快速响应 API 变化
这意味着 AI 助手始终掌握最新的 uni-app 知识，不会因为 API 更新而过时。
MCP 扩展集成
项目集成了 Model Context Protocol (MCP) 扩展：
search-docs-by-Uniapp-official：搜索 uni-app 官方文档- 实时获取最新的 API 文档和使用示例
- 查询组件的属性和事件
- 了解 API 的平台兼容性
优势总结
对于开发者
- 🚀 开发效率提升 50%+：AI 生成即用代码，无需修改
- 🎯 减少调试时间：代码符合 uni-app 规范，减少错误
- 📚 学习成本降低：AI 实时解答问题，无需频繁查阅文档
- 🌍 跨平台开发更简单：AI 自动处理平台差异
- 💡 最佳实践自动应用：代码质量更有保障
对于团队
- 🔄 代码风格统一：AI 遵循统一的编码规范
- 📖 知识共享：团队成员都能获得 AI 辅助
- 🎓 新人快速上手：AI 帮助新人快速理解 uni-app
- 🛡️ 减少技术债务：代码质量更高，维护成本更低
对于项目
- ⚡ 开发周期缩短：AI 辅助加速开发进程
- 🐛 Bug 率降低：代码更规范，错误更少
- 🔧 维护成本降低：代码结构更清晰
- 📈 项目质量提升：遵循最佳实践
未来展望
uni-app Skills 项目将持续演进：
- 🔄 持续同步：与官方文档保持同步
- 🆕 新增技能：覆盖更多 uni-app 生态工具
- 🤖 AI 优化：根据开发者反馈优化 AI 回答
- 📚 文档完善：提供更详细的技能说明
- 🌐 社区共建：欢迎开发者贡献技能
立即体验
现在就开始体验 AI 驱动的 uni-app 开发：
# 安装 uni-app 技能集
pnpx skills add uni-helper/skills --all -g
# 创建新项目
npm create uni@latest
# 开始你的 AI 辅助开发之旅！
让 AI 成为你的 uni-app 开发伙伴，开启智能跨平台开发新时代！
最后
@uni-helper/skills是一个免费的开源软件，遵循MIT协议，社区的赞助使其能够有更好的发展。
你的赞助会帮助我更好的维护@uni-helper，如果对你有帮助，请考虑赞助一下😊
你的star🌟也是对我的很大鼓励，Github
欢迎反馈问题和提pr共建
