【微信小程序】组件的生命周期及自定义组件

文章目录

• ​​组件的生命周期​​

• ​​自定义组件的生命周期函数​​

• ​​执行顺序​​
• ​​组件常用的生命周期函数​​
• ​​lifetimes节点​​

• ​​组件所在页面的生命周期函数​​

• ​​pageLifetimes节点​​

• ​​自定义组件​​

• ​​创建自定义组件​​

• ​​创建组件​​
• ​​定义组件​​
• ​​使用组件​​

• ​​父组件向子组件传递数据​​
• ​​子组件向父组件传递数据​​
• ​​其他定义段与示例方法​​

组件的生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中，最重要的生命周期是 created、attached、 detached ，包含一个组件实例生命流程的最主要时间点。

自定义组件的生命周期函数

小程序组件可用的全部生命周期如下表所示:

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

执行顺序

从该图中可以看出组件的 ready 与 detached 执行顺序并没有明确的先后关系。

组件常用的生命周期函数

在小程序组件中，最重要的生命周期函数有3个，分别是​​created​​​、​​attached​​​.
​​​detached​​。它们各自的特点。如下︰

• 组件实例刚被创建好的时候，created生命周期函数会被触发
  此时还不能调用setData，通常在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段在组件
• 完全初始化完毕、进入页面节点树后，attached生命周期函数会被触发
  此时, this.data已被初始化完毕。这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据)
• 在组件离开页面节点树后，detached生命周期函数会被触发
  退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数此时适合做一些清理性质的工作

lifetimes节点

在小程序组件中，生命周期函数可以直接定义在Component构造器的第一级参数中，可以在 lifetimes字段内进行声明（这是推荐的方式，其优先级最高）。如下:

Component({
lifetimes:{
created(){
console.log('created');
     },
attached(){
console.log('attached');
     }
  }
)}

注意：若不写在lifetime节点中且同时存在lifetime节点，优先执行lifetime节点中的生命周期函数，并覆盖掉节点之外的生命周期函数。

组件所在页面的生命周期函数

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。
在自定义组件中，组件所在页面的生命周期函数有如下3个，分别是:

生命周期函数	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	object Size	组件所在的页面尺寸变化时执行

pageLifetimes节点

组件所在页面的生命周期函数，需要定义在pageLifetimes节点中，如下:

Component({
pageLifetimes:{
show(){
console.log("show!!");
       },
hide(){
console.log("hide!!");
       },
resize(){
console.log("resize");
       }                  
   }            
)}

当页面显示和隐藏时触发

自定义组件

类似vue或者react中的自定义组件。
微信小程序也 允许我们使用自定义组件的方式来构建页面。

当我们在开发小程序页面时，少不了哪些重复或类似的板块，需要我们复制粘贴一份源码进行编写，而组件恰恰解决了这个问题，它能让我们的代码复用率更高。开发更如鱼得水。

创建自定义组件

类似于页面，一个自定义组件由 ​​.json​​​ ​​.wxml​​​ ​​.wxss​​​ ​​.js​​ 4个文件组成。

创建组件

可以在微信开发者工具中快速创建组件的文件结构。如图

创建好之后，便出现四个文件：如图

定义组件

此时我们新建一个页面-demo，在demo.json中可以使用刚才我们创建好的组件。

使用组件

首先让效果更明显，我们在组件的wxml文件中写入一些东西：

之后我们在页面demo.wxml中使用我们的组件：

出现如上效果则说明我们声明的组件已经被使用了

父组件向子组件传递数据

2. 父组件(页面)向子组件传递数据通过标签属性的方式来传递



4. 在子组件的.js文件上进行接收



5. 注意：若父组件给子组件不传值时则使用value中定义的值。
7. 在SuHeader.wxml中接收数据即可

子组件向父组件传递数据

2. 给地址绑定鼠标单击事件



4. 当单击事件被触发。给通过​​this.triggerEvent​​绑定父组件的自定义事件并且给父组件传递数据



6. 父组件的自定义事件



8. 在demo.js文件中触发父组件的自定义事件，注意与data配置项平级。



10. 触发单击响应事件

其他定义段与示例方法

定义段	类型	是否必填	描述
properties	object Map	否	组件的对外属性，是属性名到属性设置的映射表
data	object	否	组件的内部数据，和 properties一同用于模板渲染
observers	object	否	组件数据字段监听器，用于监听 properties和data的变化
methods	object	否	组件的方法，包括事件响应函数和任意的自定义方法
created	function	否	组件生命周期函数，在组件实例刚刚被创建时执行，注意此时不能调用setDat
attached	function	否	组件生念周期函数，在组件实例进入页面节点树时执行
ready	Function	否	组件生命周期函数，在组件布局完成后执行
moved	Function	否	组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
detached	Function	否	组件生命周期函数，在组件实例被从页面节点树移除时执行

详情可见官方文档：​​Component(Object object)​​