Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to understand the life cycle of WeChat Mini Programs". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to understand the life cycle of WeChat Mini Programs"!

I. Life cycle

1. What is the life cycle?

Life cycle (Life Cycle) refers to the whole phase of an object from create-> run-> destroy, emphasizing a time period.

two。 The life cycle of Mini Program

The launch of Mini Program marks the beginning of the life cycle.

The closure of Mini Program indicates the end of the life cycle.

The process of running Mini Program in the middle is the life cycle of Mini Program

3. Mini Program Life cycle Classification

The application lifecycle refers to the process of Mini Program starting-> running-- > destroying.

The page life cycle refers to the process of loading-> rendering-> destroying each page in Mini Program.

Note: the life cycle range of the page is small, and the life cycle range of the application is larger.

Second, life cycle function

1. What is a lifecycle function?

The built-in functions provided by the Mini Program framework are automatically executed sequentially along with the life cycle.

The role of lifecycle functions:

Allows programmers to perform certain actions at a specific point in the life cycle

For example, when a page is first loaded, it automatically initiates a data request in the lifecycle function to get the data of the current page

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

two。 Applied life cycle function

App.js is the entry file executed by Mini Program. The App () function must be called in app.js, and can only be called once. Where the App () function is used to register and execute Mini Program.

The App (Object) function takes an Object parameter, which can be used to specify the life cycle function of Mini Program. This Object parameter can be used to specify the life cycle function of Mini Program.

Code in app.js

The code is as follows (example):

App ({/ * when Mini Program initialization is completed, onLaunch (global trigger only once) * / onLaunch: function () {}, / * when Mini Program is started or displayed from the background to the foreground, onShow * / onShow: function (options) {}, / * when Mini Program enters the background from the foreground Will trigger onHide * / onHide: function () {}, / * when a script error occurs in Mini Program, or when the api call fails, onError will be triggered with the error message * / onError: function (msg) {}})

3. The life cycle of the page

Each Mini Program page must have its own .js file, and the Page () function must be called, otherwise an error will be reported. The Page () function is used to register the Mini Program page.

The Page (Object) function takes an Object parameter, which allows you to specify the life cycle function of the page through this Object parameter.

Page.js

The code is as follows (example):

/ / index.js// acquires application instance const app = getApp () Page (initial data of {/ * page * / data: {}, / * Lifecycle function-listening Page loading * / onLoad: function (options) {}, / * Lifecycle function-listening Page initial rendering completed * / onReady: function () {} / * Lifecycle function-listener page display * / onShow: function () {}, / * Lifecycle function-listener Page Hidden * / onHide: function () {}, / * Lifecycle function-listener Page Unload * / onUnload: function () {} / * Page-related event handler function-listens for user drop-down action * / onPullDownRefresh: function () {}, / * page event handler * / onReachBottom: function () {}, / * user clicks on the upper right corner to share * / onShareAppMessage: function () {}})

4. The full lifecycle of a component

What are the lifecycles of components? When are they respectively?

Life cycle parameters describe that created does not execute attached when the component instance has just been created, does not execute ready when the component instance enters the page node tree, does not execute moved after the view layer layout is complete, does not execute detached when the component instance is moved to another location in the node tree, executes errorObject Error whenever the component method throws an error

5. The main lifecycle functions of a component

In which life cycle is the data initialized?

The life cycle of a component refers to the functions of the component itself, which are automatically triggered at a special point in time or when some special framework event is encountered.

The most important life cycle is created, attached, detached, which contains the most important point in time of the life process of a component instance.

When the component instance is first created, the created life cycle is triggered

SetData cannot be called at this time

In general, this lifecycle should only be used to add custom property fields to the component this

After the component is fully initialized and enters the page node tree, the attached life cycle is triggered.

This.data has been initialized

This lifecycle is useful, and most initialization can be done at this time

The detached life cycle is triggered after the component leaves the page node tree

When you exit a page, the detached life cycle of each custom component in the page is triggered.

If the component is still in the page node tree, the detached will be triggered.

This is a good time to do some clean-up work.

6. Lifetimes node

If the lifecycle function is declared in two ways at the same time, which one will be executed?

The life cycle method can be defined directly in the first-level parameters of the Component constructor, and the life cycle of the component can also be declared in the lifetimes field (this is the recommended way, which has the highest priority)

Lifetimes: {attached () {console.log ('when the component instance enters the page node tree')}, detached () {console.log ('when the component instance is removed from the page node tree')}, attached () {console.log ('~ enter the page node tree in the component instance')}, detached () {console.log ('~ the component instance is removed from the page node tree')} / * initial data of the component * / data: {/ / rgb color value object _ rgb: {r: 0, g: 0, b: 0}, / / according to the three properties of the rgb object Dynamic calculation of the value of fullColor fullColor: '0,0,0'} so far, I believe you have a deeper understanding of "how to understand the life cycle of WeChat Mini Programs". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.