uni-app核心概念介绍与快速入门 – wiki基地

作者： /

uni-app 核心概念介绍与快速入门

在当前移动互联网时代，应用开发面临着一个普遍的挑战：如何在不同的平台（iOS、Android、Web、各种小程序等）上高效地构建和维护应用？传统的做法往往意味着需要针对每个平台开发一套独立的代码，这无疑增加了巨大的开发成本、时间和后期的维护负担。

为了解决这一痛点，跨平台开发框架应运而生。uni-app 正是其中的佼佼者，它凭借“一次开发，多端发布”的理念，迅速成为国内前端开发者构建多端应用的利器。本文将带你深入了解 uni-app 的核心概念，并提供一个快速入门指南，助你开启高效的多端开发之旅。

第一部分：uni-app 是什么？为什么选择 uni-app？

1. uni-app 的定义

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

它的核心理念是 “一次开发，多端发布” (Write once, run everywhere)，极大地提高了开发效率和项目的可维护性。uni-app 基于 Vue.js 生态，保留了 Vue.js 的开发体验，同时针对多端环境进行了优化和扩展。

2. 为什么选择 uni-app？

相比于其他跨平台框架或原生开发，uni-app 具备以下显著优势：

  • 多端覆盖广： 支持的终端平台非常全面，几乎覆盖了市面上所有主流的移动端和前端运行环境。这意味着你的应用可以轻松触达更广泛的用户群体。
  • 开发效率高： 一套代码适用于多个平台，无需为每个平台单独开发，显著降低了开发工作量。同时，uni-app 提供了丰富的组件和 API，以及强大的 IDE (HBuilderX)，进一步提高了开发效率。
  • 学习成本低： uni-app 基于 Vue.js，对于熟悉 Vue.js 的开发者来说，可以快速上手。即使是新手，掌握 Vue.js 后也能迅速迁移到 uni-app 开发。
  • 性能体验好： uni-app 并非简单的 H5 套壳。它在不同平台会编译成对应平台的原生组件或小程序组件，性能接近原生体验或小程序体验。特别是通过 uni-app 的条件编译，可以针对特定平台编写优化代码。
  • 生态成熟： uni-app 拥有庞大的开发者社区和丰富的插件市场（uni-ext），你可以轻松找到各种组件、工具和解决方案，复用现有资源。
  • 强大的工具支持： DCloud 公司提供了专业的 IDE HBuilderX，它深度集成了 uni-app 开发环境，提供了代码提示、语法检查、真机运行、云打包等一系列便捷功能，大幅提升开发体验。
  • 开放与灵活： uni-app 支持使用 npm 安装第三方库，也支持原生插件开发，可以方便地扩展框架能力或调用原生功能。

第二部分：uni-app 核心概念详解

理解 uni-app 的核心概念是掌握它的关键。

1. 项目结构 (Project Structure)

一个标准的 uni-app 项目通常包含以下主要目录和文件：

.
├── build // 构建相关（一般不常用）
├── components // 项目通用组件存放目录
│ └── <component-name> // 组件目录
│ └── <component-name>.vue
├── hybrid // 原生混合App相关
├── pages // 页面文件存放目录
│ ├── <page-name> // 页面目录
│ │ └── <page-name>.vue
│ └── index
│ └── index.vue // 首页示例
├── static // 静态资源存放目录，比如图片、字体等（不支持本地文件引入）
├── unpackage // 打包、编译后的文件存放目录，uni-app自动生成
├── utils // 公共方法、配置等
├── App.vue // 应用的根组件，控制应用生命周期
├── main.js // Vue 初始化入口文件
├── manifest.json // 应用的配置文件（比如名称、图标、权限等）
├── pages.json // 全局页面和窗口配置（比如路由、顶部导航、底部 tabbar 等）
├── uni.scss // uni-app 内置scss变量文件，可用于定义全局样式
└── .gitignore // Git 忽略文件

  • pages 目录： 用于存放所有的页面。每个页面通常是一个独立的目录，目录下包含一个同名的 .vue 文件。pages.json 文件会读取这个目录结构来生成路由。
  • components 目录： 用于存放可复用的 Vue 组件。
  • static 目录： 用于存放静态资源，如图片、字体等。这里的资源不会被 webpack 处理，直接按原路径打包。注意，如果需要在页面或组件中通过本地路径引用图片，应放在 static 目录下。
  • App.vue： 这是 uni-app 的根组件，它管理着应用的生命周期（如 onLaunch, onShow, onHide）。所有的页面都运行在 App.vue 的内部。
  • main.js： 这是项目的入口文件，主要用于初始化 Vue 实例、注册全局组件或插件（如 Vuex）。
  • manifest.json： 应用程序的全局配置文件。在这里你可以配置应用名称、图标、权限、SDK 配置（如微信 SDK、地图 SDK）等信息。对于 App 平台，它还控制着打包时的很多重要设置。
  • pages.json： 这是 uni-app 中最重要的配置文件之一，它决定了应用的页面结构、窗口样式、顶部导航条、底部 TabBar 等。所有需要在应用中访问的页面都必须在这里注册。pages.json 会根据配置自动生成路由。
  • uni.scss： 如果你使用 Sass，可以在这里定义全局的 Sass 变量和混合宏，uni-app 提供了一些内置的变量（如 $uni-color-primary），方便统一风格。

