关于appgallery-connect:页面生命周期onShow没有触发

景象形容：

通过 router.push 接口跳转到快利用的 B 页面，当 B 页面只是援用一个自定义组件 XX 的时候，B 页面的 onShow 生命周期无奈触发。如下图所示：

代码如下：

B 页面代码：

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

自定义组件 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 页面的根节点时，B 页面的 onShow 生命周期是无奈触发的，然而子组件本身的 onShow 能够触发。
解决方案：
在 B 页面的子组件里面加个 div 组件作为根节点，而不是把自定义组件作为根节点，这样 B 页面的 onShow 生命周期就能够触发了。

B 页面批改后代码如下（见红色局部）：

<import name="listone" src="./aa.ux"></import>
<template>
  <!-- template 里只能有一个根节点 -->
  <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>

批改后代码如下图所示：

欲了解更多详情，请参见：

快利用生命周期：

https://developer.huawei.com/…

原文链接：https://developer.huawei.com/…
原作者：Mayism