快利用标准从1070版本开始强制设置显示菜单，然而在有些快利用页面，菜单会遮挡住利用本身的内容，例如下图菜单便遮挡住了登录性能，尽管能够将菜单配置为可挪动，然而用户却不晓得能够挪动，从而影响用户的应用。

针对此问题，有以下三种解决方案：

  • 避开菜单
  • 不显示菜单
  • 在菜单处减少可挪动的提醒

计划一：避开菜单

解决思路：配置快利用显示标题栏，将快利用的内容空一行展现，从而防止菜单遮挡。

实现：关上manifest.json文件，将titleBar的属性设置为true，即可显示标题栏，代码实现如下：

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

批改后的效果图如下：

毛病：titleBar占用快利用的一行空间，有些节约。

计划二：不显示菜单

解决思路与实现：分割华为方技术支持人员，独自配置该快利用不显示菜单。
毛病：利用快利用的默认菜单，能够实现将快利用增加为桌面图标，拜访快利用核心等性能，这些性能能够不便用户体验更多快利用提供的服务，有利于进步用户的留存率。故非非凡状况，不举荐应用该计划。

计划三：在菜单处减少可挪动的提醒

解决思路：显示菜单，在界面上提醒菜单可挪动，相似原生App的遮罩层。
实现：以蒙版提醒“I got it”为例，该计划的实现流程如下：

  1. 应用自定义的子组件，定义tipContent属性和emitEvt事件，使代码清新、简洁、可读性强。
<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>
  1. 在页面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);        }    });}
  1. 依据蒙版GUI成果和快利用的业务逻辑，在适合的机会将业务变量保留至数据库。本样例逻辑为当用户点击“I got it”时，蒙板隐没，将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);        }    })}

总结：

综上所述，计划三无效躲避了计划一和计划二的毛病，比拟灵便地通过给快利用某个组件或者某个性能增加提醒的形式解决了菜单遮挡问题，为经典案例之一，值得借鉴。

欲了解更多详情，请参阅：
快利用开发领导文档：https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper
快利用文件组织：https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-filestructure
快利用Manifest文件：https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-manifest#h1-1575378008788
参加开发者探讨请到Reddit社区：https://www.reddit.com/r/HMSCore/
下载demo和示例代码请到Github：https://github.com/HMS-Core
解决集成问题请到Stack Overflow：https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest

文章起源：https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202357559824130861&fid=18
作者：鼓楼赵又廷