What Can I Do If the onShow Lifecycle Function Is Not Triggered?

Symptom

When a user is redirected to a quick app page that references only a single custom element through the router.push API, the onShow lifecycle function for that page cannot be triggered, as shown in the following figure.

The code where the exception occurs is as follows:

	<import name="listone" src="./aa.ux"></import>
	<template>
	<!-- The template can contain only one root node. -->
	<listone></listone>
	</template>
	<script>
	import prompt from '@system.prompt'
	export default {
	private: {
	},
	onInit: function() {
	},
	onShow() {
	console.log('Enter a string whatever you like.');
	prompt.showToast({
	message: 'Enter a string whatever you like.'
	})
	}, // This function cannot be triggered.
	}
	</script>
	<style>
	.demo-page {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	.title {
	font-size: 40px;
	text-align: center;
	}
	</style>

view raw page.ux hosted with ❤ by GitHub

Code of the custom element (aa.ux):

	<template>
	<div class="container">
	<text> Enter some words.</text>
	<text>Enter some words.</text>
	<text>Enter some words.</text>
	<text>Enter some words.</text>
	</div>
	</template>
	<style>
	.container {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #00fa9a;
	}
	</style>
	<script>
	module.exports = {
	data: {
	},
	onInit() {
	},
	}
	</script>

view raw aa.ux hosted with ❤ by GitHub

Cause Analysis

Huawei Quick App Loader does not trigger the onShow lifecycle function if the root node of the page is a custom element. However, the function can be triggered for a subelement.

Solution

Add the div element, instead of a custom element, as the root node.

The modified code is as follows:

	template>
	<!-- The template can contain only one root node. -->
	<div>
	<listone></listone>
	</div>
	</template>
	<script>
	import prompt from '@system.prompt'
	export default {
	private: {
	},
	onInit: function() {
	},
	onShow() {
	console.log('Enter a string whatever you like.');
	prompt.showToast({
	message: 'Enter a string whatever you like.'
	})
	},
	}
	</script>
	<style>
	.demo-page {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	.title {
	font-size: 40px;
	text-align: center;
	}
	</style>

view raw fixed.ux hosted with ❤ by GitHub