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