H5與Native的交互？

想必對於Hybrid APP 大家都不陌生，我自己也參與過公司的幾個開發項目，但都是不用自己動腦子，前人栽樹后人乘涼。

我只要會調用封裝好的方法就可以實現H5與原生的交互。但對於一個正常的程序員，求知欲是必須具備的啊。

 

交互無非是Native調用JS方法，或者JS調用Native提供的接口，但是這兩者如何互相調用？就是Webview這個東西。

在IOS中：

　　我們要知道有UIwebview這個東西，相當於就是個瀏覽器，但是和正常的瀏覽器又有區別。

原生的UIwebview提供了一些方法和屬性，可以調用來實現交互。

　　nativa調用js：就是app通過webview來獲取window對象，從而可以調用window對象中的方法，而獲取方式就可以使用其中的 stringByEvaluatingJavaScriptFromString：執行一段js腳本，並且返回執行結果這個方法。

像這樣：

webview.stringByEvaluatingJavaScriptFromString("Math.random()") 

注意獲取到的是window對象，所以我們可以將被調用的方法封裝起來。

　　js調用native：雖然native每個版本都會提供api，但是我們並不能直接拿來用，uiwebview有一個特性：通過uiwebview發起的網絡請求可以在native層被攔截和通知。我們就可以自定義一個請求，當檢測到這個請求是我們約定的交互請求時就阻止網絡請求進而執行我們需要的native功能，這樣就實現js調用native。

具體點：自定義的請求格式通常是這樣的：jsbridge://methodName?param1=value1&param2=value2，我們只要判斷是否是jsbridge://開頭的地址

在Android中：

　　js調用native：有三種方式：

1.和上面ios一樣，使用schema方法，什么是schema方法：

APP安裝后會在手機上注冊一個schema，比如淘寶是taobao://，Native會有一個進程監控Webview發出的所有schema://請求，然后分發到“控制器”hybridapi處理程序，Native控制器處理時會需要param提供的參數（encode過），處理結束后將攜帶數據獲取Webview window對象中的callback然后調用.

2.上面說到ios中，nativa調用js的方法是uiwebview中有一個方法可以獲取到js中的window對象，現在這個Android中js調用native的第二種方法就是native向window對象中注入nativa對象，從而使js能使用這個對象，達到js交互效果。

像這樣：

class JSInterface {  
    @JavascriptInterface //注意這個代碼一定要加上
    public String getUserData() {
        return "UserData";
    }
}
webView.addJavascriptInterface(new JSInterface(), "AndroidJS");  


alert(AndroidJS.getUserData()) //UserDate

3.在android webview這一層是可以重寫js原生中的prompt,console.log,alert這三個方法。

　　native調用js：和ios一樣的，獲取window對象，不過使用的方法是loadUrl

像這樣：

// 調用js中的JSBridge.trigger方法
webView.loadUrl("javascript:JSBridge.trigger('webviewReady')");  

 

以上是自己簡單的理解和看法，其中主要是通過以下這兩篇文章進行的參考。

http://tech.youzan.com/jsbridge/

http://www.cnblogs.com/yexiaochai/p/4921635.html