UniApp 开发从入门到精通

第一部分：UniApp 入门

1.1 UniApp 简介

UniApp 是什么
核心特点和优点
UniApp 的使用场景

UniApp 是什么

UniApp 是由 DCloud 团队开发的一款基于 Vue.js 的多端开发框架，允许开发者使用一套代码生成多个平台的应用。它的目标是通过统一的代码逻辑，实现对 iOS、Android、小程序、H5、快应用 等多平台的无缝适配。

UniApp 以 Vue 语法为核心，支持 Vue 3 和 Composition API，开发者可以快速上手，同时利用丰富的生态和插件扩展功能。

核心特点和优点

跨平台支持
- 一套代码，多端运行，支持 12+ 平台，包括微信小程序、支付宝小程序、百度小程序、快应用、App（iOS 和 Android）、H5 等。
- 真正的 “一次开发，随处运行”。
基于 Vue 生态
- UniApp 以 Vue.js 为开发基础，支持 Vue 2 和 Vue 3，开发者可以利用 Vue 的组件化思想、双向绑定和 Composition API。
- 支持 Vue Router 和 Vuex 的简单移植。
丰富的内置 API
- 提供超过 200+ 个内置 API，涵盖文件操作、网络请求、存储、地理位置、设备功能等。
- 统一封装了各端差异的功能调用，开发者无需关心具体平台的实现。
插件市场与生态支持
- UniApp 提供一个丰富的插件市场，包含 UI 库、工具库、扩展组件等。
- 支持小程序组件的直接引入，例如微信小程序的生态组件。
性能优化
- 使用原生渲染技术，页面性能接近原生应用。
- 支持离线包、分包加载，显著提升加载速度。
强大的社区和文档
- 提供详细的开发文档，涵盖从入门到高级使用的方方面面。
- 活跃的开发者社区，提供技术支持和共享经验。
灵活的 UI 框架
- 内置支持像 uView、ThorUI、ColorUI 等流行的跨平台 UI 库，快速构建高颜值应用。
开发工具支持
- 官方提供的 HBuilderX 开发工具，优化了 UniApp 项目的开发、调试和打包体验。
- 支持热更新、实时预览和真机调试。

UniApp 的使用场景

移动端应用开发
- 面向 iOS 和 Android 的原生应用开发，通过打包生成 apk 和 ipa 文件，适用于企业内外部 APP 开发。
- 例如：电商、资讯、社交、工具类应用。
小程序开发
- 支持开发微信、支付宝、百度、字节跳动、QQ 等平台的小程序，代码共享率高。
- 适用于轻量级工具应用，如扫码支付、外卖点餐、在线客服。
H5 网站
- 可生成纯 HTML5 页面，适用于移动端浏览器的轻量化访问。
- 用于营销活动页、移动官网或无需安装的轻量化应用。
企业级应用
- 适合企业内部 OA、ERP、CRM 等信息化系统，通过跨平台特性统一开发流程。
- 支持快速响应业务需求，降低开发和运维成本。
IoT（物联网）设备
- 可用于智能家居、工业物联网等领域，结合硬件功能开发轻量化控制面板。
快应用
- 支持国内快应用生态，生成无需安装的即点即用型应用。
多端融合项目
- 适合对多端统一要求较高的场景，例如同时需要支持 APP、小程序和 H5 的项目。

总结

UniApp 是一种强大而灵活的多端开发解决方案，其核心特点是基于 Vue.js 的高效开发模式和跨平台能力。无论是面向初学者还是经验丰富的开发者，UniApp 都提供了一个低门槛、高效率的开发环境，尤其在需要覆盖多平台的场景中表现突出。

1.2 开发环境搭建

安装 HBuilderX IDE
配置必要工具：Node.js 和 npm
创建第一个 UniApp 项目
项目结构解析

1.2.1 安装 HBuilderX IDE

HBuilderX 是 DCloud 提供的官方开发工具，专为 UniApp 开发优化，集成了丰富的开发功能，支持多端构建和真机调试。

