我认为在正式上手uniapp之前你需要知道的事

/ 前端
# uniapp

在此之前

什么是uniapp？

UniApp 是一个基于 Vue.js 的跨平台开发框架，它允许开发者使用一套代码库即可构建能够运行在多个平台上的应用程序，包括：

主要特点和优势如下：

  1. 跨平台开发：通过编写一次代码，可以编译并发布到多个平台，减少了针对不同平台重复编码的工作量。
  2. 统一的开发语言和工具：使用 Vue.js 作为开发语言，并提供了一套完整的开发工具链，如 HBuilderX 集成开发环境。
  3. 条件编译：支持基于条件编译的代码生成技术，可以根据目标平台的不同特性编写特定代码，同时不影响其他平台的应用程序。
  4. 组件化开发：提供了丰富的UI组件库，开发者可以根据需求选择合适的组件快速构建应用程序。
  5. 性能优化：UniApp 在性能方面做了很多工作，比如自动压缩代码、减少网络请求等，确保了应用的流畅性和稳定性。
  6. 开放生态系统：拥有庞大的插件市场和活跃的社区支持，为开发者提供了大量的资源和支持。

代码编写及开发规范

基本语言和技术栈

Uni-app支持使用多种编程语言和技术栈来构建应用：

开发规范

为了确保多端兼容性并优化编译速度和运行性能，Uni-app设定了以下开发规范：

编译器与运行时

Uni-app通过编译器和运行时两大部分实现一套代码多端运行的能力。

编译器

编译器负责将开发者的代码转换为各目标平台所需的特定代码。它既可以作为HBuilderX的一部分，也可以独立安装CLI版本使用。在不同平台上，编译器的工作方式有所不同：

运行时(runtime)

运行时是在实际设备上执行的部分，针对不同的平台有不同的实现。例如，在小程序端，它是基于Vue的一个变体；而在Web端，则包含了额外的UI库和页面路由框架。对于App端，DCloud的小程序引擎被用来打包应用程序，使其能够在Android和iOS设备上运行。

特殊功能

uniapp工程结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
uni-app项目
│
├── main.js                    // Vue初始化入口文件 
│
├── App.vue                    // 应用配置，全局样式及生命周期监听 
│
├── pages.json                 // 页面路由、导航条样式、选项卡等信息配置 
│
├── manifest.json              // 应用基本配置信息，如名称、图标、版本号等 
│
├── static/                    // 存放静态资源（图片、字体等）
│   └── logo.png               // 示例静态资源
│
├── components/                // 放置可复用Vue组件 
│   └── comp-a.vue             // 示例可复用组件
│
├── pages/                     // 存放业务逻辑页面文件 
│   ├── index/
│   │   └── index.vue          // 示例业务页面
│   └── list/
│       └── list.vue           // 另一示例业务页面
│
├── uni.scss                   // 全局样式变量定义 
│
└── unpackage/                 // 编译后的输出结果存放处 
    └── dist/                  // 示例编译输出目录
        └── build/             // 示例构建输出目录

  1. main.js - 这是Vue初始化入口文件。它负责启动Vue实例，并且通常在这里引入需要的插件和其他配置。

  2. App.vue - 应用配置文件，用于配置全局样式以及监听应用生命周期事件（如onLaunch、onShow等）。它是整个应用程序的根组件。

  3. pages.json - 配置页面路由、导航条样式、选项卡等信息的关键文件。它定义了应用内所有页面的路径及其相关属性，例如标题栏样式、是否允许下拉刷新等。

  4. manifest.json - 该文件包含了应用的基本配置信息，包括应用名称、图标、版本号等打包信息，对不同平台（如Android、iOS）有不同的配置需求。

  5. static/ 目录 - 存放静态资源的地方，比如图片、字体等。需要注意的是，这里的资源不会经过编译，会直接复制到输出目录中。

  6. components/ 目录 - 放置可复用的Vue组件。遵循Vue组件规范，便于代码重用和维护。

  7. pages/ 目录 - 存放业务逻辑相关的页面文件。每个页面都是一个独立的Vue组件，通过pages.json进行管理。

  8. uni.scss - 定义了全局样式变量，可以帮助开发者统一控制应用的整体风格，如按钮颜色、边框样式等。

  9. unpackage/ 目录 - 此目录用于存放编译后的输出结果，即打包后生成的应用程序或网页。

