【GT-Android与JavaScript相互调用（一）】

最新推荐文章于 2022-03-23 21:04:10 发布

原创最新推荐文章于 2022-03-23 21:04:10 发布 · 625 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#WebView #混合APP #Html5

本文介绍了使用WebView结合HTML5开发移动应用的方式，并详细解析了Android端如何通过WebView与JavaScript进行交互，包括设置图片背景的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：不知道什么时候开始，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端如何调用安卓方法，谢谢观看~