Table of contents
The calling process of the life cycle function
life cycle function
When using the Page() constructor to register a page, you need to use the lifecycle functions, including the onLoad() lifecycle function when the page is loaded, the onShow () lifecycle function when the page is displayed, and the onReady () lifecycle function when the page is rendered for the first time. onHide () page hide lifecycle function and onUnload () page unload lifecycle function.
1. The life cycle function when the onLoad page is loaded; a page will only be called once, and the parameters in the path to open the current page can be obtained from the parameters of onLoad, and the wx.navigateTo and wx.redirectTo and <navigator/> pages can be obtained by receiving page parameters. The parameter to carry when jumping.
2. The onShow page display life cycle function: it is called once every time the page is opened, and it is triggered when the page is displayed/switched to the foreground.
3. The onReady life cycle function of the initial rendering of the page: triggered when the initial rendering of the page is completed, a page will only be called once, which means that the page is ready and can interact with the view. The interface settings, such as: wx.setNavigationBarTitle, need to be set in After onReady.
4. onHide page hide life cycle function: triggered when the page is hidden/cut into the background, such as jumping between pages or switching to other pages through the bottom Tab, and the applet cuts into the background, etc.
5. onUnload page unload life cycle function: triggered when the page is unloaded, such as when the page jumps or returns to the previous page.
The calling process of the life cycle function
1. When the business logic layer thread is created and completed, the onLoad page load life cycle function and the onShow page display life cycle function will be called.
2. After the view layer thread is created, it asynchronously notifies the business logic layer to obtain data. The business logic layer will call onReady to complete the life cycle of the initial rendering of the page when sending data to the view layer thread to render the page.
3. When the page is hidden/cut into the background, the onHide page hide life cycle function will be called.
4. The business logic layer thread will call the onUnload page unload life cycle function when it is destroyed.
page event function
The WeChat applet provides 5 functions for page events, namely onPullDownRefresh() to listen to the user pull-down refresh event handler, onReachBottom() to listen to the user's pull-up and bottom-out event handler, and onPageScroll(Object object) to listen to the user's East China page event handler. , onResize() to monitor the event handler for page size changes, and onShareApp-Message(Object object) to monitor the user's click on the forwarding handler in the page.
1. onPullDownRefresh() monitors the user pull-down refresh event handler function: enablePullDownRefresh needs to be enabled in the window options of the app.json file or in the page configuration. The pull-down refresh can be initiated through wx.startPullDownRefresh, and the pull-down refresh animation is triggered after the call. The effect is the same as the user's manual pull-down refresh. When the data refresh is processed, wx.stopPullDown-Refresh can stop the pull-down refresh of the current page.
2. onReachBottom() monitors the user's bottom-up event handler function: you can set the trigger distance onReachBottomDistance in the window options of the app.json file or in the page configuration. During the sliding within the starting distance, this event will only be triggered once.
3. onPageScroll (Object object) monitors the user sliding page processing function: you can get the distance the page has scrolled in the vertical direction (unit is pixel)
4. onResize() monitors the time processing function of the page size: You can use the onResize of the page to monitor the page size change event. for custom components. You can use the resize lifecycle to listen. The size information of the display area will be returned in the callback function.
5. onShareAppMessage(Object object) monitors the user's click on the forwarding processing function in the page: monitor the behavior of the user clicking the page forwarding button (buton component open-type="share") or the "forwarding" button in the upper right corner menu, and customize the forwarding content , only if this event handler is defined, the "Forward" button will be displayed in the upper right menu. This event needs to return an Object object, due to the custom shared content.
Page routing management
The WeChat applet page routing management is managed by the WeChat applet. The framework maintains all pages in the form of stacks. As a data structure, the stack is a special line that can only be inserted and deleted in one segment. , he stores data according to the principle of last-in, first-out. The data entered first is pushed to the bottom of the stack, and the data entered last is at the top of the stack. When data needs to be read, data is read from the top of the stack (the last data entered is the first a read out).
WeChat applet page interaction is also done through stacks. When the WeChat applet is initialized, a new page is pushed into the stack; when a new page is opened, the new page is pushed into the stack; when the page is redirected, the current page is pushed out of the stack, and the new page is pushed into the stack; The new page is pushed into the stack; when the Tab (navigation tab) is switched, all the pages are popped out of the stack, leaving only the new Tab page; when reloading, all the pages are popped out of the stack, leaving only the new page.
custom function
In addition to initializing data and life cycle functions, Page can also define some special functions: event handlers. In the rendering layer, event binding can be added to the component. When the trigger event is reached, the event handler defined in the Page will be executed.
setData setter function
Page.prototype.setData() is a set value function, which is used to send data from the logic layer to the view layer, and at the same time change the value of the corresponding this.data.
setData() parameter format: Receive an object and change the value corresponding to the key in this.data to value in the form of key and value.
Among them, the key can be very flexible, given in the form of a data path, such as array[2].message, abcd, and does not need to be pre-defined in this.data.