devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JSBridge实现Android和H5交互_jsbridge的h5

作者：小蓝xlanll | 2024-06-13 01:27:15

赞

踩

jsbridge的h5

JSBridge实现Android和H5交互

前言

相比于WebView的自带的JavascriptInterface的接口，使用JSBridge实现Android和H5之间的交互会更加方便和安全，接下来介绍一下JSBridge的具体用法。

添加JSBridge库

在Android Studio的app/build.gradle添加如下配置，即可完成JSBridge库导入：

repositories {
	maven { url "https://jitpack.io" }
}

dependencies {
	implementation 'com.github.lzyzsd:jsbridge:1.0.4'
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

代码实现

接下来通过示例代码演示如何实现JS和Android之间的交互，需要完整项目文件通过如下链接下载：
https://download.csdn.net/download/Jason_Flash/12883161

AndroidManifest.xml

AndroidManifest.xml需要加入INTERNET权限：

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

  • 1

activity_main.xml

在activity_main.xml添加JSBridge的webView：

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

  • 1
  • 2
  • 3
  • 4

javascript.html

创建assets目录，并在assets目录下添加JS文件，这里命名为javascript.html。在javascript.html注册供Android调用的方法，并在点击按钮时调用Android注册的方法，实现交互，具体代码如下（实际项目中H5页面往往部署在服务器上，这个使用本地JS文件方便测试）：

<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="content-type">
        <title>JSBridge测试</title>
        <script>

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

            connectWebViewJavascriptBridge(function(bridge) {
                //注册回调函数，接收Android端用send方法发送的消息
                bridge.init(function(message, responseCallback) {
                    alert("message from Java = " + message);
                    var responseData = "Received!";
                    responseCallback(responseData);
                });

                //注册回调函数，供Android调用，接收Android端发送的数据
                bridge.registerHandler("functionInJs", function(data, responseCallback) {
                    alert("data from Java = " + data);
                    var responseData = "Received!";
                    responseCallback(responseData);
                });
            })

            function queryInfo(key) {
                //调用Android端注册的getInformation方法进行数据查询
                window.WebViewJavascriptBridge.callHandler("getInfomation", key,
                function(responseData) {
                    alert("responseData from Java = " + responseData);
                });
            }

            function control(key) {
                //调用Android端注册的controlDevice方法进行设备状态控制
                window.WebViewJavascriptBridge.callHandler("controlDevice", key,
                function(responseData) {
                    alert("responseData from Java = " + responseData);
                });
            }

            function sendMessage(message) {
                //通过send方法向Android发送消息
                window.WebViewJavascriptBridge.send(message, function(responseData) {
                    alert("responseData from Java = " + responseData);
                });
            }

        </script>
    </head>

    <body>
        <p>JSBridge测试</p>
        <p><input type="button" value="查询设备类型" onclick='queryInfo("deviceType");'/></p>
        <p><input type="button" value="查询设备状态" onclick='queryInfo("deviceStatus");'/></p>
        <p><input type="button" value="打开设备" onclick='control("open");'/></p>
        <p><input type="button" value="关闭设备" onclick='control("close");'/></p>
        <p><input type="button" value="发送消息" onclick='sendMessage("Hello Android!");'/></p>
    </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72

MainActivity.java

在MainActivity.java中加载创建好的javascript.html，注册供JS调用的方法，并在启动时调用JS注册的方法发送消息和数据：

package com.example.testjsbridge;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.webkit.WebChromeClient;

import com.github.lzyzsd.jsbridge.BridgeHandler;
import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.BridgeWebViewClient;
import com.github.lzyzsd.jsbridge.CallBackFunction;
import com.github.lzyzsd.jsbridge.DefaultHandler;

public class MainActivity extends Activity {

    BridgeWebView mWebView;
    String deviceType = "插座";
    boolean deviceStatus = false;
    String myData = "{data,1234567890}";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (BridgeWebView) findViewById(R.id.activity_web_view);

        initWebView();
    }

    private void initWebView() {
        mWebView.setWebViewClient(new MyWebViewClient(mWebView));
        mWebView.setDefaultHandler(new MyHandlerCallback());
        mWebView.setWebChromeClient(new WebChromeClient());
        //开启webView的LocalStorage功能，使H5可以保存数据
        mWebView.getSettings().setDomStorageEnabled(true);
        //加载本地JS文件，实际项目中加载H5页面的url
        mWebView.loadUrl("file:///android_asset/javascript.html");

        //注册获取信息方法，供JS调用
        mWebView.registerHandler("getInfomation", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {

                String responseData = "";
                Log.d("TestJsBridgeLog", "data from JS: " + data);
                if(data.contentEquals("deviceStatus")) {
                    if(deviceStatus) {
                        responseData = "开";
                    } else {
                        responseData = "关";
                    }
                } else if(data.contentEquals("deviceType")) {
                    responseData = deviceType;
                }
                //回调返回给JS
                function.onCallBack(responseData);
            }
        });

        //注册控制设备状态方法，供JS调用
        mWebView.registerHandler("controlDevice", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {

                String responseData = "";
                Log.d("TestJsBridgeLog", "data from JS: " + data);
                if(data.contentEquals("open")) {
                    deviceStatus = true;
                    responseData = "打开设备成功";
                } else if (data.contentEquals("close")){
                    deviceStatus = false;
                    responseData = "关闭设备成功";
                } else {
                    responseData = "参数错误";
                }
                //回调返回给JS
                function.onCallBack(responseData);
            }
        });

        //调用send方法向JS发送消息
        mWebView.send("Hello JS!");

        //webView调用JS的方法发送数据
        mWebView.callHandler("functionInJs", myData, new CallBackFunction() {
            @Override
            public void onCallBack(String responseData) {
                //打印JS回复的消息
                Log.d("TestJsBridgeLog", "responseData from JS: " + responseData);
            }
        });

    }

    class MyWebViewClient extends BridgeWebViewClient {

        public MyWebViewClient(BridgeWebView webView) {
            super(webView);
        }

		//每次页面加载完成时，获取H5页面的title，可以根据项目需要使用
		@Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            String title = view.getTitle();
            if (!TextUtils.isEmpty(title)) {
                log("onPageFinished title:" + title);
            }
        }
    }

    //接收JS通过send方法发送的消息
    class MyHandlerCallback extends DefaultHandler {
        @Override
        public void handler(String data, CallBackFunction function) {
            super.handler(data, function);
            if (null != function) {
                Log.d("TestJsBridgeLog", "data from JS: " + data);
                function.onCallBack("收到JS消息");
            }
        }
    }

	//右滑时，返回上一个H5页面，H5页面多次跳转的项目中使用
	@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135

效果图

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/710372
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号