H5+APP移动端开发的一些碎片整理

1.移动端H5+获取手机状态栏高度：

// 只有H5+APP 才会执行这段代码
document.addEventListener("plusready", function() {
    var statusBarHeight = Number.isFinite(plus.navigator.getStatusbarHeight()) ? plus.navigator.getStatusbarHeight() : 28;//状态栏高度,判断是否是数字，不是使用默认高度28
}, false);

移动端页面底部使用fiexd固定时，会出现底部显示不全的问题 ；一般也是因为状态栏高度导致的，所以底部position:fixed的bottom设置为手机状态栏高度可解决此问题。

2.uni-app嵌入的后页面跳转到历史uni-app页面：
在使用跳转的页面引入

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

然后使用uni.navigateBack();即可返回到上一级历史页面。也可写跳转的url路径以及携带参数。

3.路由导航传中文字符的问题：
encodeURI('中文'),encodeURI()可对中文字符转码.转码之后获取即可得到所传的中文参数。

4.获取url携带的参数的对象合集：

function Getparams(url) {
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}

5.移动端页面适配问题(rem):
①em、rem的区别：
em和rem都是相对单位，但em是相对于元素本身的字体大小，rem是相对于html的字体大小。

//常见手机以及ipad页面的适配.默认为16px,rem可以根据不同屏幕适应的html的font-size进行匹配。
@media screen and (max-width: 1200px) {
    html {
        font-size: 200%;//（相当于 16 * 200%）;也相当于1rem
    }
}

@media screen and (max-width: 800px) {
    html {
        font-size: 180%;
    }
}

@media screen and (max-width: 750px) {
    html {
        font-size: 100%;
    }
}

@media screen and (max-width: 540px) {
    html {
        font-size: 120%;
    }
}

@media screen and (max-width: 480px) {
    html {
        font-size: 100%;
    }
}

@media screen and (max-width: 424px) {
    html {
        font-size: 100%;
    }
}

@media screen and (max-width: 414px) {
    html {
        font-size: 100%;
    }
}

@media screen and (max-width: 400px) {
    html {
        font-size: 100%;
    }
}

@media screen and (max-width: 384px) {
    html {
        font-size: 100%;
    }
}

@media screen and (max-width: 384px) {
    html {
        font-size: 100%;
    }
}

@media screen and (max-width: 360px) {
    html {
        font-size: 90%;
    }
}

@media screen and (max-width: 320px) {
    html {
        font-size: 70%;
    }
}

6.使用css变量对主题颜色进行统一改变：

//设置全局主题颜色变量
:root {
    --itemColor: #4EA0FC;
    --tipColor: #FF7272;
}
//使用var进行匹配
.itemtext {
    color: var(--itemColor);
}