WebViewJavascriptBridge与Android-

作者: 若邪 | 来源:发表于2019-01-06 00:56 被阅读0次

前言

在WebView的开发中，经常需要用到本地函数与H5界面或者Js交互，传递数据等，但是都知道Android本身自带的WebView与Js交互方式通过addJavascriptInterface这种桥接方式存在安全隐患问题，这个可以网上查一大堆，这里提供一种可行的方式进行交互，方便Android与IOS同时使用–WebViewJavascriptBridge。

github地址

https://github.com/lzyzsd/JsBridge

功能

Js调用Android（IOS）本地方法（获取回调）；
Android（IOS）本地调用Html函数；
Android（IOS）本地调用Html函数并获取回调；

使用方法

添加依赖

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

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

这里需要注意的一个坑：不建议直接添加github依赖，1.0.4版本存在很多问题，会在使用中出现不稳定情况，例如js无法获取Android（IOS）的回调值等。

简单封装JS库文件

为了使Android和IOS同时使用，方便开发时Html界面调用，这里抽出一个JS库，统一Android和IOS的调用方式。

以下代码都是js文件中的（NativeApp.js）

判断手机类型

/**
 * 获取系统类型 （根据userAgent判断）
 * IOS 苹果
 * ANDROID 安卓
 * UNKOWN 未知
 */
getOSType : function(){
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if(isAndroid){
        return 'ANDROID';
    }else if(isiOS){
        return 'IOS';
    }else{
        return 'UNKOWN';
    }
}

设置Android手机桥接

/**
 * android系统js桥接口设置
 * @param {Object} callback 桥接口回调函数 桥接方式固定写法
 */
setUpAndroidBridge: function (callback) {
    if(window.WebViewJavascriptBridge) {
        return callback(WebViewJavascriptBridge);
    } else {
         document.addEventListener(
             'WebViewJavascriptBridgeReady',
             function() {
                 return callback(WebViewJavascriptBridge);
             },
             false
         );
     }
}

设置IOS手机桥接

IOS在使用时配置该库的代码如下：

/**
 * IOS系统js桥接口设置
 * @param {Object} callback 桥接口回调函数 桥接方式固定写法
 */
