The page life cycle onShow is not triggered

Symptom:

The router. Push interface is used to jump to page B of the fast application. When page B only references a custom component XX, the onShow life cycle of page B cannot be triggered. As shown in the figure below:



The code is as follows:

B Page code:

<import name="listone" src="./aa.ux"></import>
<template>
  <!-- template里只能有一个根节点 -->
<listone></listone>
</template>
<script>
  import prompt from '@system.prompt'
  export default {
    private: {
    },
    onInit: function () {
    },
    onShow() {
      console.log('我显示了我显示了我显示了我显示了');
      prompt.showToast({
        message: '我显示了我显示了我显示了我显示了'
      })
    }, //无法触发
  }
</script>
 
<style>
  .demo-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
 
  .title {
    font-size: 40px;
    text-align: center;
  }
</style>

Custom Component AA.ux:

<template> <div class="container"> < font style =" box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 13px! Important; white-space: inherit! Important;" </template> <style> .container { flex-direction: column; justify-content: center; align-items: center; background-color: #00fa9a; } </style> <script> module.exports = { data: { }, onInit() { }, } </script>

Problem analysis: When the fast application engine framework determines that the custom component serves as the root node of B page, the onShow life cycle of B page cannot be triggered, but the onShow of the child component itself can be triggered. Solution: Add a div component as the root node outside the child component of the B page, instead of the custom component as the root node, so that the onShow lifecycle of the B page can be triggered.

After the modification of B page, the code is as follows (see the red part) :

<import name="listone" src="./aa.ux"></import> <template> <! <div> <listone></listone> </div> </template> <script> import prompt from '@system.prompt' Export default {private: {}, onInit: function () {}, onShow() {console.log(' I display I display I display I display '); > < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 13px! Important; white-space: normal;" justify-content: center; align-items: center; } .title { font-size: 40px; text-align: center; } </style>

The modified code is shown in the figure below:

For more details, see:

Fast application lifecycle:

https://developer.huawei.com/…

The original link: https://developer.huawei.com/… By Mayism