H5与原生交互原理

#积累/混合开发

iOS

iOS提供UIwebView组件，它是一个可加载网页的对象，它有浏览记录功能，且对加载的网页内容是可编程的，如可以调用JavaScript方法。

  • Native调用JavaScript方法
    stringByEvaluatingJavaScriptFromString()方法可以执行一段js脚本，并返回执行结果。只可以执行全局对象下的JavaScript方法。
  • Javascript调用Native方法
    UIWebView有个特性：在UIWebView内发起的所有网络请求，都可以通过delegate函数在Native层得到通知。
    可以在UIWebView内发起一个自定义的网络请求，通常是这样的格式：jsbridge://methodName?param1=value1&param2=value2。Native拦截发现之后，执行相应逻辑。

WKWebview

  • Native调用JavaScript方法
    WKWebView可以主动调用JavaScript方法，并获得函数返回值。

  • JavaScript调用Native方法
    在Native层注册WKWebview的原生方法，webview暴露webkit.messageHandlers到全局变量JavaScript通过。JavaScript通过window.webkit.messageHandlers.OOXX.postMessage()调用并传值。

1
2
//传值例子
window.webkit.messageHandlers.OOXX.postMessage({className: "Callme", functionName: "maybe"})

Android

  • Native调用JavaScript方法
    webview有个loadUrl()方法，可以调用JavaScript代码。
    1
    webView.loadUrl("javascript:JSBridge.trigger('webviewReady')")
  • JavaScript调用Native方法
    webview有个addJavascriptInterface()方法，可以往webview注入原生方法。