What if some content is blocked by the app menu? - Huawei Developers

The app menu of a quick app is forcibly displayed as stipulated in Quick App Specification 1070 and later versions. However, on some quick app pages, some content may be blocked by the app menu. For example, the sign-in entry is blocked by the app menu in the following figure. Although the menu is configured to be movable, users do not know that they can move it. As a result, user experience is affected.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
The following solutions are provided to solve this problem:
Separating the menu from any content displayed
Hiding the menu
Adding a message indicating that the menu is movable
Solution 1: Separating the Menu from Any Content Displayed
Configure a title bar for a quick app to leave a blank row for the app menu. The disadvantage of this solution is that a row of space is wasted.
Open the manifest.json file and change the value of titleBar to true.
"display": {
"fullScreen": false,
"titleBar": "true",
"menu": false,
"menuBarData": {
"draggable": true
},
"orientation": "portrait"
}
The following figure shows the modification result.
Solution 2: Hiding the Menu
Provide the package name to Huawei and Huawei will specially configure the quick app not to display the menu. The disadvantages of this solution are as follows: Functions accessed from the quick app default menu, such as adding an icon to the home screen and accessing Quick App Center are lost. These functions help improve the user retention rate and enable users to quickly access Quick App Center to experience more services. Therefore, this solution is not recommended unless otherwise specified.
Solution 3: Adding a Message Indicating that the Menu Is Movable
Display the menu and prompt users that the menu is movable by referring to the mask layer used in native apps.
This solution is implemented as follows:
In the template code as follows, code in red defines the layout of the mask, and custom sub-components are used to define tipContent and emitEvt. The advantage of using custom components is that they make code clear, concise, and readable.
<import name="menu_tip" src="./menutip.ux"></import>
<template>
<div>
<menu_tip id=“tip” if={{menuTipshow}} tip-content={{menutipContent}} onemit-evt=“emitHideTipMenuView”> //tip component
</menu_tip>
<web src="{{loadUrl}}" trustedurl="{{list}}" onpagestart="onPageStart"
onpagefinish="onPageFinish" onmessage="onMessage"
ontitlereceive="onTitleReceive" onerror="onError"
wideviewport="true" overviewmodeinload="true"
useragent="Mozilla/5.0 (Linux; Android 10; FRO-AN00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.93 Mobile Safari/537.36"
id="web"
multiwindow="true" supportzoom="true" allowthirdpartycookies="{{allowThirdPartyCookies}}">
</web>
</div>
</template>
Call the Data Storage API of the quick app and use onInit() to query the value of menutipflag from the database. If the value is false, the quick app is opened for the first time by a user. Then the mask is displayed to the user.
onInit: function () {
this.getMenuTipFlag();
},
getMenuTipFlag() {
var that = this;
storage.get({
key: 'menutipflag',
success: function (data) {
console.log(" storage.get success data=" + data);
that.menutipflag = data;
},
fail: function (data, code) {
console.log(" storage.get fail, code = " + code);
}
});
},
Save related variables to the database at a proper time based on the mask GUI design and the service logic of the quick app. In this example, the mask is designed to disappear when a user taps I got it, and the value of menutipflag is set to true and is saved to the database.
saveTipFlag() {
this.menutipflag = true;
storage.set({
key: 'menutipflag',
value: 'true',
success: function (data) {
console.log("saveTipFlag");
},
fail: function (data, code) {
console.log("saveTipFlag fail, code = " + code);
}
})
},
In conclusion, solution 3 is the optimal solution among the three options because it avoids the disadvantages of solution 1 and solution 2, and can be used to add a prompt message for a component or a function on a quick app GUI.