下载 HBuilderX
- 前往 HBuilderX 官方下载页面：www.dcloud.io/index.html。
- 根据操作系统选择对应的安装包（Windows、macOS、Linux）。
安装 HBuilderX
- 按照操作系统安装指引完成 IDE 安装。
- 启动后可以选择插件扩展，推荐安装 UniApp 插件，以支持多端调试功能。
配置 HBuilderX
- 打开 HBuilderX，进入 工具 > 插件安装，确保 UniApp 插件已安装。
- 设置终端环境（如需要），在 工具 > 设置 中配置终端路径。

1.2.2 配置必要工具：Node.js 和 npm

虽然 HBuilderX 内置了部分功能，但某些高级功能需要依赖 Node.js 和 npm。

安装 Node.js
- 前往 Node.js 官方网站: nodejs.org/zh-cn 下载并安装最新稳定版本。
- 推荐使用 LTS 版本以获得更高的稳定性。
检查安装
- 在终端中运行以下命令，确认安装成功：
```
node -v
npm -v
```
更新 npm（可选）
- 确保使用最新的 npm 版本：
```
npm install -g npm@latest
```

1.2.3 创建第一个 UniApp 项目

通过 HBuilderX 创建项目
- 打开 HBuilderX，选择 文件 > 新建 > 项目。
- 在项目模板中选择 UniApp 项目，然后点击下一步。
- 填写项目名称、存储路径，并选择所需的模板类型（如 hello uni-app）。
- 点击创建按钮完成项目初始化。

通过 CLI 创建项目（可选）

如果更喜欢命令行操作，可以通过 vue-cli 创建 UniApp 项目：

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-uniapp
cd my-uniapp
npm run dev:mp-weixin # 开启微信小程序调试

转存失败，建议直接上传图片文件

1.2.4 项目结构解析

以下是 UniApp 项目默认目录结构的简要解析：

关键文件与文件夹
- App.vue：全局根组件，定义应用的结构和基础样式。
- main.js：项目的入口文件，初始化配置。
- manifest.json：定义项目基本信息，如名称、平台适配配置等。
- pages.json：全局页面配置文件，管理页面路由和导航栏信息。
- uni.scss：全局样式文件，支持变量和主题定制。
页面与组件
- pages/：存放每个页面的文件夹，每个页面需要一个 xxx.vue 文件和可选的 xxx.json 配置文件。
- components/：公共组件目录，用于存放可复用的 Vue 组件。
资源文件
- static/：存放静态资源（如图片、字体），该目录下的文件不会经过打包编译。
- unpackage/：存放打包生成的目标文件。

项目目录结构概述

UniApp 的项目目录结构是基于 Vue.js 的，同时增加了一些特有的目录和文件，以适应多端开发的需求。以下是典型的 UniApp 项目目录结构：

my-uniapp-project/
├── .hbuilderx/             # HBuilderX 项目配置
├── node_modules/           # 项目依赖包
├── pages/                  # 页面目录
├── static/                 # 静态资源目录
├── components/             # 自定义组件目录
├── uni_modules/            # uni_modules 插件目录
├── unpackage/              # 打包输出目录
├── App.vue                 # 应用入口文件
├── main.js                 # 应用入口脚本
├── manifest.json           # 应用配置文件
├── pages.json              # 页面路由配置文件
├── uni.scss                # 全局样式文件
└── package.json            # 项目依赖配置文件

转存失败，建议直接上传图片文件

核心目录和文件详解

pages/ 目录

作用：存放应用的所有页面文件。

结构：

pages/
├── index/
│   ├── index.vue         # 首页页面文件
│   └── index.json        # 首页配置文件
└── detail/
    ├── detail.vue        # 详情页页面文件
    └── detail.json       # 详情页配置文件

转存失败，建议直接上传图片文件

