介绍

代码

交互方式

js调用Android方法

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

本文只介绍addJavascriptInterface()的方法，实现方式最简单。

addJavascriptInterface()

public class AndroidFunction {
    private Context context;
    public AndroidFunction(Context context) {
        this.context = context;
    }
    @JavascriptInterface
    //将显示Toast和对话框的方法暴露给JS脚本调用
    public String showToast(String name) {
        Toast.makeText(context, name, Toast.LENGTH_SHORT).show();
        return "这是Android的返回值，可供js获取";
    }
}

webView.getSettings().setJavaScriptEnabled(true);  //设置WebView属性,运行执行js脚本
//将object对象暴露给Js,调用addjavascriptInterface
webView.addJavascriptInterface(new AndroidFunction(WebViewActivity.this), "androidFunction");

    showToast(str) {
      let android_data =window.androidFunction.showToast(str);//调用Android的toast方法
      console.log(android_data) //打印Android方法的返回值
    },

<el-button @click="showToast('测试JS调用Android的toast方法！')">调用Android方法</el-button>

Android调用js方法

对于Android调用JS代码的方法有2种：

通过WebView的loadUrl()
通过WebView的evaluateJavascript()

两者方法的区别：

loadUrl() 会刷新页面，evaluateJavascript() 则不会使页面刷新，所以 evaluateJavascript() 的效率更高
loadUrl() 得不到 js 的返回值，evaluateJavascript() 可以获取返回值
evaluateJavascript() 在 Android 4.4 之后才可以使用

Android调用js方式	优点	缺点	使用场景
loadUrl()	方便简洁	效率低；获取返回值麻烦	不需要获取返回值，对性能要求比较低
evaluateJavascript()	效率高	向下兼容性差（仅Android 4.4以上可用）	Android 4.4以上

loadUrl()和evaluateJavascript()

<template>
  <el-row>
    <p id="p" style="word-wrap:break-word;word-break:break-all;">Android调用js方法的输出：</p>
  </el-row>
</template>
<script>
export default {
  data() {
    return{}
  },
  methods: {
    jsfunction(str) {
      document.getElementById("p").innerHTML += str;
      let json_data = {
        test:1,
        test2:"这是js的返回值,可供Android获取"
      }
      return  json_data //Android调用js方法，可获取返回值
    },
  },
  created() {
    window.jsfunction = this.jsfunction;
  },
};
</script>

webView.loadUrl("javascript:jsfunction('loadUrl方法传参；')");

webView.evaluateJavascript("javascript:jsfunction('evaluateJavascript方法传参；')", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String s) {
        //打印js方法返回值
        System.out.println("js方法返回的结果： " +s);
        Toast.makeText(WebViewActivity.this, s, Toast.LENGTH_SHORT).show();
    }
});

Android代码汇总

public class WebViewActivity extends AppCompatActivity {

    private WebView webView;
    private Button btn_callJsFunction;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview_layout);

        webView = findViewById(R.id.wView);
        btn_callJsFunction = findViewById(R.id.button_callJsFunction);

        webView.setWebViewClient(new WebViewClient() {
            //设置在webView点击打开的新网页在当前界面显示,而不跳转到新的浏览器中
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        webView.getSettings().setJavaScriptEnabled(true);//是否允许执行js，默认为false。设置true时，会提醒可能造成XSS漏洞
        //将object对象暴露给Js,调用addjavascriptInterface
        webView.addJavascriptInterface(new AndroidFunction(WebViewActivity.this), "androidFunction");
		//vue的链接页面网址
        webView.loadUrl("http://192.168.0.105:8089/csdntest");          

        //调用js方法的按钮点击事件
        btn_callJsFunction.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.loadUrl("javascript:jsfunction('loadUrl方法传参；')");
//                callJsFunction();

                webView.evaluateJavascript("javascript:jsfunction('evaluateJavascript方法传参；')", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String s) {
                        //打印js方法返回值
                        System.out.println("js方法返回的结果： " +s);
                        Toast.makeText(WebViewActivity.this, s, Toast.LENGTH_SHORT).show();
                    }
                });

            }
        });
    }
}

public class AndroidFunction {
    private Context context;
    public AndroidFunction(Context context) {
        this.context = context;
    }
    @JavascriptInterface
    //将显示Toast和对话框的方法暴露给JS脚本调用
    public String showToast(String name) {
        Toast.makeText(context, name, Toast.LENGTH_SHORT).show();
        return "这是Android的返回值，可供js获取";
    }
}

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp">
        <Button
            android:id="@+id/button_callJsFunction"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:text="调用js方法" />
    </RelativeLayout>

    <WebView
        android:id="@+id/wView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </WebView>
</LinearLayout>

vue代码汇总

<template>
  <el-row>
    <p id="p" style="word-wrap:break-word;word-break:break-all;">Android调用js方法的输出：</p>

    <el-button @click="showToast('测试JS调用Android的toast方法！')">调用Android方法</el-button>
    <div style = "height:1000px"></div>
  </el-row>
</template>
<script>
export default {
  data() {
    return{}
  },
  methods: {
    showToast(str) {
      let android_data =window.androidFunction.showToast(str);//调用Android的toast方法
      console.log(android_data) //打印Android方法的返回值
    },

    jsfunction(str) {
      document.getElementById("p").innerHTML += str;

      let json_data = {
        test:1,
        test2:"这是js的返回值,可供Android获取"
      }
 
      return  json_data //Android调用js方法，可获取返回值
    },
  },
  created() {
    window.jsfunction = this.jsfunction;
  },
};
</script>

本文参考

菜鸟教程：WebView和JavaScrip交互基础
Carson带你学Android：全面总结WebView与 JS 的交互方式
安卓webview原生和JavaScript(js)交互传值的4种方式 java和js交互安卓JsBridge原理解析