ITPub博客

首页 > 移动开发 > 移动测试 > 页面生命周期onShow没有触发

页面生命周期onShow没有触发

原创 移动测试 作者:华为开发者论坛 时间:2021-07-23 14:06:48 1 删除 编辑

现象描述:

   通过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/consumer/cn/doc/development/quickApp-References/quickapp-script#h2-1575381018573

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69970551/viewspace-2782907/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-04-21

  • 博文量
    402
  • 访问量
    726978