使用webview时，JS与Android互相传值的方法

在Android项目中，有时候整个页面是个webview，用来加载我们制作好的网页。
那么时常会有网页和app进行交互的需求。

首先，webview需要作如下配置，下面几行都是必要的，还有其他配置未列出，可参考：
Android webview里加载显示网页，显示进度，点击网页链接跳转到app页面

//支持JavaScript
WebSettings setting = webview.getSettings();
setting.setJavaScriptEnabled(true);
//给web提供调用接口
webview.addJavascriptInterface(new WebAppInterface(), "Android");
webview.getSettings().setDomStorageEnabled(true);

写好了上面的基础配置，再实现相互调用：

1. JS如何调用Android的方法：
需求一：如果需要我们点击网页上的按钮后，关闭当前页面回到app，怎么实现呢？

首先在加载webview的activity里定义一个内部类，像下面这样：

    public class WebAppInterface {
        @JavascriptInterface
        public void backToApp() {
            finish();
        }
    }

其中@JavascriptInterface标签表示这个方法是供JS调用的。

然后就可以在JS中调用如下：

<input type="button" value="close" onClick="window.Android.backToApp()" />

这样，就实现了点击网页按钮销毁当前页面的功能。

需求二：如果要实现JS与Android相互传值，怎么实现呢？
修改WebAppInterface 这个内部类，加上交互的get和set方法：

    public class WebAppInterface {
        @JavascriptInterface
        public void backToApp() {
            finish();
        }

        @JavascriptInterface
        public String getString() {
            return mStr;
        }

        @JavascriptInterface
        public void setString(String str) {
            mStr = str;
        }
    }

然后在JS代码中，合适的位置，调用window.Android.getString()或者window.Android.setString(xxx)即可。

注意：字符串传递没问题，但是试了一下布尔值，貌似不能传递。。。

扫描二维码关注公众号，回复： 2463318 查看本文章

上面讲了JS如何调用Android方法，下面看下

Android如何调用JS的函数：

如果不需要返回值，直接这样调用即可：
webview.loadUrl(“javascript:jsMethodName()”); //jsMethodName就是JS代码中定义的函数名。
如果需要返回值，需要这样调用：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {  //sdk>19才有
    //String jsMethodName = "XXX()"; //不需要参数的JS函数名
    String jsMethodName = "XXX('" + p + "')"; //需要参数的JS函数名
    webview.evaluateJavascript(jsMethodName, new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String responseJson) { //这里传入的参数就是JS函数的返回值                 
            LogUtil.d("JSMethod", "调用js返回值:"+ responseJson);
        }
    });
} else {
    //SDK <= 19，暂时没找到方案
}

注意：如果JS代码中XXX()函数返回的是字符串类型，则onReceiveValue(String responseJson)方法传入的responseJson就是这个字符串，而且是带双引号的json字符串。如果当前网页代码里找不到XXX()这个函数，则responseJson就为“null”，注意是“null”这个字符串，而不是null。

使用webview时，JS与Android互相传值的方法

猜你喜欢