首页 » HTML5 » Android与Web原生互调经验总结

Android与Web原生互调经验总结

原文 http://blog.csdn.net/qq_27980611/article/details/78900146

2017-12-27 02:00:18阅读(287)

 AndroidWeb原生互调经验总结

         随着手机移动端的日益成熟,为了节省开发时间,以及节约成本,以及正值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人才多。

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