Uni-app基础知识
# 一、先搞清楚：uni-app 是什么？
一句话版：
uni-app = 用 Vue 语法，写一次代码，发布到 微信小程序 / H5 / App / 各平台小程序
# 技术本质
编译器：
@dcloudio/uni-cli框架核心：Vue 3（推荐）
渲染：
- 小程序 → 编译成对应平台 DSL
- H5 → Vue SPA
- App → 原生壳（plus / nvue）
# 二、学习前置（你需要掌握到什么程度）
你如果满足下面 80%，可以直接上 uni-app：
✅ HTML / CSS / JS（OK）
✅ ES6（Promise / async / 解构）
✅ Vue 3 基础（重点）
ref / reactivecomputed / watchprops / emitsetup- 生命周期
👉 不会 Vue 也能学，但会慢一倍
# 三、uni-app 核心知识结构（重点）
# 1️⃣ 项目创建 & 目录结构
npx degit dcloudio/uni-preset-vue#vite my-uniapp
cd my-uniapp
npm install
npm run dev:mp-weixin
1
2
3
4
2
3
4
核心目录：
pages/ # 页面（路由即文件）
components/ # 组件
static/ # 静态资源
App.vue # 全局入口
main.js
pages.json # 路由 & 页面配置（非常重要）
manifest.json # 平台配置
uni.scss # 全局样式变量
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
👉 重点理解：
- 没有 vue-router
- 路由 =
pages.json - 页面必须注册
# 2️⃣ 页面 & 路由机制（必考点）
uni.navigateTo({
url: '/pages/detail/index?id=1'
})
1
2
3
2
3
常用 API：
navigateToredirectToswitchTabnavigateBack
页面生命周期（小程序味道）：
onLoad()
onShow()
onHide()
onUnload()
1
2
3
4
2
3
4
📌 面试常问：
onLoad和onShow区别？
# 3️⃣ 组件 & 样式（和 Vue 的差异）
# 组件
- 支持 Vue 组件
- 不能直接用 DOM API
- 不支持
window / document
# 样式
- 默认
rpx - 支持
scss - 样式隔离
width: 750rpx;
1
# 4️⃣ 数据请求 & 接口封装（实战重点）
uni.request({
url: 'https://api.xxx.com/list',
method: 'GET',
success: res => {
console.log(res.data)
}
})
1
2
3
4
5
6
7
2
3
4
5
6
7
推荐封装：
export const request = (options) => {
return new Promise((resolve, reject) => {
uni.request({
...options,
success: resolve,
fail: reject
})
})
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
📌 对比 axios：
- 无拦截器（要自己封）
- 平台差异要注意
# 5️⃣ 状态管理（Vuex / Pinia）
👉 2024+ 推荐：Pinia
export const useUserStore = defineStore('user', {
state: () => ({
token: ''
})
})
1
2
3
4
5
2
3
4
5
存储：
uni.setStorageSync('token', token)
1
# 6️⃣ 平台差异处理（高频坑）
// #ifdef MP-WEIXIN
// 微信小程序代码
// #endif
// #ifdef H5
// H5 代码
// #endif
1
2
3
4
5
6
7
2
3
4
5
6
7
📌 一定要会，否则项目会炸
# 四、实战项目路线（强烈建议）
实战代码github地址 (opens new window)
# 项目 1：基础项目（3–5 天）
目标：熟悉 uni-app
- 登录 / 注册
- 列表页 + 详情页
- 接口请求
- 页面跳转
- 本地缓存
# 项目 2：完整小程序（7–10 天）
目标：接近真实业务
- tabBar
- 权限校验
- 下拉刷新 / 上拉加载
- 表单提交
- 组件封装
# 项目 3：跨端项目
- 同一套代码
- 发布到：微信小程序 + H5
- 处理平台差异
# 五、常见坑（提前避雷）
- ❌ 使用 DOM API
- ❌ 忘了注册 pages
- ❌ 页面路径写错
- ❌ H5 正常，小程序报错
- ❌ axios 直接用
- ❌ 滥用全局变量
# 六、学习资源推荐（靠谱）
📘 官方文档（必看）
📺 B站（关键词）
uni-app vue3 实战uniapp 小程序 项目
上次更新: 2026/01/24, 09:38:07