AppGallery Connect：頁面生命周期onShow沒有觸發(fā)

現(xiàn)象描述：

通過router.push接口跳轉(zhuǎn)到快應(yīng)用的B頁面，當(dāng)B頁面只是引用一個自定義組件XX的時候，B頁面的onShow生命周期無法觸發(fā)。如下圖所示：

代碼如下：

B頁面代碼：

<import name="listone" src="./aa.ux"></import>

<template>

  <!-- template里只能有一個根節(jié)點 -->

<listone></listone>

</template>

<script>

  import prompt from '@system.prompt'

  export default {

    private: {

    },

    onInit: function () {

    },

    onShow() {

      console.log('我顯示了我顯示了我顯示了我顯示了');

      prompt.showToast({

        message: '我顯示了我顯示了我顯示了我顯示了'

      })

    }, //無法觸發(fā)

  }

</script>

<style>

  .demo-page {

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .title {

    font-size: 40px;

    text-align: center;

  }

</style>

自定義組件aa.ux：

<template>

  <div class="container">

    <text>天氣不錯啊</text>

    <text>天氣不錯啊</text>

    <text>天氣不錯啊</text>

    <text>天氣不錯啊</text>

  </div>

</template>

<style>

 .container {

    flex-direction: column;

    justify-content: center;

align-items: center;

background-color: #00fa9a;

  }

</style>

<script>

  module.exports = {

    data: {

    },

    onInit() {

    },

  }

</script>

問題分析：

快應(yīng)用引擎框架決定了自定義組件作為B頁面的根節(jié)點時，B頁面的onShow生命周期是無法觸發(fā)的，但是子組件自身的onShow可以觸發(fā)。

解決方案：

在B頁面的子組件外面加個div組件作為根節(jié)點，而不是把自定義組件作為根節(jié)點，這樣B頁面的onShow生命周期就可以觸發(fā)了。

B頁面修改后代碼如下（見紅色部分）：

<import name="listone" src="./aa.ux"></import>

<template>

  <!-- template里只能有一個根節(jié)點 -->

  <div>

    <listone></listone>

  </div>

</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>

修改后代碼如下圖所示：

欲了解更多詳情，請參見：

快應(yīng)用生命周期：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-script#h2-1575381018573