1. First, let’s figure it out: What is uni-app?

One sentence version:

uni-app = Use Vue syntax, write the code once, and publish it to WeChat mini program / H5 / App / mini program for each platform

technical essence

• Compiler: @dcloudio/uni-cli

• Framework core: Vue 3 (recommended)

• Rendering:

  • Mini program → Compile into corresponding platform DSL
  • H5 → Vue SPA
  • App → native shell (plus/nvue)

2. Learning prerequisites

If you meet the following 80%, you can directly apply for uni-app:

• ✅ HTML / CSS / JS（OK）

• ✅ ES6 (Promise / async / destructuring)

• ✅ Vue 3 Basics (Key Points)

  • ref / reactive
  • computed / watch
  • props / emit
  • setup
  • life cycle

👉 You can learn Vue even if you don’t know it, but it will be twice as slow

3. uni-app core knowledge structure

1️⃣ Project creation & directory structure

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

Core directory:

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

👉 Key points to understand:

• No vue-router
• routes = pages.json
• The page must be registered

2️⃣ Page & Routing Mechanism

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

Commonly used APIs:

• navigateTo
• redirectTo
• switchTab
• navigateBack

Page life cycle (mini program flavor):

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

📌 Frequently asked interview questions:

What is the difference between onLoad and onShow?

3️⃣ Components & Styles (Differences from Vue)

components

• Support Vue components
• Cannot use DOM API directly
• Not supported window / document

style

• Default rpx
• Support scss
• Style Isolation

width: 750rpx;

4️⃣ Data request & interface encapsulation (practical focus)

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

Recommended package:

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

📌 Compare axios:

• Use built-in uni.addInterceptor("request", ...) interceptors; wrap business errors, authentication and retries as needed.Official documentation.
• Pay attention to platform differences

5️⃣ State management (Vuex/Pinia)

👉 2024+ Recommended: Pinia

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

Storage:

uni.setStorageSync('token', token)

6️⃣ Platform difference processing (high-frequency pits)

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

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

📌 You must know it, otherwise the project will explode

4. Actual project route

Actual code github address

Project 1: Basic Project (3–5 days)

Goal: Familiar with uni-app

• Login/Register
• List page + details page
• Interface request
• Page jump
• local cache

Project 2: Complete applet (7–10 days)

Goal: Close to real business

• tabBar
• Permission verification
• Pull down to refresh / pull up to load
• form submission
• Component encapsulation

Project 3: Cross-end project

• same code
• Publish to: WeChat Mini Program + H5
• Handle platform differences

5. Common pitfalls (avoid lightning in advance)

• ❌ Using DOM API
• ❌ Forgot to register pages
• ❌ The page path is written incorrectly
• ❌ H5 is normal, the mini program reports an error
• ❌ use axios directly
• ❌ Abuse of global variables

6. Recommended learning resources (reliable)

• 📘 Official documentation (must read)

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

• 📺Bilibili (keyword)

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