提交 f811bd60 编写于 作者: W wanganxp

补充时序

上级 e33ab76f
`App.vue`是uni-app的主组件,所有页面都是在`App.vue`下进行切换的,是页面入口文件。但`App.vue`本身不是页面,这里不能编写视图元素,也就是没有`<template>`
# App.vue/App.uvue
这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData
`App.vue/uvue`是uni-app的主组件。uni-app js引擎版是app.vue。uni-app x是app.uvue。以下出现的`app.vue`一般泛指包含了`app.uvue`
所有页面都是在`App.vue`下进行切换的,是应用入口文件。但`App.vue`本身不是页面,这里不能编写视图元素,也就是没有`<template>`
这个文件的作用包括:监听应用生命周期、配置全局样式、配置全局的存储globalData
应用生命周期仅可在`App.vue`中监听,在页面监听无效。
......@@ -18,6 +22,7 @@
|onUnhandledRejection|对未处理的 Promise 拒绝事件监听函数(2.8.1+)|
|onPageNotFound|页面不存在监听函数|
|onThemeChange|监听系统主题变化|
|onLastPageBackPress|最后一个页面按下Android back键,常用于自定义退出。app-uvue-android 3.9+|
**示例代码**
```html
......@@ -46,7 +51,10 @@
- onPageNotFound 页面实际上已经打开了(比如通过分享卡片、小程序码)且发现页面不存在,才会触发,api 跳转不存在的页面不会触发(如 uni.navigateTo)
## globalData
小程序有globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用。
小程序有globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用(uni-app x不支持)。
当然vue框架的全局变量,另有其他方式定义。
**以下是 App.vue 中定义globalData的相关配置:**
......@@ -72,6 +80,7 @@ nvue的weex编译模式中使用globalData的话,由于weex生命周期不支
globalData是简单的全局变量,如果使用状态管理,请使用`vuex`(main.js中定义)
## 全局样式
`App.vue`中,可以定义一些全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.vue中。
注意如果工程下同时有vue和nvue文件,全局样式的所有css会应用于所有文件,而nvue支持的css有限,编译器会在控制台报警,提示某些css无法在nvue中支持。此时需要把nvue不支持的css写在单独的条件编译里。如:
......
......@@ -3,8 +3,8 @@
* [App 完整manifest.json](collocation/manifest-app.md)
* [AndroidManifest.xml(安卓原生配置)](/tutorial/app-nativeresource-android.md)
* [Info.plist(iOS原生配置)](/tutorial/app-nativeresource-ios.md)
* [App.vue](collocation/App.md)
* [main.js](collocation/main.md)
* [App.vue/uvue](collocation/App.md)
* [main.js/uts](collocation/main.md)
* [uni.scss](collocation/uni-scss.md)
* [package.json](collocation/package.md)
* [vue.config.js](collocation/vue-config.md)
......
`main.js`是 uni-app 的入口文件,主要作用是初始化`vue`实例、定义全局组件、使用需要的插件如 vuex。
# main.js/main.uts
首先引入了`Vue`库和`App.vue`,创建了一个`vue`实例,并且挂载`vue`实例。
`main.js/uts`是 uni-app 的入口文件。uni-app js引擎版是`main.js`,而uni-app x则是`main.uts`。以下一般用`main.js`泛指全部。
`main.js`主要作用是初始化`vue`实例、定义全局组件、使用需要的插件如 i18n、vuex。
::: preview
首先引入了`Vue`库和`App.vue`,创建了一个`vue`实例,并且挂载`vue`实例。
> Vue2
> uni-app Vue2
```js
import Vue from 'vue'
......@@ -22,7 +24,7 @@ app.$mount() //挂载 Vue 实例
```
> Vue3
> uni-app Vue3
```JS
import App from './App'
......@@ -35,7 +37,37 @@ export function createApp() {
}
```
:::
> uni-app x 的 app.uvue
```ts
import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
```
## 代码时序
开发者写的代码,在应用启动时,按如下时序加载:
1. main.js/uts 的 `export function createApp() {}` 外的代码、任何页面的script中`export default {}`外的代码
2. main.js/uts 的 `export function createApp() {}` 中的代码
3. app.vue/uvue中onLaunch的代码
4. 首页的onLoad
5. 首页的onReady
开发者需谨慎在main.js/uts、页面script中`export default {}`外、和onLaunch中编写代码:
1. 这些的代码都会影响启动速度
2. 执行太早,很多功能和API无法使用,需trycatch。尤其是与界面相关的都无法使用,此时首页都还没有创建。
3. main.js/uts、页面script中`export default {}`外的代码,其创建的变量在应用存活时一直占据着内存。
## 插件
使用`Vue.use`引用插件,使用`Vue.prototype`添加全局变量,使用`Vue.component`注册全局组件。
......@@ -46,3 +78,4 @@ export function createApp() {
**注意**
- nvue 暂不支持在 main.js 注册全局组件
- uni-app x 暂不支持 i18n、vuex、pinia等插件
......@@ -138,11 +138,12 @@ script中编写脚本,可以通过lang属性指定脚本语言。
页面级的代码大多写在`export default {}`中。写在里面的代码,会随着页面关闭而关闭。
#### export default 外的代码
先来介绍写在`export default {}`外面的代码,一般有几种情况:
1. import三方js/ts模块
2. import非easycom的组件(一般组件推荐使用[easycom](../collocation/pages.md#easycom),无需导入注册)
3. 在ts/uts中,对data的类型进行type定义
4. 定义作用域更大的变量,注意外层的静态变量不会跟随页面关闭而回收
4. 定义作用域更大的变量
```html
<script lang="ts">
......@@ -171,6 +172,11 @@ script中编写脚本,可以通过lang属性指定脚本语言。
</script>
```
开发者应谨慎编写`export default {}`外面的代码,这里的代码有2个注意事项:
1. 在应用启动时执行。也就是这里的代码执行时机是应用启动、而不是页面加载。如果这里的代码写的太复杂,会影响应用启动速度和内存占用。
2. 不跟随页面关闭而回收。在外层的静态变量不会跟随页面关闭而回收。
#### export default 里的代码
`export default {}` 里的内容,是页面的主要逻辑代码。包括几部分:
1. data:template模板中需要使用的数据。具体[另见](vue-basics.md#data)
......@@ -250,6 +256,87 @@ style的写法与web的css基本相同。
|onShareTimeline|监听用户点击右上角转发到朋友圈|微信小程序|2.8.1+|
|onAddToFavorites|监听用户点击右上角收藏|微信小程序、QQ小程序|2.8.1+|
### 页面加载时序介绍@timeline
接下来我们介绍onLoad、onReady、onShow的先后关系,页面加载的详细流程。
1. uni-app框架,首先根据pages.json的配置,创建页面
所以原生导航栏是最快显示的。页面背景色也应该在这里配置。
2.根据页面template里的组件,创建dom。
这里的dom创建仅包含第一批处理的静态dom。对于通过js/uts更新data然后通过v-for再创建的列表数据,不在第一批处理。
要注意一个页面静态dom元素过多,会影响页面加载速度。在uni-app x Android版本上,可能会阻碍页面进入的转场动画。
因为此时,页面转场动画还没有启动。
3. 触发onLoad
此时页面还未显示,没有开始进入的转场动画,页面dom还不存在。
所以这里不能直接操作dom(可以修改data,因为vue框架会等待dom准备后再更新界面);在 app-uvue 中获取当前的activity拿到的是老页面的activity,只能通过页面栈获取activity。
onLoad比较适合的操作是:接受上页的参数,联网取数据,更新data。
手机都是多核的,uni.request或云开发联网,在子线程运行,不会干扰UI线程的入场动画,并行处理可以更快的拿到数据、渲染界面。
但onLoad里不适合进行大量同步耗时运算,因为此时转场动画还没开始。
尤其uni-app x 在 Android上,onLoad里的代码(除了联网和加载图片)默认是在UI线程运行的,大量同步耗时计算很容易卡住页面动画不启动。除非开发者显式指定在其他线程运行。
4. 转场动画开始
新页面开始进入的转场动画,动画默认耗时300ms,可以在路由API中调节时长。
5. 页面onReady
第2步创建dom是虚拟dom,dom创建后需要经历一段时间,UI层才能完成了页面上真实元素的创建,即触发了onReady。
onReady后,页面元素就可以自由操作了,比如ref获取节点。同时首批界面也渲染了。
注意:onReady和转场动画开始、结束之间,没有必然的先后顺序,完全取决于dom的数量和复杂度。
如果元素排版和渲染够快,转场动画刚开始就渲染好了;
大多情况下,转场动画走几格就看到了首批渲染内容;
如果元素排版和渲染过慢,转场动画结束都没有内容,就会造成白屏。
联网进程从onLoad起就在异步获取数据更新data,如果服务器速度够快,第二批数据也可能在转场动画结束前渲染。
6. 转场动画结束
再次强调,5和6的先后顺序不一定,取决于首批dom渲染的速度。
### 页面加载常见问题@pagefaq
了解了页面加载时序原理,我们就知道如何避免页面加载常见的问题:
- 优化白屏的方法:
1. 页面dom太多,注意有的组件写的不好,会拖累整体页面。uni-app x 里减少dom数量的策略,[详见](../uni-app-x/performance.md)
2. 联网不要在onReady里,那样太慢了,在onLoad里早点联网
3. 在pages.json里配置原生导航栏和背景色
4. 有的页面template内容非常少,整页就是一个需要联网加载的列表,这会造成虽然首批dom飞快渲染了,但页面其实还是白的,联网后才能显示字和图。
此时需要在template里做一些简单占位组件,比如loading组件、骨架屏,让本地先显示一些内容。
- 卡住动画不启动的原因:
1. 页面dom太多,注意有的组件写的不好,会拖累整体页面。uni-app x 里减少dom数量的策略,[详见](../uni-app-x/performance.md)
2. onLoad里执行了耗时的同步计算
### onShow和onHide
注意页面显示,是一个会重复触发的事件。
a页面刚进入时,会触发a页面的onShow。
当a跳转到b页面时,a会触发onHide,而b会触发onShow。
但当b被关闭时,b会触发onUnload,此时a再次显示出现,会再次触发onShow。
在tabbar页面(指pages.json里配置的tabbar),不同tab页面互相切换时,会触发各自的onShow和onHide。
### onInit
**注意**
......
......@@ -187,7 +187,9 @@ uvue中文字都是要使用text组件的。
</template>
```
## 层级
目前仅对同层的兄弟节点之间支持z-index来调节层级。不支持脱离dom树任意调节层级;暂不支持通过js修改z-index。
## css模块
......
......@@ -28,7 +28,7 @@ hello uni-app x 示例中,有一个日历的模板页面,就是通过draw ap
后来 slider组件改为 draw api 实现,只需要一个view。与许多原生应用相比,uni-app x的 slider组件性能更优秀。
uni-app x还提供了工具帮助开发者监控页面的dom数量。
uni-app x 还提供了工具帮助开发者监控页面的dom数量。
HBuilderX真机运行到Android时,每个页面进入时会都打印页面初始化的数据:dom数量、排版次数、渲染耗时等。
......@@ -36,7 +36,7 @@ HBuilderX真机运行到Android时,每个页面进入时会都打印页面初
当然耗时数据不能以真机运行为准,调试基座因为热更新和sourcemap追踪等很多调试功能,导致性能比真实打包差。正式打包后性能更优。
国内应用大都不会采用google的Material Design组件,大多公司自己做组件。但这些组件库的质量层次不齐。可以说大部分国内原生应用的组件库,没有uni-app x的组件性能高。
国内应用大都不会采用google的Material Design组件,大多公司自己做组件。但这些组件库的质量层次不齐。可以说大部分国内原生应用自己做的组件库,没有uni-app x的组件性能高。
## 界面元素动画
......@@ -64,7 +64,7 @@ uni-app x 中,没有通信阻塞,可以直接监听touch和滚动事件。
页面的onload触发,和进入动画是同时发生的,所以需注意onload生命周期中代码的编写。
由于uni-app x提供的联网和图片加载是在单独进程或协程中的,所以这2个行为不会卡ui。
由于uni-app x提供的联网和图片加载是在单独进程或协程中的,所以这2个行为不会卡ui。最佳实践是在onload里进行联网取数。
如果onload里某些代码卡了进入动画,也可以挪到页面的onready生命周期中,该事件触发的更晚一些。
......
......@@ -16,7 +16,7 @@ uts 全称 uni type script,是一门跨平台的、高性能的、强类型的
> * Android平台,编译为Kotlin
> * iOS平台,编译Swift
uts和ts很相似,但为了跨端,uts进行了一些约束和特定平台的增补。详见 [uts语言介绍](https://uniapp.dcloud.net.cn/uts/)
uts和ts很相似,但为了跨端,uts进行了一些约束和特定平台的增补。详见 [uts语言介绍](../uts/README.md)
开发者在 uni-app x 中,不能编写js,因为 uni-app x 中不自带js引擎。需使用uts,实现跨端的同时保证最佳性能。
......@@ -42,7 +42,7 @@ uvue渲染引擎包括原生版的vue框架(组件、数据绑定...)、跨
对于原生应用开发者而言,uvue提供了更快捷、更舒服的界面开发方式,并且不降低性能。
在 uni-app x 中,项目的页面和组件,后缀名都是uvue。而uvue文件里的script,也只能写uts。
在 uni-app x 中,项目的页面和组件,后缀名都是uvue。而uvue文件里的script,发布到App时也只能写uts。
一个uvue页面的例子:
```html
......@@ -86,7 +86,7 @@ uvue渲染引擎包括原生版的vue框架(组件、数据绑定...)、跨
uvue支持的vue语法,是按vue3实现的,但一期uvue不支持setup。详见[vue语法]()
uvue支持的css语法,是web的子集,类似于nvue的css。仅支持flex布局。但也足以布局出需要的界面。详见[css语法]()
uvue支持的css语法,是web的子集,类似于nvue的css。仅支持flex布局。但也足以布局出需要的界面。详见[css语法](css/readme.md)
以上约束特指App端的uvue引擎。如果把uvue页面编译到小程序和web平台,它的script仍然会被编译为js、它的样式遵循web的样式定义。
......@@ -99,13 +99,13 @@ uni-app x 一期,只包括基本的组件和API。
目前支持的组件清单:
- [x] view
- [x] scroll-view
- [x] list-view
- [x] swiper
- [x] text
- [x] image
- [x] button
- [x] input
- [x] textarea
- [x] list
- [x] checkbox
- [x] radio
- [x] switch
......@@ -123,7 +123,7 @@ uni-app x 一期,只包括基本的组件和API。
- waterfall/grid-view:会补充
- uniCloud-db:会补充
- ad:会补充
- rich-text:可改用web-view渲染;也可以拼接多个text、image组件
- rich-text:可改用web-view渲染;也可以拼接多个text、image组件;如果仅是文字样式变化,text组件也支持简单的嵌套
- editor:只能用web-view来加载
- map:需开发uts组件。或使用web-view中的地图
- live-pusher:需开发uts组件
......@@ -197,7 +197,7 @@ uni自带API,如下为目前支持的清单。
* [x] uni.getLocation 一期仅支持腾讯定位
### 媒体
* [x] uni.chooseImage
* [x] uni.chooseImage 仅支持相册,不支持相机
* [x] uni.saveImageToPhotosAlbum
### 设备
......@@ -217,8 +217,8 @@ uni自带API,如下为目前支持的清单。
* [x] uni.getPerformance
## 5. 全局文件
- manifest.json 仅支持基本的名称图标配置,暂未支持splash
- AndroidManifest.xml 与原生开发相同
- manifest.json 仅支持基本的名称图标配置,暂未支持splash。支持CPU类型abiFilters、Android版本minSdkVersion、targetSdkVersion。
- AndroidManifest.xml 与原生开发相同。注意Android权限配置在这里配置,而不是在manifest.json中 [详见](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android.html)
- pages.json 不支持app-plus的内容
- uni.scss 正常支持。但注意uvue仅能使用[css子集](css/README.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册