景象形容:

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