快應用規范從1070版本開始強制設置顯示菜單，但是在有些快應用頁面，菜單會遮擋住應用自身的內容，例如下圖菜單便遮擋住了登錄功能，雖然可以將菜單配置為可移動，但是用戶卻不知道可以移動，從而影響用戶的使用。
針對此問題，有以下三種解決方案：
- 避開菜單
- 不顯示菜單
- 在菜單處增加可移動的提示
方案一：避開菜單
解決思路：配置快應用顯示標題欄，將快應用的內容空一行展示，從而避免菜單遮擋。
實現：打開manifest.json文件，將titleBar的屬性設置為true，即可顯示標題欄，代碼實現如下：
"display": {
"fullScreen": false,
"titleBar": "true",
"menu": false,
"menuBarData": {
"draggable": true
},
"orientation": "portrait"
}
修改后的效果圖如下：
缺點：titleBar占用快應用的一行空間，有些浪費。
方案二：不顯示菜單
解決思路與實現：聯系華為方技術支持人員，單獨配置該快應用不顯示菜單。
缺點：利用快應用的默認菜單，可以實現將快應用添加為桌面圖標，訪問快應用中心等功能，這些功能可以方便用戶體驗更多快應用提供的服務，有利於提高用戶的留存率。故非特殊情況，不推薦使用該方案。
方案三：在菜單處增加可移動的提示
解決思路：顯示菜單，在界面上提示菜單可移動，類似原生App的遮罩層。
實現：以蒙版提示“I got it”為例，該方案的實現流程如下：
- 使用自定義的子組件，定義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>
- 在頁面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效果和快應用的業務邏輯，在合適的時機將業務變量保存至數據庫。本樣例邏輯為當用戶點擊“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
作者：鼓樓趙又廷