uni-app项目中的页面

uni-app项目中，一个页面就是一个符合Vue SFC规范的 vue 文件。

页面管理

新建页面

uni-app中的页面，默认保存在工程根目录下的pages目录下。

每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中注册的页面，uni-app会在编译阶段进行忽略。

pages

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

属性 类型 默认值 描述
path String 配置页面路径
style Object 配置页面窗口表现，配置项参考下方 pageStyle
needLogin Boolean false 是否需要登录才可访问

Tips：

删除页面

删除页面时，需做两件工作：

pages.json

pages.json是工程的页面管理配置文件，包括：页面路由注册、页面参数配置（原生标题栏、下拉刷新…）、首页tabbar等众多功能。

配置项列表
属性 类型 必填 描述 平台兼容
globalStyle Object 否 设置默认页面的窗口表现
pages Object Array 是 设置页面路径及窗口表现
easycom Object 否 组件自动引入规则 2.5.5+
tabBar Object 否 设置底部 tab 的表现
condition Object 否 启动模式配置
subPackages Object Array 否 分包加载配置 H5 不支持
preloadRule Object 否 分包预下载规则 微信小程序
workers String 否 Worker 代码放置的目录 微信小程序
leftWindow Object 否 大屏左侧窗口 H5
topWindow Object 否 大屏顶部窗口 H5
rightWindow Object 否 大屏右侧窗口 H5
uniIdRouter Object 否 自动跳转相关配置，新增于HBuilderX 3.5.0
entryPagePath String 否 默认启动首页，新增于HBuilderX 3.7.0 微信小程序、支付宝小程序
设置应用首页

pages.json -> pages配置项中的第一个页面，作为当前工程的首页（启动页）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
	"pages": [
		{
			"path": "pages/index/index", //名字叫不叫index无所谓，位置在第一个，就是首页
			"style": {
				"navigationBarTitleText": "首页" //页面标题
			}
		},
		{
			"path": "pages/my",
			"style": {
				"navigationBarTitleText": "我的"
			}
		},
	]
}

页面内容构成

uni-app 页面基于 vue 规范。一个页面内，有3个根节点标签：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
	<view class="content">
		<button @click="buttonClick">{{title}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "Hello world", // 定义绑定在页面上的data数据
			}
		},
		onLoad() {
			// 页面启动的生命周期，这里编写页面加载时的逻辑
		},
		methods: {
			buttonClick: function () {
				console.log("按钮被点了")
			},
		}
	}
</script>

<style>
	.content {
		width: 750rpx;
		background-color: white;
	}
</style>

Vue3页面生命周期

组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

函数名 说明 平台差异说明 最低版本
beforeCreate 在实例初始化之前被调用。详见
created 在实例创建完成后被立即调用。详见
beforeMount 在挂载开始之前被调用。详见
mounted 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前。详见 仅H5平台支持
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见 仅H5平台支持
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

easycom

Vue 3.x增加了script setup特性，将三步优化为两步，无需注册步骤，更为简洁：

1
2
3
4
5
6
7
8
9
10
<template>
	<view>
		<!-- 2.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script setup>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
</script>

easycom将其精简为一步。

只要组件路径符合规范（具体见下），就可以不用引用、注册，直接在页面中使用。如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
	<view class="container">
		<comp-a></comp-a>
		<uni-list>
		</uni-list>
	</view>
</template>
<script>
	// 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
	export default {
		data() {
			return {}
		}
	}
</script>

路径规范指：

  1. 安装在项目根目录的components目录下，并符合components/组件名称/组件名称.vue
  2. 安装在uni_modules下，路径为uni_modules/插件ID/components/组件名称/组件名称.vue

工程目录：

