共计 1519 个字符,预计需要花费 4 分钟才能阅读完成。
景象形容:
通过 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
正文完
发表至: appgallery-connect
2021-07-23