Android 原生和 JS 交互实践

Android 与 JS 交互其实是经过 WebView 互相调用方法：

• Android 去调用 JS 的代码；
• JS 去调用 Android 的代码。

1、JS 调用 Android 方法

方法一：经过 WebView 的 addJavascriptInterface() 进行对象映射

优势：使用简单，仅将Android对象和JS对象映射便可

缺点：存在漏洞问题

1）容许 WebView 加载 JS

webView.getSettings().setJavaScriptEnabled(true);

2）编写 JS 接口

public class JsInterface {
    private static final String TAG = "JsInterface";
    private JsBridge jsBridge;
    public JsInterface(JsBridge jsBridge) {
        this.jsBridge = jsBridge;
    }
    /**
     * 这个方法由 JS 调用， 不在主线程执行
     *
     * @param value
     */
    @JavascriptInterface
    public void callAndroid(String value) {
        Log.i(TAG, "value = " + value);
        jsBridge.setTextValue(value);
    }
}
复制代码

3）给 WebView 添加 JS 接口

webView.addJavascriptInterface(new JsInterface(this), "launcher");// 此处的 launcher 能够自定义，最终是 JS 中要使用的对象

4）JS 代码中调用 Java 方法

if (window.launcher){ // 判断 launcher 对象是否存在
	// 此处的 launcher 要和 第3步中定义的 launcher 保持一致
    // JS 调用 Android 的方法
    launcher.callAndroid(str);
}else{
    alert("launcher not found!");
}
复制代码

方法二：经过 WebViewClient 的 shouldOverrideUrlLoading() 方法回调拦截 url

优势：不存在方式一的漏洞；

缺点：JS获取Android方法的返回值复杂。

1）JS 代码中，约定协议

function callAndroid(){
    // 约定的 url 协议为：js://webview?arg1=111&arg2=222
    document.location = "js://webview?arg1="+inputEle.value+"&arg2=222";
}
复制代码

2）Android 代码中，经过设置 WebViewClient 对协议进行拦截处理

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // 通常根据scheme（协议格式） & authority（协议名）判断（前两个参数）
        // 例如：url = "js://webview?arg1=111&arg2=222"
        Uri uri = Uri.parse(url);
        // 若是url的协议 = 预先约定的 js 协议
        if (uri.getScheme().equals("js")) {
            // 拦截url,下面JS开始调用Android须要的方法
            if (uri.getAuthority().equals("webview")) {
                // 执行JS所须要调用的逻辑
                Log.e("TAG", "JS 调用了 Android 的方法");
                Set<String> collection = uri.getQueryParameterNames();
                Iterator<String> it = collection.iterator();
                String result = "";
                while (it.hasNext()) {
                    result += uri.getQueryParameter(it.next()) + ",";
                }
                tv_result.setText(result);
            }
            return true;
        }
        return super.shouldOverrideUrlLoading(view, url);
    }
});
复制代码

方法三：经过 WebChromeClient 的 onJsAlert() 、 onJsConfirm() 、 onJsPrompt（）方法回调拦截 JS 对话框 alert() 、 confirm() 、 prompt（） 消息

处理方式和方法二差很少

1）JS代码中，约定协议

// 调用 prompt()
var result=prompt("js://prompt?arg1="+inputEle.value+"&arg2=222");
alert("prompt：" + result);
复制代码

2）Android 代码中，经过设置 WebChromeClient 对协议进行拦截处理

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        // 通常根据scheme（协议格式） & authority（协议名）判断（前两个参数）
        // 例如：url = "js://webview?arg1=111&arg2=222"
        Uri uri = Uri.parse(message);
        Log.e("TAG", "----onJsPrompt--->>" + url + "," + message);
        // 若是url的协议 = 预先约定的 js 协议
        if (uri.getScheme().equals("js")) {
            // 拦截url,下面JS开始调用Android须要的方法
            if (uri.getAuthority().equals("prompt")) {
                // 执行JS所须要调用的逻辑
                Log.e("TAG", "JS 调用了 Android 的方法");
                Set<String> collection = uri.getQueryParameterNames();
                Iterator<String> it = collection.iterator();
                String result2 = "";
                while (it.hasNext()) {
                    result2 += uri.getQueryParameter(it.next()) + ",";
                }
                tv_result.setText(result2);
            }
            return true;
        }
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }

    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        Log.e("TAG", "----onJsAlert--->>" + url+ "," + message);
        return super.onJsAlert(view, url, message, result);
    }

    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        Log.e("TAG", "----onJsConfirm--->>" + url+ "," + message);
        return super.onJsConfirm(view, url, message, result);
    }
});
复制代码

2、 Android 调用 JS 方法

方法一： 经过 WebView 的 loadUrl()

1）编写 JS 方法

var callJS = function(str){
    inputEle.value = str;
}
复制代码

2）使用 webView.loadUrl() 调用 JS 方法

// Android 调用 JS 方法
webView.loadUrl("javascript:if(window.callJS){window.callJS('" + str + "');}");
复制代码

方法二： 经过 WebView 的 evaluateJavascript()

• 该方法比第一种方法效率更高，使用更简洁；
• 该方法执行不会刷新页面，而第一种方法（ loadUrl ）则会；
• Android 4.4 之后才能使用。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    webView.evaluateJavascript("javascript:if(window.callJS){window.callJS('" + str + "');}", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            Log.e("TAG", "--------->>" + value);
        }
    });
}
复制代码

最后附上源码地址：github.com/iceCola7/Js…