贵州巨友科技有限责任公司 - 贵州|贵阳|APP开发|微信小程序|WEB系统开发|OA系统|网站开发|微信公众号开发|VR应用开发

贵州巨友科技有限责任公司

新闻中心
网站首页 > 资讯 > 技术资料

Android通过JsBridge实现Native与H5的双向通信

2017-09-06 10:04:43 贵州巨友科技有限责任公司 阅读

Android中的JSBridge是H5与Native通信的桥梁,其作用是实现H5与Native间的双向通信。在Android中展现H5也就用到了Webview,之前写了一篇文章Android WebView简单使用以及实现native与h5交互,主要就是介绍一个webview的用法介绍及WebViewClientWebChromeClient一些常用的方法。在结尾的时候简单介绍了下Native与H5的相互调用,也没怎么讲具体怎么用,今天就在这里做一下笔记。

既然这里讲述了JsBridge,所以可以移步这里看看lzyzsd/JsBridge,里面有介绍使用方法。我这下面也接着啰嗦一下:

1、引入资源文件

repositories { // ... maven { url "https://jitpack.io" } } dependencies { compile 'com.github.lzyzsd:jsbridge:1.0.4' }

2、布局文件

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <com.github.lzyzsd.jsbridge.BridgeWebView android:id="@+id/JsBridgeWebView" android:layout_width="match_parent" android:layout_height="match_parent"> </com.github.lzyzsd.jsbridge.BridgeWebView> <Button android:id="@+id/android_call_js" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Android调用js" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> </RelativeLayout>

3、在项目assets目录下存放的以下文件

  • jsbridge.js文件

function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener('WebViewJavascriptBridgeReady', function () { callback(WebViewJavascriptBridge) }, false) } } connectWebViewJavascriptBridge(function (bridge) { bridge.init(function (message, responseCallback) { var data = {'Javascript Responds': 'Wee!'} responseCallback(data) }) }) //H5调用Native方法 function JsCallAndroid(data) { window.WebViewJavascriptBridge.callHandler('JsCallAndroid',data, function(responseData) { alert(responseData)}); } function JsCallAndroid2() { window.WebViewJavascriptBridge.callHandler('JsCallAndroid2','', function(responseData) { alert(responseData)}); } //Native调用H5方法 bridge.registerHandler("functionInJs", function(data, responseCallback) { alert(data);var responseData = "我接受到了安卓的调用";responseCallback(responseData); });

  • index.html文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>JsBridgeDemo</title> </head> <body> <div> <input type="button" value="H5调用Native方法" style="margin-top: 64px" onclick="JsCallAndroid('hello,Android')"/> </div> <p> <input type="button" id="enter" value="H5调用Native方法2" onclick="JsCallAndroid2();"/> <p> <script type="text/javascript" src='jsbridge.js'></script> </body> </html>

4、在对应activity中调用

button = (Button) findViewById(R.id.android_call_js); bridgeWebView = (BridgeWebView) findViewById(R.id.JsBridgeWebView); bridgeWebView.setDefaultHandler(new DefaultHandler()); bridgeWebView.setWebChromeClient(new WebChromeClient()); bridgeWebView.setWebViewClient( new BridgeWebViewClient(bridgeWebView)); bridgeWebView.loadUrl("file:///android_asset/index.html"); /*** js发送给按住消息 JsCallAndroid是js调用的方法名安卓\返回给js*/ bridgeWebView.registerHandler("JsCallAndroid", new BridgeHandler() { @Override public void handler(String data, CallBackFunction function) { //显示接收的消息 showToast(data); //返回给html的消息 function.onCallBack( "返回给Toast的alert"); } }); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { /*** 给Html发消息 js接收并返回data*/ bridgeWebView.callHandler("functionInJs", "调用js的方法", new CallBackFunction() { @Override public void onCallBack(String data) { showToast("==="+ data); } }); } });

下面这里的代码段目的就是在Android端注册H5调用native方法的回调,这里的JsCallAndroid要和jsbridge.js文件中的window.WebViewJavascriptBridge.callHandler中的key保持一致也为JsCallAndroid

 /*** js发送给按住消息 JsCallAndroid是js调用的方法名安卓\返回给js*/ bridgeWebView.registerHandler("JsCallAndroid", new BridgeHandler() { @Override public void handler(String data, CallBackFunction function) { //显示接收的消息 showToast(data); //返回给html的消息 function.onCallBack( "返回给Toast的alert"); } });

5、上述的bridgeWebView.registerHandler实现的是单个回调事件的注册,下面我们实现批量注册本地java方法,以供js端调用
先写一个回调接口:

import com.github.lzyzsd.jsbridge.CallBackFunction; public interface JsHandler { public void OnHandler(String handlerName, String responseData, CallBackFunction function); }

在对应使用的activity中添加以下方法:

/*** 批量注册本地java方法,以供js端调用** @param handlerNames 方法名称数组* @param handler回调接口*/ public void registerHandlers(final ArrayList<String> handlerNames, final JsHandler handler) { if (handler != null) { for (final String handlerName : handlerNames) { bridgeWebView.registerHandler(handlerName, new BridgeHandler() { @Override public void handler(String data, CallBackFunction function) { handler.OnHandler(handlerName, data, function); } }); } } }

那么如何使用呢?将第4模块中的bridgeWebView.registerHandler方法替换如下:

ArrayList<String> mHandlers = new ArrayList<>(); mHandlers.add("JsCallAndroid"); mHandlers.add("JsCallAndroid2"); registerHandlers(mHandlers, new JsHandler() { @Override public void OnHandler(String handlerName, String responseData, CallBackFunction function) { LogUtil.d(responseData); if (handlerName.equals("JsCallAndroid")){Log.d("TAG","JsCallAndroid"); }else if (handlerName.equals("JsCallAndroid2")){ Log.d("TAG","JsCallAndroid2"); } } });



作者:liujc
链接:http://www.jianshu.com/p/375ccc1103d3
來源:简书
著作权归作者所有。


Powered by MetInfo 6.0.0 ©2008-2018 www.metinfo.cn