Android与Js互调之

任易x9cojw24ff 2021-06-24

展开全文

1. 说明

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

image

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<String>() {
            @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中的） 点击事件
         *  <input type="button" value="结算" onclick="showToast('12')">
         */
        @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具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
      <meta http-equiv="description" content="this is my page">
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">  

        /**
            结算方法
        */
       function showToast(toast) { 
            var money=toast*3;
            javascript:obj.showToast(money);
        }
          function funFromjs(){
        document.getElementById("helloweb").innerHTML="div显示数据,无参数";
        }
        function funJs(msg){
            document.getElementById("hello2").innerHTML=msg;
         }
        function sum(i,m){ 
           var result = i*m; 
           document.getElementById("h").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; 
           javascript:obj.onSum(result) 
        } 
        function sumn(i,m){ 
           var result = i*m; 
           document.getElementById("hh").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; 
           return result;
        } 

    </script> 

    <style type="text/css">
        input{
            width: 100px;
            height: 100px;
            margin: 20px;
        }

    </style>

</head>

<body>

     <input type="button" value="结算" onclick="showToast('12')">
       <div id="helloweb"> 

      </div>
      <div id="hello2"> 

      </div>
      <div id="h"> 

      </div>
       <div id="hh"> 

      </div>

</body>
</html>

MainActivity代码如下：

/**
 * Email: 2185134304@qq.com
 * 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中的） 点击事件
         *  <input type="button" value="结算" onclick="showToast('12')">
         */
        @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<String>() {
            @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"?>
<LinearLayout xmlns:android="http://schemas./apk/res/android"
    xmlns:tools="http://schemas./tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.jackchen.webview.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android调用Js有返回值 —— 方法1"
        android:onClick="btn_1"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android调用Js有返回值 —— 方法二"
        android:onClick="btn_2"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android调用Js方法，无参数"
        android:onClick="btn_3"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android调用Js方法，有参数"
        android:onClick="btn_4"
        />

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

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

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