uni-app开发 生命周期

uni-app开发 生命周期


1. 页面生命周期函数

onLoad:页面加载时触发的方法,全局只触发一次

onReady:页面加载完成时触发的方法,只触发一次

onShow:显示页面,每打开页面都会调用一次

onHide:页面隐藏,当小程序后台运行或跳转到其他页面时

onPullDownRefresh:监听用户下拉动作,一般用于下拉刷新

onReachBottom:页面滚动到底部的事件,一般用于上拉加载更多

2. 组件生命周期函数

created:此时data等可以使用,但是dom并没有根据数据进行渲染

mounted:此时dom根据数据被渲染出来[Dom是什么,请看4]

updated:数据更新,dom根据数据重新渲染

3. 页面通信的全局事件

3.1.1.1. 触发全局的自定事件

uni.$emit(eventName,OBJECT)

- eventName:事件名,String类型

- OBJECT:携带的参数,Object类型

代码示例:

uni.$emit('update',{msg:'页面更新'})

3.1.1.2. 监听全局的自定义事件。事件可以由 uni.$emit 触发,

uni.$on(eventName,callback)

- eventName:事件名,String类型

- callback:事件的回调函数,Function类型

代码示例:

uni.$on('update',function(data){

console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);

})

3.1.1.3. 监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器。

uni.$once(eventName,callback)

- eventName:事件名,String类型

- callback:事件的回调函数,Function类型

代码示例:

uni.$once('update',function(data){

console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);

})

3.1.1.4. 移除全局自定义事件监听器。

uni.$off(eventName,callback)

- eventName:事件名,Array类型

- callback:事件的回调函数,Function类型

注:

如果没有提供参数,则移除所有的事件监听器;

如果只提供了事件,则移除该事件所有的监听器;

如果同时提供了事件与回调,则只移除这个回调的监听器;

提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器;

4. DOM是什么?

4.1. 什么是 DOM?

DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准:

“W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分:

Core DOM - 所有文档类型的标准模型

XML DOM - XML 文档的标准模型

HTML DOM - HTML 文档的标准模型

4.2. 什么是 HTML DOM?

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了:

作为对象的 HTML 元素

所有 HTML 元素的属性

访问所有 HTML 元素的方法

所有 HTML 元素的事件

换言之:HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准

5. HTML DOM(文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被结构化为对象树:

对象的 HTML DOM 树

通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:

• JavaScript 能改变页面中的所有 HTML 元素

• JavaScript 能改变页面中的所有 HTML 属性

• JavaScript 能改变页面中的所有 CSS 样式

• JavaScript 能删除已有的 HTML 元素和属性

• JavaScript 能添加新的 HTML 元素和属性

• JavaScript 能对页面中所有已有的 HTML 事件作出反应

• JavaScript 能在页面中创建新的 HTML 事件

你可能感兴趣的:(uni-app开发 生命周期)