uni-app入门介绍：快速了解 – wiki基地

作者： /

uni-app 入门介绍：快速了解与上手指南

前言：跨平台开发的挑战与机遇

在当今移动互联网时代，应用的载体日益多样化。从传统的 iOS 和 Android 原生应用，到轻量级的微信、支付宝、抖音等各类小程序，再到无处不在的 Web 网页，开发者面临着一个巨大的挑战：如何高效地覆盖所有这些平台？

传统的方式是为每个平台单独开发一套应用。这意味着你需要组织多个开发团队，使用不同的技术栈（如 Swift/Objective-C for iOS, Java/Kotlin for Android, 特定小程序开发框架, Vue/React/Angular for Web），维护多套代码库。这不仅开发成本高昂、周期长，而且在功能迭代和维护时也带来了巨大的负担，容易出现不同平台版本功能不一致、Bug 修复不同步等问题。

正是为了解决这一痛点，跨平台开发技术应运而生。从早期的 Hybrid 应用（如 Cordova/PhoneGap）到后来的 React Native、Flutter，它们都在尝试用一套技术栈解决多平台开发的问题。而 uni-app，正是这一领域的佼佼者，并且在支持平台的多样性上走得更远。

本文将带你深入了解 uni-app，帮助你快速掌握其核心概念、优势以及如何迈出上手开发的第一步。

什么是 uni-app？

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信、支付宝、百度、抖音、QQ、快手等）等多个平台。

它由 DCloud (数字天堂) 公司开发并维护。 uni-app 的目标是实现“一套代码，多端发行”，极大地提高了开发效率和降低了维护成本。

简单来说，如果你熟悉 Vue.js，那么你几乎已经掌握了 uni-app 的大部分语法。uni-app 在 Vue.js 的基础上，提供了一套统一的组件和 API，这些组件和 API 会被编译到目标平台的原生组件或相应的实现上。

uni-app 解决了哪些痛点？

  1. 高昂的开发成本： 无需多团队、多技术栈并行开发，节省人力成本。
  2. 漫长的开发周期： 一次开发，多端复用，缩短项目上线时间。
  3. 维护困难： 统一代码库，Bug 修复和功能更新只需在一处进行，降低维护复杂度。
  4. 技术栈碎片化： 统一采用 Vue.js 技术栈，降低学习成本，方便团队协作。
  5. 性能问题： 相较于纯 Web 技术打包的 Hybrid 应用，uni-app 在 App 端和小程序端调用的是更接近原生的组件和 API，性能表现更好。

uni-app 的核心优势

1. 一套代码，多端发行

这是 uni-app 最核心、最具吸引力的优势。它可以将同一份 Vue 代码编译到：

  • App 端： 生成 iOS 和 Android 的原生应用。
  • Web 端： 生成标准的 Vue.js Web 应用，支持 H5。
  • 小程序端： 支持微信、支付宝、百度、抖音、QQ、快手、钉钉、淘宝、飞书等主流小程序平台。
  • 其他平台： 例如 HarmonyOS App（鸿蒙，持续完善中）。

这意味着你的业务逻辑和 UI 组件大部分都可以跨平台复用，极大地提高了开发效率。

2. 熟悉的技术栈：基于 Vue.js

uni-app 深度整合了 Vue.js 的核心特性，包括：

  • 组件化开发： 遵循 Vue 的单文件组件（.vue）规范。
  • 数据驱动： 使用 Vue 的响应式数据绑定。
  • 声明式渲染： 通过模板语法轻松构建 UI。
  • 丰富的生态： 可以引入大量 Vue 生态中的优秀库（需要注意库的兼容性，特别是涉及到 DOM 操作的库）。

如果你已经是 Vue 开发者，学习曲线会非常平缓，可以快速上手。即使是刚接触 Vue 的开发者，Vue 本身的易学性也能让你较快入门。

3. 丰富的组件和 API

uni-app 提供了覆盖常用功能的内置组件（如 view, text, image, scroll-view, button, input 等）和统一的 API（如网络请求 uni.request, 本地存储 uni.setStorage, 位置信息 uni.getLocation 等）。

这些组件和 API 在不同平台上有相应的实现，开发者无需关心底层差异，直接调用即可。同时，uni-app 还支持条件编译，允许你针对特定平台编写差异化代码，以应对不同平台的特性或限制。

4. 高性能体验

