JS与Native交互

KillerNoBlood

于 2021-03-23 13:52:43 发布

阅读量214

点赞数

分类专栏： Android Learning 文章标签： android

本文链接：https://blog.csdn.net/weixin_41733225/article/details/115008723

版权

Android Learning 专栏收录该内容

99 篇文章 0 订阅

订阅专栏

文章参考

demo示例

在这里插入图片描述

AndroidManifest.xml

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

assets下的本地html
在这里插入图片描述

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

		<script type="text/javascript">
			function nativeUseJs(){
				document.getElementById("id_tv_js_show").innerHTML += "<br\>Native调用了js方法";
			}

			function nativeUseJsWithParam(arg){
				document.getElementById("id_tv_js_show").innerHTML += ("<br\>Native调用了js方法并传递参数：" + arg);
			}
		</script>

	</head>



	<body>
		<p>WebView界面</p>

		<div>
			<button onClick="window.zlz.jsUseNative()">JS调用Native方法</button>
		</div>

		<br/>

		<div>
			<button onClick="window.zlz.jsUseNativeWithParam('JS的参数')">JS调用Native方法并传递参数</button>
		</div>

		<br/>

		<div id="id_tv_js_show">Native调用js方法打印信息...</div>

	</body>

</html>

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">


    <WebView
        android:id="@+id/id_webView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Android Native界面"
        android:textColor="@android:color/white"
        android:textSize="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_webView" />


    <TextView
        android:id="@+id/id_btn_native_use_js"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="50dp"
        android:layout_marginRight="30dp"
        android:background="@android:color/darker_gray"
        android:gravity="center_horizontal"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:text="Native调用js方法"
        android:textColor="@android:color/white"
        android:textSize="30dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_webView" />

    <TextView
        android:id="@+id/id_btn_native_use_js_param"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="30dp"
        android:background="@android:color/darker_gray"
        android:gravity="center_horizontal"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:text="Native调用js方法并传值"
        android:textColor="@android:color/white"
        android:textSize="30dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_btn_native_use_js" />


    <TextView
        android:id="@+id/id_tv_native_show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:paddingTop="10dp"
        android:text="Js调用Native方法打印信息..."
        android:textColor="@android:color/white"
        android:textSize="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_btn_native_use_js_param" />

</androidx.constraintlayout.widget.ConstraintLayout>

Activity.class

public class JsNativeActivity extends AppCompatActivity {

    private WebView webView;

    private TextView btn_native_use_js;
    private TextView btn_native_use_js_param;
    private TextView tv_native_show;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_js_native);
        initView();
        initWebView();
    }

    /**
     * 初始化界面控件
     */
    private void initView() {
        btn_native_use_js = findViewById(R.id.id_btn_native_use_js);
        btn_native_use_js_param = findViewById(R.id.id_btn_native_use_js_param);
        tv_native_show = findViewById(R.id.id_tv_native_show);
    }

    /**
     * 初始化 webView
     */
    @SuppressLint("JavascriptInterface")
    private void initWebView() {
        webView = findViewById(R.id.id_webView);
        //启用javaScript
        webView.getSettings().setJavaScriptEnabled(true);
        //从assets目录下加载html
        webView.loadUrl("file:///android_asset/js.html");
        webView.addJavascriptInterface(new JsNativeActivity.JsInterface(), "zlz");

        btn_native_use_js.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.loadUrl("javascript:nativeUseJs()");
            }
        });

        btn_native_use_js_param.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.loadUrl("javascript:nativeUseJsWithParam(" + "'Native的参数'" + ")");
            }
        });
    }


    /**
     * Js 调用 Native 方法
     */
    class JsInterface {
        @JavascriptInterface
        public void jsUseNative() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    String str = tv_native_show.getText().toString().trim();
                    tv_native_show.setText(str + "\n" + "JS调用Native方法");
                }
            });
        }

        @JavascriptInterface
        public void jsUseNativeWithParam(final String msg) {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    String str = tv_native_show.getText().toString().trim();
                    tv_native_show.setText(str + "\n" + "JS调用Native方法并传递参数 : " + msg);
                }
            });
        }
    }
    
}