说明：
- 每个页面通常包含 .vue 文件（页面逻辑和模板）和 .json 文件（页面配置）。
- 页面路径需要在 pages.json 中注册。

static/ 目录

作用：存放静态资源文件，如图片、字体、音频等。

结构：

static/
├── images/               # 图片资源
│   └── logo.png
├── fonts/                # 字体资源
└── audio/                # 音频资源

转存失败，建议直接上传图片文件

说明：
- 静态资源可以通过相对路径引用，例如：/static/images/logo.png。
- 打包时，静态资源会被直接复制到输出目录。

components/ 目录

作用：存放自定义组件。

结构：

components/
├── Header.vue            # 头部组件
└── Footer.vue            # 底部组件

转存失败，建议直接上传图片文件

说明：
- 组件可以通过 import 引入并在页面中使用。
- 组件应尽量保持独立性和可复用性。

uni_modules/ 目录

作用：存放通过 uni_modules 安装的插件或模块。

结构：

uni_modules/
├── uni-ui/               # uni-ui 组件库
└── other-plugin/         # 其他插件

转存失败，建议直接上传图片文件

说明：
- uni_modules 是 UniApp 的插件管理机制，支持一键安装和更新插件。
- 插件可以通过 uni_modules 引入并使用。

unpackage/ 目录

作用：存放打包后的文件。

结构

unpackage/
├── dist/                 # 打包后的文件
│   ├── build/            # 构建输出
│   └── dev/              # 开发环境输出
└── logs/                 # 打包日志

转存失败，建议直接上传图片文件

说明：
- 打包后的文件会根据目标平台生成不同的输出。
- 开发环境和生产环境的输出文件会分别存放。

核心文件详解

App.vue

作用：应用的根组件，所有页面的父组件。

内容：

<template>
  <router-view />
</template>

<script>
export default {
  onLaunch() {
    console.log('App Launch');
  },
  onShow() {
    console.log('App Show');
  },
  onHide() {
    console.log('App Hide');
  }
};
</script>

<style>
/* 全局样式 */
</style>

转存失败，建议直接上传图片文件

说明：
- App.vue 是应用的入口文件，可以在这里定义全局样式和生命周期钩子。
- router-view 用于渲染当前页面。

main.js

作用：应用的入口脚本，用于初始化 Vue 实例。

内容：

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

const app = new Vue({
  render: h => h(App)
});

app.$mount();

转存失败，建议直接上传图片文件

说明：
- main.js 是应用的入口脚本，用于创建 Vue 实例并挂载到 DOM。
- 可以在这里引入全局插件或配置。

manifest.json

作用：应用的配置文件，用于配置应用的基本信息和平台特性。

内容：

{
  "name": "my-uniapp-project",
  "appid": "your-appid",
  "description": "My UniApp Project",
  "versionName": "1.0.0",
  "versionCode": "100",
  "platforms": ["android", "ios", "h5"],
  "pages": {
    "index": {
      "navigationBarTitleText": "首页"
    }
  }
}

转存失败，建议直接上传图片文件

说明：
- manifest.json 是应用的配置文件，支持多平台配置。
- 可以在这里配置应用名称、版本号、页面路由等。

pages.json

作用：页面路由配置文件，用于配置页面路径和导航栏样式。

内容：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniApp",
    "navigationBarBackgroundColor": "#F8F8F8"
  }
}

转存失败，建议直接上传图片文件

说明：
- pages.json 是页面路由配置文件，用于注册页面路径和配置页面样式。
- 支持全局样式和页面单独样式配置。

uni.scss

作用：全局样式文件，用于定义全局的 SCSS 变量和混合。

内容：

$primary-color: #007AFF;

.text-primary {
  color: $primary-color;
}

转存失败，建议直接上传图片文件

说明：
- uni.scss 是全局样式文件，可以在项目中引用定义的变量和混合。
- 支持 SCSS 语法。

package.json

作用：项目依赖配置文件，用于管理项目的依赖和脚本。

内容：

