【快應用】選單遮擋內容？教你一招快速搞定！

快應用規范從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" one rror="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>

2. 在頁面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);
        }
    });
}

3. 根據蒙版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
作者：鼓樓趙又廷