Uniapp 入门指南：掌握多端开发的利器 – wiki基地

---

UniApp 入门指南：掌握多端开发的利器

前言：为何选择 UniApp？多端开发的痛点与解决方案

在移动互联网时代，应用的存在形式日益多样化。从传统的原生 App (Android/iOS)，到网页应用 (H5)，再到微信、支付宝、百度、抖音等各式各样的小程序，开发者需要覆盖的平台越来越多。

传统的开发模式面临着巨大的挑战：

1. 开发成本高昂： 每个平台都需要独立的团队或开发者，使用不同的技术栈（Java/Kotlin for Android, Objective-C/Swift for iOS, Vue/React/Angular for Web, 各平台特定的技术栈 for Mini Programs），导致人力成本居高不下。
2. 维护效率低下： 同一个功能需要在多个代码库中实现和维护， Bug 修复、功能迭代都需要在不同平台重复进行，效率低下且容易出现平台间的不一致。
3. 学习曲线陡峭： 掌握多个平台的技术栈需要投入大量时间和精力。

为了解决这些痛点，跨平台开发框架应运而生。它们的目标是让开发者能够“一次编写，多处运行”(Write Once, Run Anywhere)，大幅提升开发效率，降低维护成本。

UniApp 正是这一领域的佼佼者。它是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（H5）、以及各种小程序（微信、支付宝、百度、字节跳动、QQ、快手、京东等）等多个平台。 UniApp 凭借其成熟的 Vue 技术栈、强大的多端编译能力、丰富的生态和活跃的社区，正迅速成为国内多端开发的首选框架。

本篇文章将带你深入了解 UniApp 的核心概念、环境搭建、项目结构，以及如何利用它开启你的多端开发之旅。无论你是前端开发者想拓展移动端和小程序领域，还是其他背景的开发者对多端开发感兴趣，UniApp 都值得你投入时间学习。

第一章：认识 UniApp – 它是如何工作的？

1.1 UniApp 是什么？

UniApp 是由 DCloud 公司开发的一款基于 Vue.js 的多端开发框架。它的核心思想是，开发者使用 Vue.js 的语法、组件和 API 进行开发，然后 UniApp 的编译器会将这套代码编译生成适配不同平台的代码。

想象一下，你用 Vue.js 的方式写了一个 <template>、<script>、<style> 组成的组件，UniApp 的编译器会智能地将这个组件的模板、逻辑和样式转换成：

• 在 Web (H5) 端是标准的 HTML、JavaScript 和 CSS。
• 在微信小程序端是 WXML、WXSS 和 JavaScript。
• 在支付宝小程序端是 AXML、ACSS 和 JavaScript。
• 在原生 App (Android/iOS) 端是基于 Weex 或 UniApp 自定义渲染引擎的原生 UI 组件和模块调用。

这个编译过程是 UniApp 实现“一次编写，多处运行”的关键。它屏蔽了不同平台底层技术的差异，让开发者可以专注于业务逻辑本身。

1.2 UniApp 的核心技术栈

• Vue.js： 作为 UniApp 的开发基础，Vue.js 提供了组件化开发、响应式数据绑定、模板语法等核心能力。熟悉 Vue.js 是学习 UniApp 的前提，但即使不完全精通，也可以通过 UniApp 的学习来加深对 Vue 的理解。
• Weiui： UniApp 提供了一套内置的组件和 API (uni.*)，这套组件和 API 经过了多端适配。例如，uni.request 用于发起网络请求，它在不同平台底层会调用各自的网络 API；<view> 组件在 Web 上编译成 <div>，在小程序上编译成 <view>，在 App 上编译成对应的原生视图组件。这套多端兼容的组件和 API 是 UniApp 能够抹平平台差异的关键。
• 编译器： UniApp 的编译器是其核心竞争力所在。它负责解析 .vue 文件以及项目的各种配置文件（如 pages.json, manifest.json），并根据目标平台生成相应的代码。

1.3 UniApp 的优势 (为何选择它？)