2. 页面与组件 (.vue 文件)

uni-app 的页面和组件都基于 Vue 的单文件组件 (SFC) 格式，即一个 .vue 文件包含 <template>、<script> 和 <style> 三个部分。

  • <template>： 模板部分，用于定义页面的结构或组件的 DOM 结构。uni-app 支持使用 Vue 的模板语法（数据绑定、指令、事件处理等），但内部编译时会转换为对应平台的模板语法（如小程序的 WXML/AXML）。因此，在编写模板时需要注意跨平台的兼容性，尽量使用 uni-app 提供的内置组件或符合多端规范的标签（如 view, text, image）。
  • <script>： 脚本部分，用于定义页面的数据、方法、计算属性、生命周期钩子等。使用 Vue 的 Options API 或 Composition API 都可以。页面的脚本中需要定义页面特有的生命周期钩子（如 onLoad, onShow 等），组件则使用组件的生命周期钩子。
  • <style>： 样式部分，用于定义页面或组件的样式。支持 CSS、Less、Sass、Stylus 等预处理器。可以使用 scoped 属性限制样式只作用于当前组件。uni-app 支持使用 rpx 尺寸单位，它是一个响应式单位，可以根据屏幕宽度自适应，方便处理不同设备的适配问题（750rpx 对应屏幕宽度）。

3. 配置系统 (manifest.json, pages.json, uni.scss)

配置系统是 uni-app 实现多端差异化和全局控制的关键。

  • manifest.json： 专注于应用本身的配置，如应用 ID、名称、版本、图标、权限、App 模块配置（推送、支付、分享等）、H5 配置、小程序配置等。
  • pages.json： 专注于页面和窗口的配置。
    • pages 字段： 定义所有的页面路径及其窗口样式。第一个在 pages 数组中配置的页面是应用的首页。
    • globalStyle 字段： 定义应用所有页面的全局窗口样式（导航栏颜色、标题、下拉刷新等）。页面自身的 style 配置会覆盖 globalStyle 的对应设置。
    • tabBar 字段： 如果应用有底部 TabBar，在这里配置 TabBar 的样式、列表、图标、选中状态等。配置 TabBar 后，只有被列在 TabBar 中的页面才能通过点击 Tab 切换。
  • uni.scss： 提供一个集中管理全局样式变量和混合宏的地方，便于实现应用整体风格的统一和维护。

4. uni API

uni-app 封装了跨平台的 API，通过 uni 对象统一调用。这些 API 涵盖了设备能力、界面交互、网络请求、数据存储、文件操作等多个方面，例如：

  • uni.request(OBJECT)：发起网络请求。
  • uni.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面。
  • uni.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。
  • uni.switchTab(OBJECT)：跳转到 TabBar 页面，并关闭其他所有非 TabBar 页面。
  • uni.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。
  • uni.showToast(OBJECT)：显示消息提示框。
  • uni.getSystemInfo(OBJECT)：获取系统信息。
  • uni.setStorageSync(KEY, DATA)：将数据存储在本地缓存中。

这些 API 的设计参考了微信小程序的 API，但做了跨平台的兼容处理，使得开发者可以一套代码调用多端能力。

5. 生命周期 (App & Page)

uni-app 定义了两类生命周期：应用生命周期和页面生命周期。

  • 应用生命周期 (在 App.vue 中定义)：

    • onLaunch()：应用初始化完成时触发（全局只触发一次）。
    • onShow()：应用启动，或从后台进入前台显示时触发。
    • onHide()：应用从前台进入后台时触发。
    • onError(msg)：应用报错时触发。
    • onPageNotFound(OBJECT)：应用启动或后台切前台再切回来时，如果路由到的页面不存在则触发。

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

    • onLoad(options)：页面加载时触发，一个页面只触发一次。接收页面参数 options。
    • onShow()：页面显示/前台进入时触发。
    • onReady()：页面初次渲染完成时触发。一个页面只触发一次，代表页面已经准备妥当，可以和视图层进行交互。
    • onHide()：页面隐藏/进入后台时触发。
    • onUnload()：页面卸载时触发。
    • onPullDownRefresh()：监听用户下拉动作，需要在 pages.json 的当前页面配置中开启 enablePullDownRefresh: true。
    • onReachBottom()：页面上拉触底事件的处理函数。
    • onPageScroll(OBJECT)：页面滚动时触发。
    • onShareAppMessage(OBJECT)：用户点击右上角分享或页面内分享按钮时触发（仅小程序）。
    • onAddToFavorites(OBJECT)：点击右上角收藏或页面内收藏按钮时触发（仅小程序）。
    • onNavigationBarButtonTap(OBJECT)：点击导航栏自定义按钮时触发。
    • onBackPress(OBJECT)：监听页面返回，返回 true 阻止返回，返回 false 或 undefined 继续返回。
    • onNavigationBarSearchInputChanged(OBJECT)：导航栏搜索输入框内容改变时触发。
    • onTabItemTap(OBJECT)：点击 Tab 切换时触发。

