关于h5与native 交互

一，在h5浏览器环境下如果我们需要调用微信的一些方法，首先需要引入 jssdk，此时我们的window上就已经挂载了一些原生app功能方法

(1) 可以直接用script标签引入sdk

(2) npm install weixin-js-sdk

二，native可以嵌套h5，嵌套的容器

iPhone的UIWebView（iOS 2.0–12.0），WKWebView（iOS 8.0+，macOS 10.10+）

Android的WebView

三，交互方式

（1）url scheme

url scheme适用于所有的系统设备（低版本Android和低版本iOS都适用）但是url scheme毕竟是通过url拦截实现的，在大量数据传输，以及效率上都有影响

•  前端触发scheme (例如 iframe.src , window.location.href)
•  native自定义好某种协议（例如：quickhybrid://xxx）
•  native捕获到对应的url触发事件，执行对应的方法，并将执行结果回调给h5

⚠️：iOS10以后，urlscheme必须符合url规范，否则会报错

(2) JavascriptCore(IOS)，addJavascriptInterface(Android)

缺点：JavascriptCore不支持IOS7以下，addJavascriptInterface在4.2之前有风险漏洞

JavascriptCore ( 苹果Safari浏览器的JavaScript引擎，就跟Google的V8引擎一样用来解析 JavaScript 代码)

• native 通过JavascriptCore注册方法，h5直接调用方法
• IOS调用h5方法通过stringByEvaluatingJavaScriptFromString

Android

• native通过addJavascriptInterface注册方法，h5直接调用方法

• Android通过loadUrl 调用h5

  // 原生webview需注册可供前端调用的JS函数 mWebView = new WebView(this); mWebView.addJavascriptInterface(getJSBridge(), "JSBridge");

  private Object getJSBridge(){ }

  // h5调用 window.JSBridge.foo();

  // native调用js方法 mWebView.loadUrl("javascript: 方法名('参数,需要转为字符串')");