Android与Js通信之JsBridge再封装

文末有demo工程和相关lib，附带aar
Android与Js通信的文章已经太多，而且都写的非常详细，这里只针对使用JsBridge的库进行二次封装使用进行介绍，使用简单。
为什么使用JsBridge?
- Android 调用 Js 的方法 - Android 没法拿到返回值
- Android调用Js方法时，需要手写完整的Js脚本和参数，出错几率大
- Js无法知道调用Android本地方法成功与否，需要Android再次调用相关的Js方法，增加前端和Android开发的交互难度。
JsBridge是'大头鬼'为Android与Js交互写的一个通用库，解决了Android无法通过回调与Js交互的问题，并且封装了Android与Js双向的调用方法。
JsBridge 开源地址：https://github.com/lzyzsd/JsBridge

使用步骤

1引入library依赖/导入aar并依赖/直接复制lib中所有的类和assets文件夹下的js注入文件到工程、（由于只是对开源库进行的封装，所以不再发布到jCenter和mavenCentral）
2 将布局文件中的WebView控件替换为BridgeWebView

图2-1

3 初始化工具类，将bridgeWebView传入

WebViewTools webViewTools = new WebViewTools(webView);

4-1 Js调用Android方法

注意：Js和Android方法的第一个参数需要两端保持一致，并且Js代码必须使用window.WebViewJavascriptBridge.callHandler(x,y,function(data))这种类型的方法，因为在Android端进行的Js文件的注入，如果不用该方法，Android端则与Js无法与正确交互

//Js代码//Js方法第一个参数为两端约定好的方法名//第二个参数为传递给Android的数据内容，String类型//第三个参数为function回调function testClick1() {            //唤起本地方法            window.WebViewJavascriptBridge.callHandler(                'callNative'                , {'data': 'data com from Js'}                , function(responseData) {                  //responseData是Android回调给Js的数据                  //注意responseData只能是String类型                }            );        }

//Android端代码//第一个参数为两端约定好的方法名//第二个参数为方法回调   webViewTools.registerWebViewFunction("callNative", new JsCallBack() {            @Override            public void notifyNativeMethod() {                //唤起本地功能            }            @Override            public void JsData(String data) {                Log.d("WebViewTools", "Js传递过来的数据"+data);            }            @Override            public void CallBack(CallBackFunction function) {                function.onCallBack("传递给Js的数据内容");            }        });

4-2Android调用Js方法

注意：Js和Android方法的第一个参数需要两端保持一致，并且Js代码必须使用 bridge.registerHandler(x, function(data, responseCallback){}因为在Android端进行的Js文件的注入，如果不用该方法，Android端则与Js无法与正确交互

//Js代码bridge.registerHandler("callJs", function(data, responseCallback) {                //data为Android端传递过来的数据                responseCallback("回调给Android的数据");            });

//Android端代码webViewTools.callWebFunction("callJs", "data from Java", new JavaCallBack() {            @Override            public void onJsResponse(String data) {                Log.d("webViewTools", "Js的回调数据" + data);            }        });

这样就完成了Android和Js的双向调用，并且双向都能通过回调进行相应的数据交互。因为暂时只是使用了双向的通信方法，更多的配置和使用请查看原项目地址：JsBridge

github地址
aar文件下载地址

使用步骤

注意：Js和Android方法的第一个参数需要两端保持一致，并且Js代码必须使用window.WebViewJavascriptBridge.callHandler(x,y,function(data))这种类型的方法，因为在Android端进行的Js文件的注入，如果不用该方法，Android端则与Js无法与正确交互

注意：Js和Android方法的第一个参数需要两端保持一致，并且Js代码必须使用 bridge.registerHandler(x, function(data, responseCallback){}因为在Android端进行的Js文件的注入，如果不用该方法，Android端则与Js无法与正确交互

这样就完成了Android和Js的双向调用，并且双向都能通过回调进行相应的数据交互。因为暂时只是使用了双向的通信方法，更多的配置和使用请查看原项目地址：JsBridge

相关资料:

更多相关文章

随机推荐