WebView-JsBridge框架使用Demo

最新推荐文章于 2024-08-08 08:30:48 发布

孤独浪人1

最新推荐文章于 2024-08-08 08:30:48 发布

阅读量1.3k

点赞数 1

分类专栏： android开发

本文链接：https://blog.csdn.net/u010782846/article/details/91595278

版权

android开发专栏收录该内容

53 篇文章 0 订阅

订阅专栏

JsBridge框架使用

前言

GitHub源代码
随着市面上WebApp应用的逐渐普及，Android中的WebView应用越来越广泛，使用WebView中比较经典的问题就是如何让Navtive和Js进行通信，相关原理可以查看WebView应用实战

JsBridge解决了那些问题

支持单向给Js发送全局信息
支持Native和JavaScript双向通信

Android JsBridge 的使用

Android JsBridge 搭建

搭建流程总结

在app级别的build.gradle中添加JsBridge URI
使用的是封装的BridgeWebView而不是原生的WebView

在app级别的build.gradle中添加JsBridge URI:

    compile 'com.github.lzyzsd:jsbridge:1.0.4'

使用BridgeWebView替代WebView

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

Android JsBridgeAPI使用

JsBridge主要提供了两个API：

BridgeWebView.callHandler(String handlerName, String data, CallBackFunction callBack):调用JS方法
BridgeWebView.registerHandler(String handlerName, BridgeHandler handler) :注册方法，以供JS调用原生方法

Native调用JS的方法

BridgeWebView.callHandler(String handlerName, String data, CallBackFunction callBack)
用于调用JS的方法，有三个参数，分别表示：
handlerName：操作方法名，注册一个调用JS function 的方法，handlerName指代JS function的方法名，也是一种标识
data：是想要发送的字符串数据，可以把任何想发送的数据进行序列化发送
callBack：回调方法，调用JS方法成功后，JS方法进行回调
代码样列如下：

 BridgeWebView.callHandler("functionInJs", "data from Java", new CallBackFunction() {

		@Override
		public void onCallBack(String data) {
			// TODO Auto-generated method stub
			Log.i(TAG, "reponse data from js " + data);
		}

});

这段代码，就是调用了JS的functionInJs方法，调用信息为 “data from Java”，然后显示JS返回的数据，完成整个流程的双向通信。

Native注册方法让JS调用

BridgeWebView.registerHandler(String handlerName, BridgeHandler handler)
注册一个本地方法以供JS调用，该方法有三个参数，handlerName为本地方法名，handler是处理方法，当JS调用handlerName方法时，handler里的方法将会被调用。
代码样列：

		BridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {

			@Override
			public void handler(String data, CallBackFunction function) {
				Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
                function.onCallBack("submitFromWeb exe, response data 中文 from Java");
			}

		});

当Js需要调用原生的方法时，这个方法就可以做相应的逻辑，处理完成后，把处理结果返回前端。

设置默认的处理Handler

JsBridge为了解决JS调用了还没有注册的本地方法问题，集成了一个DefaultHandler类以处理默认的行为，以防止出现注册后没有任何响应的问题：

BridgeWebView.setDefaultHandler(new DefaultHandler());

给JS发送无需响应的数据

BridgeWebView.send("hello");

不指定handlerName，也没有回调，发送后Js会有对应的默认function进行处理.

JavaScript JsBridge使用

JsBridge还配套编写了WebViewJavascriptBridge.js的脚本以供WebApp直接进行使用，主要运行在配套的自定义WebViews上可以就使用window.WebViewJavascriptBridge对象进行使用相关的API。

JavaScript JsBridge 坏境配置

在使用JavaScript JsBridge 之前，我们需要监听window是否已经具备WebViewJavascriptBridge对象：

        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }

这段代码的意识是通过判断window.WebViewJavascriptBridge是否存在，如果存在说明window坏境已经对脚本进行了初始化可以使用，如果不存在就添加WebViewJavascriptBridgeReady监听，当初始化完毕后，调用回调函数callback进行一些初始化操作。

JavaScript JsBridge API使用

JavaScript调用原生的方法

window.WebViewJavascriptBridge.callHandler(
         'submitFromWeb'
          , {'param': '中文测试'}
           , function(responseData) {
            document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
         }
 );

这个方法调用了Native的submitFromWeb方法,并在调用成功后进行一些显示处理。

JavaScript注册function方法供Native调用

在之前，我们已经知道window.WebViewJavascriptBridge初始化完毕会进行调用回调callback，一般在callback中会做JS的function的方法注册和默认处理方法的注册。下面我们来看看注册function方法的样列，只有进行了注册的方法，Native才能调用：

        connectWebViewJavascriptBridge(function(bridge) {
            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                if (responseCallback) {
                    var responseData = "Javascript Says Right back aka!";
                    responseCallback(responseData);
                }
            });
        })

样列中注册了functionInJs方法，当Native调用functionInJs方法的时候，就会回调这个方法，然后JS进行一些处理后，回调结果给Native.

JavaScript创建默认的处理function

有些为了通讯方便或者方便调试等因素，我们需要注册一个统一处理的方法进行管理，这个方法在初始化的时候就要定好：

        connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'Javascript Responds': '测试中文!'
                };

                if (responseCallback) {
                    console.log('JS responding with', data);
                    responseCallback(data);
                }
            });
        })

上面的方法进行初始化一个方法，进行无没有注册方法被Native调用的管理，也接受WebView.send()过来的数据。

JavaScript单向发送数据

            window.WebViewJavascriptBridge.send(
                data
                , function(responseData) {
                    document.getElementById("show").innerHTML =
                     "repsonseData from java, data = " + responseData
                }
            );