当前端遇见原生

1.h5图片上传的时候，无论如何都无法上传 https://www.jb51.net/article/121191.htm

2.iphonex底部出现凸起部分
//适配iphoneX以上的机型
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

3.阻止本元素的touchstart/movedown和touchend/movedown事件会触发阻止点击事件

4.与ios联调的时候如果调用ios的方法必须要传值为{}

5.与ios联调如果给的链接中有中文,必须转码成为url编码才可以跳转

6.与调试ios本地包的时候,index中的路劲必须都是/static不能加./static

7.若调用第三方的页面,跳转回本页面的时候,数据会发生丢失,解决办法调用原生的方法,原生做一个webview进行第三方页面的加载,回到本页面时候,原生销毁webview就可以了.

8.移动端获取头部的高度,安卓有高度,ios没有高度,通过原生的方法利用prototype注册到Vue全局上,直接用this可以拿到，
让安卓原生自动在webview上面头部加一个高度

9. window.innerHeight 获取屏幕可视区域的高度,如果有键盘弹起事件，会缩小

10.键盘弹起事件导致底部按钮弹起，解决办法，检测页面innerHeight的高度，如果缩小的情况下让按钮隐藏，恢复正常按钮出现

11.问题表现：H5开发，下单页面，下图所示，在ios 12系统的苹果手机端，在输入电话号，之类信息，经常点击去支付没有任何反应，页面上下滑动，再点击，就可以支付，解决办法：
ios12系统键盘回收后会留下一个透明的遮罩层，在点击页面底部，点击事件没法穿透遮罩层，相当于事件被拦截了，在input失去焦点后，页面上下滚动1px，去除遮罩层；该方法作用所有input需要在input用@blur=iosBlur引入
iosBlur() {
let ua = window.navigator.userAgent;
//$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
if (!!ua.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)) {
//ios系统
let currentPosition, timer;
let speed = 1;
timer = setInterval(function () {
currentPosition =
document.documentElement.scrollTop || document.body.scrollTop;
currentPosition -= speed;
window.scrollTo(0, currentPosition); //页面向上滚动
currentPosition += speed;
window.scrollTo(0, currentPosition); //页面向下滚动
clearInterval(timer);
// alert("失去焦点")
console.log("失去焦点")
}, 100);
}
}