前言
最近写了一个农信app的一个功能模块，在开发中遇到了一些问题，分享一下
1.布局问题
在布局中一定要遵循BFC原理
虚拟键盘顶起页面问题，相信在移动端中h5开发都会遇到这个问题，input聚焦键盘弹出，页面布局或多或少的出现错乱，我尝试中得出一些小办法。
我使用得是flex布局，在业务中头部或者底部要固定中间内容得高度自动铺满，办法有很多我就不多说了，当然一开始我竟然尝试使用calc计算属性100%-xxrem 显然是不行的。
在固定底部或者头部时不得不用到定位，问题就在这里，在ios中虚拟键盘有层级关系，不会有问题，但是在安卓中没有层级键盘弹出使用定位得直接顶飞天，奶奶得十分不友好，尤其对新手开发，怎么办各种办法，逻辑中focus事件中强制修改html，body得高度100%（可是在业务中可能还不能设置100%，那就扯淡了），focus后各种恶心操作，挨个进行隐藏，变动位置。
重点来了，focus后把顶起得模块的定位去掉，使用绝对定位或者不用定位，让元素遵循正常文档流，而且在子元素中使用定位，父元素一定要使用绝对定位占据文档流，一定要严格，不然开发完到移动端你会炸的，另外在移动端头部底部父级尽量不用到定位比如
scroll高度虽然已知但不要设置固定高度，还是要动态铺满，因为安卓手机很杂乱，3个手机有3个都特么的底部有实体按键，屏幕底部还有按键，恶心不恶心
还有一个line-height属性 比较恶心
在移动端布局中不容许错1px！ 在布局中包含字体的元素会有默认高度
设置line-height：1 效果如下 仔细看还是有差距
而且还有问题在ios中上下边距会有偏差
这里我画的有点恶心 但是为了表达我的意思
在ios中上边距会有2px的偏差 就比如设置上下居中 上8px 下 12px 默认这样
在安卓中更特么奇葩自己去想象
2.touch问题
在项目中用vue2 + vantui 在列表中使用ui组件上拉加载和下拉刷新
在下拉刷新中遇到问题，视图滚到到下方，下拉回到顶部时触发ui组件的下拉刷新，很扯啊，一般在开发中觉得用开源的ui不会有问题的就没注意这些，开发完在测试中遇到很棘手，再也不相信什么ui了，尼玛，开始在尝试调整布局，发现不行，后来想自己手写把，没时间！
冒泡！！！阻止冒泡！！! 但是在vue中v-touchstart.stop="nima" 竟然不回触发下拉刷新了，
那么问题来了，业务需要下拉刷新，撸呗v-touchxxx="nima($event)"
nima(e){
if (视图滚动scrollTop监听到0)
e.
stopPropagation()
}
3. 调用app方法
安卓和ios分别会捕获到js然后在全局window下挂载一个对应的方法调用就可以了
下面是判断系统
// 判断安卓function isAndroid() { var u = navigator.userAgent; if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) { return true; } return false;}// 判断设备为 iosfunction isIos() { var u = navigator.userAgent; if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) { return true; } return false;}
也有相关插件 但是感觉没必要
4. 在移动端加载问题
总感觉在某些安卓中加载不流畅
异步懒加载
图片压缩 抽离css 抽离js
慢慢补充。。。
