我认为在正式上手uniapp之前你需要知道的事
在此之前
- 详细内容还请查看官方文档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工程结构
1 | uni-app项目 |
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
配置项中的第一个页面,作为当前工程的首页(启动页)。
1 | { |
页面内容构成
uni-app 页面基于 vue 规范。一个页面内,有3个根节点标签:
- 模板组件区
<template>
- 脚本区
<script>
- 样式区
<style>
1 | <template> |
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
特性,将三步优化为两步,无需注册步骤,更为简洁:
1 | <template> |
easycom
将其精简为一步。
只要组件路径符合规范(具体见下),就可以不用引用、注册,直接在页面中使用。如下:
1 | <template> |
路径规范
指:
- 安装在项目根目录的components目录下,并符合
components/组件名称/组件名称.vue
- 安装在uni_modules下,路径为
uni_modules/插件ID/components/组件名称/组件名称.vue
工程目录:
1 | ┌─components |
说明
easycom
方式引入的组件无需在页面内import
,也不需要在components
内声明,即可在任意页面使用。easycom
方式引入组件不是全局引入,而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件。- 在组件名完全一致的情况下,
easycom
引入的优先级低于手动引入(区分连字符形式与驼峰形式)。 - 考虑到编译速度,直接在
pages.json
内修改easycom
不会触发重新编译,需要改动页面内容触发。 easycom
只处理vue组件,不处理小程序专用组件(如微信的wxml格式组件)。不处理后缀为.nvue的组件。因为nvue页面引入的组件也是.vue组件。可以参考uni ui,使用vue后缀,同时兼容nvue页面。
js 文件引入
js
文件或script
标签内(包括 renderjs 等)引入js
文件时,可以使用相对路径和绝对路径,形式如下
1 | // 绝对路径,@指向项目根目录,在cli项目中@指向src目录 |
注意
- js 文件不支持使用
/
开头的方式引入
NPM支持
uni-app支持使用npm安装第三方包。
安装依赖
在项目根目录执行命令安装npm包:
1 | npm install packageName --save |
使用
安装完即可使用npm包,js中引入npm包:
1 | import package from '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
,可以使用以下公式:1
设计稿 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则是更好的选择。因此,在决定使用哪种技术时,应根据具体的项目需求和技术栈来做出最佳选择。
开发建议
图片和资源优化
- 避免使用大图:减少页面中大图资源的使用,尤其是不要将多张大图缩小后显示在一个屏幕内,这会导致内存升高和潜在的崩溃风险。
- Base64编码:对大体积二进制文件进行Base64编码会消耗大量资源,应尽量避免。
数据更新优化
- 数据定义:在
data
中定义的数据每次变化都会触发视图层重新渲染。因此,非视图所需的变量不应放在data
中,而是外部定义或直接挂载到Vue实例上以节省资源。
长列表处理
- 组件化设计:对于需要差量更新的长列表项目,应该将其作为单独组件来实现,以支持局部更新。
- 分页加载:在处理包含大量数据的长列表时,考虑采用分页策略来限制数据更新范围,并利用如
uList
这样的组件来优化性能。
减少节点数量与嵌套层级
- 简化结构:减少一次性渲染的节点数量以及组件的数量和嵌套层级,有助于降低内存占用并加快遍历速度。
视图与逻辑层通讯
- 减少通信频率:避免频繁地在视图层和逻辑层之间传递数据,比如通过减少监听事件(如
scroll-view
的滚动)来减轻通信负担。
页面切换与动画优化
- 延时渲染:当新页面初始化涉及大量图片或其他复杂元素时,可以适当延时渲染以分散资源需求,防止卡顿。
- 选择合适的动画效果:根据性能需求选择更高效的页面切换动画。
启动速度与包体积优化
- 控制代码量:管理好项目的大小,包括背景图像和字体文件等静态资源,以加速小程序启动速度。
- 摇树优化:开启摇树优化机制移除未使用的代码,进一步减小最终发布版本的体积。