【Vue】移动端开发（Uni-app、Taro）

个人主页：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（对比图）

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 上可能功能受限或不支持。

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 常见问题汇总

8. 总结与选型建议

8.1 如何选择 Uni-app 还是 Taro？

• 如果你：

  • 熟悉 Vue；
  • 项目需要发布到 App；
  • 更关注快速上线；
  • → 推荐使用 Uni-app。

• 如果你：

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

8.2 未来趋势预测

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