1. 说明

在开发项目过程中，可能或多或少会有这样的需求，就是有时候需要Android 调用 Js中的方法然后获取Js返回的String类型的数据或者Json数据，然后在客户端来显示、或者说点击Html中的某个onClick点击事件，那么这篇文章就简单的给大家来介绍下Android 调用Js的方法的2种方式，以及点击WebBView中的onClick点击事件（即就是点击Html中的onClick点击事件）的方法，效果图如下：

图片.png

2. Android 调用 Js 概念？

就是在手机App中点击某个 button按钮，来调用 Html网页中的一个方法，有两种实现方式，就是图中的方法1、方法2；

方法1：首先给webview设置

// 给 WebView 添加 JavaScript接口  参数1：   ；参数2：JS中的变量名web_view.addJavascriptInterface(new JsInterface() , "obj");

然后写一个 JsInterface类，然后写Js中对应的方法

public class JsInterface{        // Android 调用 Js 方法1 中的返回值        @JavascriptInterface        public void onSum(int result){            Toast.makeText(MainActivity.this , "Android调用Js方法有返回值，返回结果是 -> " + result , Toast.LENGTH_SHORT).show();        }    }

方法2：在Android 4.4 之后，直接调用evaluateJavascript()方法即可，就自带返回值，具体代码如下：

 /**     * Android 调用 Js 第二种方法     *    Android4.4 之后 直接调用evaluateJavascript方法即可     */    public void btn_2(View view){        web_view.evaluateJavascript("sumn(6,11)", new ValueCallback() {            @Override            public void onReceiveValue(String value) {                Toast.makeText(MainActivity.this, "返回值" + value, Toast.LENGTH_SHORT).show();            }        });    }

3. 点击WebView中对onClick点击事件，即就是点击Html中的 onClick点击事件：

首先先给webview设置

// 给 WebView 添加 JavaScript接口  参数1：   ；参数2：JS中的变量名web_view.addJavascriptInterface(new JsInterface() , "obj");

然后在 JsInterface类中，写Html中需要调用的方法即可：

public class JsInterface{        /**         *  点击 WebView中的（即就是 Html中的） 点击事件         *           */        @JavascriptInterface        public void showToast(String toast){            Toast.makeText(MainActivity.this , "你的商品价格是：￥" + toast , Toast.LENGTH_SHORT).show();        }    }

4. 其他

还有两种，就是Android调用Js方法，另一种是Js不带有参数，一种是Js带有参数，可以直接调用 webview.loadUrl()即可，不过这两种在开发过程中不太常用；

/**     * Android 调用 Js方法，无参数     */    public void btn_3(View view){        web_view.loadUrl("javascript:funFromjs()");    }    /**     * Android 调用 Js 方法 ， 有参数     */    public void btn_4(View view){        web_view.loadUrl("javascript:funJs('Android端传入的信息，div标签中显示,含参数')");    }

具体代码如下：
html具体代码如下：

MainActivity代码如下：

/** * Email: [email protected] * Created by JackChen 2018/3/27 16:19 * Version 1.0 * Params: * Description:  Android调用Js方法的2种方式、  点击Html中某个 onClick点击事件 */public class MainActivity extends AppCompatActivity {    private WebView web_view;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView() ;    }    private void initView() {        web_view = (WebView) findViewById(R.id.web_view);        // 获取WebView的设置        WebSettings webSettings = web_view.getSettings();        //设置编码        webSettings.setDefaultTextEncodingName("utf-8");        //设置背景颜色 透明        web_view.setBackgroundColor(Color.argb(0, 0, 0, 0));        // 将JavaScript设置为可用，这一句话是必须的，不然所做一切都是徒劳的        webSettings.setJavaScriptEnabled(true);        // 通过webview加载html页面        web_view.loadUrl("file:///android_asset/ll.html");        // Android 调用 Js 第一种方法：使用下边方式来写        // 给 WebView 添加 JavaScript接口  参数1：   ；参数2：JS中的变量名        web_view.addJavascriptInterface(new JsInterface() , "obj");    }    public class JsInterface{        // Android 调用 Js 方法1 中的返回值        @JavascriptInterface        public void onSum(int result){            Toast.makeText(MainActivity.this , "Android调用Js方法有返回值，返回结果是 -> " + result , Toast.LENGTH_SHORT).show();        }        /**         *  点击 WebView中的（即就是 Html中的） 点击事件         *           */        @JavascriptInterface        public void showToast(String toast){            Toast.makeText(MainActivity.this , "你的商品价格是：￥" + toast , Toast.LENGTH_SHORT).show();        }    }    public void btn_1(View view){        web_view.loadUrl("javascript:sum(6,6)");    }    /**     * Android 调用 Js 第二种方法     *    Android4.4 之后 直接调用evaluateJavascript方法即可     */    public void btn_2(View view){        web_view.evaluateJavascript("sumn(6,11)", new ValueCallback() {            @Override            public void onReceiveValue(String value) {                Toast.makeText(MainActivity.this, "返回值" + value, Toast.LENGTH_SHORT).show();            }        });    }    /**     * Android 调用 Js方法，无参数     */    public void btn_3(View view){        web_view.loadUrl("javascript:funFromjs()");    }    /**     * Android 调用 Js 方法 ， 有参数     */    public void btn_4(View view){        web_view.loadUrl("javascript:funJs('Android端传入的信息，div标签中显示,含参数')");    }}

activity_main布局文件如下：

<?xml version="1.0" encoding="utf-8"?>

具体代码已上传至github：
https://github.com/shuai999/WebViewJsDemo.git

Android与Js互调之 - 使用addJavascriptInterface()