Android使用WebView和JS互相调用

Android调用JS方法有2种

1. 使用webView的loadUrl()方法
2. 使用webView的evaluateJavascript()方法

JS调用Android的方法有3种

1. 通过WebView的addJavascriptInterface（）进行对象映射
2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息

Android调用JS

• 使用webview.loadUrl()方法

//打开交互权限
webSettings.setJavaScriptEnabled(true);

1. 不传参
   这是一段js代码,function是一个alert弹框

// 文本名：javascript



   
      
      

// JS代码
     

   

Java中使用webView直接loadUrl()

 webView.loadUrl("javascript:javaCallJs()");

2. 传参

// 文本名：javascript



   
      
      

// JS代码
     

   

注意: 使用webView调用js代码时,注意js需要的参数拼接格式,双引号后面外层要包一层单引号

javascript:callJsWithParams('" + type + "','" + filePath + "')";

• 使用webview.evaluateJavascript()方法,注意这个方法是4.4以上才支持

// 只需要将第一种方法的loadUrl()换成下面该方法即可
    mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });
}

JS调用Android代码

• 使用webView.addJavascriptInterface()方法实现JS调用Android

1. 在webView中将JSTest的对象映射到js的Android对象上,这一步必须要这么写,至于后面的"Android",这个是跟JS后台约定好的需要映射的对象名称

//打开交互权限
 webSettings.setJavaScriptEnabled(true);
//  在webView中添加如下代码
 mWebView.addJavascriptInterface(new webAppInterface(), "Android")

2. 在webView中创建这个类,并在方法上使用@JavascriptInterface注解,注意这个回调需要在子线程

 public class webAppInterface{
        @JavascriptInterface
        public void JSTest() {
            webView.post(() -> //js调用Android的回调);
        }

js代码, 注意:window.Android就是约定好的映射的对象名称,JSTest是js调用的方法名称,这两个不能乱写,否则Android就不能响应JS的事件,这个坑,做项目的时候在这里一度懵逼了很久,果然细节决定成败...

function doJsTest(type) {
    console.log(type);
     window.Android.JSTest(type);
}

其他几个方法后续更新...