• 真正的多端覆盖： 支持当前主流的 Web (H5)、原生 App (Android/iOS)、微信/支付宝/百度/字节跳动/QQ/快手/京东等众多小程序平台，覆盖面极广。
• 基于成熟的 Vue.js： 拥有庞大的开发者基础和丰富的生态资源。对于 Vue 开发者来说，学习成本非常低。
• 组件化开发： 沿用 Vue 的组件化思想，代码结构清晰，易于复用和维护。
• 丰富的内置组件和 API： UniApp 提供了大量覆盖常用功能的内置组件和 API，无需依赖第三方库即可完成大部分常见任务（如网络请求、本地存储、设备信息获取、文件操作等）。
• 性能良好： 在小程序端表现与原生小程序接近；在 App 端，通过其渲染机制（基于 Weex 或 UniApp 自带的 UniView 渲染引擎），可以达到接近原生的体验，尤其是在非复杂动画和操作场景下。
• 开发效率高： 一套代码多端运行，开发效率大幅提升。
• 强大的开发工具 HBuilderX： DCloud 提供的 HBuilderX IDE 为 UniApp 开发提供了极大便利，集成了代码提示、语法检查、多端运行预览、打包发布等功能。
• 活跃的社区与丰富的插件市场： 遇到问题容易找到解决方案，可以方便地通过插件市场获取第三方组件和功能模块，避免重复造轮子。
• 渐进式开发： 可以从 H5 或小程序开始，逐步扩展到其他平台。

1.4 UniApp 的局限性 (需要注意)

