我爱编程

Android WebView与H5交互

2018-04-12  本文已影响435人  sweetying

前言

在我们的日常开发当中,为了加快开发效率,目前公司的一些功能需求是采用H5开发的,所以就涉及到一个Js与Java的相互调用,Android提供了原生的WebView来实现网页的加载,但是存在的一些安全隐患问题,今天介绍一种安全方式来满足Js与java互相调用的需求,它就是WebViewJavascriptBridge.

WebViewJavascriptBridge介绍

  • WebViewJavascriptBridge是WebView和Js交互通信的桥梁，它是实现java和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口，使得开发者更方便的让js和native灵活交互，使我们的开发更加灵活和安全
  • 目前实现JSBridge的开源框架很多，这里介绍一个开源框架：https://github.com/lzyzsd/JsBridge

WebViewJavascriptBridge使用方式

  1. 添加配置信息

     allprojects {
 repositories {
 jcenter()
 maven { url "https://jitpack.io" }
  }
}

  2. 在module的build.pradle中添加如下配置

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

  3. 用BridgeWebView替换WebView

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

Js调用Java方法并传递数据

可以通过registerHandler（）用来注册一个java函数，来实现js回调的handler

   //必须和js同名函数，注册具体执行函数，类似java实现类。
   //第一参数是订阅的java本地函数名字 第二个参数是回调Handler , 
     参数返回js请求的resqustData,function.onCallBack（）回调到js，调用function(responseData)
    mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {

        @Override public void handler(String data, CallBackFunction function) {
            Log.e(TAG, "指定Handler接收来自web的数据：" + data);
            function.onCallBack("指定Handler收到Web发来的数据，回传数据给你");
        }
    });

Js做如下声明

 function testClick1() {
       //调用本地java方法
       //第一个参数是 调用java的函数名字 第二个参数是要传递的数据 第三个参数js在被回调后具体执行方法，responseData为java层回传数据
       var data='发送消息给java代码指定接收';
       window.WebViewJavascriptBridge.callHandler(
           'submitFromWeb'
           ,data
           , function(responseData) {
               bridgeLog('来自Java的回传数据： ' + responseData);
           }
       );
   }

注意事项

  1. Js调用Java方法的时候必须申明和初始化,不然Java返回的值,Js这边接收不到

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

  //初始化
  //注册回调函数，第一次连接时调用 初始化函数
  //接收默认Java方法传过来的参数
   connectWebViewJavascriptBridge(function(bridge) {
       bridge.init(function(message, responseCallback) {
           bridgeLog('默认接收收到来自Java数据： ' + message); var responseData = '默认接收收到来自    
           Java的数据，回传数据给你';
           responseCallback(responseData);
       });

       //接收指定的Java方法传过来的参数
       bridge.registerHandler("functionInJs", function(data, responseCallback) {
           bridgeLog('指定接收收到来自Java数据： ' + data); var responseData = '指定接收收到来自Java的数据，回传数据给你';
           responseCallback(responseData);
       });
   })

整体代码示例

MainActivity

public class MainActivity extends AppCompatActivity {
private static  final  String TAG=MainActivity.class.getSimpleName();
private BridgeWebView mBridgeWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initViews();
}

private void  initViews(){
    mBridgeWebView= (BridgeWebView) findViewById( R.id.test_bridge_webView);
    mBridgeWebView.loadUrl("file:///android_asset/wx.html");

    mBridgeWebView.setDefaultHandler(new BridgeHandler() {
        @Override
        public void handler(String data, CallBackFunction function) {
            Log.e(TAG, "DefaultHandler接收全部来自web的数据："+data);
            function.onCallBack("DefaultHandler收到Web发来的数据，回传数据给你");
        }
    });

    //必须和js同名函数，注册具体执行函数，类似java实现类。
    //第一参数是订阅的java本地函数名字 第二个参数是回调Handler , 参数返回js请求的resqustData,function.onCallBack（）回调到js，调用function(responseData)
    mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {

        @Override
        public void handler(String data, CallBackFunction function) {
            Log.e(TAG, "指定Handler接收来自web的数据：" + data);
            function.onCallBack("指定Handler收到Web发来的数据，回传数据给你");
        }
    });
    findViewById(R.id.to_web_default).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mBridgeWebView.send("发送数据给web默认接收",new CallBackFunction(){
                @Override
                public void onCallBack(String data) {
                    Log.e(TAG, "来自web的回传数据：" + data);
                }
            });
        }
    });
    findViewById(R.id.to_web).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mBridgeWebView.callHandler("functionInJs","发送数据给web指定接收",new CallBackFunction(){
                @Override
                public void onCallBack(String data) {
                    Log.e(TAG, "来自web的回传数据：" + data);
                }
            });
        }
    });
}
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="com.whoislcj.jsbridge.MainActivity">

