個人主頁：Guiat
歸屬專欄：Vue

正文

1. Uni-app 與 Taro 簡介

1.1 什么是 Uni-app？

• Uni-app 是一個使用 Vue.js 開發所有前端應用的框架。
• 支持一次開發，多端部署（H5、小程序、App等）。
• 使用 Vue 的語法規范，兼容大部分 Vue 生態。

1.2 什么是 Taro？

• Taro 是一個多端統一開發解決方案，由京東凹凸實驗室開源。
• 支持 React、Vue、Vue3 等多種框架。
• 支持編譯到微信小程序、H5、React Native 等平臺。

1.3 Uni-app vs Taro（對比圖）

特性	Uni-app	Taro
框架支持	Vue	React / Vue / Vue3
編譯目標	小程序/H5/App/快應用等	小程序/H5/React Native/SSR 等
學習成本	較低（基于 Vue）	中高（需熟悉 React 或 Vue）
社區生態	成熟（DCloud 維護）	成熟（京東維護）
插件系統	自有插件市場	npm 包 + 官方組件庫

---

2. 項目初始化與目錄結構

2.1 初始化 Uni-app 項目

使用 HBuilderX 或命令行：

vue create -p dcloudio/uni-preset-vue my-project

目錄結構如下：

my-project/
├── pages.json              # 頁面配置文件
├── main.js                 # 入口文件
├── App.vue                 # 根組件
├── pages/                  # 頁面目錄
│   └── index/index.vue     # 首頁頁面
└── static/                 # 靜態資源

2.2 初始化 Taro 項目（Vue3 模板）

npm install -g @tarojs/cli
taro init my-taro-project

選擇 Vue3 模板后生成結構如下：

my-taro-project/
├── config/                 # 構建配置
├── src/
│   ├── app.config.ts       # 應用配置
│   ├── app.vue             # 根組件
│   ├── main.ts             # 入口文件
│   └── pages/
│       └── index/index.vue # 頁面組件

---

3. 跨端 API 與組件調用

3.1 常用跨端 API（以 Uni-app 為例）

示例：獲取用戶信息

<template><view @click="getUserInfo">點擊獲取用戶信息</view>
</template><script>
export default {methods: {getUserInfo() {uni.getUserProfile({desc: '用于完善會員資料',success: (res) => {console.log('用戶信息:', res.userInfo);},fail: (err) => {console.error('獲取失敗:', err);}});}}
}
</script>

圖表：常見 API 在不同平臺的支持情況

API 名稱	微信小程序	H5	App	快應用
uni.getUserProfile	?	?	?	?
uni.showToast	?	?	?	?
uni.downloadFile	?	?	?	?

注：部分 API 在 H5 上可能功能受限或不支持。

3.2 平臺條件編譯（Taro）

Taro 提供了條件編譯能力，實現平臺差異化邏輯。

// #ifdef H5
console.log('當前是 H5 環境');
// #endif// #ifdef MP-WEIXIN
import wx from 'weixin-js-sdk';
// #endif

---

4. UI 組件庫推薦

4.1 Uni-app 推薦組件庫

• uView UI：專為 Uni-app 設計的 UI 框架。
• Thor UI：輕量美觀，適合中后臺項目。
• ColorUI：簡潔風格，適合個人項目。

uView 示例：

npm install uview-ui

在 main.js 中引入：

import uView from 'uview-ui';
Vue.use(uView);

在頁面中使用：

<template><u-button type="primary" text="提交"></u-button>
</template>

4.2 Taro 推薦組件庫

• Taroify（官方推薦）：類似 Vant 的組件庫。
• NutUI-Taro：京東出品，支持多端。

NutUI 示例：

安裝：

npm install @nutui/nutui-taro --save

使用按鈕組件：

<template><nut-button type="primary">提交</nut-button>
</template>

---

5. 性能優化策略

5.1 分包加載（適用于 Uni-app）

將頁面拆分為多個子包，減少主包體積。

pages.json 配置分包：

{"subpackages": [{"root": "pagesA","pages": [{ "path": "index", "style": {} }]}],"pages": [{ "path": "index/index", "style": {} }]
}

分包加載流程圖

+-------------+
| 主包 app.js |
+-------------+|v
+------------------+
| 加載子包 pagesA  |
+------------------+|v
+------------------+
| 顯示具體頁面內容 |
+------------------+

5.2 減少重復渲染（Vue 通用）

使用 v-if 替代 v-show 控制是否渲染組件；合理使用 keep-alive 緩存頁面狀態。

---

6. 實際項目案例分析

6.1 電商類項目（Uni-app）

功能模塊：

• 商品展示（瀑布流）
• 購物車管理
• 訂單支付（對接微信支付）
• 用戶中心（本地緩存登錄）

技術點：

• 使用 uni.request() 請求數據；
• 使用 vuex 管理購物車狀態；
• 使用 uView 快速搭建界面。

6.2 社交類項目（Taro + Vue3）

功能模塊：

• 動態發布與評論
• 消息通知（WebSocket）
• 多端同步登錄（OAuth）

技術點：

• 使用 Taro.createSelectorQuery() 獲取 DOM；
• 使用 Pinia 狀態管理；
• 使用 Taroify 組件庫。

---

7. 常見問題與調試技巧

7.1 調試工具推薦

• Chrome DevTools：H5 端調試；
• 微信開發者工具：小程序調試；
• HBuilderX 內置運行工具：Uni-app 調試；
• React DevTools（Taro 使用 React 時）；

7.2 常見問題匯總

問題現象	解決方案
頁面白屏	檢查路由配置和頁面路徑
接口請求失敗	檢查域名白名單與 HTTPS 設置
打包后樣式丟失	使用 CSS-in-JS 或全局樣式注入
Taro 中 Vue 生命周期未觸發	升級 Taro 到最新版本，檢查 setup 語法

---

8. 總結與選型建議

8.1 如何選擇 Uni-app 還是 Taro？

• 如果你：

  • 熟悉 Vue；
  • 項目需要發布到 App；
  • 更關注快速上線；
  • → 推薦使用 Uni-app。

• 如果你：

  • 熟悉 React；
  • 項目更偏向小程序；
  • 需要更高的定制化能力；
  • → 推薦使用 Taro。

8.2 未來趨勢預測

框架	發展趨勢
Uni-app	DCloud 推動生態擴展，向企業級靠攏
Taro	多框架支持增強，生態持續活躍

---

結語
感謝您的閱讀！期待您的一鍵三連！歡迎指正！