【微信小程序】组件的生命周期及自定义组件
文章目录
- 组件的生命周期
- 自定义组件的生命周期函数
- 执行顺序
- 组件常用的生命周期函数
- 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中使用我们的组件:
出现如上效果则说明我们声明的组件已经被使用了
父组件向子组件传递数据
父组件(页面)向子组件传递数据通过标签属性的方式来传递
在子组件的.js文件上进行接收
注意:若父组件给子组件不传值时则使用value中定义的值。在SuHeader.wxml中接收数据即可
子组件向父组件传递数据
给地址绑定鼠标单击事件
当单击事件被触发。给通过
this.triggerEvent
绑定父组件的自定义事件并且给父组件传递数据
父组件的自定义事件
在demo.js文件中触发父组件的自定义事件,注意与data配置项平级。
触发单击响应事件
其他定义段与示例方法
定义段 | 类型 | 是否必填 | 描述 |
---|---|---|---|
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)
【微信小程序】组件的生命周期及自定义组件相关推荐
- 微信小程序开发之生命周期
开发小程序过程中会涉及到小程序的生命周期,和其他app开发一样,小程序也有生命周期. 1:页面的生命周期 在初始页面:index.js中增加如图1所示代码 点击"编译"后,运行这个 ...
- 【微信小程序开发】生命周期与生命周期函数
目录 一.生命周期 二.生命周期函数 三.总结 一.生命周期 (1)概念 生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段 小程序的生命周期 小程序启动,表 ...
- 微信小程序开发之生命周期详解?
小程序分为应用和页面两个部分: 应用的生命周期. 页面的生命周期. 应用的生命周期对页面生命周期的影响. 路由变化对页面生命周期的影响 1.应用的生命周期: 属性 ------------- 类型 - ...
- mpvue还在维护吗_mpvue 微信小程序开发之生命周期
最近在开发小程序,尝试性地使用了一下 mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compile ...
- 微信小程序开发---页面生命周期
微信小程序开发---生命周期 何为生命周期 小程序全局[app.js]---生命周期 小程序页面[pages/pagename.js]---生命周期 何为生命周期 生命周期是指一个事物从创建到销毁的一 ...
- 微信小程序学习笔记(四)——自定义组件
自定义组件 组件的创建与引用 创建组件 在根目录下创建 components 文件夹 右键点击 components 文件夹,选择新建 Component,就会自动生成.wxml..wxss..js. ...
- 微信小程序之圆形进度条(自定义组件)
前言 昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来 创建自定义组件 第一步创建项目结构 打开微信开发者工具创建一个项目, ...
- 微信小程序进度条组件自定义数字_微信小程序之圆形进度条(自定义组件)
前言 昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来 创建自定义组遇新是直朋能到件 第一步创建项遇新是直朋能到分览目结构 ...
- vant 半圆仪表盘_微信小程序之圆形进度条(自定义组件)
思路 使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval 让彩色圆环逐步绘制. 在看我的文章前,必须先看 ,下面转的文章,因为本文是在它们基础上修改的. 它们的缺点为: ...
最新文章
- IRP和IO_STACK_LOCATION结构
- php 长文本_php字符串太长怎么办
- Jackson使用示例:将Java对象转换成Map
- 软件自学成才到公司要学历吗_作为一名自学成才的移动开发人员,我在旅途中学到了什么
- 初学者web前端知识点--HTML部分
- 1月25日再次开抢!三星Galaxy S21系列标准版已多次开售即罄
- Windows下配置Nginx使之支持PHP(转)
- Python+OpenCV:Hough直线检测(Hough Line Transform)
- linux 初始化全部操作
- MySQL终端(Terminal)命令基本操作(转)
- 设计模式 (十八 ) 观察者模式
- 嵌入式linux 面试题
- Html制作简单而漂亮的登录页面-web前端教程
- 梦幻西游新资源的提取一
- wps打印错误未定义书签怎么解决_wps书签_如何利用WPS书签来进行快速定位_wps书签怎么用_wps错误未定义书签...
- 牛逼的架构 vs ‘牛逼’ 的人生
- 游戏日常运营数据:DAU分解及留存
- java catch块_用Java编写带有清除操作的catch块
- 如何用intellij生成全英文javadoc
- 线程基础篇-线程同步