uni-app 在 App 端和小程序端，渲染层利用的是平台的原生组件，而非 WebView 中的 DOM 元素。这种方式被称为“原生渲染”。相比于传统的基于 WebView 的 Hybrid 应用，uni-app 的渲染性能更接近原生，带来了更流畅的用户体验。

5. 强大的开发工具：HBuilderX

DCloud 提供了官方的集成开发环境（IDE）HBuilderX，它是为 uni-app 专门优化的。HBuilderX 提供了丰富的功能，包括：

  • 代码智能提示： 对 Vue、uni-app 组件和 API 提供完善的提示。
  • 内置运行环境： 可直接在 IDE 中运行项目到内置浏览器、各种小程序模拟器或连接真机调试。
  • 快速打包发布： 提供可视化界面一键打包 App 和发布到不同平台。
  • 条件编译支持： 内置对条件编译语法的支持。
  • 插件市场： 集成了丰富的插件、组件和模板，方便开发者快速构建应用。

虽然 uni-app 也支持使用 Vue CLI 创建项目并在 VS Code 等其他编辑器中开发，但 HBuilderX 凭借其深度集成和优化，为 uni-app 开发提供了更便捷高效的体验，尤其适合新手入门。

6. 活跃的社区和丰富的资源

uni-app 拥有庞大的开发者社区，遇到问题可以方便地寻求帮助。DCloud 官方提供了详细的文档，以及大量的示例项目、插件和模板，这些资源对于学习和开发非常有价值。

uni-app 的核心概念

了解 uni-app 的一些核心概念，有助于更好地理解其工作原理和开发模式。

1. 项目结构

一个典型的 uni-app 项目具有清晰的目录结构：

  • pages/: 存放应用的所有页面。一个页面通常是一个 .vue 文件，例如 pages/index/index.vue。每个页面都需要在 pages.json 中注册。
  • components/: 存放可复用的 Vue 组件。
  • static/: 存放静态资源，如图片、字体等。注意： 此目录下的文件不会被编译，直接复制到目标平台的相应目录。
  • uni.scss: 全局 SCSS 样式文件，支持 Sass/SCSS 语法。
  • App.vue: 应用的主组件，包含了应用的生命周期函数和全局样式。
  • main.js: 应用的入口文件，创建 Vue 实例并挂载根组件 App.vue。
  • manifest.json: 应用的配置文件，用于配置应用名称、图标、权限、打包设置等。它是 uni-app 项目最重要的配置文件之一。
  • pages.json: 页面路由和导航配置。所有页面都必须在此文件中注册，还可以配置窗口样式、底部 TabBar 等。
  • utils/: 存放常用的工具类函数。

2. 组件与 API

uni-app 提供了基于 Vue 语法的组件和 API。

  • 组件： uni-app 内置组件是对不同平台原生组件的抽象封装。例如，<view> 组件会被编译成 App 端的 UIView (iOS) 或 View (Android)，以及小程序端的 <view>。<text> 用于显示文本，<image> 用于显示图片，等等。你需要使用 uni-app 提供的组件，而不是 Web 标准的 div, span, img 等标签（虽然在 Web 端最终会渲染成这些标签，但在其他平台它们是无效的）。
  • API： uni-app 提供了统一的 JavaScript API 来调用设备能力或平台特性。例如 uni.request 用于网络请求，uni.getSystemInfo 获取设备信息，uni.navigateTo 进行页面跳转。这些 API 在不同平台底层实现不同，但对外暴露的接口是统一的。

3. pages.json (页面路由与配置)

pages.json 是 uni-app 项目中用于配置页面路径、窗口样式、顶部导航和底部 TabBar 的重要文件。

  • pages 数组：定义应用中所有页面的路径和配置。第一个页面路径即为应用的首页。
  • globalStyle: 全局默认窗口样式，应用于所有页面。
  • tabBar: 配置底部 TabBar。

示例：

json
{
"pages": [ // pages 数组中第一项表示应用启动页
{
"path": "pages/index/index", // 页面路径
"style": { // 页面样式
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/about/about",
"style": {
"navigationBarTitleText": "关于我们"
}
}
],
"globalStyle": { // 全局默认样式
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": { // 底部 TabBar 配置
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home_selected.png",
"text": "首页"
},
{
"pagePath": "pages/about/about",
"iconPath": "static/tabbar/about.png",
"selectedIconPath": "static/tabbar/about_selected.png",
"text": "关于"
}
]
}
}

