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