提交 93a5c5b9 编写于 作者: Q qiang

docs: 调整页面生命周期相关文档

上级 4770a7e8
### 应用生命周期 ### 应用生命周期
``uni-app`` 支持如下应用生命周期函数: ``uni-app`` 支持 onLaunch、onShow、onHide 等应用生命周期函数,详情请参考[应用生命周期](/collocation/frame/lifecycle?id=应用生命周期)
|函数名|说明|
|:-|:-|
|onLaunch|当``uni-app`` 初始化完成时触发(全局只触发一次)|
|onShow|当 ``uni-app`` 启动,或从后台进入前台显示|
|onHide|当 ``uni-app`` 从前台进入后台|
|onUniNViewMessage|对 ``nvue`` 页面发送的数据进行监听,可参考 [nvue 向 vue 通讯](/nvue-api?id=nvue-和-vue-相互通讯)|
**注意**
- 应用生命周期仅可在``App.vue``中监听,在其它页面监听无效。
- onlaunch里进行页面跳转,如遇白屏报错,请参考[https://ask.dcloud.net.cn/article/35942](https://ask.dcloud.net.cn/article/35942)
### 页面生命周期 ### 页面生命周期
``uni-app`` 支持如下页面生命周期函数: ``uni-app`` 支持 onLoad、onShow、onReady 等生命周期函数,详情请参考[页面生命周期](/collocation/frame/lifecycle?id=页面生命周期)
\ No newline at end of file
|函数名|说明|平台差异说明|最低版本|
|:-|:-|:-|:-|
|onLoad|监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考[示例](/api/router?id=navigateto)|||
|onShow|监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面|||
|onReady|监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发|||
|onHide|监听页面隐藏|||
|onUnload|监听页面卸载|||
|onResize|监听窗口尺寸变化|App、微信小程序||
|onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考[示例](api/ui/pulldown)|||
|onReachBottom|页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发|||
|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、App(自定义组件模式)||
|onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、字节跳动小程序、支付宝小程序||
|onPageScroll|监听页面滚动,参数为Object|||
|onNavigationBarButtonTap|监听原生标题栏按钮点击事件,参数为Object|App、H5||
|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](https://ask.dcloud.net.cn/article/35120)|App、H5||
|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|App、H5|1.6.0|
|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|App、H5|1.6.0|
|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|App、H5|1.6.0|
**注意**
- H5端`onBackPress`只能监听页面导航栏的返回按钮的点击事件,不能监听浏览器返回以及手机的返回
``onPageScroll`` 参数说明:
|属性|类型|说明|
|---|---|---|
|scrollTop|Number|页面在垂直方向已滚动的距离(单位px)|
``onTabItemTap`` 参数说明:
|属性|类型|说明|
|---|---|---|
|index|String|被点击tabItem的序号,从0开始|
|pagePath|String|被点击tabItem的页面路径|
|text|String|被点击tabItem的按钮文字|
**注意**
- onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。
- 如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用[plus.nativeObj.view](http://www.html5plus.org/doc/zh_cn/nativeobj.html)放一个区块盖住原先的tabitem,并拦截点击事件。
- onTabItemTap在App端,从HBuilderX 1.9 的自定义组件编译模式开始支持。
``onNavigationBarButtonTap`` 参数说明:
|属性|类型|说明|
|---|---|---|
|index|Number|原生标题栏按钮数组的下标|
`onBackPress` 回调参数对象说明:
|属性|类型|说明|
|---|---|---|
|from|String|触发返回行为的来源:'backbutton'——左上角导航栏按钮及安卓返回键;'navigateBack'——uni.navigateBack() 方法。|
```javascript
export default {
data() {
return {};
},
onBackPress(options) {
console.log('from:' + options.from)
}
}
```
**注意**
- nvue 页面的weex编译模式支持的生命周期,[参考](/nvue-outline?id=生命周期)
...@@ -5,17 +5,7 @@ ...@@ -5,17 +5,7 @@
应用生命周期仅可在`App.vue`中监听,在页面监听无效。 应用生命周期仅可在`App.vue`中监听,在页面监听无效。
### 应用生命周期 ### 应用生命周期
`uni-app` 支持如下应用生命周期函数: ``uni-app`` 支持 onLaunch、onShow、onHide 等应用生命周期函数,详情请参考[应用生命周期](/collocation/frame/lifecycle?id=应用生命周期)
|函数名 |说明 |平台兼容|
|:- |:- |:- |
|onLaunch |当`uni-app` 初始化完成时触发(全局只触发一次) ||
|onShow |当 `uni-app` 启动,或从后台进入前台显示 ||
|onHide |当 `uni-app` 从前台进入后台 ||
|onError |当 `uni-app` 报错时触发 ||
|onUniNViewMessage|对 `nvue` 页面发送的数据进行监听,可参考 [nvue 向 vue 通讯](/nvue-api?id=nvue-和-vue-相互通讯) |App|
`App.vue`文件里使用生命周期函数,如下:
```html ```html
<script> <script>
......
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
**注意** **注意**
- 应用生命周期仅可在``App.vue``中监听,在其它页面监听无效。 - 应用生命周期仅可在``App.vue``中监听,在其它页面监听无效。
- onlaunch里进行页面跳转,如遇白屏报错,请参考[https://ask.dcloud.net.cn/article/35942](https://ask.dcloud.net.cn/article/35942)
**示例代码** **示例代码**
```html ```html
......
...@@ -442,7 +442,7 @@ uni-app 2.9+ 新增 leftWindow, topWindow, rightWindow 配置。用于解决宽 ...@@ -442,7 +442,7 @@ uni-app 2.9+ 新增 leftWindow, topWindow, rightWindow 配置。用于解决宽
- `titleNView``type` 值为 `transparent` 时,导航栏为滚动透明渐变导航栏,默认只有button,滚动后标题栏底色和title文字会渐变出现; `type``float` 时,导航栏为悬浮标题栏,此时页面内容上顶到了屏幕顶部,包括状态栏,但导航栏悬浮盖在页面上方,一般这种场景会同时设置导航栏的背景色为rgba半透明颜色。 - `titleNView``type` 值为 `transparent` 时,导航栏为滚动透明渐变导航栏,默认只有button,滚动后标题栏底色和title文字会渐变出现; `type``float` 时,导航栏为悬浮标题栏,此时页面内容上顶到了屏幕顶部,包括状态栏,但导航栏悬浮盖在页面上方,一般这种场景会同时设置导航栏的背景色为rgba半透明颜色。
- `titleNView``type` 值为 `transparent` 时,App-nvue 2.4.4+ 支持 - `titleNView``type` 值为 `transparent` 时,App-nvue 2.4.4+ 支持
-`titleNView` 配置 `buttons` 后,监听按钮的点击事件,vue 页面及 nvue 的weex编译模式参考:[uni.onNavigationBarButtonTap](/nvue-outline?id=onnavigationbarbuttontap) -`titleNView` 配置 `buttons` 后,监听按钮的点击事件,vue 页面及 nvue 的weex编译模式参考:[uni.onNavigationBarButtonTap](/nvue-outline?id=onnavigationbarbuttontap)
-`titleNView` 配置 `searchInput` 后,相关的事件监听参考:[onNavigationBarSearchInputChanged 等](/frame?id=页面生命周期) -`titleNView` 配置 `searchInput` 后,相关的事件监听参考:[onNavigationBarSearchInputChanged 等](/collocation/frame/lifecycle?id=页面生命周期)
- 可通过 `[<navigation-bar>(/component/navigation-bar)]` 配置 - 可通过 `[<navigation-bar>(/component/navigation-bar)]` 配置
- App下原生导航栏的按钮如果使用字体图标,注意检查字体库的名字(font-family)是否使用了默认的 iconfont,这个名字是保留字,不能作为外部引入的字体库的名字,需要调整为自定义的名称,否则无法显示。 - App下原生导航栏的按钮如果使用字体图标,注意检查字体库的名字(font-family)是否使用了默认的 iconfont,这个名字是保留字,不能作为外部引入的字体库的名字,需要调整为自定义的名称,否则无法显示。
- 想了解各种导航栏的开发方法,请详读[导航栏开发指南](https://ask.dcloud.net.cn/article/34921) - 想了解各种导航栏的开发方法,请详读[导航栏开发指南](https://ask.dcloud.net.cn/article/34921)
...@@ -1008,7 +1008,7 @@ midButton没有pagePath,需监听点击事件,自行处理点击后的行为 ...@@ -1008,7 +1008,7 @@ midButton没有pagePath,需监听点击事件,自行处理点击后的行为
|:-|:-|:-|:-| |:-|:-|:-|:-|
|name|String|是|启动模式名称| |name|String|是|启动模式名称|
|path|String|是|启动页面路径| |path|String|是|启动页面路径|
|query|String|否|启动参数,可在页面的 [onLoad](use?id=页面生命周期) 函数里获得| |query|String|否|启动参数,可在页面的 [onLoad](/collocation/frame/lifecycle?id=页面生命周期) 函数里获得|
**注意:** 在 App 里真机运行可直接打开配置的页面,微信开发者工具里需要手动改变编译模式,如下图: **注意:** 在 App 里真机运行可直接打开配置的页面,微信开发者工具里需要手动改变编译模式,如下图:
......
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
├─static 存放应用引用静态资源(如图片、视频等)的目录,<b>注意:</b>静态资源只能存放于此 ├─static 存放应用引用静态资源(如图片、视频等)的目录,<b>注意:</b>静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录,<a href="/frame?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81">详见</a> ├─wxcomponents 存放小程序组件的目录,<a href="/frame?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81">详见</a>
├─main.js Vue初始化入口文件 ├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 <a href="/frame?id=应用生命周期">应用生命周期</a> ├─App.vue 应用配置,用来配置App全局样式以及监听 <a href="/collocation/frame/lifecycle?id=应用生命周期">应用生命周期</a>
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,<a href="/collocation/manifest">详见</a> ├─manifest.json 配置应用名称、appid、logo、版本等打包信息,<a href="/collocation/manifest">详见</a>
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,<a href="/collocation/pages">详见</a> └─pages.json 配置页面路由、导航条、选项卡等页面类信息,<a href="/collocation/pages">详见</a>
</code> </code>
...@@ -129,94 +129,11 @@ background-image: url(../../static/logo.png); ...@@ -129,94 +129,11 @@ background-image: url(../../static/logo.png);
### 应用生命周期 ### 应用生命周期
``uni-app`` 支持如下应用生命周期函数: ``uni-app`` 支持 onLaunch、onShow、onHide 等应用生命周期函数,详情请参考[应用生命周期](/collocation/frame/lifecycle?id=应用生命周期)
|函数名|说明|
|:-|:-|
|onLaunch|当``uni-app`` 初始化完成时触发(全局只触发一次)|
|onShow|当 ``uni-app`` 启动,或从后台进入前台显示|
|onHide|当 ``uni-app`` 从前台进入后台|
|onError|当 `uni-app` 报错时触发 |
|onUniNViewMessage|对 ``nvue`` 页面发送的数据进行监听,可参考 [nvue 向 vue 通讯](/nvue-api?id=nvue-和-vue-相互通讯)|
|onUnhandledRejection|对未处理的 Promise 拒绝事件监听函数(2.8.1+)|
|onPageNotFound|页面不存在监听函数|
|onThemeChange|监听系统主题变化|
**注意**
- 应用生命周期仅可在``App.vue``中监听,在其它页面监听无效。
- onlaunch里进行页面跳转,如遇白屏报错,请参考[https://ask.dcloud.net.cn/article/35942](https://ask.dcloud.net.cn/article/35942)
### 页面生命周期 ### 页面生命周期
``uni-app`` 支持如下页面生命周期函数: ``uni-app`` 支持 onLoad、onShow、onReady 等生命周期函数,详情请参考[页面生命周期](/collocation/frame/lifecycle?id=页面生命周期)
|函数名|说明|平台差异说明|最低版本|
|:-|:-|:-|:-|
|onLoad|监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考[示例](/api/router?id=navigateto)|||
|onShow|监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面|||
|onReady|监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发|||
|onHide|监听页面隐藏|||
|onUnload|监听页面卸载|||
|onResize|监听窗口尺寸变化|App、微信小程序||
|onPullDownRefresh|监听用户下拉动作,一般用于下拉刷新,参考[示例](api/ui/pulldown)|||
|onReachBottom|页面上拉触底事件的处理函数|||
|onTabItemTap|点击 tab 时触发,参数为Object,具体见下方注意事项|微信小程序、百度小程序、H5、App(自定义组件模式)||
|onShareAppMessage|用户点击右上角分享|微信小程序、百度小程序、字节跳动小程序、支付宝小程序||
|onPageScroll|监听页面滚动,参数为Object|||
|onNavigationBarButtonTap|监听原生标题栏按钮点击事件,参数为Object|5+ App、H5||
|onBackPress|监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:[onBackPress 详解](http://ask.dcloud.net.cn/article/35120)|App、H5||
|onNavigationBarSearchInputChanged|监听原生标题栏搜索输入框输入内容变化事件|App、H5|1.6.0|
|onNavigationBarSearchInputConfirmed|监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。|App、H5|1.6.0|
|onNavigationBarSearchInputClicked|监听原生标题栏搜索输入框点击事件|App、H5|1.6.0|
|onShareTimeline|监听用户点击右上角转发到朋友圈|微信小程序|2.8.1+|
|onAddToFavorites|监听用户点击右上角收藏|微信小程序|2.8.1+|
``onPageScroll`` 参数说明:
|属性|类型|说明|
|---|---|---|
|scrollTop|Number|页面在垂直方向已滚动的距离(单位px)|
``onTabItemTap`` 参数说明:
|属性|类型|说明|
|---|---|---|
|index|String|被点击tabItem的序号,从0开始|
|pagePath|String|被点击tabItem的页面路径|
|text|String|被点击tabItem的按钮文字|
**注意**
- onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。
- 如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用[plus.nativeObj.view](http://www.html5plus.org/doc/zh_cn/nativeobj.html)放一个区块盖住原先的tabitem,并拦截点击事件。
- onTabItemTap在App端,从HBuilderX 1.9 的自定义组件编译模式开始支持。
- 避免在 onShow 里使用需要权限的 API(比如 setScreenBrightness() 等需要手机权限), 可能会再次触发onShow造成死循环。
``onNavigationBarButtonTap`` 参数说明:
|属性|类型|说明|
|---|---|---|
|index|Number|原生标题栏按钮数组的下标|
`onBackPress` 回调参数对象说明:
|属性|类型|说明|
|---|---|---|
|from|String|触发返回行为的来源:'backbutton'——左上角导航栏按钮及安卓返回键;'navigateBack'——uni.navigateBack() 方法。|
```javascript
export default {
data() {
return {};
},
onBackPress(options) {
console.log('from:' + options.from)
}
}
```
**注意**
- nvue 页面支持的生命周期参考:[nvue 生命周期介绍](/nvue-outline?id=编译模式)。
## 路由 ## 路由
...@@ -599,7 +516,7 @@ domModule.addRule('fontFace', { ...@@ -599,7 +516,7 @@ domModule.addRule('fontFace', {
} }
</style> </style>
``` ```
## ``<template/>`` 和 ``<block/>`` @template-block ## ``<template/>`` 和 ``<block/>`` @template-block
......
...@@ -80,7 +80,7 @@ uni-clientDB项目目录结构如下 ...@@ -80,7 +80,7 @@ uni-clientDB项目目录结构如下
| └─uni-clientDB 前端的js库,封装了查询语法 | └─uni-clientDB 前端的js库,封装了查询语法
├─pages 业务页面文件存放的目录 ├─pages 业务页面文件存放的目录
├─main.js Vue初始化入口文件 ├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 <a href="/frame?id=应用生命周期">应用生命周期</a> ├─App.vue 应用配置,用来配置App全局样式以及监听 <a href="/collocation/frame/lifecycle?id=应用生命周期">应用生命周期</a>
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,<a href="/collocation/manifest">详见</a> ├─manifest.json 配置应用名称、appid、logo、版本等打包信息,<a href="/collocation/manifest">详见</a>
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,<a href="/collocation/pages">详见</a> └─pages.json 配置页面路由、导航条、选项卡等页面类信息,<a href="/collocation/pages">详见</a>
</code> </code>
......
## 此文档已迁移 ## 此文档已迁移
**新文档链接**[https://uniapp.dcloud.io/vue-basics](https://uniapp.dcloud.io/vue-basics) **新文档链接**[https://uniapp.dcloud.io/vue-basics](https://uniapp.dcloud.io/vue-basics)
************************************** **************************************
``uni-app`` 在发布到H5时支持所有vue的语法;发布到App和小程序时,由于平台限制,无法实现全部vue语法,但``uni-app``仍是是对vue语法支持度最高的跨端框架。本文将详细讲解差异。 ``uni-app`` 在发布到H5时支持所有vue的语法;发布到App和小程序时,由于平台限制,无法实现全部vue语法,但``uni-app``仍是是对vue语法支持度最高的跨端框架。本文将详细讲解差异。
相比Web平台, ``Vue.js````uni-app`` 中使用差异主要集中在两个方面: 相比Web平台, ``Vue.js````uni-app`` 中使用差异主要集中在两个方面:
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
## 生命周期 ## 生命周期
``uni-app`` 完整支持 ``Vue`` 实例的生命周期,同时还新增 [应用生命周期](/frame?id=应用生命周期)[页面生命周期](/frame?id=页面生命周期) ``uni-app`` 完整支持 ``Vue`` 实例的生命周期,同时还新增 [应用生命周期](/collocation/frame/lifecycle?id=应用生命周期)[页面生命周期](/collocation/frame/lifecycle?id=页面生命周期)
详见Vue官方文档:[生命周期钩子](https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90) 详见Vue官方文档:[生命周期钩子](https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90)
......
...@@ -223,7 +223,7 @@ vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要 ...@@ -223,7 +223,7 @@ vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要
相比Web平台, Vue.js 在 `uni-app` 中使用差异主要集中在两个方面: 相比Web平台, Vue.js 在 `uni-app` 中使用差异主要集中在两个方面:
- 新增:`uni-app` 除了支持Vue实例的生命周期,还支持[应用生命周期](/frame?id=应用生命周期)以及[页面生命周期](/frame?id=页面生命周期) - 新增:`uni-app` 除了支持Vue实例的生命周期,还支持[应用生命周期](/collocation/frame/lifecycle?id=应用生命周期)以及[页面生命周期](/collocation/frame/lifecycle?id=页面生命周期)
- 受限:相比web平台,在小程序和App端部分功能受限,[具体见](/vue-api) - 受限:相比web平台,在小程序和App端部分功能受限,[具体见](/vue-api)
- uni-app 完整支持 Vue 模板语法。 - uni-app 完整支持 Vue 模板语法。
- App端可以使用更多的vue特性,[详见](https://ask.dcloud.net.cn/article/36599) - App端可以使用更多的vue特性,[详见](https://ask.dcloud.net.cn/article/36599)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册