4. manifest.json (应用配置)

manifest.json 是 uni-app 项目的全局配置文件，类似于原生 App 的 AndroidManifest.xml (Android) 或 Info.plist (iOS)，也包含了小程序的各种配置项。

它负责配置应用的名称、图标、版本、权限、App 模块配置、小程序配置等信息。

示例 (部分)：

json
{
"name": "My Awesome App", // 应用名称
"appid": "__UNI__XXXXXXX", // DCloud 分配的 AppID，用于打包 App 和部分平台服务
"description": "uni-app demo", // 应用描述
"versionName": "1.0.0", // 版本名称
"versionCode": "100", // 版本号
"transformPx": false, // 是否将 rpx 转换为 px (HBuilderX 2.7+ 版本 rpx 单位会自动转换)
"app-plus": { // App 端的配置
"modules": { // 需要使用的 App 模块
"Maps": {}, // 地图模块
"VideoPlayer": {} // 视频播放模块
},
"distribute": { // App 打包分发配置
"android": {
// Android 相关配置
},
"ios": {
// iOS 相关配置
}
}
},
"mp-weixin": { // 微信小程序配置
"appid": "wxXXXXXXXXXXXXX", // 微信小程序 AppID
"setting": {
"urlCheck": false // 是否检查合法域名
},
"usingComponents": true // 是否启用小程序组件化
},
"h5": { // H5 配置
"template": "template.h5.html", // H5 模板文件
"router": { // H5 路由模式
"mode": "history", // 可选 history 或 hash
"base": "/"
},
"title": "Web App Title" // H5 页面标题
}
// ... 其他平台配置，如 mp-alipay, mp-baidu, mp-toutiao 等
}

5. 应用生命周期与页面生命周期

uni-app 沿用了 Vue 的生命周期概念，并扩展了 App 和页面的生命周期钩子，以适应多端环境。

App 生命周期 (在 App.vue 中定义):

  • onLaunch: 应用启动时触发，全局只触发一次。
  • onShow: 应用进入前台时触发。
  • onHide: 应用进入后台时触发。
  • onError: 应用发生错误时触发。
  • onPageNotFound: 应用找不到页面时触发。
  • onThemeChange: 系统主题改变时触发 (例如深色模式切换)。

页面生命周期 (在页面 .vue 文件中定义):

  • onLoad: 页面加载时触发。一个页面只会调用一次。
  • onShow: 页面显示/进入前台时触发。
  • onReady: 页面初次渲染完成时触发。
  • onHide: 页面隐藏/进入后台时触发。
  • onUnload: 页面卸载时触发。
  • onPullDownRefresh: 下拉刷新时触发。需要在 pages.json 中开启下拉刷新或调用 uni.startPullDownRefresh。
  • onReachBottom: 页面触底时触发。可以在 pages.json 配置距离底部的触发距离 onReachBottomDistance。
  • onShareAppMessage: 用户点击右上角分享或菜单栏中的“转发”按钮时触发 (仅小程序)。
  • onPageScroll: 页面滚动时触发。
  • onResize: 页面尺寸改变时触发 (例如横竖屏切换)。
  • onTabItemTap: 点击 TabBar 页面时触发 (仅 TabBar 页面)。

理解并正确使用这些生命周期函数，对于控制应用的行为和数据管理至关重要。

6. 条件编译

由于不同平台存在差异（API、组件、样式、文件组织等），uni-app 提供了条件编译机制来解决跨端兼容问题。

你可以在代码中根据不同的平台进行选择性编译。语法类似于 C 语言的预处理指令：

  • #ifdef 平台名称
  • #ifndef 平台名称
  • #endif

平台名称包括：APP-PLUS (App，包含 APP-PLUS-NVUE 和 APP-PLUS-WEBVIEW)，APP-PLUS-NVUE (App Nvue)，APP-PLUS-WEBVIEW (App 非 Nvue)，H5，MP-WEIXIN (微信小程序)，MP-ALIPAY (支付宝小程序)，MP-BAIDU (百度小程序)，MP-TOUTIAO (抖音/头条小程序)，MP-QQ (QQ 小程序)，MP-KUAISHOU (快手小程序) 等。