理解这些生命周期，有助于你在合适的时机执行相应的逻辑，管理页面状态和数据。

6. 条件编译 (#ifdef, #ifndef, #endif)

条件编译是 uni-app 实现一套代码多端差异化的核心机制。通过特定的注释，可以在不同平台编译时包含或排除指定的代码块。

语法：#ifdef %PLATFORM% 或 #ifndef %PLATFORM%

  • %PLATFORM% 可以是：
    • APP-PLUS：App 平台 (包括 iOS 和 Android)
    • APP-PLUS-NVUE：App 平台 nvue 页面
    • H5：H5 平台
    • MP-WEIXIN：微信小程序
    • MP-ALIPAY：支付宝小程序
    • MP-BAIDU：百度小程序
    • MP-TOUTIAO：字节跳动小程序
    • MP-QQ：QQ 小程序
    • MP-KUAISHOU：快手小程序
    • MP-DINGTALK：钉钉小程序
    • MP：所有小程序平台
    • QUICKAPP：快应用

条件编译可以用于 <template>、<script>、<style> 三个部分：

模板中：

“`html

“`

脚本中：

“`javascript

“`

样式中：

“`css

“`

通过条件编译，可以在同一套代码中优雅地处理不同平台的差异，例如调用平台特有的 API、调整布局或样式等。

第三部分：uni-app 快速入门

了解了核心概念后，我们来学习如何快速搭建和运行第一个 uni-app 项目。

1. 环境准备

  • 安装 Node.js： uni-app 的开发需要 Node.js 环境。推荐安装 LTS (长期支持) 版本。可以从 Node.js 官网 下载安装。安装完成后，通过 node -v 和 npm -v (或 yarn -v 如果使用 yarn) 检查是否安装成功。
  • 安装 HBuilderX (推荐 IDE)： HBuilderX 是 DCloud 官方推荐的 uni-app 开发 IDE。它集成了 uni-app 相关的编译器、运行环境等，提供了极佳的开发体验。从 HBuilderX 官网 下载并安装。推荐下载 App 开发版，功能更全面。

2. 创建项目

使用 HBuilderX 创建 uni-app 项目是最便捷的方式：

  1. 打开 HBuilderX。
  2. 点击菜单栏的 文件(F) -> 新建 -> 项目。
  3. 选择项目模板为 uni-app。
  4. 填写项目名称和项目存放路径。
  5. 选择项目模板。对于新手，可以选择 默认模板 或 Hello uni-app (后者包含更多示例代码)。
  6. 点击 创建。

HBuilderX 会自动为你生成一个标准的 uni-app 项目结构。

如果你更习惯使用命令行或 Vue CLI，也可以通过 Vue CLI 创建 uni-app 项目：

  1. 确保你已经全局安装了 Vue CLI (npm install -g @vue/cli 或 yarn global add @vue/cli)。
  2. 在命令行中运行：vue create -p dcloudio/uni-preset-vue my-uni-project。
    • -p dcloudio/uni-preset-vue 指定使用 uni-app 的预设模板。
    • my-uni-project 是你的项目名称。
  3. 按照提示选择模板（推荐默认模板）。
  4. 进入项目目录：cd my-uni-project。
  5. 安装依赖：npm install 或 yarn install。

3. 运行项目

使用 HBuilderX 运行：

HBuilderX 提供了强大的内置运行功能：

  1. 在项目管理器中选中你的 uni-app 项目。
  2. 点击菜单栏的 运行(R) -> 运行到浏览器 -> 选择一个浏览器 (如 Chrome)。项目将在浏览器中以 H5 模式运行。
  3. 点击菜单栏的 运行(R) -> 运行到小程序模拟器 -> 选择一个模拟器 (如 微信开发者工具)。确保你已经安装了对应的开发者工具，并在开发者工具中设置了服务端口。HBuilderX 会自动启动开发者工具并导入项目。
  4. 点击菜单栏的 运行(R) -> 运行到手机或模拟器 -> 选择连接的设备 (需要先通过 USB 连接手机并开启调试模式，或安装安卓模拟器)。项目将在手机或模拟器上以 App 模式运行。

使用命令行运行 (Vue CLI 创建的项目)：

进入项目目录，使用 npm 或 yarn 脚本运行：

  • 运行到 H5：npm run dev:h5 或 yarn dev:h5
  • 运行到微信小程序：npm run dev:mp-weixin 或 yarn dev:mp-weixin (需要配置微信开发者工具路径)
  • 运行到 App (调试模式)：npm run dev:app 或 yarn dev:app

4. 编写第一个页面

让我们修改默认创建的首页 pages/index/index.vue 来体验一下：

“`vue

“`

保存文件后，如果你正在 HBuilderX 中运行项目，可以看到页面的热更新效果。点击按钮，文本会改变，同时会弹出一个消息提示框 (Toast)。

5. 添加一个新页面

  1. 在 pages 目录下新建一个目录，比如 about。
  2. 在 about 目录下新建一个文件 about.vue。

  3. 在 about.vue 中写入简单的页面内容：

    “`vue

    ``
    4. 打开    pages.json文件，在pages` 数组中添加新的页面路径：

    json
    {
    "pages": [ // pages数组中第一项表示应用启动页
    {
    "path": "pages/index/index",
    "style": {
    "navigationBarTitleText": "首页"
    }
    },
    { // 添加这一项
    "path": "pages/about/about",
    "style": {
    "navigationBarTitleText": "关于我们"
    }
    }
    ],
    "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColorOnly": "#F8F8F8"
    },
    "uniIdRouter": {},
    "usingCompilers": {}
    }
    5. 在 pages/index/index.vue 中添加一个按钮，用于跳转到关于页面：

    “`vue

    “`
    现在，运行项目，点击首页新增的按钮，就可以跳转到新创建的关于页面了。这演示了 uni-app 的路由配置和页面跳转功能。