• 复杂原生功能： 对于需要深度调用平台底层原生能力、复杂图形渲染、高性能游戏等场景，UniApp 可能不如原生开发灵活和高效。虽然 UniApp 提供了原生插件机制，但开发和维护原生插件需要一定的原生开发知识。
• 某些平台特性差异： 尽管 UniApp 做了大量适配，但不同平台本身的功能、UI 组件行为、API 限制（如小程序对包体积、API 调用的限制）依然存在差异，有时需要使用条件编译 (#ifdef) 来处理特定平台的逻辑或样式。
• 调试复杂度： 同时调试多个平台的应用可能会比调试单一平台更复杂。
• 编译过程： 某些复杂项目在编译到多个平台时可能会遇到一些特定的平台兼容性问题。

总体而言，对于绝大多数业务应用场景，UniApp 都能很好地胜任，并且在开发效率和维护成本上具有压倒性优势。

第二章：准备工作 – 搭建 UniApp 开发环境

开始 UniApp 开发前，你需要搭建相应的开发环境。

2.1 安装 Node.js

UniApp 的构建和编译过程依赖于 Node.js 环境以及 npm（或 yarn, cnpm 等）包管理器。

• 下载地址： 访问 Node.js 官方网站 https://nodejs.org/ 下载并安装 LTS (长期支持) 版本。推荐使用 Node.js 12 或更高版本。
• 验证安装： 打开命令行工具（Windows 使用 Command Prompt 或 PowerShell，macOS/Linux 使用 Terminal），输入以下命令验证安装是否成功：
  bash
node -v
npm -v
  如果能正确显示版本号，则表示安装成功。

2.2 选择并安装 IDE – HBuilderX (强烈推荐)

DCloud 官方提供了 HBuilderX，这是一个专为 UniApp 优化和集成的开发环境。它内置了 UniApp 项目模板、语法提示、实时预览、多端运行、打包发布等功能，极大地提高了开发效率。对于初学者来说，使用 HBuilderX 是最简单快捷的方式。

• 下载地址： 访问 HBuilderX 官网 https://www.dcloud.io/hbuilderx.html 下载最新版本的 HBuilderX。推荐下载“正式版”或“App 开发版”，它们包含了 UniApp 开发所需的插件和环境。
• 安装： 下载完成后，解压即可使用，无需额外的安装过程。可以将解压后的文件夹放在你喜欢的位置。

为什么推荐 HBuilderX？

• 开箱即用： 内置 UniApp 运行环境、编译器，无需复杂配置。
• 高效开发： 针对 UniApp 做了大量优化，如智能提示、代码块、实时语法检查等。
• 集成多端运行： 可以直接在 IDE 中运行项目到内置浏览器、外部浏览器、微信小程序开发工具、手机模拟器或真机。
• 集成打包发布： 提供云打包服务（无需搭建原生环境即可打包 App）和本地打包配置。

其他选择 (了解即可)：

你也可以使用 Vue CLI 或 Vite 来创建和管理 UniApp 项目，然后配合 VS Code、WebStorm 等你熟悉的 IDE 进行开发。但这需要额外安装 @vue/cli、@vue/cli-plugin-uni 或 @dcloudio/vite-plugin-uni 等依赖，并且需要自行配置开发环境。对于初学者，HBuilderX 更加友好。

2.3 安装微信开发者工具 (开发微信小程序需要)

如果你的目标平台包含微信小程序，你需要安装微信开发者工具。

• 下载地址： 访问微信小程序官方网站 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下载最新版本。
• 安装与配置： 下载后按提示安装。安装完成后，需要在 HBuilderX 中进行配置：
  • 打开 HBuilderX。
  • 选择菜单栏 工具 -> 设置 -> 运行配置 -> 小程序设置。
  • 找到“微信开发者工具安装路径”，点击右侧的浏览按钮，选择微信开发者工具的安装路径（通常是一个名为 微信web开发者工具 的文件夹）。
  • 确认保存。

2.4 安装其他平台开发者工具 (根据需要)

如果需要开发支付宝、百度、字节跳动等其他平台的小程序，也需要分别下载并安装对应的开发者工具，并在 HBuilderX 中配置相应的路径。

2.5 HBuilderX 运行环境配置 (重要)

在 HBuilderX 中，你可能还需要根据提示安装一些运行模块，例如：

• 内置浏览器： 用于 H5 的快速预览。
• 真机运行环境： 用于连接手机进行 App 调试。
• 各种小程序编译运行环境： HBuilderX 会根据你选择的运行或发布平台自动提示安装所需的插件。

按照 HBuilderX 的提示进行安装即可。确保 Node.js 路径在 HBuilderX 的设置中是正确的，这样才能使用 npm 安装依赖。

至此，你的 UniApp 开发环境就基本搭建完成了。

第三章：创建你的第一个 UniApp 项目

有了 HBuilderX，创建 UniApp 项目变得非常简单。

1. 打开 HBuilderX： 启动你安装好的 HBuilderX。
2. 新建项目： 选择菜单栏 文件 (File) -> 新建 (New) -> 项目 (Project)。
3. 选择项目类型： 在弹出的窗口中，选择 uni-app 项目模板。
4. 填写项目信息：
   • 项目名称： 输入你的项目名称（例如：my-first-uniapp）。
   • 项目路径： 选择项目存放的目录。
   • 项目模板： 选择一个合适的模板。
     • 默认模板 (Default)： 一个包含了基础文件结构和一些简单示例的空白项目，适合从零开始。
     • Hello uni-app： 一个官方提供的功能比较全面的示例项目，包含了 UniApp 各种组件和 API 的使用演示，非常适合新手学习和参考。
     • 其他模板： 也可以选择社区或其他插件市场提供的模板。
     • 对于初学者，推荐先选择 默认模板 从零开始理解结构，或者选择 Hello uni-app 深入了解 UniApp 的能力。这里我们选择 默认模板。
   • 基础框架： 通常选择 Vue 3，但也可以选择 Vue 2。Vue 3 是未来的趋势，推荐使用。
   • uni-ui 模板： 可以选择是否引入 uni-ui 库，这是 DCloud 官方提供的跨平台 UI 组件库。建议勾选，方便后续开发。
5. 创建项目： 点击 创建 按钮。

HBuilderX 会自动为你创建项目所需的目录和文件结构。

第四章：UniApp 项目结构解析

创建项目后，你会在 HBuilderX 的项目管理器中看到类似这样的目录结构（以默认模板为例）：

my-first-uniapp/
├── .hbuilderx/ # HBuilderX 的项目配置
├── .vscode/ # VS Code 的项目配置 (如果你选择使用VS Code)
├── node_modules/ # 项目依赖的 npm 包
├── pages/ # 页面目录
│ └── index/ # 首页目录
│ └── index.vue # 首页文件
├── static/ # 静态资源目录，图片、字体等
├── components/ # 全局组件目录
├── uni_modules/ # uni-app 插件市场模块安装目录
├── unpackage/ # 打包生成的相关文件存放目录
├── App.vue # 应用根组件，相当于 App 的入口文件
├── main.js # 项目入口文件，初始化 vue 实例
├── manifest.json # 应用配置，包含应用名称、图标、权限等
├── pages.json # 页面配置，包含页面路径、窗口样式、tabBar 等
└── uni.scss # scss 全局样式变量 (如果选择了支持scss)

理解这些文件和目录的作用对于开发 UniApp 应用至关重要：

• pages/： 这是你编写所有页面文件的地方。每个子目录通常代表一个页面，子目录下的 .vue 文件就是该页面的内容。例如 pages/index/index.vue 就是应用的首页。pages.json 文件会注册这里的页面路径。
• static/： 用于存放不需要编译处理的静态资源，如图片、字体文件等。在代码中引用时，路径前需要加 /，例如引用 static/logo.png 可以写 /static/logo.png。
• components/： 用于存放可复用的 Vue 组件。这里的组件可以在任何页面或其他组件中使用，但需要先注册（全局注册或局部注册）。
• uni_modules/： 通过 UniApp 插件市场安装的模块会放在这里。插件市场提供了许多实用的第三方组件、API 封装等。
• unpackage/： UniApp 打包生成的目标文件都存放在此目录。例如，H5 资源、小程序项目文件、App 打包中间文件等。这个目录通常是自动生成和管理的，不需要手动修改。
• App.vue： 这是 UniApp 项目的根组件。它不是页面，而是整个应用的入口。你可以在这里编写全局的样式、配置应用生命周期钩子（如 onLaunch 应用启动时触发），以及引入全局组件或样式。
• main.js： 这是项目的主入口文件。它负责创建 Vue 实例，注册应用根组件 (App.vue)，并挂载到 #app 节点（在 H5 环境下）。一些全局配置、第三方库的引入和注册也通常放在这里。
• manifest.json： 非常重要！ 这是一个应用的全局配置文件。它包含了应用的名称、图标、版本号、权限配置、原生插件配置、各个平台的个性化配置（如微信小程序的 AppID、权限设置，App 的打包配置等）。如果你要修改应用名称、图标、设置权限、配置打包参数等，都需要修改这个文件。
• pages.json： 非常重要！ 这是项目的页面路由和窗口样式配置文件。它决定了应用有哪些页面 (pages 字段)，每个页面的路径、导航栏样式、背景颜色等 (globalStyle 和 pages 字段)，以及是否使用底部 TabBar (tabBar 字段)。任何新增的页面都必须在这里注册才能被访问。页面的跳转、Tab 切换等都依赖于此文件的配置。
• uni.scss： 如果你选择了支持 SCSS，这个文件会包含一些 UniApp 预设的 SCSS 变量和混入，方便你编写跨平台的样式。你也可以在这里定义自己的全局 SCSS 变量或样式。

理解 manifest.json 和 pages.json 是掌握 UniApp 开发的关键一步，因为它们控制着应用的全局行为和页面结构。

第五章：UniApp 开发基础 – 页面、组件与样式

UniApp 的开发模式与 Vue.js 单文件组件 (.vue) 非常相似。每个页面或组件都由 <template>, <script>, <style> 三部分组成。

5.1 页面 (.vue 文件)

一个典型的 UniApp 页面文件 pages/index/index.vue 结构如下：

“`vue

“`

关键点：

• <template>： 使用 Vue 的模板语法编写 UI 结构。
  • 内置组件： UniApp 提供了一套多端兼容的内置组件，如 <view> (相当于 div)、<text> (相当于 span/text)、<image> (相当于 img)、<scroll-view> 等。尽量使用这些内置组件，而不是 Web 标准的 <div>、<span>、<img> 等（尽管在 H5 平台可以使用）。
  • 数据绑定： {{ title }} 用于显示 data 中的数据。
  • 事件绑定： @click="goToAbout" 绑定点击事件，调用 methods 中的方法。
• <script>： 使用 Vue 的 Options API 或 Composition API 编写页面逻辑。
  • data()： 定义页面数据。
  • methods： 定义页面方法。
  • 页面生命周期钩子： UniApp 提供了特有的页面生命周期钩子，如 onLoad (监听页面加载)、onShow (监听页面显示)、onReady (监听页面初次渲染完成)、onHide (监听页面隐藏)、onUnload (监听页面卸载) 等。它们与 Vue 组件生命周期（created, mounted 等）不同，用于控制页面的整体生命周期。
  • Uni API： 通过 uni.* 调用多端兼容的 API，如 uni.navigateTo 用于页面跳转。
• <style>： 编写页面样式。
  • CSS 语法： 可以使用标准的 CSS 语法。
  • CSS 预处理器： 如果创建项目时选择了，可以使用 SCSS 或 LESS。
  • scoped 属性： 可以添加 scoped 属性使样式只作用于当前组件，避免样式冲突。
  • rpx 单位： 非常重要！ UniApp 引入了 rpx (responsive pixel) 单位，这是一种响应式像素单位。它规定屏幕宽度为 750rpx。在不同宽度的屏幕上，1rpx 代表的实际像素值是不同的，这样可以确保设计稿中的尺寸在不同设备上按比例缩放，实现简单的屏幕适配。例如，设计稿中一个宽度为 375px 的元素，在 UniApp 中可以设置为 375rpx，它在任何设备上都将占据屏幕宽度的一半。推荐在 UniApp 开发中优先使用 rpx 作为尺寸单位。

5.2 组件 (components/ 目录)

组件是可复用的 UI 模块。在 components 目录下创建的 .vue 文件就是组件。

例如，创建一个简单的按钮组件 components/my-button/my-button.vue：

“`vue

“`

在页面中如何使用这个组件？

1. 引入组件： 在页面的 <script> 标签中导入组件。
2. 注册组件： 在 components 选项中注册组件。
3. 使用组件： 在页面的 <template> 中像使用内置组件一样使用它。

“`vue

“`

注意： @ 符号是 UniApp/HBuilderX 项目中默认配置的路径别名，指向项目根目录。

5.3 样式 (<style>) 与 rpx

前面已经提到了 rpx 单位的重要性。理解 rpx 的原理和使用是 UniApp 适配不同屏幕宽度的基础。

• 原理： UniApp 规定屏幕宽度固定为 750rpx。不同设备的屏幕宽度不同，1rpx 代表的实际像素也不同。计算公式：1rpx = (屏幕宽度 / 750) px。
• 使用： 在设置元素的尺寸、内外边距、字体大小等属性时，优先使用 rpx。
• px vs rpx：
  • rpx 用于需要根据屏幕宽度进行等比例缩放的场景。
  • px (像素) 是固定单位，通常用于边框粗细 (border: 1px solid #ccc;) 或不需要缩放的固定尺寸（如某些图标的尺寸）。
• vh, vw： CSS 原生的 vh (viewport height)、vw (viewport width) 单位也可以使用，它们基于视口高度和宽度百分比，有时用于布局也很方便。
• 全局样式： 可以在 App.vue 中编写全局样式。这些样式会作用于所有页面和组件（除非被局部样式覆盖）。也可以在 uni.scss 中定义 SCSS 变量和混入，然后在各个 .vue 文件中引用。
• 内置组件样式： UniApp 的内置组件有一些默认样式，了解它们的默认行为有助于开发。

掌握 rpx 的使用是 UniApp 开发中必须迈过的坎。

第六章：配置 UniApp 项目 (manifest.json & pages.json)

这两个文件是 UniApp 项目的“大脑”，它们控制着应用的整体行为和页面结构。

6.1 manifest.json – 应用配置

manifest.json 文件通常位于项目根目录，使用 JSON 格式。它是根据不同平台需求生成的配置文件。主要包含：

• 基础配置 ("name", "appid", "description", "version"等)： 应用名称、唯一标识 (AppID)、描述、版本号等。AppID 对于发布应用（特别是小程序）非常重要。
• 图标配置 ("icons")： 应用在桌面、加载页等位置显示的图标。
• App 启动页面和样式 ("app-plus")： 原生 App 的启动页样式、状态栏样式等配置。
• 权限配置 ("permission")： App 所需的设备权限（如网络、定位、相机、存储等），不同平台配置方式可能不同。
• 小程序配置 ("mp-weixin", "mp-alipay", 等)： 各个小程序的特有配置，最重要的通常是 appid。
• H5 配置 ("h5")： H5 应用的配置，如页面标题、路由模式等。
• 原生插件配置 ("nativePlugins")： 如果使用了原生插件，需要在这里配置。

修改示例：

json
{
"name": "我的第一个UniApp应用", // 修改应用名称
"appid": "__UNI__XXXXXX", // 你的 AppID
"description": "这是一个UniApp示例应用",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false, // 是否开启 px 转 rpx，默认开启 (HBuilderX 新建项目默认可能不生成此项，但它是存在的概念)
"app-plus": { // App 相关配置
"splashscreen": { // 启动屏
"alwaysShowBeforeRender": true,
"autoclose": true,
"waiting": true,
"delay": 0
},
"statusbar": { // 状态栏
"immersed": "supportedDevice", // 支持沉浸式
"style": "black" // 状态栏文字颜色
},
// ... 其他 App 配置
},
"mp-weixin": { // 微信小程序配置
"appid": "wxXXXXXXXXXXXXXX", // 你的微信小程序 AppID
"setting": {
"urlCheck": false // 开发阶段可以关闭域名检查
},
"usingComponents": true // 启用自定义组件
},
"h5": { // H5 配置
"title": "UniApp H5应用", // H5 页面标题
"router": {
"mode": "history", // 路由模式：history 或 hash
"base": "/"
},
"optimization": {
"treeShaking": {
"enable": true
}
}
}
// ... 其他平台配置
}

注意： 大多数配置项都有默认值，但涉及到应用身份标识（如 AppID）和特定平台行为时，必须在这里进行配置。

6.2 pages.json – 页面路由和窗口样式配置

pages.json 文件也位于项目根目录，同样使用 JSON 格式。它定义了应用的所有页面及其外观。

核心字段：

• pages： 这是一个数组，定义了应用中所有的页面。数组的第一个元素是应用的首页。每个元素是一个对象，包含 path (页面路径，相对于 pages 目录) 和 style (页面窗口样式，如导航栏标题、颜色、是否显示滚动条等)。
• globalStyle： 全局窗口样式。在这里配置的样式会作用于所有页面，除非被页面的 style 配置覆盖。
• tabBar： 底部 TabBar 配置。如果配置了 TabBar，应用底部会出现一个 Tab 导航栏。它是一个对象，包含 Tab 项列表 (list)、样式 (color, selectedColor, backgroundColor, borderStyle) 等。

示例：

json
{
"pages": [ // 页面列表
{
"path": "pages/index/index", // 首页路径
"style": { // 首页窗口样式
"navigationBarTitleText": "UniApp 首页" // 导航栏标题
}
},
{
"path": "pages/about/about", // 关于页面路径
"style": {
"navigationBarTitleText": "关于我们",
"navigationBarBackgroundColor": "#f8f8f8", // 导航栏背景色
"enablePullDownRefresh": true // 是否开启下拉刷新
}
}
// ... 其他页面
],
"globalStyle": { // 全局窗口样式
"navigationBarTextStyle": "black", // 导航栏标题颜色
"navigationBarTitleText": "我的应用", // 默认导航栏标题
"navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色
"backgroundColorTop": "#F4F5F6", // 顶部下拉背景颜色
"backgroundColorBottom": "#F4F5F6" // 底部上拉背景颜色
},
"tabBar": { // 底部 TabBar
"color": "#7A7E83", // TabBar 文字未选中颜色
"selectedColor": "#3cc51f", // TabBar 文字选中颜色
"borderStyle": "black", // TabBar 边框颜色
"backgroundColor": "#ffffff", // TabBar 背景色
"list": [ // Tab 项列表
{
"pagePath": "pages/index/index", // Tab 对应的页面路径
"iconPath": "static/tabbar/home.png", // 未选中图标路径
"selectedIconPath": "static/tabbar/home_selected.png", // 选中图标路径
"text": "首页" // Tab 文字
},
{
"pagePath": "pages/about/about",
"iconPath": "static/tabbar/about.png",
"selectedIconPath": "static/tabbar/about_selected.png",
"text": "关于"
}
]
}
}

重要规则：

• 所有页面都必须在 pages 数组中注册。
• pages 数组的第一个元素是启动页。
• 如果配置了 tabBar，则 tabBar.list 中的页面必须在 pages 中注册，并且这些 Tab 页面不能通过 uni.navigateTo 跳转（会失败），只能通过 uni.switchTab 跳转。
• pages 中未在 tabBar.list 中配置的页面称为非 Tab 页面，可以通过 uni.navigateTo, uni.redirectTo 等跳转。
• uni.navigateTo 会保留当前页面栈，适合跳转到详情页等非 Tab 页面；uni.redirectTo 会关闭当前页面，跳转到目标页面；uni.reLaunch 会关闭所有页面，打开目标页面；uni.switchTab 只能跳转到 Tab 页面，会关闭其他非 Tab 页面。

熟练掌握 manifest.json 和 pages.json 的配置是 UniApp 开发中必不可少的一环。

第七章：UniApp API – 掌握多端能力

UniApp 通过 uni.* 前缀提供了一套统一的 API 接口，这些 API 在不同平台底层会调用各自原生的能力，实现了跨平台兼容。

一些常用的 uni.* API 示例：

• 网络请求：
  • uni.request(Object): 发起网络请求。用法类似 axios 或小程序自带的 wx.request。
    javascript
uni.request({
url: 'https://example.com/api/data', // 接口地址
method: 'GET', // 请求方式
data: { // 参数
id: 123
},
success: (res) => {
console.log('请求成功', res.data);
},
fail: (err) => {
console.error('请求失败', err);
},
complete: () => {
console.log('请求完成');
}
});
• 本地存储：
  • uni.setStorage(Object) / uni.setStorageSync(String key, Any data): 异步/同步设置本地存储。
  • uni.getStorage(Object) / uni.getStorageSync(String key): 异步/同步获取本地存储。
  • uni.removeStorage(Object) / uni.removeStorageSync(String key): 异步/同步移除本地存储。
  • uni.clearStorage() / uni.clearStorageSync(): 异步/同步清空本地存储。
• 交互反馈：
  • uni.showToast(Object): 显示消息提示框。
  • uni.hideToast(): 隐藏消息提示框。
  • uni.showLoading(Object): 显示 loading 提示框。
  • uni.hideLoading(): 隐藏 loading 提示框。
  • uni.showModal(Object): 显示模态对话框。
  • uni.showActionSheet(Object): 显示操作菜单。
• 设备信息：
  • uni.getSystemInfo(Object) / uni.getSystemInfoSync(): 获取设备系统信息（屏幕宽度、高度、平台、系统版本等）。这个 API 常用于根据不同设备信息进行适配。
• 页面跳转与导航： (前面已介绍)
  • uni.navigateTo(Object)
  • uni.redirectTo(Object)
  • uni.switchTab(Object)
  • uni.reLaunch(Object)
  • uni.navigateBack(Object)
• 选择图片/拍照：
  • uni.chooseImage(Object): 从本地相册选择图片或使用相机拍照。
• 获取位置：
  • uni.getLocation(Object): 获取当前的地理位置。
• 支付：
  • uni.requestPayment(Object): 发起支付。不同平台（微信支付、支付宝支付等）参数不同。
• 调用第三方服务：
  • uni.login(Object): 登录（通常用于获取用户授权凭证）。
  • uni.getUserInfo(Object): 获取用户信息（小程序中通常需要用户授权）。

这只是 UniApp API 的冰山一角。完整的 API 文档可以在 UniApp 官方文档中查阅 (https://uniapp.dcloud.net.cn/api/)。学习并熟练使用这些 uni.* API 是进行多端开发的关键。

第八章：运行与调试

在 HBuilderX 中运行和调试 UniApp 项目非常方便：

1. 打开项目： 在 HBuilderX 中打开你的 UniApp 项目。
2. 选择运行平台： 在 HBuilderX 菜单栏选择 运行 (Run)。
   • 运行到浏览器 (Run to Browser)： 用于快速预览 H5 效果。可以选择内置浏览器或外部浏览器。
   • 运行到小程序模拟器 (Run to Mini Program Simulator)： 选择你想运行的小程序平台（如微信开发者工具、支付宝小程序 Studio）。前提是已经在 HBuilderX 设置中配置了相应工具的路径。HBuilderX 会编译项目并在对应的开发者工具中打开。
   • 运行到内置模拟器 (Run to Built-in Mobile Emulator)： HBuilderX 内置了一个简单的 App 模拟器，可以快速预览 App 效果（但功能有限）。
   • 运行到手机或模拟器 (Run to Mobile Phone or Emulator)： 将项目编译并运行到连接电脑的手机或已启动的 Android/iOS 模拟器上进行真机调试。需要手机开启开发者模式和 USB 调试，并安装 HBuilderX 的调试基座（首次运行时 HBuilderX 会提示安装）。

调试方式：

• H5 (浏览器)： 使用浏览器自带的开发者工具（F12）进行调试，就像调试普通网页一样。可以看到 DOM 结构、CSS 样式、JavaScript 控制台输出、网络请求等。
• 小程序： 在对应的小程序开发者工具中进行调试。小程序开发者工具通常提供了类似浏览器的调试功能，并且有小程序特有的视图、网络、存储、调试器等面板。
• App (内置模拟器/真机)： 在 HBuilderX 的控制台中可以看到 console.log 的输出。进行更详细的调试通常需要：
  • 使用 HBuilderX 自带的调试功能 (需要安装基座)。
  • 在 Chrome 浏览器中访问 chrome://inspect (需要科学上网或使用特殊的代理) 来调试 App 的 WebView 部分（H5 页面）和 JavaScript 逻辑。具体步骤可以在 UniApp 官方文档中查找。

学会利用不同平台的调试工具是解决开发中遇到的问题的关键。

第九章：发布你的 UniApp 应用

完成开发后，你可以通过 HBuilderX 将 UniApp 项目发布到各个平台：

1. 选择发布平台： 在 HBuilderX 菜单栏选择 发行 (Publish)。
2. 发布到 H5 (Publish to H5)：
   • 选择 网站-H5手机版。
   • 配置项目路径、标题等。
   • 点击 发行。
   • HBuilderX 会在 unpackage/dist/build/h5 目录下生成静态文件。将这些文件上传到你的 Web 服务器即可。
3. 发布到小程序 (Publish to Mini Program)：
   • 选择对应的小程序平台（如 微信小程序）。
   • 配置小程序 AppID (确保 manifest.json 中已填写正确)。
   • 点击 发行。
   • HBuilderX 会在 unpackage/dist/build/mp-[platform] 目录下生成对应小程序开发工具可识别的项目文件。在对应的小程序开发者工具中导入这个项目，然后按照小程序平台的流程进行上传、提审。
4. 发布到 App (Publish to App Store/Google Play)：
   • 选择 原生App-云打包 或 原生App-本地打包。
   • 云打包 (推荐初学者)： DCloud 提供了云打包服务。你只需要配置 App 信息、证书（Android 的 keystore 或 iOS 的证书及 Profile），上传代码到云端，由云服务器完成编译打包。无需在本地搭建复杂的原生开发环境 (Android Studio, Xcode)。这是最便捷的方式。
   • 本地打包： 需要你在本地安装并配置好 Android Studio 和 Xcode，然后通过命令行或 HBuilderX 调用本地环境进行打包。过程相对复杂，适合有原生开发经验的开发者。

发布过程的细节会因平台和选择的打包方式而异，具体步骤请参考 UniApp 官方文档。

第十章：提升与进阶

掌握了 UniApp 的基础知识后，你可以进一步学习以下内容来提升你的开发技能：

• uni-ui 组件库： 学习使用官方提供的跨平台 UI 组件库，可以快速构建美观的界面。
• UniApp 插件市场： 探索和使用插件市场的丰富资源，如第三方 UI 库、API 封装、功能模块等。
• 状态管理： 在大型应用中引入 VueX 或 Pinia 进行跨页面/组件的状态管理。
• 条件编译 (#ifdef, #ifndef)： 学习如何在同一份代码中编写针对特定平台的逻辑或样式，处理平台差异。
• 原生插件开发： 如果需要调用 UniApp 未封装的原生能力，可以学习如何开发和使用原生插件。
• 性能优化： 学习 UniApp 的性能优化技巧，如组件懒加载、图片优化、网络请求优化等。
• UniCloud： 了解 DCloud 提供的云开发平台 UniCloud，它可以为你的 UniApp 应用提供后端服务（数据库、云函数、存储等），进一步简化开发流程。

总结：掌握 UniApp，开启高效多端开发之旅

UniApp 作为一个基于 Vue.js 的多端开发框架，极大地降低了多平台应用开发的门槛。通过本篇指南，你应该对 UniApp 有了初步的认识，了解了它的工作原理、开发环境搭建、项目结构、基础开发方式以及如何运行和发布。

掌握 UniApp，意味着你可以用一套熟悉的 Web 技术栈，快速构建并部署应用到当下最主流的各个平台，无论是 H5、小程序还是原生 App。这将显著提升你的开发效率，扩大你的技能应用范围。

多端开发并非意味着完全没有差异，不同平台依然有其自身的特性和限制。成为一名优秀 UniApp 开发者的关键在于：

1. 扎实的 Vue.js 基础： UniApp 的核心是 Vue，熟悉 Vue 的开发模式至关重要。
2. 理解 UniApp 的多端机制： 了解 UniApp 如何编译、如何通过 uni.* API 抹平平台差异，以及 rpx 单位的使用。
3. 熟悉 manifest.json 和 pages.json： 掌握应用的全局配置和页面路由控制。
4. 善用官方文档和社区资源： UniApp 官方文档是最好的学习资料，遇到问题时查阅文档或在社区提问是高效解决问题的方法。
5. 实践、实践、再实践： 动手去创建项目、实现功能、尝试在不同平台运行和调试，才能真正掌握 UniApp。

现在，是时候打开 HBuilderX，创建你的第一个 UniApp 项目，迈出多端开发的第一步了！祝你开发顺利！

---