一、先搞清楚：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 / reactive
  • computed / watch
  • props / emit
  • setup
  • 生命周期

👉 不会 Vue 也能学，但会慢一倍

三、uni-app 核心知识结构

1️⃣ 项目创建 & 目录结构

npx degit dcloudio/uni-preset-vue#vite my-uniapp
cd my-uniapp
npm install
npm run dev:mp-weixin

核心目录：

pages/            # 页面（路由即文件）
components/       # 组件
static/           # 静态资源
App.vue           # 全局入口
main.js
pages.json        # 路由 & 页面配置（非常重要）
manifest.json     # 平台配置
uni.scss          # 全局样式变量

👉 重点理解：

• 没有 vue-router
• 路由 = pages.json
• 页面必须注册

2️⃣ 页面 & 路由机制

uni.navigateTo({
  url: '/pages/detail/index?id=1'
})

常用 API：

• navigateTo
• redirectTo
• switchTab
• navigateBack

页面生命周期（小程序味道）：

onLoad()
onShow()
onHide()
onUnload()

📌 面试常问：

onLoad 和 onShow 区别？

3️⃣ 组件 & 样式（和 Vue 的差异）

组件

• 支持 Vue 组件
• 不能直接用 DOM API
• 不支持 window / document

样式

• 默认 rpx
• 支持 scss
• 样式隔离

width: 750rpx;

4️⃣ 数据请求 & 接口封装（实战重点）

uni.request({
  url: 'https://api.xxx.com/list',
  method: 'GET',
  success: res => {
    console.log(res.data)
  }
})

推荐封装：

export const request = (options) => {
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      success: resolve,
      fail: reject
    })
  })
}

📌 对比 axios：

• 无拦截器（要自己封）
• 平台差异要注意

5️⃣ 状态管理（Vuex / Pinia）

👉 2024+ 推荐：Pinia

export const useUserStore = defineStore('user', {
  state: () => ({
    token: ''
  })
})

存储：

uni.setStorageSync('token', token)

6️⃣ 平台差异处理（高频坑）

// #ifdef MP-WEIXIN
// 微信小程序代码
// #endif

// #ifdef H5
// H5 代码
// #endif

📌 一定要会，否则项目会炸

四、实战项目路线

实战代码github地址

项目 1：基础项目（3–5 天）

目标：熟悉 uni-app

• 登录 / 注册
• 列表页 + 详情页
• 接口请求
• 页面跳转
• 本地缓存

项目 2：完整小程序（7–10 天）

目标：接近真实业务

• tabBar
• 权限校验
• 下拉刷新 / 上拉加载
• 表单提交
• 组件封装

项目 3：跨端项目

• 同一套代码
• 发布到：微信小程序 + H5
• 处理平台差异

五、常见坑（提前避雷）

• ❌ 使用 DOM API
• ❌ 忘了注册 pages
• ❌ 页面路径写错
• ❌ H5 正常，小程序报错
• ❌ axios 直接用
• ❌ 滥用全局变量

六、学习资源推荐（靠谱）

• 📘 官方文档（必看）

  • https://uniapp.dcloud.net.cn

• 📺 B站（关键词）

  • uni-app vue3 实战
  • uniapp 小程序 项目