H5与Native的交互？

Posted 2020-10-05 逆水行舟，心如止水。

想必对于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