Android与Web原生互调经验总结
随着手机移动端的日益成熟，为了节省开发时间，以及节约成本，以及正值HTML5火爆，很多公司都选择在一些页面使用HTML5的页面来替换原生页面，特别是电商购物或者一些新闻阅读类的app更是大量的使用HTML5页面，因为这些页面会经常性的改变页面以及没有复杂性的功能，只需要一些炫酷的网页效果就行，比如之前双11来临时，淘宝推出的抢包活动等，无需更新应用即可在双11那天显示出双11活动的页面，并且还有一系列比较炫酷的抢宝特效，不仅如此而且这些HTML页面更是跨平台的极大的减少了开发时间以及人员，这是web之所以在手机app上也如此流行的很大原因。既然app中内嵌HTML网页如此的火爆那么我们作为Android开发就更应该及时的掌握如何在Android原生的基础上和web进行互相调用。
首先说一下使用的步骤这里只是简单的说一下，参考智慧易居js的调用方法我们分析一下。
1.js调用Android本地的方法
第一步：先编写给JavaScript调用的接口，我们这里先在Android端代码中写一个类用于专门接收和调用js代码的类。这里我们贴出demo的代码；
可以看到我们在Android端注册了一个webAppInterface类用于js调用我们Android的代码，比如方法sendCarMsg是js在调用我们方法sendCarMsg时它会传回一个String类型的strCarInfoJson的字符串给我们Android本地接收，而getCarMsg方法是js在调用我们方法getCarMsg时会自己收到Android端传递给web的参数也就是String类型的字符串data。
第二步：在webView初始化时进行注册js调用接口的注册：
WebAppInterface mWebAppInterface =newWebAppInterface(mActivity);
webview.addJavascriptInterface(mWebAppInterface,WebAppInterface. PARK_LIB_ANDROID);
这里我们将我们之前编写的js调用的类进行注册，其中PARK_LIB_ANDROID代表js代码中调用Android这个类时我们事先定义好的名称；
第三步：其实在第二步时我们就已经完成了Android端需要做的事情，之所以写第三步是为了能让大家更好的理解，这里把js端调用Android的方法也写出来便于大家理解整个互调的流程；
//调用app的接口
if (isAPP && isAndroid) {
window.PARK_LIB_ANDROID.sendCarMsg(JSON.stringify(params));
}
这里可以看见通过和Android原生约定传入的PARK_LIB_ANDROID来调用Android本地的方法，通过sendCarMsg(JSON.Stringify(parms))将数据传给Android本地。这里需要注意的一点是被js调用的Android本地方法前面最好要加上@JavascriptInterface注解，不然可能存在高版本不兼容问题导致js调不到Android接口的问题然后使用webview的addJavascriptInterface添加这个类的对象，取一个名字。
2.android调用js的方法
这里说的都是js调用Android的方法，我们也简单的介绍一下Android调用js的方法。
第一步：在Android代码中设置一些模板化的初始化操作，这里不管是Android调用js还是js调用Android都需要这些设置。
webView.getSetting().setJavaScriptEnabled(true);
webView.getSetting().setDefaultTextEncodingName("UTF-8");
webView.setWebChromeClient(newWebChromeClient());
第二步：在已知js代码中的方法时比如知道js代码中有方法叫做showInfoFromJava()直接调用；
webView.loadUrl("javascript:showInfoFromJava()");
如果需要在调用js代码时给它传参我们可以直接拼接字符串来实现，举例如下。
webView.loadUrl(String.format("javascript:loadMap('%s')", url)
)
可以看到这样我们就可以调用带有参数方法的js代码了，这里是将12345这个参数传给了js。
以上这些就是Android和js的互调的基本方法以及步骤，都是固定的模式和方法很容易就能掌握可以看到借助现有接口技术，js 可以执行原生java代码中的方法，可以得到方法的返回值，可以让原生java代码在主线程中动态的操作UI；但是借助该接口，原生java代码，采用webview.loadUrl("javascript:loadMap()")，只能做到执行js中的方法，如果想获取js中定义的全局变量，或者获取某个js函数的返回值，这种方式无法做到，webview也没有提供别的函数来可供使用。
既然这里写到了原生和web的交互那么在此比较一下原生和web各自的优缺点：
- 在用户体验和表现上，原生APP胜出。在这个方面，HTML5仍然面临着不同移动终端设备本地浏览器的功能接入问题，同时在提供用户展示图形界面和数据展现的丰富性方面还有不足。毕竟不是手机原有系统上的所以不会像原生一样的流畅。
- 在跨平台开发成本上，HTML5胜出。HTML5采用网络通用语言，不用考虑终端设备或者操作系统的不同。目前，W3C(万维网联盟World Wide Web Consortium，简称W3C)正在与汽车业、出版业、电视业进行讨论，将web引入新的设备平台中。随着平台逐渐丰富，这方面的成本问题将会日益凸显。
- 在更快速的更新和更强的发布控制方面，HTML5胜出。与HTML5相比，原生APP不具备的一个优势就是开放性。HTML5是基于Web的，这就意味着没有一家公司可以成为市场的“看门人”，各大应用市场没办法。
- 在变现能力方面，原生APP胜出。原生应用的分发平台，如App Store和Google Play，以及国内的应用宝，华为应用商店等，目前是获得收入的较为成熟的商业模式;而HTML5应用，除了付费下载以外，还没有形成其他成熟的商业模式。
- 在技术人才储备上，HTML5胜出。HTML5、JavaScript和CSS都是Web常用语言;然而，Android和ios都是新出的技术所以人才是没有十几年技术积累的web人才多。