{
  "name": "my-uniapp-project",
  "version": "1.0.0",
  "scripts": {
    "serve": "npm run dev",
    "build": "npm run build"
  },
  "dependencies": {
    "vue": "^2.6.14"
  }
}

转存失败，建议直接上传图片文件

说明：
- package.json 是项目的依赖配置文件，用于管理项目的依赖和脚本。
- 可以通过 npm install 安装依赖。

UniApp 的项目目录结构清晰且灵活，能够满足多端开发的需求。以下是关键点总结：

pages/ 目录：存放页面文件，是项目的核心部分。
static/ 目录：存放静态资源，如图片、字体等。
components/ 目录：存放自定义组件，提高代码复用性。
uni_modules/ 目录：管理插件和模块，方便扩展功能。
核心文件：如 App.vue、main.js、manifest.json 等，是项目的配置和入口。

通过掌握 UniApp 的项目目录结构，开发者可以更好地组织和管理项目代码，提高开发效率。

总结

通过 HBuilderX 或 CLI，可以快速创建 UniApp 项目。项目的目录结构清晰，主要包括页面文件夹、组件文件夹和全局配置文件。熟悉这些内容，是进入 UniApp 开发的基础步骤。

1.3 基本语法与框架基础

使用 Vue.js 的基础知识
UniApp 特有的语法和组件
页面与页面路由
使用插件和扩展功能

1.3.1 使用 Vue.js 的基础知识

UniApp 是基于 Vue.js 构建的，因此掌握 Vue 的基本语法和开发模式是学习 UniApp 的前提。

Vue 基础知识

模板语法：使用 HTML 模板结合动态绑定语法（{{ }}）渲染数据。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "Hello, UniApp!"
    };
  }
};
</script>

转存失败，建议直接上传图片文件

双向绑定：使用 v-model 实现表单的双向数据绑定。

<input v-model="inputValue" />
<p>输入值是：{{ inputValue }}</p>

转存失败，建议直接上传图片文件

事件绑定：使用 @事件名 绑定事件，如 @click。

<button @click="handleClick">点击我</button>
<script>
export default {
  methods: {
    handleClick() {
      console.log("按钮被点击");
    }
  }
};
</script>

转存失败，建议直接上传图片文件

指令系统： Vue 提供了一系列指令（v-if、v-for、v-bind 等）用于动态渲染内容。
```
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
```

Vue 生命周期 理解生命周期是管理组件逻辑的关键：
- created：实例被创建完成。
- mounted：组件被挂载到 DOM。
- updated：数据变化导致的视图更新。
- destroyed：组件销毁时调用。
Vue 组件化开发
- 使用 components 注册子组件，实现组件复用。
- 父子组件通过 props 和 emit 进行数据通信。

1.3.2 UniApp 特有的语法和组件

UniApp 在 Vue.js 的基础上扩展了一些特有的语法和组件，用于支持多端开发。

特有语法
- 全局样式：使用 uni.scss 配置全局样式变量（如颜色、尺寸等）。
- 跨端适配：通过 uni.getSystemInfoSync() 获取设备信息，动态调整界面布局。
- 平台判断：使用 process.env.UNI_PLATFORM 判断当前运行的平台（如 H5、mp-weixin）。
```
if (process.env.UNI_PLATFORM === "mp-weixin") {
  console.log("运行在微信小程序中");
}
```
UniApp 内置组件
- <view> ：代替传统的 <div>，用于通用容器布局。
- <scroll-view> ：支持滚动区域。
- <swiper> ：用于轮播图。
- <button> ：平台适配的按钮。
- <image> ：图片组件，支持多端适配。
- <input> 和 <textarea> ：表单输入组件，支持平台特性。
UniApp 内置 API
- 文件操作：uni.getStorageSync()、uni.setStorageSync()。
- 网络请求：uni.request()。
- 界面交互：uni.showToast()、uni.showModal()。
- 设备能力：uni.getLocation()、uni.scanCode()。