<com.github.lzyzsd.jsbridge.BridgeWebView
    android:id="@+id/test_bridge_webView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>
<Button
    android:id="@+id/to_web_default"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:text="默认传递数据给Web"
    android:layout_height="wrap_content"/>
<Button
    android:id="@+id/to_web"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:text="指定传递数据给Web"
    android:layout_height="wrap_content"/>
</LinearLayout>

wx.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script >

   function testClick() {
       //发送消息给java代码
       var data = '发送消息给java代码全局接收';
       //第一个参数要发送的数据 第二个参数js在被回调后具体执行方法，responseData为java层回传数据
       window.WebViewJavascriptBridge.send(
           data
           , function(responseData) {
              bridgeLog('来自Java的回传数据： ' +responseData);
           }
       );
   }

   function testClick1() {
       //调用本地java方法
       //第一个参数是 调用java的函数名字 第二个参数是要传递的数据 第三个参数js在被回调后具体执行方法，responseData为java层回传数据
       var data='发送消息给java代码指定接收';
       window.WebViewJavascriptBridge.callHandler(
           'submitFromWeb'
           ,data
           , function(responseData) {
               bridgeLog('来自Java的回传数据： ' + responseData);
           }
       );
   }

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

   //注册事件监听
   function connectWebViewJavascriptBridge(callback) {
       if (window.WebViewJavascriptBridge) {
           callback(WebViewJavascriptBridge)
       } else {
           document.addEventListener(
               'WebViewJavascriptBridgeReady'
               , function() {
                   callback(WebViewJavascriptBridge)
               },
               false
           );
       }
   }
   //注册回调函数，第一次连接时调用 初始化函数
   connectWebViewJavascriptBridge(function(bridge) {
       bridge.init(function(message, responseCallback) {
           bridgeLog('默认接收收到来自Java数据： ' + message);
           var responseData = '默认接收收到来自Java的数据，回传数据给你';
           responseCallback(responseData);
       });

       bridge.registerHandler("functionInJs", function(data, responseCallback) {
           bridgeLog('指定接收收到来自Java数据： ' + data);
           var responseData = '指定接收收到来自Java的数据，回传数据给你';
           responseCallback(responseData);
       });
   })
 </script>

</head>
<body>
<p>WebViewJsBridge</p>
<div>
<button onClick="testClick()">发送数据给默认Handler接收</button>
</div>
<br/>
<div>
<button onClick="testClick1()">发送数据给指定Handler接收</button>
</div>
<br/>
<div id="log_msg">调用打印信息</div>
</body>
</html>

ios和Android通用声明,针H5那边

之前H5写的一套代码,ios和Android不能通用,针对这种情况H5需做如下声明

//申明交互
function setupWebViewJavascriptBridge(callback) {
//Android使用
if (window.WebViewJavascriptBridge) {
    callback(WebViewJavascriptBridge)
}
else{
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}

//ios使用
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__](https://__bridge_loaded__/)';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
//处理交互 方法名要和 native app内定义的对应
setupWebViewJavascriptBridge(function(bridge) {
//处理 oc 调用 js
/*bridge.registerHandler('registerAction',function(data,responseCallback) {
//处理oc给的传参
alert('oc请求js 传值参数是：'+data);
var responseData = { 'result':'handle success' };
//处理完，回调传值给oc
responseCallback(responseData);
});*/

//js判断手机操作系统(ios或者是Android)
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
//安卓，初始化jsBridge
bridge.init(function(message, responseCallback) {
console.log('JS got a message', message);
var data = {
'Javascript Responds': '测试中文!'
};
console.log('JS responding with', data);
responseCallback(data);
});
}
if (isIOS) { /*这个是ios操作系统*/ }

附上一篇传送门

上一篇下一篇

猜你喜欢

热点阅读