Speed entry micro channel applets life cycle chapter

Stopping by to “like” and focus on your heart may encourage the front end to play better

Why do we need to understand the life cycle of applets

When your leader Zhang Xiaosan says to you:

  • This request should be made when the application starts
  • Cancel asynchronous tasks when the page jumps
  • Turn off the timer when you hide your app

Did you look stunned and confused and not know what to do

To sum up:

We take it for granted to micro channel small program life cycle to do thoroughly familiar, only in this way to let the leadership of Zhang Xiaosan to our bones, when a legitimate worker.

The concept of life cycle

The so-called life cycle can be concluded as follows:

  • An application of the process of life and death
  • The process from creation to destruction of an application

Too abstract? Let’s make it plain

  • A bunch of functions that execute at certain times!!
  • A bunch of functions that execute at certain times!!
  • A bunch of ** functions that will be executed at certain times **!!

Repeat the above three times!!!!

How to learn the life cycle

There are two ways to study:

  1. When will these lifecycle functions be executed?
  2. What’s the use?

How many life cycles are there?

There are three life cycles in wechat applets, which are as follows:

  • Application level lifecycle

  • Page level lifecycle

  • The basic lifecycle of a component

The following, SHOWTIME

Application life cycle

The website links

attribute The default value instructions
onLaunch Life cycle callback – Listens for applets initialization.
onShow Lifecycle callbacks – Listen for applets to start or cut foreground.
onHide Life cycle callback – Listen for applets to cut background.
onError Error listener function.
onPageNotFound There are no listener functions on the page.
onUnhandledRejection An unprocessed Promise rejects the event listener function.
onThemeChange Listen for system topic changes

onLaunch

When the wechat small program will be triggered as soon as it starts

trigger

– It will not trigger when an applet is opened after it has been hidden.

role

Initialization can be done when the application is started. For example:

  1. Initialization of cloud developmentConvenient other pages directly call cloud developmentSDK
  2. Send a request to obtain the user’s personal information for other pages to use
  3. Obtain local storage data for use by other pages

code

app.js

App({
  /** * Triggers */ as soon as the application starts
  onLaunch() {
    console.log("OnLaunch triggers as soon as the app is launched"); }})Copy the code

The effect

onHide

Triggered when the entire applet is hidden

trigger

When wechat small program is hidden when it will be triggered, such as switching to other apps, XXxHub, Alipay and so on

role

You can stop some operations that are being performed

  1. Pause timer
  2. Pause the video or audio playback

code

App({
  /** * Triggers when the application is hidden */
  onHide(){
    console.log("OnHide triggers as soon as the app is hidden"); }})Copy the code

The effect

onShow

Pair with onHide is triggered when the application is displayed again or when it is launched for the first time

trigger

Triggered when the applet is displayed for the first time or when the application is seen again by the user

role

The following approaches are possible

  1. Restart the timer to continue the periodic execution function
  2. Retrigger asynchrony to get new data
  3. Restart the player, etc

code

App({
  /** * Triggers when the application is hidden */
  onHide(){
    console.log("OnHide triggers as soon as the app is hidden");
  },
  /** * Triggers */ when the application is first displayed or re-displayed
  onShow(){
    console.log("OnShow application first display or redisplay"); }})Copy the code

The effect

onError

Triggered when the applet runs in error

trigger

Triggered when the wechat applet runs normally and an error occurs

role

Can be used for:

  1. Collect error information and send it to the background to record error logs
  2. A pop-up window prompts the user that something is wrong with the program

code

App({
  /** * Triggers */ as soon as the application starts
  onLaunch() {
    // This method does not exist, so the program will report an error
    this.helloworld();
  },
  /** * When an error occurs@param {Object} Err Indicates an error */
  onError(err) {
    console.log("The onError program is triggered whenever an error occurs.");
    console.log(err); }})Copy the code

The effect

onPageNotFound

This is triggered when the page does not exist

trigger

The timing of this trigger is a bit tedious, if you simply click on the page to jump to a page that does not exist then the life cycle is not triggered as the following code does not trigger.

<navigator url="/aaa/bbb/ccc/ddd" >I jumped</navigator>
Copy the code

There are certain conditions that have to be met to trigger it so let’s take an example

  1. Such as mobile phone scanning two-dimensional code into the small program
  2. The page path specified by the TWO-DIMENSIONAL code isindex
  3. However, the index page has been deleted in the following programhomeAs the home page
  4. Then the user will scan the code and be prompted to say that the page does not exist

role

  1. The listener reports an error, and a pop-up window prompts the user
  2. Listening error, jump to the page again

code

App({
  /** * When the user scans the QR code to enter the small program and finds that the page does not exist */
  onPageNotFound(){
    console.log("OnPageNotFound is triggered when the user scans the QR code to enter the mini program and finds that the page does not exist."); }})Copy the code

The effect

This effect can be simulated by specifying a non-existent page as the entry point

  1. Add a build mode (the build mode is just the entry path of the applet)
  2. Specify any existing path
  3. View page effects

onUnhandledRejection

Fired when reject in a Promise has not been captured

trigger

Fired when a Reject is found that has not been captured

role

Used in uniform capture processing to handle error cases during this lifecycle, typically caused by asynchronous code errors

code

App({
  /** * Triggers */ as soon as the application starts
  onLaunch() {
    new Promise((resolve,reject) = >{
      // Deliberately trigger reject
      reject({"message":"Request parameters are incorrect"})})},/** * Trigger */ when a reject is not captured
  onUnhandledRejection(err){
    console.log("OnUnhandledRejection triggered when a reject is not captured.");
    console.log(err); }})Copy the code

The effect

Pay attention to

The life cycle is not triggered if you catch reject yourself

Such as

App({
  /** * Triggers */ as soon as the application starts
  onLaunch() {
    new Promise((resolve,reject) = >{
      // Deliberately trigger reject
      reject({"message":"Request parameters are incorrect"})
    }).catch(err= >{
      // Catch reject onUnhandledRejection will not be triggered
      console.log("Catch yourself reject");
      console.log(err); })},/** * Trigger */ when a reject is not captured
  onUnhandledRejection(err){
    console.log("OnUnhandledRejection triggered when a reject is not captured.");
    console.log(err); }})Copy the code

onThemeChange

When the mobile phone system mode switch triggered such as on the night mode

trigger

Requires the phone to be in dark or dark mode and this lifecycle is triggered when it switches

role

Of course, let the small program can follow the theme of the switch also change the UI style of the small program, so that the experience is better!

code

Note that this event is triggered only when “darkmode”: true is enabled in the app.json file

For details on how to change the style of the applet following the theme switch, see the link.

app.json

{..."darkmode": true
}
Copy the code

app.js

App({
  /** * Triggered when the mobile system switches mode */
  onThemeChange(theme){
    console.log("OnThemeChange is triggered when the phone system switches modes.");
    console.log(theme);// Theme contains parameters that specify either day mode or night mode}})Copy the code

The effect

This effect can be demonstrated in the simulator

To be continued

I told myself I’d stop here for the night. It’s getting late

Wechat account of friends

Add big brother wechat and thousands of peers to enhance technical communication life

hsian_