Analysis of life cycle in small programs (with code)

The content of this article is about the analysis of the life cycle of small programs (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s think about: when we click on the screen or do a similar trigger event such as sliding the screen, why does the interface make corresponding changes?

The reason is: The entire mini program application has 2 threads.

• One thread does view rendering.

• One thread does logical processing.
  You should almost be clear about this: wxml and wxss files are mainly used for view display, while js files are mainly used for logical processing in response to events. The division of labor is clear!

##Secondly, let’s do it again Analysis: When we use small programs, we will find that there are many pages, so who will manage these pages? What is the relationship between the pages and the entire program?

• [x ] An app consists of apps and pages, with different life cycles

• app

  After a program is started, onLaunch—>onShow
  

  ## is executed. #

  App({
    onLaunch: function () {
    },
    onShow: function (options) {
    },
    onHide: function () {
    },
    onError: function (msg) {
    }
  })

pages
• After a program is started, after executing onLaunch—>onShow, then load the home page; load the home page onLoad—>onShow—>onReady

  
  

  Page({
    data: {
    },
    onLoad: function (options) {
    },
    onReady: function () {
    },
    onShow: function () {
    },
    onHide: function () {
    },
    onUnload: function () {
    },
    onPullDownRefresh: function () {
    },
    onReachBottom: function () { 
    },
    onShareAppMessage: function () {
    }
  })

At this point, you have seen the rendered homepage!

If at this time, you want to see your handsome or beautiful selfie, press the Home button or I clicked the small exit circle in the upper right corner. What happened to the mini program at this time?

- Home page loading onLaunch—>onShow—>onLoad—>onShow—>onReady Loading completed

- To exit, the applet actually executes onHide (page’s onHide)—>onHide (app’s onHide)
If after you finish admiring the selfie, you think of the mini program just now and are interested in taking a look at it, what should you do? Open it! After opening it, think about what the mini program will do? Should you reload it?
- NO NO NO! If your selfie viewing time is not very long, or the memory is enough for the applet to stay for a while, the applet only needs to be woken up! ^.^
- onLaunch—>onShow—>onLoad—>onShow—>onReady—>onHide(page)—>onHide(app) This is the lifeline after loading the homepage just now and exiting. If you come in again at this time , then the program will go like this: onShow(app)—>onShow(page)


At this time, there should be no problem with the basic loading of a page

No problem, let’s go straight to the advanced stuff

Open a new page [Add new page to stack]

Original page: onHide
New page: onLoad—>onShow—>onReady

Page redirection[Original page Pop the stack, push the new page into the stack]

Original page: onUnload
New page: onLoad—>onShow—> ;onReady

Page return [new page pops out of stack, displays original page]

New page: onUnload
Original page: onShow

Tab switch

New page :onHide
Original page: Scenario 1 (loaded): onShow Scenario 2 (not loaded): onLoad—>onShow—>onReady

Related recommendations:

Complete code for automatic loading of mini programs

WeChat mini program example: How to achieve the animation effect of the marquee (with code)

The above is the detailed content of Analysis of life cycle in small programs (with code). For more information, please follow other related articles on the PHP Chinese website!