H5, 遇到的 ios 兼容性问题

H5, 遇到的 ios 兼容性问题

1.ios 中日期格式 new Date('2019-10-11') 无效;
解决:  new Date('2019-10-11'.replace(/\-/g, '/'));

2.ios 中日期格式 new Date(' 2019-07-24 11:35:00.0') 无效;
解决:  new Date(' 2019-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>() {
  @Override
  public void onReceiveValue(String value){
    xxx
  }
});

• ios在WKWebview中可以通过evaluateJavaScript:javaScriptString来实现，支持iOS8.0及以上系统

  // swift
  func evaluateJavaScript(_ javaScriptString: String, 
      completionHandler: ((Any?, Error?) -> Void)? = nil)
  // javaScriptString 需要调用的 JS 代码
  // completionHandler 执行后的回调
  
  // objective-c
  [jsContext evaluateJavaScript:@"ZcyJsBridge(ev, data)"]