条件编译可以用在：

  • 模板中 (<template>):
    html
    <template>
    <view>
    #ifdef H5
    <p>这段文本只在 H5 显示</p>
    #endif
    #ifndef H5
    <view>这段文本不在 H5 显示</view>
    #endif
    </view>
    </template>
  • 脚本中 (<script>):
    javascript
    <script>
    export default {
    onLoad() {
    #ifdef MP-WEIXIN
    console.log('微信小程序加载');
    #endif
    #ifdef APP-PLUS
    console.log('App 加载');
    #endif
    }
    }
    </script>
  • 样式中 (<style>):
    css
    <style>
    .my-style {
    color: black;
    }
    /* #ifdef H5 */
    .my-style {
    font-size: 16px;
    }
    /* #endif */
    /* #ifndef H5 */
    .my-style {
    font-size: 32rpx; /* 在非 H5 使用 rpx */
    }
    /* #endif */
    </style>
  • pages.json 中: 在配置项中使用条件编译。

条件编译是处理跨平台差异的强大工具，但过度使用会增加代码复杂度，应优先使用 uni-app 的统一组件和 API。

快速上手：迈出第一步

最快捷的 uni-app 入门方式是使用官方推荐的 HBuilderX IDE。

步骤 1：下载并安装 HBuilderX

访问 DCloud 官网（https://www.dcloud.io/hbuilderx.html），下载最新版的 HBuilderX。推荐下载“正式版”或带有“uni-app”标识的版本。

安装过程很简单，按照提示一步步操作即可。

步骤 2：新建 uni-app 项目

打开 HBuilderX，通过菜单栏选择 文件(F) -> 新建 -> 项目(P)...。

在弹出的对话框中：

  1. 选择项目模板：选择 uni-app。
  2. 输入项目名称：例如 my-first-uni-app。
  3. 选择项目创建目录：选择你希望项目存放的文件夹。
  4. 选择项目模板：
    • 默认模板: 包含一些基本的页面和示例，适合快速开始。
    • Hello uni-app: 一个非常全面的示例项目，展示了 uni-app 的大部分组件和 API 用法，非常适合学习。
    • 空白模板: 只有一个首页，适合从头开始构建项目。
    • 你也可以选择其他官方模板或插件市场的模板。

点击 创建 按钮，HBuilderX 会自动为你生成项目的基础结构。

步骤 3：运行项目

项目创建成功后，你可以在 HBuilderX 的项目管理器中看到项目结构。

要运行项目，可以通过菜单栏选择 运行(R) -> 运行到浏览器 或 运行到手机或模拟器 或 运行到小程序模拟器。

  • 运行到浏览器： 如果你的电脑安装了 Chrome 或其他现代浏览器，可以直接选择运行到对应的浏览器。这会启动一个本地服务，在浏览器中预览你的 uni-app 应用的 H5 版本。
  • 运行到手机或模拟器 (App): 如果你安装了 Android 或 iOS 开发环境，并且连接了手机或启动了模拟器，可以选择运行到对应的设备。HBuilderX 会将项目编译并安装到设备上运行。对于 Android，需要开启开发者模式和 USB 调试。对于 iOS，需要安装 Xcode。
  • 运行到小程序模拟器： 如果你安装了微信开发者工具、支付宝小程序开发者工具等，可以选择运行到对应的小程序模拟器。HBuilderX 会将项目编译成小程序代码，并自动在模拟器中打开。注意： 首次运行到小程序模拟器可能需要配置小程序开发工具的安装路径。

选择一个运行目标，点击后 HBuilderX 会开始编译。编译成功后，你的 uni-app 应用就会在目标环境中运行起来。

步骤 4：修改代码并体验热更新

打开 pages/index/index.vue 文件。这是应用的首页。

你可以修改 <template> 中的内容，例如将：

html
<text class="title">{{title}}</text>

修改为：

html
<text class="title">Hello, uni-app!</text>

保存文件后，如果你的运行环境支持热更新（例如运行到浏览器、大部分小程序模拟器），你会发现页面上的文本立即发生了变化，无需手动刷新或重新编译。这种热更新机制极大地提高了开发效率。

你也可以修改 <script> 中的数据或方法，修改 <style> 中的样式，保存后都能看到效果。

步骤 5：尝试页面跳转和使用 API

让我们在首页添加一个按钮，点击跳转到关于页面 (如果你的模板创建了 about 页面)。

修改 pages/index/index.vue:

“`html

“`

