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

结束语

写到最后，其实还有一个问题，关于设置了系统全面屏和非全面屏页面设计高度变化的问题，有知道的小伙伴请在留言区写一下，分享一下经验，谢谢