一、生命周期

二、生命周期函数

三、总结

一、生命周期

（1）概念

生命周期（Life Cycle）是指一个对象从创建-->运行-->销毁的整个阶段

小程序的生命周期

小程序启动，表示生命周期的开始

小程序关闭。表示生命周期的结束

中间小程序的整个运行过程就是小程序的生命周期

（2）分类

应用生命周期

特指小程序从启动-->运行-->销毁的过程

页面生命周期

特指小程序中每个页面的加载-->渲染-->销毁的整个过程

自定义组件生命周期

组件实例被创建
组件完全初始化完毕
组件进入页面节点树
组件离开页面节点树

其中，页面的生命周期范围较小，应用程序的生命周期范围较大，如图：

二、生命周期函数

（1）概念

是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行

（2）作用

允许程序员在特定的时间点，执行某些特定的操作

（3）分类

1）小程序应用生命周期函数

伴随着小程序的整个生命周期：启动-->运行-->销毁

需要在app.js文件中进行声明，示例代码如下：

App({//小程序初始化完成会执行onLaunch，全局只会触发一次，用于页面初始化相关工作onLaunch:function(options){ },//小程序启动时或者从后台进入前台显示时触发onShowonShow:function(options){ },//小程序从前台进入后台时触发onHideonHide:function(options){ }
})

2）小程序页面生命周期函数

伴随着小程序页面的整个生命周期：加载-->渲染-->销毁

需要在页面.js文件中进行声明，示例代码如下：

Page({onLoad:function(options){ },//监听页面的加载，只会调用一次onShow:function(options){ },//监听页面显示onReady:function(options){ },//监听页面初次渲染完成，只会调用一次onHide:function(options){ },//监听页面隐藏onUnload:function(options){ },//监听页面卸载，只会调用一次
})

3）小程序自定义组件的生命周期函数

分别是created、attached、detached函数

第一，当组件实例刚被创建完成，触发created函数

但此时还不能调用setData函数

在这时间点，只用于给组件的this添加一些自定义的属性字段

第二，当组件完全初始化完毕进入页面节点树，触发attached函数

此时，this.data已经被初始化完毕

最为关键的生命周期，可以进行大多数初始化的工作，例如发送网络请求获取页面的初始数据

第三，当组件离开页面节点树后，触发detached函数

退出一个页面时，会触发页面内每个自定义组件的detached函数

此时适合做一些清理性质的收尾工作

组件全部的生命周期函数如下：

4）定义组件的生命周期函数

在小程序组件中，组件的生命周期函数的定义有新旧两种方式

第一种，直接定义在Component构造器内与data节点平级的第一级参数中
第二种，可以在lifetimes字段内进行声明（推荐，其优先级最高，且专门放生命周期函数）

自定义组件.js文件

//定义组件生命周期函数的两种方式
Component({//推荐用法lifetimes:{attached(){ },detached(){ },}//旧的定义方式，与data节点平级attached(){ },detached(){ },
})

注：如果同时存在两种新旧定义方式，那么旧的定义方式将会被覆盖掉

三、总结

生命周期强调的是一个时间段，一个过程
生命周期函数强调的是某个时间点，是过程中的某个节点
注意区别不同类别的生命周期函数，不能搞混淆

【微信小程序开发】生命周期与生命周期函数相关推荐

微信小程序开发之详解生命周期方法
生命周期是指一个小程序从创建到销毁的一系列过程在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面先来看一张小程序项目结构根目录下面有包含了app.js,app.wxs ...
微信小程序开发---页面生命周期
微信小程序开发---生命周期何为生命周期小程序全局[app.js]---生命周期小程序页面[pages/pagename.js]---生命周期何为生命周期生命周期是指一个事物从创建到销毁的一 ...
微信小程序开发之生命周期
开发小程序过程中会涉及到小程序的生命周期,和其他app开发一样,小程序也有生命周期. 1:页面的生命周期在初始页面:index.js中增加如图1所示代码点击"编译"后,运行这个 ...
微信小程序开发：微信小程序生命周期总结
前言在微信小程序开发中,关于微信小程序API的使用是必备技能,但是关于微信小程序的生命周期也是首先要了解和掌握的知识点.尤其是现在的前端开发领域,关于前端的各种框架和技术都要会,而且微信小程序的语法 ...
微信小程序学习6：页面生命周期回调函数
微信小程序学习6:页面生命周期回调函数文章目录微信小程序学习6:页面生命周期回调函数 1 生命周期图像 2 生命周期回调函数触发条件 onLoad(Object query) onShow() o ...
微信小程序开发03-这是一个组件
编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
详解微信小程序开发（项目从零开始）
关注公众号风色年代(itfantasycc) 280G前端&小程序资料随便拿! 详解微信小程序开发(项目从零开始) 一.序微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍 ...
微信小程序开发的基本用法
微信小程序开发的基本用法 1.数组或对象的遍历 1.1.数组遍历 wx:for="{{数组或对象}}" wx:for-item="循环项的名称" wx:for- ...
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...
微信小程序开发基础入门笔记
文章目录 vsc 安装插件(小程序开发助手-微信小程序开发助手) 日常注意: 微信小程序WXS模块的使用框架 1小程序结构和传统的web结构 2 基本的项目目录 3全局配置app.js 4.运算 = ...

【微信小程序开发】生命周期与生命周期函数

一、生命周期

（1）概念

（2）分类

二、生命周期函数

（1）概念

（2）作用

（3）分类

1）小程序应用生命周期函数

2）小程序页面生命周期函数

3）小程序自定义组件的生命周期函数

4）定义组件的生命周期函数

三、总结

【微信小程序开发】生命周期与生命周期函数相关推荐

最新文章

热门文章