APP内容被手机默认菜单屏蔽？教你一种解决方法！

快速应用程序的应用程序菜单会按照快速应用程序规范1070和更高版本中的规定强制显示。但是，在某些快速的应用程序页面上，某些内容可能会被应用程序菜单阻止。例如，下图中的应用程序菜单阻止了登录条目。尽管菜单配置为可移动，但用户不知道他们可以移动它。结果，用户体验受到影响。提供以下解决方案来解决此问题：

将菜单与显示的任何内容分开
隐藏菜单
添加指示菜单可移动的消息

解决方案1：将菜单与显示的任何内容分开

为快速应用程序配置标题栏，以在应用程序菜单中保留空白行。该解决方案的缺点是浪费了一行空间。
打开manifest.json文件，并将titleBar的值更改为true。

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

下图显示了修改结果。

解决方案2：隐藏菜单

将软件包名称提供给华为，华为将专门配置快速应用程序以不显示菜单。该解决方案的缺点如下：从快速应用程序默认菜单访问的功能（例如在主屏幕上添加图标和访问快速应用程序中心）将丢失。这些功能有助于提高用户保留率，并使用户能够快速访问Quick App Center以体验更多服务。因此，除非另有说明，否则不建议使用此解决方案。

解决方案3：添加一条消息，指示菜单是可移动的

显示菜单并通过参考本机应用程序中使用的遮罩层提示用户菜单可移动。
此解决方案的实现如下：在如下的模板代码中，红色代码定义了蒙版的布局，而自定义子组件用于定义tipContent和emitEvt。使用自定义组件的优势在于它们使代码清晰，简洁和可读。

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

调用快速应用程序的数据存储API，并使用onInit（）从数据库中查询menutipflag的值。如果值为false，则用户首次打开快速应用程序。然后，将遮罩显示给用户。

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

根据掩码GUI设计和快速应用程序的服务逻辑，在适当的时间将相关变量保存到数据库中。在此示例中，该遮罩设计为在用户点击“ 我得到”时消失，而menutipflag的值设置为true并保存到数据库。

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

总之，解决方案3是这三个选项中的最佳解决方案，因为它避免了解决方案1和解决方案2的缺点，并且可用于在快速应用程序GUI上为组件或功能添加提示消息。

常见问题FAQ