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

而且这次在开发 android 项目也是用得这种方式，中间也遇到了不少的坑，虽然现在已经实现想要的目的，但还是要这个实现的方法记录下来。

前期准备

webview需要作如下配置，下面几行都是必要的。

//获取一个 webViewSetting 对象
        WebSettings setting = webView.getSettings();
        //支持JavaScript
        setting.setJavaScriptEnabled(true);
        //显示缩放控制工具
        setting.setDisplayZoomControls(true);
        //设置webView支持缩放
        setting.setSupportZoom(true);
        setting.setBuiltInZoomControls(true);
        //设置加载进来的页面自适应手机屏幕
        setting.setUseWideViewPort(true);
        setting.setLoadWithOverviewMode(true);
        setting.setDomStorageEnabled(true);
        // 给web提供调用接口
        webView.addJavascriptInterface(
                new MyWebAppInterface(ctx), "Android");
        webView.setWebViewClient(new MyWebViewClient());
        // 本地H5 跨载访问线上
        // API >= 16
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        }

JS 如何调用 Android 的方法

需求一： 如果需要我们点击网页上的按钮后，关闭当前页面回到app，怎么实现呢？

首先在 WebAppInterface 类中代码示例：

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

}

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

然后在 H5 中通过以下代码进行调用

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

需求二：如果要实现JS与Android相互传值

public class MyWebAppInterface {
    @JavascriptInterface
    public String getString() {
        return mStr;
    }
    @JavascriptInterface
    public void setString(String str) {
        mStr = str;
    }
}

在 H5 中通过以下代码进行调用

window.Android.getString()
window.Android.setString('xxx')

二. Android 如何调用 JS 的函数

在 MyWebViewClient 类中的写法：

public class MyWebViewClient extends WebViewClient {

    private static String TAG = "MyWebViewClient";
    Context ctx;

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 页面加载完毕后的代码
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            view.evaluateJavascript("javascript:functionName('value')", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    // 如果 functionName 中有 return 的话就会在这里体现
                    MyLog.d(TAG + " evaluateJavascript", value);
                }
            });
        } else {
            view.loadUrl("javascript:functionName('value')");
        }
    }

}

view.evaluateJavascript 与 view.loadUrl 区别

webview.loadUrl：无返回值，大部分 Android SDK 版本通用

view.evaluateJavascript：有返回值，Android 版本 4.4 以上，包括4.4

转载请注明：隨習筆記 » WebView 的 JS 与 Android 原生互相调取并传值