1.3.3 页面与页面路由

页面管理
- UniApp 的页面文件放置在 pages/ 目录中，每个页面由 xxx.vue 文件和 xxx.json 文件组成。
- 使用 pages.json 配置全局页面信息，例如导航栏、标题、路径等：
```
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ]
}
```

页面路由

页面跳转：使用 uni.navigateTo、uni.redirectTo 或 uni.switchTab。
```
uni.navigateTo({
  url: '/pages/detail/detail'
});
```

页面返回：uni.navigateBack。

uni.navigateBack({
  delta: 1 // 返回上一级页面
});

转存失败，建议直接上传图片文件

路由拦截

配置 uni.addInterceptor() 拦截特定 API 请求，如登录校验：

uni.addInterceptor('navigateTo', {
  invoke(args) {
    if (!isLoggedIn()) {
      uni.redirectTo({ url: '/pages/login/login' });
      return false;
    }
    return true;
  }
});

转存失败，建议直接上传图片文件

1.3.4 使用插件和扩展功能

插件市场
- 在 DCloud 插件市场查找适配 UniApp 的插件，如地图、支付、图表等扩展功能。
- 安装方法：
  - 在 HBuilderX 中搜索插件并一键安装。
  - 或通过 npm 安装插件库：
```
# 此处举例，需要到 uniapp 插件库下载插件，或者 github 查找所需对应插件
npm install lime-echart
```
扩展功能
- 使用第三方 UI 库（如 uView）快速构建美观的界面：
```
npm install uview-ui
```
  并在 main.js 中引入：
```
import uView from "uview-ui";
Vue.use(uView);
```
- 集成其他框架（如 Three.js、ECharts），实现 3D 场景或数据可视化：
```
npm install three
```

总结

本章介绍了 UniApp 的开发基础，结合 Vue.js 的核心知识，同时解析了 UniApp 的特有语法、内置组件、页面路由和插件扩展功能。这些内容是熟练使用 UniApp 构建跨平台应用的基石，尤其是内置 API 和组件的熟悉程度，直接影响开发效率。

1.4 布局与样式

Flex 布局
CSS 样式适配
rpx 和 px 的使用
自适应设计技巧

Flex 布局

Flex 布局是 UniApp 中非常重要的一种布局方式，能够帮助开发者更高效地设计响应式界面。它主要通过设置容器元素的 display: flex 来启用。Flex 布局具有以下特点：

自动对齐：通过 justify-content 和 align-items 等属性，自动对齐子元素。
灵活的元素布局：容器内的元素可以按比例缩放和分配空间，不需要使用固定的宽高。
常用属性：
- justify-content：定义主轴（横向或纵向）对齐方式。
- align-items：定义交叉轴（垂直或水平）对齐方式。
- flex-direction：设置主轴方向，决定元素是横向排列还是纵向排列。
- flex-wrap：允许子元素在容器空间不足时换行。

通过 Flex 布局，UniApp 开发者可以实现非常灵活的页面布局，特别适用于响应式设计。

CSS 样式适配

在 UniApp 开发中，样式适配非常重要，尤其是不同平台（如小程序、Web、iOS、Android）之间的适配。UniApp 提供了一些常用的样式适配方法：

媒体查询（@media） ：根据设备的屏幕尺寸和分辨率调整样式。
px 与 rpx 单位的使用：通过设置不同的单位来适配不同屏幕的显示效果。

对于不同的平台，可以通过在项目的配置文件中进行调整来确保一致性。

rpx 和 px 的使用

UniApp 使用 rpx 单位来实现响应式布局，而 px 是传统的像素单位。

rpx（响应式像素） ：rpx 单位相对于屏幕宽度进行自适应。例如，1rpx 会根据设备屏幕宽度的变化自动调整大小。在不同的设备上，rpx 可以帮助保证页面元素的比例和布局的一致性。
px（像素） ：px 是固定单位，适用于那些在设备屏幕大小变化时需要保持固定尺寸的情况。

