[TOC] # 基本概念 1. `JsBridge`: 一種用來連接Web和Native的技術方案，讓Native端(Swift, OC, Java)和Web端(JavaScript)可以互相調用。 2. `webview`: Native組件，有類似瀏覽器的功能。 所以混合開發的本質就是將一些Native的UI替換成webview，webview的內容可以由前端開發，和開發Web App差不多，而和Web App相比，這些webview里的html5頁面需要和Native通信。 # Native調用Js ## ios 通過`webview`的`stringByEvaluatingJavaScriptFromString`實現，本質是調用`window`下的方法。 ```swift // Swift webview.stringByEvaluatingJavaScriptFromString("Math.random()") // OC [webView stringByEvaluatingJavaScriptFromString:@"Math.random();"]; ``` ## android 通過`webview`的`loadUrl`進行調用。 ```java // 調用js中的JSBridge.trigger方法 webView.loadUrl("javascript:JSBridge.trigger('webviewReady')"); ``` # Js調用Native ## ios 通過攔截webview里的請求來實現。通過Web和Native約定好的自定義協議(在ios里叫scheme)進行通信。 ## android 和ios一樣通過自定義協議進行通信。 安卓可以直接向webview中注入全局對象，所以注入后，頁面里的Js可以直接調用。 安卓的webview層還可以重寫`prompt`, `console.log`, `alert`這三個方法。 # 參考 > [H5與Native交互之JSBridge技術](http://tech.youzan.com/jsbridge/)