Android 混合H5开发两种模式

最新推荐文章于 2025-06-18 12:18:39 发布

原创最新推荐文章于 2025-06-18 12:18:39 发布 · 792 阅读

2 ·

CC 4.0 BY-SA版权

Android小家专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了Hybrid应用中JavaScript与Native交互的两种模式：原生Hybrid与使用com.github.lzyzsd.jsbridge.BridgeWebView。详细介绍了如何通过WebView加载URL，设置JavaScript接口，实现双向通信，以及具体的XML布局和Java代码示例。

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

1.模式一：原生HyBrid

1.JS

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script type="text/javascript">
        function showToast(toast) {
            javascript:control.showToast(toast);
        }
        function log(msg){
            console.log(msg);
        }
    </script>

</head>

<body>
<input type="button" value="toast"
       onClick="showToast('Hello world')" />
</body>
</html>

2.JAVA

1.XML

<WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </WebView>

2.打开JS通道

WebSettings webSettings = mTestWB.getSettings();
webSettings.setJavaScriptEnabled(true);

3.WebView的addJavascriptInterface方法去注入一个我们自己写的interface。

mTestWB.addJavascriptInterface(new JsInterface(), "control");
public class JsInterface {
    //JS中调用Java的方法
    @JavascriptInterface
    public void showToast(String toast){
        Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
        //Java调用JS中的方法
        log("show toast success");
    }
//JAVA调用JS
    public void log(final String msg){
        mTestWB.post(new Runnable() {
            @Override
            public void run() {
                mTestWB.loadUrl("javascript: log(" + "'" + msg + "'" + ")");
            }
        });
    }
}

4.loadURL

mTestWB.loadUrl("file:///android_asset/index.html");

模式二：com.github.lzyzsd.jsbridge.BridgeWebView

1.H5界面

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>js调用java</title>
</head>
<body>
<p>
    <input type="text" id="text1" value="请输入测试数据" width="400px" height="200px"/>
</p>

<p>
    <input type="button" id="enter" value="调用安卓的方法" onclick="testClick();"
    />
</p>


<script>

         //js调用Android方法：接收Android传递过来的数据，并做处理

         function testClick() {

          //参数一：调用java中的方法   submitFromWeb是方法名，必须和Android中注册时候的方法名称保持一致
          //参数二：返回给Android端的数据，可以为字符串，json等信息
          //参数三：js接收到Android传递过来的数据之后的相应处理逻辑

            window.WebViewJavascriptBridge.callHandler(
               'submitFromWeb'
               , {'param': "JS成功接收到数据111---"}
               , function(responseData) {
                    alert(responseData)
               }
           );
       }

       //JS注册事件监听
       function connectWebViewJavascriptBridge(callback) {
           if (window.WebViewJavascriptBridge) {
               callback(WebViewJavascriptBridge)
           } else {
               document.addEventListener(
                   'WebViewJavascriptBridgeReady'
                   , function() {
                       callback(WebViewJavascriptBridge)
                   },
                   false
               );
           }
       }

        //注册回调函数，第一次连接时调用 初始化函数
       connectWebViewJavascriptBridge(function(bridge) {
            //初始化
           bridge.init(function(message, responseCallback) {
               var data = {
                   'Javascript Responds': 'Wee!'
               };
               responseCallback(data);
           });


           //Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知

           bridge.registerHandler("functionInJs", function(data, responseCallback) {
                alert(data);
               var data = document.getElementById("text1").value;
               var responseData = "我是Android调用js方法返回的数据---"+ data;
               responseCallback(responseData);
           });
       })

</script>

</body>
</html>

Java

2.xml

<com.github.lzyzsd.jsbridge.BridgeWebView
    android:id="@+id/JsBridgeWebView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

3.bridgeWebView初始化

bridgeWebView.setDefaultHandler(new DefaultHandler());
bridgeWebView.setWebChromeClient(new WebChromeClient());

4.LoadURL

bridgeWebView.loadUrl("file:///android_asset/a.html");

5.Android调用JS方法

* 参数一：js中的方法名称
* 参数二：Android传递给js数据
* 参数三：回调接口，data为Android调用js方法的返回数据
bridgeWebView.callHandler("functionInJs", "Android调用js的方法", new CallBackFunction() {
    @Override
    public void onCallBack(String data) {
        Log.e("TAG", "onCallBack:" + data);
    }
});

6.JS调用Android方法

*  参数一：submitFromWeb就是注册供JS调用的方法名，
*  参数二：data是JS传过来的参数，
*  参数三：CallBackFunction 函数中需要把JS需要的response返回给JS
bridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
    @Override
    public void handler(String data, CallBackFunction function) {
        Log.e("TAG", "js返回：" + data);
        //显示js传递给Android的消息
        Toast.makeText(MainActivity.this, "js返回:" + data, Toast.LENGTH_LONG).show();
        //Android返回给JS的消息
        function.onCallBack("我是js调用Android返回数据：" +
               etText .getText().toString());
    }
});

7.依赖库

dependencies {
    compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
allprojects {
    repositories {
        jcenter()
        maven{url "https://jitpack.io"}
    }
}