Android WebView与H5交互

前言

在我们的日常开发当中,为了加快开发效率,目前公司的一些功能需求是采用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

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

wx.html

WebViewJsBridge

发送数据给默认Handler接收




发送数据给指定Handler接收



调用打印信息

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操作系统*/ }

附上一篇传送门