Android开发之android与JS互调(附源码)

我们先看下JS代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js与Android交互</title>
</head>
<body>
<H2>点击获取按钮,弹出输入框内容</H2>


<div><span>输入数据：</span><input type="text" id="input"/></div>
<div id="btn"><span class="btn">点我获取数据</span></div>


<script type="text/javascript">
    var inputData = document.getElementById("input")
    var btn = document.getElementById("btn")
    //Js调用Android方法
    btn.addEventListener("click", function () {
        var getInputData = inputData.value;
        //androidJs这个方法必须和Android里面的方法保持一致
        if (window.androidJs) {
        //getJsData这个方法必须和Android里面的方法保持一致
            androidJs.getJsData(getInputData)
        } else {
            alert("与android互调方法不存在！")
        }
    });

    //Android调用Js的方法,writeInputText此方法需要跟android里面的方法保持一致
    var writeInputText = function (str) {
        inputData.value = str;
    }



</script>
</body>
</html>

再来看下android代码：

package kotlin.yhsh.cn.androidandjs;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

/**
 * @author DELL
 * 2019年7月23日19:34:25
 */
public class MainActivity extends Activity {

    private TextView tvShowData;
    private WebView wvLoadHtml;
    private EditText etInputToJs;
    private Button btClickInputToJs;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tvShowData = findViewById(R.id.tv_show_data);
        wvLoadHtml = findViewById(R.id.wv_load_html);
        etInputToJs = findViewById(R.id.et_input_to_js);
        btClickInputToJs = findViewById(R.id.bt_click_input_to_js);
        btClickInputToJs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String inputToJs = etInputToJs.getText().toString().trim();
                //if(window.writeInputText)判断Js里面的writeInputText是否存在，存在就传递inputToJs这个值到Js里面
                wvLoadHtml.loadUrl("javascript:if(window.writeInputText){window.writeInputText('" + inputToJs + "')}");
            }
        });
        WebSettings settings = wvLoadHtml.getSettings();
        settings.setJavaScriptEnabled(true);
        //方法一：androidJs这个方法必须和Js里面的方法保持一致
        wvLoadHtml.addJavascriptInterface(new OpenWebView(), "androidJs");
        //方法二：
//        wvLoadHtml.addJavascriptInterface(new GetWebViewData() {
//            @Override
//            @JavascriptInterface
//            public void getJsData(String data) {
//                getFinallyData(data);
//            }
//        }, "androidJs");

        //加载HTML
        wvLoadHtml.loadUrl("file:///android_asset/loadAndroid.html");
    }

    /**
     * Js的回调结果方法
     */
    class OpenWebView {
        /**
         * getJsData这个方法必须和Js里面的方法保持一致
         *
         * @param data Js返回的数据
         */
        @JavascriptInterface
        public void getJsData(final String data) {
            getFinallyData(data);
        }
    }

    /**
     * getJsData这个方法必须和Js里面的方法保持一致
     */
    interface GetWebViewData {
        /**
         * Js返回的数据
         *
         * @param data 数据
         */
        void getJsData(String data);
    }


    private void getFinallyData(final String data) {
        Log.e("打印拿到的数据", data);
        //当前是子线程
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                tvShowData.setText(data);
            }
        });
    }
}

再来看下xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">

    <WebView
            android:id="@+id/wv_load_html"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0dp"/>

    <TextView
            android:text="Js调用Android后显示的数据"
            android:gravity="center"
            android:id="@+id/tv_show_data"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
    <View
            android:background="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="1dp"/>
    <EditText
            android:layout_marginTop="10dp"
            android:id="@+id/et_input_to_js"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    <Button
            android:text="android调用Js代码"
            android:id="@+id/bt_click_input_to_js"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

</LinearLayout>

来看下效果图：

JS调用android：

在HTML页面输入数据，然后在最下面的textView控件显示输入内容

再看下android调用JS：

看不懂的可自行下载源码：源码下载

另外附加GitHub下载地址：Android与JS互调源码下载

xiayiye5

发布了191 篇原创文章 · 获赞 105 · 访问量 36万+

他的留言板关注

Android开发之android与JS互调(附源码)

猜你喜欢