[Quick application] What is the menu blocking content? Teach you a trick to get it done quickly!

The quick app specification starts from version 1070 to compulsorily set the display menu, but on some quick app pages, the menu will block the content of the app itself. For example, the menu in the figure below blocks the login function. Although the menu can be configured to be movable, the user But I don't know that it can be moved, which affects the use of users.
Insert picture description here

There are three solutions to this problem:

Avoid the menu
No menu displayed
Add a movable prompt in the menu

Option 1: Avoid the menu

Solution : Configure the quick app to display the title bar, and display the content of the quick app in a blank line to avoid menu occlusion.

Implementation : Open the manifest.json file and set the titleBar property to true to display the title bar. The code implementation is as follows:

"display": {
    
    
    "fullScreen": false,
    "titleBar": "true",
    "menu": false,
    "menuBarData": {
    
    
        "draggable": true
    },
    "orientation": "portrait"
}

The revised renderings are as follows:
Insert picture description here

Disadvantages : titleBar occupies one line of fast application space, which is a bit wasteful.

Option 2: No menu displayed

Solution idea and realization : Contact Huawei technical support personnel, and configure the quick app to not display the menu separately.
Disadvantages : By using the default menu of Kuai App, you can add Kuai App as a desktop icon, access the Kuai App Center and other functions. These functions can facilitate users to experience the services provided by more Kuai App and help improve the retention rate of users. Therefore, it is not recommended to use this scheme for non-special circumstances.

Solution 3: Add a movable prompt in the menu

Solution : Display the menu and prompt that the menu can be moved on the interface, similar to the mask layer of the native App.
Implementation : Take the mask prompt "I got it" as an example, the implementation process of this solution is as follows:
Insert picture description here

Use custom sub-components to define tipContent properties and emitEvt events to make the code refreshing, 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”>     
        </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>

In the page onInit() life cycle, the open flag is queried from the database. When the menutipflag is false, it means that it is opened for the first time and the mask is displayed. The database uses the fast application data storage interface.

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);
        }
    });
}

According to the mask GUI effect and the business logic of fast application, the business variables are saved to the database at the right time. The logic of this example is that when the user clicks "I got it", the mask disappears, the value of menutipflag is set to true, and it is stored in 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);
        }
    })
}

to sum up:

To sum up, the third solution effectively avoids the shortcomings of the first and second solutions, and solves the problem of menu occlusion by adding prompts to a certain component or function of the quick application. It is one of the classic cases and is worth learning. .

For more details, please refer to:
Quick App Development Guide Document: https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper
Quick App File Organization: https://developer .huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-filestructure
Quick App Manifest file: https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-manifest #h1-1575378008788 To
participate in the developer discussion, please go to the Reddit community: https://www.reddit.com/r/HMSCore/ To
download the demo and sample code, please go to Github: https://github.com/HMS-Core to
solve integration problems Please go to Stack Overflow: https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest

Source: https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202357559824130861&fid=18
Author: Drum Chao