前言:不知道什么时候开始,WebView+Html5的开发模式走进了人们的视野,之前对于这种模式我也只是有一个大概的认识,直到2016年进入了某知名POS厂商,真正的接触到了Html5开发APP,从而对WebView+Html5越来越感兴趣。。。
刚进入公司,由于我还是在校生所以公司也没有着急让我参与项目的开发,我有了充分的时间去熟悉我们公司的企业文化、经营业务、我们的产品以及项目框架。当时我们所要开发的APP需要遵循银联商务提出的“U架构”标准,所谓“U架构”,简单的说就是同一界面,但是具体的业务逻辑由各厂商自己维护实现。
“U架构”当时的实现模式是这样的:由一个安卓智能桌面+H5APP+各厂商开发的服务端apk组成前端。其中智能桌面可以理解为一个应用管理器,是一个大容器;H5APP则是界面的显示以及与安卓端进行相互调用,从而实现刷卡、网络通信等功能;服务端则是各个厂商提供的自己设备的服务,从而保证其他厂商开发的APP可以完美在自家设备上运行。
刚开始接触的时候,我就感到特别神奇,Html5开发的APP是如何与安卓应用进行交互的呢?脑子里突然蹦出了WebView,这个控件不就是用于加载显示网页的吗?现在,就让我们一起来熟悉一下Android通过WebView与Html5、JavaScript的相互调用吧。
至于如何建工程,怎么定义WebView之类的基础问题这里就不涉及了,下面通过两个功能来讲解Android和JavaScript之间的相互调用:
功能描述:安卓端调用JS端的setImg方法设置相关参数,从而改变背景图片
实现代码:
首先,JS端需要先定义这个函数,定义代码如下:
function setImg () { WIN_WIDTH = im.getWidth(); WIN_HEIGHT = im.getHeight(); WIN_SRC = im.getSourse(); return WIN_OBJ = { width: WIN_WIDTH, height: WIN_HEIGHT, src:WIN_SRC } }
然后安卓端开始调用JS的该方法,从代码中可以看出需要设置图片的宽高以及图片路径三个参数,我们在安卓端定义一个Image对象,将其传给JS端,也就是上段代码中的im,代码如下:
public class Image { private String sourse; private int width; private int height; @JavascriptInterface public int getWidth() { return width; } public void setWidth(int width) { this.width = width; } public void setHeight(int height) { this.height = height; } @JavascriptInterface public int getHeight() { return height; } @JavascriptInterface public String getSourse() { return sourse; } public void setSourse(String sourse) { this.sourse = sourse; } }
接下来就是最后通过WebView的loadUrl调用,大功告成~
webview.addJavascriptInterface(im, "im");
webview.loadUrl("javascript:setImg()");心细的朋友肯定发现上图代码中仅仅实现了安卓如何调用JavaScript端的方法,不要着急!在下篇将会相对详细的讲解一下JS端如何调用安卓方法,谢谢观看~