Many students tend to confuse the applet life cycle with the page life cycle, which should be different but related life cycles.

1. Applets life cycle

  • (1) First of all, the life cycle function of the applet is called in app.js, and the app (Object) function is used to register a applet. Accepts an Object parameter specifying the life cycle callback of its applet; Generally speaking, there areonLaunchListen for applets initialization,onShowListen to the applet display,onHideListen for life cycle callback functions such as applets hiding.
  • (2) The text is a little fuzzy to the concept, right? The best way to understand a concept is to actually do it. So, let’s see which onLaunch, onShow, and onHide is called first and when to start a small program.
OnLaunch () {console.log('onLaunch listens to applet initialization '); } onShow() {console.log('onShow listens for applet display '); } onHide() {console.log('onLaunch listener applet hide '); }Copy the code

To open the applet click the button in the upper right corner to hide the applet from entering again

  • (3) From this, we can know that the function call sequence of the life cycle of the small program is:onLaunch>onShow>onHide

2. Page lifecycle

  • (1) Page life cycle function is the life cycle function that you call every time you enter/switch to a new page. The Page(Object) function registers a Page. Accepts an Object parameter that specifies the page’s initial data, lifecycle callbacks, event handlers, and so on.

  • (2) The sequence of life cycle functions of each page

OnLoad (options) {console.log('onLoad listens for page loading, only once '); } onReady() {console.log('onReady listens to the page once the first rendering is complete '); } onShow() {console.log('onShow listens for page display, execute multiple times '); } onHide() {console.log('onHide listener page hide '); } onUnload() {console.log('onUnload listening page '); }Copy the code

OnLoad >onReady>onShow; The onHide function is triggered when the page is hidden.

Small program drop down refresh and bottom

methods type describe
onPullDownRefresh() function Page-specific event handlers – listen for user pull actions
Wx. stopPullDownRefresh stops the pull-down refresh of the current page after the data refresh is processed
onReachBottom() function Pull the handler that triggers the bottom event on the page
You can set the trigger distance onReachBottomDistance in the App. json window option or in the page configuration