保存代码，在运行环境中点击按钮，你会发现成功跳转到了关于页面。这里我们使用了 uni-app 提供的 uni.navigateTo API 进行页面跳转。uni-app 的大多数 API 都以 uni. 开头。

步骤 6：打包发布

当你完成开发并准备发布应用时，可以通过 HBuilderX 方便地进行打包。

选择菜单栏 发行(I)：

  • 网站-H5手机版(H)：打包生成 H5 网页应用。
  • 原生App-云打包(W)：使用 DCloud 的云打包服务，生成 Android (apk) 和 iOS (ipa) 安装包。这是最常用的 App 打包方式，无需安装复杂的原生开发环境。
  • 原生App-本地打包(N)：需要安装 Android 和 iOS 开发环境（Android Studio 和 Xcode），在本地进行打包。
  • 小程序-微信(W)、小程序-支付宝(A) 等：将项目编译成对应平台的小程序代码，然后你需要打开对应的小程序开发者工具，导入 HBuilderX 生成的项目目录，进行后续的上传和发布流程。

以云打包 App 为例，选择 发行 -> 原生App-云打包，填写应用名称、版本号等信息，选择证书（App 需要签名证书），点击打包。打包过程在云端进行，完成后你可以下载生成的安装包。

进一步学习和探索

通过以上步骤，你已经快速了解了 uni-app 的基本概念，并完成了从创建项目到修改代码再到运行和打包的完整流程。这只是 uni-app 功能的冰山一角。要深入学习，你可以：

  1. 查阅官方文档： uni-app 官方文档 (doc.dcloud.net.cn) 是最权威、最全面的学习资料。仔细阅读文档中关于组件、API、生命周期、路由、条件编译等章节。
  2. 学习 Hello uni-app 项目： 如果你在新建项目时没有选择，建议现在新建一个 Hello uni-app 项目，研究其中的代码，它包含了大量 uni-app 的使用示例。
  3. 探索插件市场： DCloud 插件市场 (ext.dcloud.net.cn) 有很多实用的组件、模板和插件，可以直接集成到你的项目中，避免重复造轮子。
  4. 参与社区交流： 加入 uni-app 开发者社区、论坛或交流群，与其他开发者交流学习经验，解决遇到的问题。
  5. 实践： 从一个简单的项目开始，逐步尝试实现更复杂的功能，将所学知识应用到实践中。

uni-app 的一些注意事项和限制

虽然 uni-app 带来了巨大的便利，但在开发过程中也需要注意一些地方：

  • 平台差异： 尽管 uni-app 努力抹平平台差异，但不同平台的技术栈和规范毕竟不同。某些特定的 API 或组件可能只在特定平台可用，或者在不同平台的表现略有差异。这时就需要使用条件编译或查阅文档。
  • 第三方库兼容性： 大部分纯 JavaScript 库可以在 uni-app 中使用，但依赖 DOM 操作、浏览器特定 API 或 Node.js 内置模块的库可能无法在 App 或小程序环境运行。
  • 打包体积： 跨平台框架通常会引入一定的运行时代码，可能导致最终的应用体积比原生应用稍大。
  • 性能优化： 虽然性能接近原生，但在处理大量数据或复杂动画时，仍需要遵循 Vue 和 uni-app 的性能优化最佳实践。
  • 原生扩展： 对于需要调用原生设备特定能力或高度定制化原生界面等复杂场景，可能需要编写原生插件或使用 Nvue (基于 Weex 改造的 App 渲染引擎) 来实现，这需要一定的原生开发知识。

总结

uni-app 作为一套使用 Vue.js 开发多端应用的框架，凭借其“一套代码，多端发行”的核心理念，极大地提高了开发效率，降低了开发和维护成本。它基于流行的 Vue 技术栈，提供了丰富的组件和 API，配合强大的 HBuilderX IDE 和活跃的社区生态，为开发者提供了一种高效、便捷的跨平台开发解决方案。

无论是想快速验证产品概念、为现有业务增加小程序或 App 入口，还是希望统一团队技术栈，uni-app 都是一个非常值得考虑的选择。通过本文的介绍和快速上手指南，相信你已经对 uni-app 有了一个初步而全面的认识。现在，是时候动手实践，去感受 uni-app 带来的开发乐趣和效率提升了！

希望这篇文章对你快速了解和入门 uni-app 有所帮助。祝你在 uni-app 的开发旅程中一切顺利！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部