H5, 遇到的 ios 兼容性问题
1.ios 中日期格式 new Date('-10-11') 无效;解决: new Date('-10-11'.replace(/\-/g, '/'));
2.ios 中日期格式 new Date(' -07-24 11:35:00.0') 无效;解决: new Date(' -07-24 11:35:00.0'.replace(/\-/g, '/').replace('.0', ''));
3.ios 中 input[type='date'] placeholder 默认显示空白问题;解决( 用伪类添加一个placeholder属性, onfoucs时removeAttribute('placeholder'), onblur的时候setAttribute('placeholder', '')): input[type='date']:before {content: attr(placeholder);color: rgba(0,0,0,0.7);}input:-webkit-input-placeholder{color: #999; }
4.ios 中 overflow: scroll 滚动效果卡顿;解决: -webkit-overflow-scroll: touch;-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */
5.ios 中 input disabled 时的color 很浅;原因: iPhone Safari/webview input disabled 会有默认样式；解决: input:disabled {color: #999;opacity: 1;-webkit-text-fill-color: #999;}
6.ios 中 transition, animation 属性支持性很差, 会造成屏幕滑动抖动;(暂时无法解决)
7.使用css伪类的content设置图标时, 图标颜色设置无效;需增加以下配置;原因: 资料查到说是ios9以后不再支持css更改这种符号的颜色, 如需要,使用 U+FE0E VARIATION SELECTOR-15字符;如: content: "\2714\fe0e;
8.ios使用input,激活的时候会自动放大页面问题;解决:1. <meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">2. 同时强制设置input字体16px, 或者focus的时候设置16px;(针对小于16px的input)
9.iphonex的body设置height:100%;底部会有24px的留白;原因: 本人页面因为使用html, body{height: 100%;}, body:100% 这个属性并不能在iphonex撑满可视区域;解决: 官方提供的meta(我这里使用好像没效果);viewport-fit：有三个值contain：可视窗口完全包含网页内容；cover：网页内容完全覆盖可视窗口；auto：同contain；通过给页面设置viewport-fit=cover，可以将页面的布局延伸到页面顶部和底部。<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />于是(暂时解决问题方法时, 使用 height: 100vh)
软键盘将页面顶起来、收起未回落问题
我们在app 布局中会有个固定的底部。安卓一些版本中，输入弹窗出来，会将解压absolute和fixed定位的元素。导致可视区域变小，布局错乱。
// 记录原有的视口高度const originalHeight = document.body.clientHeight || document.documentElement.clientHeight;window.onresize = function(){var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;if(resizeHeight < originalHeight ){// 恢复内容区域高度// const container = document.getElementById("container")// 例如 container.style.height = originalHeight;}}
键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。
兼容原理，1.判断版本类型 2.更改滚动的可视区域
const isWechat = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);if (!isWechat) return;const wechatVersion = wechatInfo[1];const version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);// 如果设备类型为iOS 12+ 和wechat 6.7.4+，恢复成原来的视口if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));}
window.scrollTo(x-coord, y-coord)，其中window.scrollTo(0, clientHeight)恢复成原来的视口
使用 QRCode 生成二维码
QRCode.toDataURL(url, options)
H5通过jsbridge调用原生的分享
第一种通过注入API
就是在原生里面先写好打开原生分享的逻辑的一个函数，但是不执行，然后把调用这个函数挂载到webview.window上，然后再H5页面需要的调用的时候就直接传入函数中的参数，调用函数就可以调用原生的分享
Android的WebView提供了addJavascriptInterface方法 ，可以在原生里面写js
开启Javascript使能、传递交互接口对象、加载web页面。
WebSettings settings = mWebView.getSettings();settings.setJavaScriptEnabled(true);settings.setDefaultTextEncodingName("utf-8");mWebView.addJavascriptInterface(new WebViewUtils(mWebView), "androidInterface");mWebView.loadUrl("file:///android_asset/test.html");
第二种 通过拦截拦截URL Scheme
是在原生里面通过ifream.src ：自定义网址并携带参数，在原生里面拦截这个接口，并且取出里面的参数，然后通过区分发来的这个接口，来的调用原生的分享
为什么选择iframe.src不选择location.herf?(因为如果通过location.href连续调用Native，很容易丢失一些调用) 创建请求需要一定的耗时，比诸如API的方式调用同样的功能耗时更长。
Native调用JS的方式
Native调用js需要,JavaScript的方法必须在全局的window上即可
Android 4.4以前，通过loadUrl方法，执行一段js代码来实现
loadUrl方式使用起来方便简洁，但是效率低无法获得返回结果且调用的时候会刷新WebView
Android 4.4以后可以使用evaluateJavascript方法
evaluateJavascript方法效率高获取返回值方便。调用的时候不刷新WebView
webView.loadUrl("javascript:" + javaScriptString);webView.evaluateJavascript(javaScriptString, new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value){xxx}});
ios在WKWebview中可以通过evaluateJavaScript:javaScriptString来实现，支持iOS8.0及以上系统
// swiftfunc evaluateJavaScript(_ javaScriptString: String, completionHandler: ((Any?, Error?) -> Void)? = nil)// javaScriptString 需要调用的 JS 代码// completionHandler 执行后的回调// objective-c[jsContext evaluateJavaScript:@"ZcyJsBridge(ev, data)"]