1
2
3
4
5
6
7
8
9
10
┌─components
│  └─comp-a
│    └─comp-a.vue      符合easycom规范的组件
└─uni_modules          [uni_module](/plugin/uni_modules.md)中符合easycom规范的组件
   └─uni_modules
     └─uni-list
       └─components
         └─uni-list
           └─ uni-list.vue

说明

js 文件引入

js文件或script标签内（包括 renderjs 等）引入js文件时，可以使用相对路径和绝对路径，形式如下

1
2
3
4
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';

注意

NPM支持

uni-app支持使用npm安装第三方包。

安装依赖

在项目根目录执行命令安装npm包：

1
npm install packageName --save

使用

安装完即可使用npm包，js中引入npm包：

1
2
import package from 'packageName'
const package = require('packageName')

注意

rpx单位

rpx（Responsive Pixel）是uni-app中用于实现屏幕宽度自适应的动态单位。它根据设备的屏幕宽度自动调整大小，使得应用在不同尺寸和分辨率的设备上都能保持一致的视觉效果。以下是关于rpx尺寸单位的详细说明：

rpx 的定义与特性

使用场景

转换公式

注意事项

uni错误规范

背景

小程序平台的错误信息，大多返回的格式是errCode和errMsg。但不同的小程序平台，返回的errCode有可能不一样。

在实际开发中，uni-app引擎、三方插件、开发者自己的业务代码，都会返回错误，但errCode也可能彼此冲突。

在统一的错误拦截和uni统计中，混乱的errCode会造成很多问题。

很多错误是由更底层的错误引发的，但只暴露最外层错误难以入手排查，需要暴露更底层的错误。

为了进一步规范错误信息格式，uni-app定义了更完善的错误规范：

错误信息的标准格式

uni-app引入了UniError对象来标准化错误信息，这有助于在不同平台（终端）之间统一错误信息的处理方式。UniError对象包含以下属性：

异步API的错误返回

所有异步API都应该通过回调函数返回错误信息，并且回调函数参数应该是UniError类型的对象。这使得开发者能够更容易地识别和处理来自不同来源的错误信息。

源错误与聚合错误

错误捕获与处理

为了更好地管理和处理错误，uni-app建议采取如下措施：

  1. 全面的错误捕获机制：主动捕获可能出现的所有异常，无论是同步还是异步代码。利用try-catch结构来包裹可能抛出异常的代码段，并为Promise添加catch方法。

  2. 全局异常处理：除了局部的错误处理逻辑外，还应设置全局的异常处理器，如监听onError事件，以捕捉那些未被显式捕获的异常。

  3. 集成错误追踪与监控工具：例如Sentry、Bugsnag等第三方服务可以帮助实时监控并报告运行时错误，这对于快速定位问题非常有帮助。

  4. 自定义错误上报：根据项目需求定制错误信息收集流程，将重要的错误日志发送到服务器进行分析。

  5. 优化用户体验：提供友好的错误提示信息，避免直接暴露底层错误详情给用户，同时尽可能提供替代操作或重试选项。

NVue（Native Vue)是什么?

NVue（Native Vue）是uni-app框架下的一种特殊的页面类型，它允许开发者使用Vue.js的语法和组件模型来构建原生应用。NVue结合了Vue的强大特性和Weex的能力，旨在提供高性能的原生渲染体验。然而，尽管NVue基于Vue.js，它们之间还是存在一些显著的区别。

NVue与Vue的主要区别

1. 渲染引擎

2. 应用场景

3. 性能差异

4. CSS样式

5. 开发体验

6. 生态系统

7. 语法限制

虽然NVue基本上遵循Vue的语法规范，但在实际操作中有许多限制，比如：

综上所述，虽然NVue继承了很多Vue的特点，但由于其面向的是原生应用开发，所以在很多方面都有所不同。对于那些希望快速上手并享受丰富社区资源的开发者来说，Vue是一个理想的选择；而对于需要极致性能和原生体验的移动应用项目，NVue则是更好的选择。因此，在决定使用哪种技术时，应根据具体的项目需求和技术栈来做出最佳选择。

开发建议

图片和资源优化

数据更新优化

长列表处理

减少节点数量与嵌套层级

视图与逻辑层通讯

页面切换与动画优化

启动速度与包体积优化