Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
93a5c5b9
U
uni-app
项目概览
DCloud
/
uni-app
2 个月 前同步成功
通知
715
Star
38705
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
93a5c5b9
编写于
12月 31, 2020
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: 调整页面生命周期相关文档
上级
4770a7e8
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
19 addition
and
191 deletion
+19
-191
docs/api/lifecycle.md
docs/api/lifecycle.md
+2
-82
docs/collocation/App.md
docs/collocation/App.md
+1
-11
docs/collocation/frame/lifecycle.md
docs/collocation/frame/lifecycle.md
+1
-0
docs/collocation/pages.md
docs/collocation/pages.md
+2
-2
docs/frame.md
docs/frame.md
+4
-87
docs/uniCloud/uni-clientDB.md
docs/uniCloud/uni-clientDB.md
+1
-1
docs/use.md
docs/use.md
+7
-7
docs/vue-basics.md
docs/vue-basics.md
+1
-1
未找到文件。
docs/api/lifecycle.md
浏览文件 @
93a5c5b9
### 应用生命周期
``uni-app``
支持如下应用生命周期函数:
|函数名|说明|
|:-|:-|
|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``
支持 onLaunch、onShow、onHide 等应用生命周期函数,详情请参考
[
应用生命周期
](
/collocation/frame/lifecycle?id=应用生命周期
)
### 页面生命周期
``uni-app``
支持如下页面生命周期函数:
|函数名|说明|平台差异说明|最低版本|
|:-|:-|:-|:-|
|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=生命周期
)
。
``uni-app``
支持 onLoad、onShow、onReady 等生命周期函数,详情请参考
[
页面生命周期
](
/collocation/frame/lifecycle?id=页面生命周期
)
\ No newline at end of file
docs/collocation/App.md
浏览文件 @
93a5c5b9
...
...
@@ -5,17 +5,7 @@
应用生命周期仅可在
`App.vue`
中监听,在页面监听无效。
### 应用生命周期
`uni-app`
支持如下应用生命周期函数:
|函数名 |说明 |平台兼容|
|:- |:- |:- |
|onLaunch |当
`uni-app`
初始化完成时触发(全局只触发一次) ||
|onShow |当
`uni-app`
启动,或从后台进入前台显示 ||
|onHide |当
`uni-app`
从前台进入后台 ||
|onError |当
`uni-app`
报错时触发 ||
|onUniNViewMessage|对
`nvue`
页面发送的数据进行监听,可参考
[
nvue 向 vue 通讯
](
/nvue-api?id=nvue-和-vue-相互通讯
)
|App|
在
`App.vue`
文件里使用生命周期函数,如下:
``uni-app``
支持 onLaunch、onShow、onHide 等应用生命周期函数,详情请参考
[
应用生命周期
](
/collocation/frame/lifecycle?id=应用生命周期
)
```
html
<script>
...
...
docs/collocation/frame/lifecycle.md
浏览文件 @
93a5c5b9
...
...
@@ -16,6 +16,7 @@
**注意**
-
应用生命周期仅可在
``App.vue``
中监听,在其它页面监听无效。
-
onlaunch里进行页面跳转,如遇白屏报错,请参考
[
https://ask.dcloud.net.cn/article/35942
](
https://ask.dcloud.net.cn/article/35942
)
**示例代码**
```
html
...
...
docs/collocation/pages.md
浏览文件 @
93a5c5b9
...
...
@@ -442,7 +442,7 @@ uni-app 2.9+ 新增 leftWindow, topWindow, rightWindow 配置。用于解决宽
-
`titleNView`
的
`type`
值为
`transparent`
时,导航栏为滚动透明渐变导航栏,默认只有button,滚动后标题栏底色和title文字会渐变出现;
`type`
为
`float`
时,导航栏为悬浮标题栏,此时页面内容上顶到了屏幕顶部,包括状态栏,但导航栏悬浮盖在页面上方,一般这种场景会同时设置导航栏的背景色为rgba半透明颜色。
-
`titleNView`
的
`type`
值为
`transparent`
时,App-nvue 2.4.4+ 支持
-
在
`titleNView`
配置
`buttons`
后,监听按钮的点击事件,vue 页面及 nvue 的weex编译模式参考:
[
uni.onNavigationBarButtonTap
](
/nvue-outline?id=onnavigationbarbuttontap
)
-
在
`titleNView`
配置
`searchInput`
后,相关的事件监听参考:
[
onNavigationBarSearchInputChanged 等
](
/
fram
e?id=页面生命周期
)
-
在
`titleNView`
配置
`searchInput`
后,相关的事件监听参考:
[
onNavigationBarSearchInputChanged 等
](
/
collocation/frame/lifecycl
e?id=页面生命周期
)
-
可通过
`[<navigation-bar>(/component/navigation-bar)]`
配置
-
App下原生导航栏的按钮如果使用字体图标,注意检查字体库的名字(font-family)是否使用了默认的 iconfont,这个名字是保留字,不能作为外部引入的字体库的名字,需要调整为自定义的名称,否则无法显示。
-
想了解各种导航栏的开发方法,请详读
[
导航栏开发指南
](
https://ask.dcloud.net.cn/article/34921
)
...
...
@@ -1008,7 +1008,7 @@ midButton没有pagePath,需监听点击事件,自行处理点击后的行为
|:-|:-|:-|:-|
|name|String|是|启动模式名称|
|path|String|是|启动页面路径|
|query|String|否|启动参数,可在页面的
[
onLoad
](
us
e?id=页面生命周期
)
函数里获得|
|query|String|否|启动参数,可在页面的
[
onLoad
](
/collocation/frame/lifecycl
e?id=页面生命周期
)
函数里获得|
**注意:**
在 App 里真机运行可直接打开配置的页面,微信开发者工具里需要手动改变编译模式,如下图:
...
...
docs/frame.md
浏览文件 @
93a5c5b9
...
...
@@ -30,7 +30,7 @@
├─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>
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 <a href="/
fram
e?id=应用生命周期">应用生命周期</a>
├─App.vue 应用配置,用来配置App全局样式以及监听 <a href="/
collocation/frame/lifecycl
e?id=应用生命周期">应用生命周期</a>
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,<a href="/collocation/manifest">详见</a>
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,<a href="/collocation/pages">详见</a>
</code>
...
...
@@ -129,94 +129,11 @@ background-image: url(../../static/logo.png);
### 应用生命周期
``uni-app`` 支持如下应用生命周期函数:
|函数名|说明|
|:-|:-|
|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`` 支持 onLaunch、onShow、onHide 等应用生命周期函数,详情请参考[应用生命周期](/collocation/frame/lifecycle?id=应用生命周期)
### 页面生命周期
``uni-app`` 支持如下页面生命周期函数:
|函数名|说明|平台差异说明|最低版本|
|:-|:-|:-|:-|
|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=编译模式)。
``uni-app`` 支持 onLoad、onShow、onReady 等生命周期函数,详情请参考[页面生命周期](/collocation/frame/lifecycle?id=页面生命周期)
## 路由
...
...
@@ -599,7 +516,7 @@ domModule.addRule('fontFace', {
}
</style>
```
## ``<template/>`` 和 ``<block/>`` @template-block
...
...
docs/uniCloud/uni-clientDB.md
浏览文件 @
93a5c5b9
...
...
@@ -80,7 +80,7 @@ uni-clientDB项目目录结构如下
| └─uni-clientDB 前端的js库,封装了查询语法
├─pages 业务页面文件存放的目录
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听
<a
href=
"/
fram
e?id=应用生命周期"
>
应用生命周期
</a>
├─App.vue 应用配置,用来配置App全局样式以及监听
<a
href=
"/
collocation/frame/lifecycl
e?id=应用生命周期"
>
应用生命周期
</a>
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,
<a
href=
"/collocation/manifest"
>
详见
</a>
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,
<a
href=
"/collocation/pages"
>
详见
</a>
</code>
...
...
docs/use.md
浏览文件 @
93a5c5b9
## 此文档已迁移
**新文档链接**
[
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语法支持度最高的跨端框架。本文将详细讲解差异。
相比Web平台,
``Vue.js``
在
``uni-app``
中使用差异主要集中在两个方面:
...
...
@@ -14,7 +14,7 @@
## 生命周期
``uni-app``
完整支持
``Vue``
实例的生命周期,同时还新增
[
应用生命周期
](
/
frame?id=应用生命周期
)
及
[
页面生命周期
](
/fram
e?id=页面生命周期
)
。
``uni-app``
完整支持
``Vue``
实例的生命周期,同时还新增
[
应用生命周期
](
/
collocation/frame/lifecycle?id=应用生命周期
)
及
[
页面生命周期
](
/collocation/frame/lifecycl
e?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
)
。
...
...
docs/vue-basics.md
浏览文件 @
93a5c5b9
...
...
@@ -223,7 +223,7 @@ vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要
相比Web平台, Vue.js 在
`uni-app`
中使用差异主要集中在两个方面:
-
新增:
`uni-app`
除了支持Vue实例的生命周期,还支持
[
应用生命周期
](
/
frame?id=应用生命周期
)
以及
[
页面生命周期
](
/fram
e?id=页面生命周期
)
。
-
新增:
`uni-app`
除了支持Vue实例的生命周期,还支持
[
应用生命周期
](
/
collocation/frame/lifecycle?id=应用生命周期
)
以及
[
页面生命周期
](
/collocation/frame/lifecycl
e?id=页面生命周期
)
。
-
受限:相比web平台,在小程序和App端部分功能受限,
[
具体见
](
/vue-api
)
。
-
uni-app 完整支持 Vue 模板语法。
-
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录