个人主页：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	多框架支持增强，生态持续活跃

---

结语
感谢您的阅读！期待您的一键三连！欢迎指正！