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 事件