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

本文链接：https://blog.youkuaiyun.com/ya3288426755/article/details/146325674

在此之前

详细内容还请查看官方文档https://uniapp.dcloud.net.cn/tutorial/，下面内容是整合各方资料得到的
下面是我觉得合适的学习顺序，在正式上手uniapp之前需要了解的东西
后面这段时间我会学习小程序开发的知识，会持续更新
可以查看我的github，后续我会上传我的uniapp相关练习代码
有兴趣的话可以浏览我的个人网站，我会在上面持续更新内容

什么是uniapp？

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

iOS 和 Android 的原生应用
微信小程序、支付宝小程序、百度智能小程序、字节跳动小程序、QQ小程序等各类小程序
H5 网页应用

主要特点和优势如下：

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

代码编写及开发规范

基本语言和技术栈

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

核心语言：JavaScript (JS)、Vue.js、CSS。
扩展技术：TypeScript (TS)，SCSS等CSS预处理器。此外，在app端还支持原生渲染的nvue文件格式，以及可以编译为Kotlin和Swift的uts脚本。

开发规范

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

页面遵循Vue单文件组件(SFC)规范，每个页面是一个.vue文件。
组件标签设计接近微信小程序的标准，以降低学习成本。
接口能力（JS API）采用统一前缀uni，如uni.request代替wx.request或my.request，确保跨平台一致性。
数据绑定和事件处理遵循Vue.js规范，同时增加了应用生命周期和页面生命周期的概念。
对于需要兼容nvue平台的情况，建议采用flex布局。

编译器与运行时

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

编译器

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

在Web平台上，编译.vue文件为JS代码，类似于普通Vue CLI项目。
在微信小程序中，编译器将.vue文件拆分为wxml、wxss和js文件。
在App平台上，除了常规的JS代码生成外，对于.uts文件，还会分别编译为Kotlin（Android）或Swift（iOS）代码。

运行时(runtime)

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

特殊功能

条件编译：允许开发者指定某些代码只编译到特定平台，从而在同一工程中融合公共和个性化需求。
API支持：内置大量跨平台API，同时也允许调用平台特有的API，保证灵活性的同时简化了跨端开发的复杂度。

uniapp工程结构

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/             // 示例构建输出目录

main.js - 这是Vue初始化入口文件。它负责启动Vue实例，并且通常在这里引入需要的插件和其他配置。
App.vue - 应用配置文件，用于配置全局样式以及监听应用生命周期事件（如onLaunch、onShow等）。它是整个应用程序的根组件。
pages.json - 配置页面路由、导航条样式、选项卡等信息的关键文件。它定义了应用内所有页面的路径及其相关属性，例如标题栏样式、是否允许下拉刷新等。
manifest.json - 该文件包含了应用的基本配置信息，包括应用名称、图标、版本号等打包信息，对不同平台（如Android、iOS）有不同的配置需求。
static/ 目录 - 存放静态资源的地方，比如图片、字体等。需要注意的是，这里的资源不会经过编译，会直接复制到输出目录中。
components/ 目录 - 放置可复用的Vue组件。遵循Vue组件规范，便于代码重用和维护。
pages/ 目录 - 存放业务逻辑相关的页面文件。每个页面都是一个独立的Vue组件，通过pages.json进行管理。
uni.scss - 定义了全局样式变量，可以帮助开发者统一控制应用的整体风格，如按钮颜色、边框样式等。
unpackage/ 目录 - 此目录用于存放编译后的输出结果，即打包后生成的应用程序或网页。

uni-app项目中的页面

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

在 uni-app js 引擎版中，后缀名是.vue文件或.nvue文件。这些页面均全平台支持，差异在于当 uni-app 发行到App平台时，.vue文件会使用webview进行渲染，.nvue会使用原生进行渲染.

一个页面可以同时存在vue和nvue，在pages.json的路由注册中不包含页面文件名后缀，同一个页面可以对应2个文件名。重名时优先级如下：
- 在非app平台，先使用vue，忽略nvue
- 在app平台，使用nvue，忽略vue
在 uni-app x 中，后缀名是.uvue文件

uni-app x 中没有js引擎和webview，不支持和vue页面并存。

uni-app x 在app-android上，每个页面都是一个全屏activity，不支持透明。

页面管理

新建页面

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节点的第一项为应用入口页（即首页）
应用中新增/减少页面，都需要对 pages 数组进行修改
文件名不需要写后缀，框架会自动寻找路径下的页面资源

删除页面

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

删除.vue文件、.nvue、.uvue文件
删除pages.json -> pages列表项中的配置（如使用HBuilderX删除页面，会在状态栏提醒删除pages.json对应内容，点击后会打开pages.json并定位到相关配置项）

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配置项中的第一个页面，作为当前工程的首页（启动页）。

{
	"pages": [
		{
			"path": "pages/index/index", //名字叫不叫index无所谓，位置在第一个，就是首页
			"style": {
				"navigationBarTitleText": "首页" //页面标题
			}
		},
		{
			"path": "pages/my",
			"style": {
				"navigationBarTitleText": "我的"
			}
		},
	]
}

页面内容构成

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

模板组件区 <template>
脚本区 <script>
样式区 <style>

