AppGallery Connect：頁(yè)面生命周期onShow沒(méi)有觸發(fā)

現(xiàn)象描述：

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

代碼如下：

B頁(yè)面代碼：

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

<template>

  <!-- template里只能有一個(gè)根節(jié)點(diǎn) -->

<listone></listone>

</template>

<script>

  import prompt from '@system.prompt'

  export default {

    private: {

    },

    onInit: function () {

    },

    onShow() {

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

      prompt.showToast({

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

      })

    }, //無(wú)法觸發(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>天氣不錯(cuò)啊</text>

    <text>天氣不錯(cuò)啊</text>

    <text>天氣不錯(cuò)啊</text>

    <text>天氣不錯(cuò)啊</text>

  </div>

</template>

<style>

 .container {

    flex-direction: column;

    justify-content: center;

align-items: center;

background-color: #00fa9a;

  }

</style>

<script>

  module.exports = {

    data: {

    },

    onInit() {

    },

  }

</script>

問(wèn)題分析：

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

解決方案：

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

B頁(yè)面修改后代碼如下（見(jiàn)紅色部分）：

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

<template>

  <!-- template里只能有一個(gè)根節(jié)點(diǎn) -->

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

修改后代碼如下圖所示：

欲了解更多詳情，請(qǐng)參見(jiàn)：

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

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