为了最大程度地实现自适应设计，通常建议优先使用 rpx 单位。

自适应设计技巧

自适应设计是确保应用在不同设备上都能有良好展示的关键。常见的自适应设计技巧包括：

使用 rpx 单位进行布局，让页面元素根据屏幕宽度自适应。
采用百分比单位或视口单位（vw, vh） ，使元素尺寸相对于父元素或屏幕尺寸进行自适应。
媒体查询：针对不同屏幕尺寸设置不同的样式，确保在小屏设备（如手机）和大屏设备（如平板或桌面）上都能适应。
flex 布局：利用 Flexbox 自动调整布局，减少手动计算宽高，增加响应式的灵活性。

通过这些自适应设计技巧，UniApp 可以在多个平台上提供一致的用户体验。

总结

本章介绍了 UniApp 的开发的布局与样式， 主要涵盖了 Flex 布局、CSS 样式适配、rpx 与 px 的使用以及自适应设计技巧。Flex 布局通过容器内元素的自动对齐与灵活布局，帮助实现响应式设计。使用 rpx 单位可确保页面在不同设备上自适应，而 px 单位适用于固定尺寸。自适应设计技巧包括利用媒体查询、百分比单位、视口单位等，确保页面在不同屏幕上显示一致性。

1.5 UniApp生命周期

应用的生命周期
页面的生命周期
组件的生命周期（Vue 2 和 Vue 3）

1. 应用的生命周期

应用的生命周期是指整个 UniApp 应用从启动到销毁的过程。以下是应用的生命周期的详解：

uni-app 支持如下应用生命周期函数：

函数名	说明	平台兼容
onLaunch	当`uni-app` 初始化完成时触发（全局只触发一次），参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onShow	当 `uni-app` 启动，或从后台进入前台显示，参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发	app-uvue 不支持
onUniNViewMessage	对 `nvue` 页面发送的数据进行监听，可参考 nvue 向 vue 通讯	app-uvue 不支持
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+ app-uvue 暂不支持）	app-uvue 不支持
onPageNotFound	页面不存在监听函数	app-uvue 不支持
onThemeChange	监听系统主题变化	app-uvue 不支持
onLastPageBackPress	最后一个页面按下Android back键，常用于自定义退出	app-uvue-android 3.9+
onExit	监听应用退出	app-uvue-android 3.9+

1.1 onLaunch

触发时机：应用初始化时触发，全局只触发一次。
适用场景：
- 初始化全局数据。
- 检查用户登录状态。
- 获取设备信息或系统设置。

1.2 onShow

触发时机：应用启动或从后台进入前台时触发。
适用场景：
- 检查应用更新。
- 刷新全局数据。
- 监听网络状态变化。

1.3 onHide

触发时机：应用从前台进入后台时触发。
适用场景：
- 保存应用状态。
- 清理不必要的资源。
- 暂停定时器或动画。

1.4 onError

触发时机：应用发生脚本错误时触发。
适用场景：
- 捕获全局错误并上报。
- 提示用户错误信息。

2. 页面的生命周期

页面的生命周期是指 UniApp 中单个页面从加载到销毁的过程。以下是页面的生命周期的详解：

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档和 Vue3 组合式 API 使用文档。

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；详见	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序、QQ小程序	2.8.1+

2.1 onInit

触发时机：页面初始化时触发，仅在页面加载时执行一次。
适用场景：
- 初始化页面数据。
- 设置页面默认值。

2.2 onLoad

触发时机：页面加载时触发，可以获取页面参数（通过options参数）。
适用场景：
- 从路由中获取参数并初始化数据。
- 根据参数发起网络请求。

2.3 onShow

触发时机：页面显示时触发，每次页面显示都会执行。
适用场景：
- 刷新页面数据。
- 监听页面显示时的逻辑。

2.4 onReady

