Let's talk about the life cycle (function) in WeChat applet

This article will take you to take a look at the life cycle in the WeChat applet, what life cycle functions are there, and talk about its triggering time and what it does. I hope it will be helpful to everyone!

1. Life cycle

1. What is life cycle?

Life Cycle(Life Cycle)refers to the entire stage of an object from creation-> running-> destruction, emphasizing a time period

2. The life cycle of the mini program

• Startupof the mini program represents thelife cycle Start
• Closeof the applet, indicating the end of thelife cycle
• The process of running the applet in the middle is the life of the applet Cycle

3. Mini program life cycle classification

• Application life cycle Specifically refers to the process of mini program starting --> running --> destruction

• Page life cycle Specifically refers to the loading--> rendering--> destruction process of each page in the mini program

• Note: The life cycle range of the page is small , the life cycle range of the application is larger

2. Life cycle function

1. What is a life cycle function?

• The built-in functions provided by the mini program framework will be automatically executed in sequence along with the life cycle

• Life cycle The role of the function:

  • Allows programmers to perform certain operations at specific life cycle time points
  • For example, when the page is just loaded, in the life cycle function Automatically initiate a data request to obtain the data of the current page

• Note: The life cycle emphasizes the time period, and the life cycle function emphasizes the time point.

2. Application life cycle function

• app.jsis the entry file for mini program execution. TheApp()function must be called inapp.jsand can only be called once. Among them, theApp()function is used to register and execute the applet.

• App(Object)function receives anObjectParameters, you can specify the life cycle function of the applet through thisObjectparameter

• Code in app.js

The code is as follows (example):

App({ /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */ onLaunch: function () { }, /** * 当小程序启动，或从后台进入前台显示，会触发 onShow */ onShow: function (options) { }, /** * 当小程序从前台进入后台，会触发 onHide */ onHide: function () { }, /** * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 */ onError: function (msg) { } })

3. Page life cycle

• Each mini program page must have its own.jsfile, and must call thePage()function, otherwise an error will be reported. Among them, thePage()function is used to register the mini program page.

• Page(Object)function receives anObjectparameter. , you can specify the life cycle function of the page through thisObjectparameter

• page.js

The code is as follows (example):

//index.js //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

4. The entire life cycle of components

What are the life cycles of components? When are they different?

5. 组件主要的生命周期函数

data在哪个生命周期中初始化完毕？

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

最重要的生命周期是created,attached,detached，包含一个组件实例生命流程的最主要时间点。

• 组件实例刚刚被创建好时，created生命周期被触发

  • 此时还不能调用setData
  • 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段

• 在组件完全初始化完毕、进入页面节点树后，attached生命周期被触发

  • this.data已被初始化完毕
  • 这个生命周期很有用，绝大多数初始化工作可以在这个时机进行

• 在组件离开页面节点树后，detached生命周期被触发

  • 退出一个页面时，会触发页面内每个自定义组件的detached生命周期被触发
  • 如果组件还在页面节点树中，则detached会被触发。
  • 此时适合做一些清理性质的工作

6. lifetimes 节点

同时以两种方式声明生命周期函数，会执行哪个？

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

lifetimes: { attached () { console.log('在组件实例进入页面节点树') }, detached () { console.log('在组件实例被从页面节点树移除') } }, attached () { console.log('~~~~~在组件实例进入页面节点树') }, detached () { console.log('~~~~~在组件实例被从页面节点树移除') }, /** * 组件的初始数据 */ data: { // rgb 的颜色值对象 _rgb: { r: 0, g: 0, b: 0 }, // 根据 rgb 对象的三个属性，动态计算 fullColor 的值 fullColor: '0, 0, 0' }

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of Let's talk about the life cycle (function) in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!