<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	挂载到实例上去之后调用。详见注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用`$nextTick`Vue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

easycom

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

<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将其精简为一步。

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

<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>

路径规范指：

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

工程目录：

┌─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

说明

easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用。
easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件。
在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）。
考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。因为nvue页面引入的组件也是.vue组件。可以参考uni ui，使用vue后缀，同时兼容nvue页面。

js 文件引入

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

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

注意

js 文件不支持使用/开头的方式引入

NPM支持

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

安装依赖

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

npm install packageName --save

使用

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

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

注意

为多端兼容考虑，建议优先从 uni-app插件市场获取插件。
非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API（兼容小程序 API）.
node_modules 目录必须在项目根目录下。不管是cli项目还是HBuilderX创建的项目。

`rpx`单位

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

rpx 的定义与特性

基准宽度：uni-app规定屏幕的基准宽度为750rpx。这意味着无论实际屏幕宽度是多少，设计时假设屏幕宽度为750rpx。
自适应性：rpx会根据设备的实际屏幕宽度进行缩放。例如，在一个375px宽的屏幕上，1rpx等于0.5px；而在一个750px宽的屏幕上，1rpx等于1px。

使用场景

响应式布局：使用rpx可以帮助开发者创建响应式的布局，确保界面元素在不同设备上都能适当地展示。
简化适配工作：通过rpx，开发者不需要为每种屏幕尺寸单独编写样式规则，只需要按照设计稿的比例使用rpx即可。

转换公式

计算方法：为了将设计稿中的像素值转换为rpx，可以使用以下公式：
```
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
```
示例：
- 如果设计稿宽度为750px，那么100px的设计元素应设置为100rpx。
- 如果设计稿宽度为640px，那么100px的设计元素应设置为约117rpx（750 * 100 / 640）。

注意事项

固定尺寸：如果希望某些元素不随屏幕宽度变化而变化，则应使用px单位。
字体大小：对于字体或高度使用rpx时，需要注意这些元素会随着屏幕宽度增加而变大。若要固定大小，建议使用px。
横竖屏切换：rpx不支持动态横竖屏切换计算，因此在设计时最好锁定屏幕方向。
App端特例：在App端的pages.json文件中的titleNView或使用plus API时，只支持px单位，不支持rpx。

uni错误规范

背景

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

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

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

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

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

错误信息的标准格式

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

errSubject: 错误发生的模块名称。
errCode: 错误代码，用于标识具体的错误类型。
errMsg: 错误消息，提供关于错误的详细描述。
data: 可选字段，可以用来传递额外的数据或上下文信息。
cause: 可能引起当前错误的源错误信息或聚合错误信息。

异步API的错误返回

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

源错误与聚合错误

SourceError: 代表单个源的错误信息，包括message, subject, code, 和cause等属性。
UniAggregateError: 当一个错误是由多个源错误引起的时使用，它包含了多个SourceError或UniAggregateError实例的数组。

错误捕获与处理

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

全面的错误捕获机制：主动捕获可能出现的所有异常，无论是同步还是异步代码。利用try-catch结构来包裹可能抛出异常的代码段，并为Promise添加catch方法。
全局异常处理：除了局部的错误处理逻辑外，还应设置全局的异常处理器，如监听onError事件，以捕捉那些未被显式捕获的异常。
集成错误追踪与监控工具：例如Sentry、Bugsnag等第三方服务可以帮助实时监控并报告运行时错误，这对于快速定位问题非常有帮助。
自定义错误上报：根据项目需求定制错误信息收集流程，将重要的错误日志发送到服务器进行分析。
优化用户体验：提供友好的错误提示信息，避免直接暴露底层错误详情给用户，同时尽可能提供替代操作或重试选项。

`NVue（Native Vue)`是什么?

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

NVue与Vue的主要区别

1. 渲染引擎

Vue: 使用的是Webview进行渲染，适用于Web应用开发。
NVue: 则采用Weex作为渲染引擎，支持跨平台开发，并且专注于原生性能优化。

2. 应用场景

Vue: 主要应用于Web应用开发，也可以通过与其他工具结合实现移动端开发。
NVue: 特别适合需要高性能和原生体验的移动端应用开发。

3. 性能差异

Vue: 运行于WebView中，相对于原生应用而言，在性能上稍逊一筹。
NVue: 通过Weex引擎直接调用原生组件，其性能接近原生应用。

4. CSS样式

Vue: 支持多种布局方式及CSS选择器。
NVue: 只支持Flex布局，css选择器的支持也较为有限，只支持简单的class选择器。

5. 开发体验

Vue: 上手简单，文档完善，社区活跃，适合前端开发者。
NVue: 需要掌握Weex相关知识，更适合有一定原生开发经验的开发者。

6. 生态系统

Vue: 拥有庞大的生态系统，包括Vue Router、Vuex、Nuxt.js等，支持各种应用场景。
NVue: 依赖于Weex生态，相对较小但专注于移动端高性能应用。

7. 语法限制

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

文字内容必须放置在<text>标签内。
不支持背景图(background-image)，但可以通过<image>组件和层级来实现类似效果。
在nvue中不能使用百分比布局。

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