Android使用webview进行android与js互相调用（带源码）

一.添加权限

 <uses-permission android:name="android.permission.INTERNET"/>

二.js调用android代码

1.需要写一个java对js方法的映射

public class AndroidToJS {

    // 定义JS需要调用的方法
    // 被JS调用的方法必须加入@JavascriptInterface注解
    @JavascriptInterface
    public void callAndroid(String msg){
        Log.e("l2","JS调用了Android的callAndroid()，msg : " + msg);
    }
}

2.activitiy类，webview设置，把接口方法添加进webview对象等

  WebSettings settings = webView.getSettings();
        //允许WebView使用JS
        settings.setJavaScriptEnabled(true);
        //支持通过JS打开新窗口(允许JS弹窗)
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        //约定好对象在前端的调用名字
        webView.addJavascriptInterface(new AndroidToJS(),"android");

3.前端代码

<button onClick='callAndroid()'>这是JS调用原生1</button><hr>
  
    <Script>
        //Android原生调用JS方法
        function callJS(msg){
            alert(123)
            android.callAndroid('123');
        }

        //JS调用Android原生方法
        function callAndroid(){
            android.callAndroid("123");
        } 
        <Script>

核心代码是

 webView.addJavascriptInterface(new AndroidToJS(),"android");
 
android.callAndroid("123");

在点击了之后，其实就是向Android那传了123. logcat中打印出了123

三、Android向js端传值（也是android调用js）

上面的html代码有个callJS。所以在Android那里设置回调，在onPageFinished回调之后写可以避免js调用失效。

webView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                //页面跳转结束后被回调
                btnAndroidCallJS.setOnClickListener(new View.OnClickListener() {
                    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
                    @Override
                    public void onClick(View v) {
//                        webView.loadUrl("http://10.0.2.2:8000/test");
                        webView.loadUrl("javascript:callJS("+123+")");
//                        webView.evaluateJavascript("javascript:callJS("+123+")", new ValueCallback<String>() {
//                            @Override
//                            public void onReceiveValue(String s) {
//                                Log.e("zw",s); //这里s是“Android调用了JS的callJS()”
//                            }
//                        });
                    }
                });
            }
            @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
            @Override //方法二
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                Uri uri = request.getUrl();
                if("js".equals(uri.getScheme())){
                    if("webview".equals(uri.getAuthority())){
                        String msg=uri.getQueryParameter("arg2");
                        Log.e("l2", uri.getScheme() + " , " + uri.getAuthority() + " , "+msg);
//                        Toast.makeText(getApplicationContext(),"heihei",Toast.LENGTH_SHORT).show();
                        return true;
                    }
                }

                return super.shouldOverrideUrlLoading(view, request);
            }

        });

核心是下面的，这样就可以传值到前端了。兼容Android4.4以下版本
前端js返回值，并不是通过return， webView.loadUrl并没有实现回调接口，js返回值其实是通过js调用android方法来实现，所以这是为什么我先说js调用Android了。

 webView.loadUrl("javascript:callJS("+123+")");

如果你是Android4.4,即api版本19以上，不考虑之下得兼容。可以使用下面得方式。不仅效率好，而且api原生设计有回调接收前端js返回值

 webView.evaluateJavascript("javascript:callJS("+123+")", new ValueCallback<String>() {
//                            @Override
//                            public void onReceiveValue(String s) {
//                                Log.e("zw",s); //这里s是“Android调用了JS的callJS()”
//                            }
//                        });

四、 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/btn_call_js"
        android:text="Android调用JS"

        />
    <WebView
        android:id="@+id/webView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="10dp" />
</LinearLayout>

注意的是，如果你用android模拟器和你的本地服务器做调试请用10.0.2.2，因为本地服务器的127.0.0.1是主机电脑，而模拟器的127.0.0.1是自己手机，Android提供了10.0.2.2这个特殊地址映射了主机的127.0.0.1

webView.loadUrl("http://10.0.2.2:8000/test");

以上是我的总结，推荐文章

https://www.jianshu.com/p/757a4a337b15

https://www.jianshu.com/p/5cc2eae14e07

项目源码
https://pan.baidu.com/s/1gUOhwFOofulP7sq9JyVD3Q

4sum