WEEX-EEUI 頁面的高度問題（頁面高度設置爲多少纔對？）

前言

最近在使用EEUI開發weex頁面，遇到了一些坑，關於列表頁面底部有按鈕的頁面佈局問題提出了一個解決方案。

說明

正常使用weex開發頁面過程中使用的是750進行頁面佈局的，這個尺寸是參考了IOS的屏幕尺寸進行設定的，android其實是沒有這個分辨率的尺寸的，android有一個非常相近的屏幕分辨率那就是720*1280
那麼既然android沒有這個分辨率那怎麼能做到嚴絲合縫呢？，所以在使用過程中，android的頁面高度其實是一直在變化的，我們得找到750對飲的不同屏幕的設計高度。weex進行了等比例縮放。

舉例說明一下：
小米6的設備，屏幕分辨率是1080*2248（包含狀態欄和底部按鍵欄的高度）
1080/750=2248/X

那麼此時如果我們想把頁面佔滿的高度X=2248*750/1080=1561

我們可以拿1561在小米6設備上做一下簡單的測試，寫一個空白頁面，然後把頁面的高度用1561寫死，併爲頁面添加背景色

<div style="background-color: red;" :style="{height:realPageHeight}">

</div>

我們可以適當的修改realPageHeight的高度，看看是不是正確，通過實踐我們發現是ok的。

如何適配狀態欄，原生標題欄，和底部按紐欄高度

通過上面我們對頁面高度的計算，不難發現只要掌握每個屏幕750/屏幕寬度的係數就能搞定
再就是計算出不同設備的三個像素高度

於是我們可以使用以下代碼來獲得，關於設備的三個高度我是通過QMUI的工具類獲得的。

1.修改weex sdk 初始化的地方

        //屏幕真實高度
        int screenHeight=QMUIDisplayHelper.getRealScreenSize(this)[1];
        //屏幕真實寬度
        int screenWidth=QMUIDisplayHelper.getRealScreenSize(this)[0];
        //屏幕原生title高度
        int pageTitleHeight=QMUIDisplayHelper.dp2px(this,60);
        //屏幕內容高度
        int pageHeight=QMUIDisplayHelper.getScreenHeight(this);
        //屏幕狀態欄高度
        int statusBarHeight= QMUIDisplayHelper.getStatusBarHeight(this);
        //判斷底部導航欄是否存在
        boolean hasNav=screenHeight!=(pageHeight+statusBarHeight);
        //底部導航菜單欄高度
        int NavMenuHeight=hasNav?QMUIDisplayHelper.getNavMenuHeight(this):0;

        WXSDKEngine.addCustomOptions("NavMenuHeight", String.valueOf(NavMenuHeight));
        WXSDKEngine.addCustomOptions("statusBarHeight", String.valueOf(statusBarHeight));
        WXSDKEngine.addCustomOptions("pageHeight", String.valueOf(pageHeight));
        WXSDKEngine.addCustomOptions("pageTitleHeight", String.valueOf(pageTitleHeight));
        WXSDKEngine.addCustomOptions("deviceWidth", String.valueOf(screenWidth));
        WXSDKEngine.addCustomOptions("deviceHeight", String.valueOf(screenHeight));

2.在weex寫一個通用方法來獲取你需要的代碼高度

 /**
         * 
         * 獲取頁面除去title高度後的高度
         */
        getPageContentHeight(){
            const { env } = weex.config;
            console.log('height:'+env.deviceHeight+'width:'+env.deviceWidth+'pageTitleHeight:'+this.getTitleHeight()+'NavMenuHeight:'+env.NavMenuHeight+'statusBarHeight:'+env.statusBarHeight+'pageHeight:'+env.pageHeight)

            const xishu=750/env.deviceWidth;
            const realDesignHeight=env.deviceHeight*xishu;
            const realNavMenuHeight=env.NavMenuHeight*xishu;
            const realstatusBarHeight=env.statusBarHeight*xishu;
            const realpageTitleHeight=env.pageTitleHeight*xishu;
            console.log('realDesignHeight:'+realDesignHeight+'realNavMenuHeight:'+realNavMenuHeight+'realstatusBarHeight:'+realstatusBarHeight+'realpageTitleHeight:'+realpageTitleHeight)
            return realDesignHeight-realNavMenuHeight-realstatusBarHeight-realpageTitleHeight;
        },

結束語

寫到最後，其實還有一個問題，關於設置了系統全面屏和非全面屏頁面設計高度變化的問題，有知道的小夥伴請在留言區寫一下，分享一下經驗，謝謝