Page life cycle

Official documentation direct air tickets: Click Take off

The life cycle instructions
onLoad Triggered when the page loads, such as when the page is opened for the first time before the page elements have been rendered
onShow Triggered when the page switches from background to foreground, and when the page loads
onReady Triggered when the page is rendered for the first time
onHide Triggered when the page switches from the foreground to the background, such as exit small program, exit wechat, switch to other pages, etc
onUnload Triggered before the page is destroyed, but it cannot display pop-ups and other behaviors, nor can it block the destruction process
onResize Triggered when the page size changes, such as enabling the screen rotation function
  • Opening a page for the first time triggers:onLoad -> onShow -> onReady
  • Open one againtabbarPages: only triggeronShowBecause there is a cache
  • Open a not twicetabbarPage:onLoad -> onShow -> onReady
  • Close a secondary page: triggeronUnloadAt this time, you can turn off some timers and players
  • Close applets: triggeronHideCan be used to collect statistics about the user’s stay duration and pause timer.
OnLoad compared to onReady

OnLoad is triggered before the page is rendered and onReady is triggered after the page is rendered. However, wechat does not provide an interface to get element information synchronously (createSelectorQuery is asynchronous), so the two life cycles are the same from a business point of view, because onLoad is earlier than onReady, and page parameters are also obtained by onLoad. So generally just use onLoad.

Component life cycle

Official documents direct train tickets: Click on the departure

The life cycle instructions
created Triggered when the component has just been created, before the component is initializedsetDataIs invalid
attached Triggered when the component enters the node tree, before it has been rendered but can be calledsetData
ready Triggered when component rendering is complete
moved Triggered when the component is moved to another location in the node treeI still don't know when to move a component! Have big god answer once
detached Triggered when a component is removed from the node tree, such as throughwx:ifControl Component Hiding

That’s the life cycle inside the component, and here’s how to listen for the page-level life cycle inside the component

The life cycle instructions
show And the page life cycleonShowThe same
hide And the page life cycleonHideThe same
resize And the page life cycleonResizeThe same
Pay attention to

The way a component listens for the page life cycle is different from the way it listens for the component life cycle, such as ready and Show

Component({
    ready() {
        console.log('component ready');
    },
    // The page life cycle needs to be placed in pageLifetimes
    pageLifetimes: {
        show() {
            console.log('page onShow'); }}});Copy the code

Applets life cycle

Official documentation direct bicycle tickets: Click Go

The life cycle instructions
onLaunch The first time a small program is run, it can be used to initialize common capabilities, such as enhancementsPageAbility toClick to view
onShow When the small program is started for the first time or cut to the foreground, it can be used to collect information such as the user’s stay time
onHide Small programs cut to the background, such as closing small programs, exiting wechat, answering the phone and other behaviors