H5、Android混合开发之JS交互

最新推荐文章于 2025-07-15 10:32:47 发布

原创最新推荐文章于 2025-07-15 10:32:47 发布 · 794 阅读

2 ·

CC 4.0 BY-SA版权

Android应用开发专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了H5与Android混合开发中JS交互的两种主要方式：H5调用Android方法及Android调用H5中的JS方法。通过具体示例，包括定义@JavascriptInterface注解、使用evaluateJavascript和addJavascriptInterface方法，展示了如何实现跨平台的高效通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

h5和android混合开发js交互思路：

（1）、h5调用android中方法:

A、android中定义接口，并在方法上添加@JavascriptInterface注解。

B、通过如下方法，将暴露对象，这样h5中js就可以通过name引用来调用android中方法。

android.webkit.WebView.addJavascriptInterface(Object object, String name)

（2）、android调用h5中js方法：

//方法一，这种效果高，不刷新页面
android.webkit.WebView.evaluateJavascript(String script, ValueCallback<String> resultCallback)

//方法二
android.webkit.WebView.loadUrl(String url)

1、示例学习？

h5调用android自带的弹出框，同时andorid也调用h5中js里的 getName（）方法，如何实现？

关键代码实现如下：

（1）接口。h5要能调用andorid中的方法，需在android中定义方法，并在需要暴露的方法上添加@JavascriptInterface注解：

package com.example.administrator.myapplication3;


import android.content.Context;
import android.support.v7.app.AlertDialog;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebView;

/**
 * android 和 js 交互方法
 */
public class AndroidJS {

    private Context context;

    private WebView webView;

    public AndroidJS(Context context, WebView webView) {
        this.context = context;
        this.webView = webView;
    }

    /**
     * 1. 定义JS需要调用的方法
     * 2. 被JS调用的方法必须加入@JavascriptInterface注解
     */
    @JavascriptInterface
    public void dialog(final String msg) {

        //注意：通过Handler发送消息
        webView.post(new Runnable() {
            @Override
            public void run() {

                //调用webview中js，此方法效率高，也可以webView.loadUrl();
                webView.evaluateJavascript("javascript:getName('" + msg + "')", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {

                        new AlertDialog.Builder(context)
                                .setTitle("android和js交互")
                                .setMessage("android调用webview中js方法getName的返回值：" + value)
                                .create().show();
                    }
                });

            }
        });

    }
}

（2）Activity关键代码：

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        webView = (WebView)findViewById(R.id.webView);
        WebSettings webSettings = webView.getSettings();
        //设置WebView属性，能够执行Javascript脚本
        webSettings.setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/test.html");
        //设置Web视图
        webView.setWebViewClient(new webViewClient ());

        //暴露js方法
        webView.addJavascriptInterface(new AndroidJS(this,webView),"androidJS");

    }

    //Web视图
    private class webViewClient extends WebViewClient {
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }

H5页面：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>test</title>  
      <script>

         //调用android中定义的js方法
         function dialog(){
			//由于对象映射，所以调用test对象等于调用Android映射的对象
            androidJS.dialog("陈嘉豪");
         }

         //提供android调用
         function getName(name){
            document.getElementById("userName").innerHTML = name;
            return true;
         }
      </script>
   </head>
   <body>
   姓名：<div id="userName"></div>
      <button type="button" id="btn" onclick="dialog()">调用安卓中dialog方法！</button>
   </body>
</html>

运行结果：

调用前：

调用后：