6. 打包发布

完成开发后，可以通过 HBuilderX 或命令行将项目打包发布到各个平台。

使用 HBuilderX 打包：

  1. 点击菜单栏的 发行(I)。
  2. 选择要发布的平台：
    • 网站-H5手机版 或 网站-H5电脑版
    • 小程序-微信(或其他小程序)
    • 原生App-云打包 (无需配置原生开发环境) 或 原生App-本地打包 (需要配置原生开发环境)
  3. 根据提示进行配置（如填写小程序 AppID，配置 App 打包参数等）。
  4. 点击发行。

HBuilderX 会自动完成代码编译、优化和打包过程。

使用命令行打包 (Vue CLI 创建的项目)：

  • 打包 H5：npm run build:h5 或 yarn build:h5
  • 打包微信小程序：npm run build:mp-weixin 或 yarn build:mp-weixin
  • 打包 App：npm run build:app 或 yarn build:app

打包完成后，对应的平台代码会生成在 dist 目录下。

第四部分：进阶学习方向

通过上面的内容，你已经对 uni-app 的核心概念有了初步了解，并掌握了基本的项目创建和运行方法。接下来，你可以继续深入学习：

  1. 官方文档： 详细阅读 uni-app 官方文档，它是最全面和权威的学习资源。
  2. 内置组件和 API： 学习 uni-app 提供的各种内置组件（如 view, text, image, scroll-view, swiper, 表单组件等）和更多 uni API 的用法。
  3. uni-ui： uni-ui 是 DCloud 官方推出的基于 uni-app 的一套符合 Material Design 规范的 UI 组件库，可以帮助你快速构建美观的界面。
  4. 状态管理： 学习如何在 uni-app 中使用 Vuex 进行跨页面的状态管理。
  5. 网络请求： 深入了解 uni.request 的各种用法，以及如何封装请求，处理登录态等。
  6. 条件编译： 更灵活地运用条件编译处理复杂的跨平台差异。
  7. 原生插件开发： 如果需要调用 uni-app 未封装的平台原生能力，可以学习如何开发和使用原生插件。
  8. 性能优化： 学习 uni-app 的性能优化技巧，提升应用体验。
  9. 第三方库和插件： 探索 uni-app 插件市场和其他 npm 生态中的优秀库。

结论

uni-app 作为一款强大的多端开发框架，极大地降低了跨平台应用的开发门槛和成本。通过深入理解其基于 Vue.js 的开发模式、核心概念（项目结构、页面组件、配置系统、API、生命周期、条件编译）以及掌握快速入门的方法，你将能够高效地构建出能够运行在多个平台的应用。

“一次开发，多端发布”不仅仅是一句口号，更是 uni-app 赋能开发者的强大能力。希望本文能帮助你快速迈入 uni-app 的世界，享受多端开发的便捷与高效！现在就开始你的 uni-app 探索之旅吧！

发表评论

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

滚动至顶部