Detailed explanation of uni-app application life cycle function

Detailed explanation of uni-app application life cycle function

Detailed explanation of uni-app application life cycle function

---

---

foreword

Detailed explanation of uni-app application life cycle function of UNI-APP learning series

---

1. Application lifecycle functions

Function name	illustrate
onLaunch	Triggered when uni-appthe initialization is complete (the global only triggers once)
onShow	When uni-appstarted, or enters the foreground display from the background
onHide	When uni-appentering the background from the foreground
onError	uni-appTriggered when an error is reported
onUniNViewMessage	To nvuemonitor the data sent by the page, please refer to the communication from nvue to vue
onUnhandledRejection	Event listener function for unhandled Promise rejection (2.8.1+)
onPageNotFound	There is no listening function on the page
onThemeChange	Monitor system theme changes

• Example:

  • onPageNotFound

    • Executed when the page file corresponding to the url cannot be found

      onPageNotFound(() => {
                
                
          uni.navigateTo({
                
                
              url:'/pages/404/index'
          })
      })
      

    The execution effect is shown in the figure below

Second, the page life cycle function

Function name	illustrate
onLoad	Monitor page loading, its parameter is the data passed on the previous page, the parameter type is Object (used for page parameter passing), refer to the example
onShow	The monitoring page is displayed. Triggered every time a page appears on the screen, including returning from a subordinate page to reveal the current page
onReady	Monitor the completion of the initial rendering of the page. Note that if the rendering speed is fast, it will be triggered before the page enters the animation
onHide	Listening page hidden
onUnload	Monitor page unload
onResize	Monitor window size changes
onPullDownRefresh	Monitor the user's pull-down action, generally used for pull-down refresh, refer to the example
onReachBottom	The event that the page scrolls to the bottom (not the scroll-view scrolls to the bottom), which is often used to pull down the next page of data. For details, see the following notes
onPageScroll	Monitor page scrolling, the parameter is Object
onNavigationBarButtonTap	Listen to the click event of the native title bar button, the parameter is Object
onBackPress	Monitor the page return, return event = {from:backbutton, navigateBack}, backbutton means the source is the back button in the upper left corner or the android back key; navigateBack means the source is uni.navigateBack; detailed description and usage: onBackPress detailed explanation . The Alipay applet can only be triggered by a real machine, and can only monitor the return caused by non-navigateBack, and cannot prevent the default behavior.
onNavigationBarSearchInputChanged	Listen to the input content change event of the native title bar search input box
onNavigationBarSearchInputConfirmed	Listen to the search event of the native title bar search input box, which is triggered when the user clicks the "Search" button on the soft keyboard.
onNavigationBarSearchInputClicked	Listen to the click event of the native title bar search input box (triggered only when the searchInput configuration disabled in pages.json is true)

• Example:
  • onPullDownRefresh
    • Executed when the user pulls down in the app and applet

      onPullDownRefresh(() => {
                
                
        console.log('页面刷新了');
      })
      
      // pages.json
      对应页面配置 "enablePullDownRefresh": true
      

    The execution result is shown in the figure below
    

---

Summarize

The above is what I want to talk about today. This article introduces the whole content of the UNI-APP learning series, which explains the uni-app application life cycle functions in detail. I will continue to develop and explain the UNI-APP framework based on VSCode. If you like it, please click to follow, UNI -The APP framework usage tutorial will continue to be updated.