触发时机：页面初次渲染完成时触发。
适用场景：
- 操作 DOM 元素。
- 初始化第三方库。

2.5 onHide

触发时机：页面隐藏时触发，例如跳转到其他页面或切换到后台。
适用场景：
- 清理定时器或动画。
- 暂停页面逻辑。

2.6 onUnload

触发时机：页面卸载时触发，页面销毁时执行。
适用场景：
- 清理全局状态。
- 取消未完成的网络请求。

2.7 onPullDownRefresh

触发时机：页面下拉刷新时触发。
适用场景：
- 实现下拉刷新功能。
- 刷新页面数据。

2.8 onReachBottom

触发时机：页面滚动到底部时触发。
适用场景：
- 实现上拉加载更多功能。
- 加载分页数据。

2.9 onShareAppMessage

触发时机：用户点击分享按钮时触发。
适用场景：
- 自定义分享内容。
- 记录分享行为。

3. 组件的生命周期

组件的生命周期是指 UniApp 中自定义组件从创建到销毁的过程。以下是 Vue 2 和 Vue 3 的组件生命周期钩子函数：

3.1 Vue 2 的组件生命周期

Vue 2 的组件生命周期钩子函数如下：

beforeCreate
- 触发时机：组件实例初始化之前触发。
- 适用场景：初始化前的准备工作。
created
- 触发时机：组件实例创建完成后触发。
- 适用场景：数据的初始化操作。
beforeMount
- 触发时机：组件挂载到 DOM 之前触发。
- 适用场景：DOM 操作前的逻辑处理。
mounted
- 触发时机：组件挂载到 DOM 后触发。
- 适用场景：操作 DOM 或初始化第三方库。
beforeUpdate
- 触发时机：组件数据更新前触发。
- 适用场景：更新前的逻辑处理。
updated
- 触发时机：组件数据更新后触发。
- 适用场景：更新后的 DOM 操作。
beforeDestroy
- 触发时机：组件销毁前触发。
- 适用场景：清理定时器或释放资源。
destroyed
- 触发时机：组件销毁后触发。
- 适用场景：清理全局状态或取消网络请求。

3.2 Vue 3 的组件生命周期

Vue 3 引入了 Composition API，生命周期钩子有所变化，以下是常用的钩子函数：

setup
- 触发时机：组件初始化时触发，替代 Vue 2 的 beforeCreate 和 created。
- 适用场景：数据的初始化操作。
onBeforeMount
- 触发时机：组件挂载到 DOM 之前触发。
- 适用场景：DOM 操作前的逻辑处理。
onMounted
- 触发时机：组件挂载到 DOM 后触发。
- 适用场景：操作 DOM 或初始化第三方库。
onBeforeUpdate
- 触发时机：组件数据更新前触发。
- 适用场景：更新前的逻辑处理。
onUpdated
- 触发时机：组件数据更新后触发。
- 适用场景：更新后的 DOM 操作。
onBeforeUnmount
- 触发时机：组件销毁前触发。
- 适用场景：清理定时器或释放资源。
onUnmounted
- 触发时机：组件销毁后触发。
- 适用场景：清理全局状态或取消网络请求。

总结

通过掌握 应用的生命周期、页面的生命周期 以及 组件的生命周期（Vue 2 和 Vue 3） ，开发者可以更好地理解 UniApp 的运行机制，从而编写出更高效、更稳定的代码。以下是关键点总结：

应用的生命周期：关注全局状态和逻辑，例如初始化、错误处理等。
页面的生命周期：关注页面级别的逻辑，例如加载、显示、隐藏等。
组件的生命周期：关注组件内部的逻辑，例如数据初始化、DOM 操作等。

UniApp 开发从入门到精通 - 卷一：juejin.cn/post/745745… UniApp 开发从入门到精通 - 卷二：juejin.cn/post/745745… UniApp 开发从入门到精通 - 卷三：juejin.cn/post/745745…

UniApp 开发从入门到精通 - 卷一