life cycle
APP life cycle
The life cycle of the App app.uxis defined in the callback function.
onCreate() {
prompt.showToast({
message: 'onCreate--应用调用--onCreate'
})
},
onRequest(){
prompt.showToast({
message: 'onRequest--监听应用收到一个外部的打开新页面的请求--onRquest'
})
},
onShow(){
prompt.showToast({
message: 'onShow--应用返回前台时调用--onShow'
})
},
onHide(){
prompt.showToast({
message: 'onHide--应用退到后台时调用--onHide'
})
},
onDestroy(){
prompt.showToast({
message: 'onDestroy--应用销毁时调用--onDestroy'
})
},
onError({
message}){
prompt.showToast({
message: 'onError--应用报错时调用--onError'+`错误原因是${
message}`
})
}
The above code
- When entering the system: onCreate, onRequest, onShow;
- No callback is used when page jumps through router.push
- Go when switching background: onHide
- When switching back to the project go: onShow
- Go when there is an error: onError
Page component life cycle
page stack
Web page development: There can only be one page at a time in the browser tab. If the current tab opens another page, the previous page will be destroyed;
Open a certain page 1 in the browser tab (page 1 initialization, rendering...), open page B in the current tab (page 1 destroyed, page 2 initialization, rendering...)
Quick application development: Multiple pages can be run at the same time , but only one page is displayed at a time .
The page stack stores the currently existing pages. How to obtain the page from the page stack when performing a routing jump is determined by the page startup mode !
Page life cycle
| life cycle | generalize | Which cycle in vue is equivalent to |
|---|---|---|
| onInit | The data is ready and you can start using the data in the page | created |
| onReady | The template has been compiled and the dom node can be obtained | mounted |
| onShow | Called when the page is redisplayed | |
| onHide | Called when the page is hidden | |
| onDestory | Called when the page is destroyed | beforeDestory |
| onBackPress | Called when the return button is clicked | |
| onMenuPress | Called when the capsule in the upper right corner is clicked | |
| onRefresh | ||
| onPageScroll | Fires when the page scrolls | |
| onReachTop | Triggered when the page reaches the top | |
| onReachBottom | Fires when the page bottoms out |
onBackPress
onMenuPress
Here, first familiarize yourself with the display configuration item configuration in the manifest.json configuration item.
Step on the trap
There is no response when listening to the onMenuPress event on the Home page!
// 点击menuBar按钮时onMenuPress函数根本没有被调用！
onMenuPress(){
prompt.showToast({
message: '111111'
})
return true
}
displayThe reason is that the properties of the configuration items in the manifest.json configuration file menuare not set to true!
"display": {
"menu": true,
"titleBar": true // 兼容1070之前
}
At this time, clicking on the upper right corner will not bring up the sharing pop-up window and prompt 111111
onRefresh
function execution time
- 1. When the switching mode of the page is
singleTaskmarked , there will be only one target page instance, and多次this function is triggered when the user opens the target page. - It is carried in the push parameter when the target page is opened
flag 'clearTask', and已经存在is triggered when the page is instanced.
For details, please check in the Page Switching->Page Switching Mode directory.
grammar
// 该回调中参数为重新打开该页面时携带的参数
onRefresh(query) {
console.log('page refreshed!!!')
}
Note : When launchMode is singleTask, the parameters carried when reopening the page are 不会自动更新到页面 this 对象上.需要在此处从 query 中拿到并手动更新
onConfigurationChanged
Page scrolling
- onPageScroll: Monitor page scrolling
onPageScroll(evt) { console.log(`页面滚动距离：${ evt.scrollTop}`) } - onReachTop: Monitor whether the page reaches the top
onReachTop(){ // 页面触顶时触发 } - onReachBottom: Monitor whether the page bottoms out
onReachTop(){ // 页面触底时触发 }
Custom component life cycle
Compared with the life cycle of components, the life cycle of custom components is not complete, and there are only three life cycle functions.
As above: Custom components only have three life cycle functions
You need to pay attention to the timing when using it.
Parent-child component initialization life cycle execution sequence
Parent component init -> Child component init -> Child component ready -> Parent component ready -> Parent component show