setUpIOSBridge : function (callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

设置Android和IOS统一桥接口

为了方便Html端的调用，在JS文件中，将Android和IOS的桥接口统一设置。

/**
 * Android和IOS 统一桥接口
 *
 * data 请求参数封装
 *     如  var data = {
 *            'action': 'closeWebViewPage',
 *            'data':'关闭当前webView视图'
 *
 *         };
 *
 * callback 结果返回值回调
 *     如 var callbackFun = function(resultdata){
 *            //resultdata 为具体返回值封装
 *        }
 *
 *
 */
setUpBridge:function(data,resultCallback){
    var osType = this.getOSType();//获取系统类型
    //按系统类型 分别执行原生交互
    if(osType=='IOS') {
        //苹果手机交互方式 消息体为字面量对象(json格式)： action 代表执行的动作 data 代表传递的数据
        this.setUpIOSBridge(function(bridge) {
            bridge.callHandler('IOSNativeApp',data, function(response) {
                if(typeof resultCallback == 'function') {
                    resultCallback(response);
                }
            });
        });
    } else if(osType == 'ANDROID') {
        //安卓手机交互方式
        this.setUpAndroidBridge(function(bridge) {
            bridge.callHandler('AndroidNativeApp', data, function(response) {
                if(typeof resultCallback == 'function') {
                    resultCallback(response);
                }
            });
        });
    }else {
        //其他类型
    }
}

JS调用函数

在Js中设置两个函数，分别实现不同的功能（一个是关闭本地界面，一个是回传用户信息），为了方便在Html中调用，这里在JS中设置了两个方法，可以根据自己的实际情况封装，这里只是为了演示。

关闭（返回）界面：

/**
 * 关闭当前WebView视图页面，并返回上一级原生界面
 */
closeWebViewPage : function() {
    var data = {
        'action': 'closeWebViewPage',
        'data':'关闭当前webView视图'
    };
    this.setUpBridge(data,null);
}
获取当前登录用户：

/**
 * 获取当前用户信息
 * resultCallback 为一个回调处理函数，函数参数为返回值
 * 如 
 * var resultCallback = function(resultData){
 *
 * }
 * 
 */
getCurrentUserInfo :function(resultCallback) {
       var data = {
            'action': 'getCurrentUserInfo',
            'data':'获取用户信息'
       };
    this.setUpBridge(data,resultCallback);
}

JS库文件整体代码

var NativeApp = {

    closeWebViewPage : function() {...}

    getCurrentUserInfo :function(resultCallback) {...}

    getOSType : function(){...}

    setUpBridge:function(data,resultCallback){...}

    setUpIOSBridge : function (callback) {...}

    setUpAndroidBridge: function (callback) {...}

}

Html页面设置

这里需要将定义好的Js库引入使用，这里设置了两个点击按钮用于调用java本地方法（一个关闭界面，一个获取用户数据），并定义两个用于显示内容的标签（一个显示java主动调用带的参数，一个用于显示主动获取的java数据）。

<!DOCTYPE html>
<!--导入-->
<script type="text/javascript" src="NativeApp.js" ></script>
<script>

    function testClick() {
        //关闭web页面
        NativeApp.closeWebViewPage();
    }


    var resultCallBack = function(resultData){
        bridgeLog('来自Java的回传数据： ' + resultData);
    }

    function testClick1() {
        //获取用户信息
        NativeApp.getCurrentUserInfo(resultCallBack);
    }

    var resultCallBack2 = function(result) {
        showDataFromNative(result);
    }

    function bridgeLog(logContent) {
        document.getElementById("log_msg").innerHTML = logContent;
    }

    function showDataFromNative(dataFromNative) {
        document.getElementById("data_from_native").innerHTML = dataFromNative;
    }

    NativeApp.setUpAndroidBridge(function(bridge) {
        bridge.registerHandler("functionInJs", function(data, resultCallback){
            console.log("Js收到Native的调用（需要返回值）：" + data);
            showDataFromNative(data);
            resultCallback("js 已接收");
        });
    })

    NativeApp.setUpAndroidBridge(function(bridge) {
        bridge.registerHandler("functionInJs_2", function(data, resultCallback){
            console.log("Js收到Native的调用：" + data);
            showDataFromNative(data);
        });
    })


</script>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>测试WebViewJsBridge</p>
        <div>
            <button onClick="testClick()">关闭视图界面</button>
        </div>
        <br/>
        <div>
            <button onClick="testClick1()">获取用户信息</button>
        </div>
        <br/>
        <div id="log_msg">data</div>
        <br/>
        <div id="data_from_native">data</div>
    </body>
</html>

界面显示如下：

js1.png

Html这里调用的时候需要注意的是，我这里是通过两个点击按钮去主动触发的JS调用本地方法，这里没法在Js中直接使用（即在Js中直接NativeApp.closeWebViewPage()）,但是可以通过settimeout来触发：

setTimeout(function(){
    console.log("setTimeout--->");
    NativeApp.getCurrentUserInfo(resultCallBack);
},500);

Android端使用（这里省略IOS，用法基本相同）

xml布局设置

使用该库时，需要将原生的webView控件改为BridgeWebView。为了方便演示，下面多加几个点击控件和显示控件。

<com.github.lzyzsd.jsbridge.BridgeWebView
    android:id="@+id/test_bridge_webView"
    android:layout_width="match_parent"
    android:layout_below="@+id/web_view"
    android:layout_height="200dp"/>
<Button
    android:id="@+id/btn_to_js"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:layout_below="@+id/test_bridge_webView"
    android:text="Native调用JS并获取JS返回值"
    android:layout_height="wrap_content"/>
<Button
    android:id="@+id/btn_to_js_2"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:layout_below="@+id/btn_to_js"
    android:text="Native调用JS"
    android:layout_height="wrap_content"/>
<TextView
    android:id="@+id/tv_text"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:layout_below="@+id/btn_to_js_2"
    android:padding="5dp"
    android:layout_height="wrap_content"/>

Java代码（客户端调用）

注册webview监听

给WebView注册监听，当Html页面调用java本地函数时，会响应。这里第一个参数为本地java代码与Js端的约定协议内容，即Js指定要调用的java函数，第二个参数为回调，即java收到Js的调用之后做的回调，这里我将两个合在一起处理了。

mBridgeWebView.loadUrl("file:///android_asset/new_file.html");
mBridgeWebView.registerHandler("AndroidNativeApp", new BridgeHandler() {

    @Override
    public void handler(String data, CallBackFunction function) {
        Log.e(TAG, "指定Handler接收来自web的数据：" + data);
        try {
            JSONObject jsonObject = new JSONObject(data);
            String action = jsonObject.get("action").toString();
            String data1 = jsonObject.getString("data");
            Log.e("tag", "action-- : " + action);
            Log.e("tag", "data -- : " + data1);
            if(action.equals("closeWebViewPage")) {
                finish();
            } else if(action.equals("getCurrentUserInfo")) {
                function.onCallBack(userName);
            } else {

            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
    }
});

Java主动调用Js函数

java主动调用Js，Js给出回调返回值

this.button1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String data = "data from native";
        mBridgeWebView.callHandler("functionInJs", data, new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                textView.setText("Native接收到Js返回参数：" + data);
            }
        });
    }
});

java主动调用Js，不需要获取返回值

this.button2.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String data = "data from native";
        mBridgeWebView.callHandler("functionInJs_2", data, null);
    }
});

测试截图

Js调用Android本地方法，不需要获取返回值

java1.png

Js调用Android本地方法，并获取返回值

java2.png

js2.png

Android本地调用Js方法，不需要返回值

java3.png

js3.png

Android本地调用Js方法，并获取返回值

java4.png

js4.png

WebViewJavascriptBridge与Android-

前言

github地址

功能

使用方法

添加依赖

推荐方式

简单封装JS库文件

判断手机类型

设置Android手机桥接

设置IOS手机桥接

设置Android和IOS统一桥接口

JS调用函数

JS库文件整体代码

Html页面设置

Android端使用（这里省略IOS，用法基本相同）

xml布局设置

Java代码（客户端调用）

注册webview监听

Java主动调用Js函数

测试截图

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android技术知识

Android开发经验谈

Android开发

Android开发