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

來源:華為開發(fā)者論壇
作者:Mayism
時間:2021-01-27
2367
快應用引擎框架決定了自定義組件作為B頁面的根節(jié)點時,B頁面的onShow生命周期是無法觸發(fā)的,但是子組件自身的onShow可以觸發(fā)。

現(xiàn)象描述:

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

ia_300000002.png

代碼如下:

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>

問題分析:

快應用引擎框架決定了自定義組件作為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>

修改后代碼如下圖所示:

ia_300000003.png

欲了解更多詳情,請參見:

快應用生命周期:

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

原文鏈接:點擊前往 >
文章來源:華為開發(fā)者論壇
版權說明:本文內容來自于華為開發(fā)者論壇,本站不擁有所有權,不承擔相關法律責任。文章內容系作者個人觀點,不代表快出海對觀點贊同或支持。如有侵權,請聯(lián)系管理員(zzx@kchuhai.com)刪除!
個人VIP
小程序
快出海小程序
公眾號
快出海公眾號
商務合作
商務合作
投稿采訪
投稿采訪
出海管家
出海管家