【Android】如何写一个JsBridge
2016-04-12 23:59
465 查看
JsBridge
简介
Android JsBridge 就是用来在 Android app的原生 java 代码与 javascript 代码中架设通信(调用)桥梁的辅助工具。原文地址点这里
github点这里
使用方式戳这里
有问题请联系 xesam
原理概述
Javascript 运行在 WebView 中,而 WebView 只是 Javascript 执行引擎与页面渲染引擎的一个包装而已。由于这种天然的隔离效应,我们可以将这种情况与 IPC 进行类比,将 Java 与 Javascript 的每次互调都看做一次 IPC 调用。
如此一来,我们可以模仿各种已有的 IPC 方式来进行设计,比如 RPC。本文模仿 Android 的 Binder 机制来实现一个 JsBridge。
首先回顾一一下基于 Binder 的经典 RPC 调用:
当然,client 与 server 只是用来区分通信双方责任的叫法而已,并不是一成不变的。
对于 java 与 javascript 互调的情况,当 java 主动调用 javascript 的时候,java 充当 client 角色,javascript 则扮演 server 的角色,
javascript 中的函数执行完毕后回调 java 方法,这个时候,javascript 充当 client 角色,而 javascript 则承担 server 的责任。
剩下的问题就是怎么来实现这个机制了,大致有这么几个需要解决的问题:
java 如何调用 Javascript
Javascript 如何调用 java
方法参数以及回调如何处理
通信的数据格式是怎样的
下面逐个讨论这些问题:
1. java 如何调用 Javascript
要实现 Java 与 Javascript 的相互调用,有两条途径可以考虑:集成一个定制化的 Javascript 与 Html 渲染引擎,java 通过引擎底层与 Javascript 交互。这样可以获得完全的控制权。
使用 Android Sdk 提供的交互方法。
对于第一种途径,代价比较大,而且技术方案比较复杂,一般只有基于 Javascript 的跨平台开发方案才会这么做。
所以,现在着重考查第二种途径。
Android 的默认 Sdk 中, Java 与 Javascript 的一切交互都是依托于 WebView 的,大致有以下几个可用方法:
第一:
webView.loadUrl("javascript:scriptString"); //其中 scriptString 为 Javascript 代码
第二,在 KITKAT 之后,又新增了一个方法:
webView.evaluateJavascript(scriptString, new ValueCallback<String>() { @Override public void onReceiveValue(String value) { } });//其中 scriptString 为 Javascript 代码,ValueCallback 的用来获取 Javascript 的执行结果。这是一个异步掉用。
这个调用看起比上面的正常,而且更像是一个方法调用。
需要注意的是,ValueCallback 并不是在 UI 线程里面执行的。
2. Javascript 如何调用 java
要实现 Javascript 调用 java 方法,需要先在 Javascript 环境中注入一个 Java 代理:class JavaProxy{ @JavascriptInterface //注意这里的注解。出于安全的考虑,4.2 之后强制要求,不然无法从 Javascript 中发起调用 public void javaFn(){ //xxxxxx }; } webView.addJavascriptInterface(new JavaProxy();, "java_proxy");
然后在 Javascript 环境中直接调用 obj_proxy 代理上的方法即可。
java_proxy.javaFn();
这里有两个方面需要统一:
Javascript 的执行方法比较怪异,所以,我们需要将概念统一化。
如果需要执行的方法比较多,那么,代理对象上也需要定义非常多的方法,我们需要将各种方法定义统一起来管理。
所以,我们先将 Javascript 的执行包装成类似 java 一样的代理对象,然后通过在各自的 stub 上注册回调来增加功能支持。
比如,如果 java 想增加 getPackageName 方法,那么,直接在 JavaProxy 上注册即可:
javaProxy.register("getPackageName", new JavaHandler(){ @Override public void handle(Object value){ //xxxxx } })
如图:
3. 方法参数以及回调如何处理
很显然,任何 IPC 通信都涉及到参数序列化的问题, 同理 java 与 Javascript 之间只能传递基础类型(注意,不单纯是基本类型),包括基本类型与字符串,不包括其他对象或者函数。由于只涉及到简单的相互调用,这里就可以考虑采用 JSON 格式来传递各种数据,轻量而简洁。
Java 调用 Javascript 没有返回值(这里指 loadUrl 形式的调用),因此如果 java 端想从 Javascript 中获取返回值,只能使用回调的形式。
但是在执行完毕之后如何找到正确的回调方法信息,这是一个重要的问题。比如有下面的例子:
在 java 环境中,JavaProxy 对象有一个无参数的 getPackageName 方法用来获取当前应用的 PackageName。
获取到 packageName 之后,传递给 Javascript 调用者的对应回调中。
在 Javascript 环境中,获取当前应用的 PackageName 的大致调用如下:
bridge.invoke('getPackageName', null, function(packageName){ console.log(packageName); });
显然
function(packageName){ console.log(packageName); }
这个 Javascript 函数是无法传递到 java 环境中的,所以,可以采取的一个策略就是,
在 Javascript 环境中将所有回调统一管理起来,而只是将回调的 id 传递到 java 环境去,java 方法执行完毕之后,
将回调参数以及对应的回调 id 返回给 Javascript 环境,由 Javascript 来负责执行正确的回调。
这样,我们就可以实现一个简单的回调机制:
在 java 环境中
class JavaProxy{ public void onTransact(String jsonInvoke, String jsonParam){ json = new Json(jsonInvoke); invokeName = json.getInvokeName(); // getPackageName callbackId = json.getCallbackId(); // 12345678xx invokeParam = new Param(jsonParam);// null ... ... JsProxy.invoke(callbackId, callbackParam); //发起 Javascript 调用,让 Javascript 去执行对应的回调 } }
在 javascript 环境中
bridge.invoke = function(name, param, callback){ var callbackId = new Date().getTime(); _callbacks[callbackId] = callback; var invoke = { "invokeName" : name, "callbackId" : callbackId }; JavaProxy.onTransact(JSON.stringify(invoke), JSON.stringify(param)); } bridge.invoke('getPackageName', null, function(packageName){ console.log(packageName); });
反之亦然。
4. 通信的数据格式是怎样的
问题都处理了,只需要设计对应的协议即可。按照上面的讨论,
在 client 端,我们使用:
Proxy.transact(invoke, callback);
来调用 server 端注册的方法。
在 server 端,我们使用:
Stub.register(name, handler);
来注册新功能,使用
Stub.onTransact(invoke, handler);
来处理接收到的 client 端调用。
其中,invoke 包含所要执行的方法以及回调的信息,因此,invoke 的设计如下:
{ _invoke_id : 1234, _invoke_name : "xxx", _callback_id : 5678, _callback_name : "xxx" }
注意 _invoke_id 与 _invoke_name 的区别:
如果当前 invoke 是一个直接方法调用,那么 _invoke_id 应该是无效的。 如果当前 invoke 是一个回调,那么 _invoke_id + _invoke_name 共同决定回调的具体对象
需要注意的问题
1. 回调函数需要及时删除,不然会引起内存泄漏。
由于我们使用一 Hash 来保存各自环境中的回调函数。如果某个回调由于某种原因没有被触发,那么,这个引用的对象就永远不会被回收。针对这种问题,处理方案如下:
在 Java 环境中:
如果 WebView 被销毁了,应该手动移除所有的回调,然后禁用 javascript 。
另外,一个 WebView 可能加载多个 Html 页面,如果页面的 URL 发生了改变,这个时候也应该清理所有的回调,因为 Html 页面是无状态的,也不会传递相互数据。
这里有一点需要注意的是,如果 javascript 端是一个单页面应用,应该忽略 url 中 fragment (也就是 # 后面的部分) 的变化,因为并没有发生传统意义上的页面跳转,
所有单应用的 Page 之间是可能有交互的。
在 javascript 环境中:
javascript 端情况好很多,因为 WebView 会自己管理每个页面的资源回收问题。
使用
必要配置
请在对应的 html 页面中引入<script src="js-bridge.js"></script>
Java 环境
初始化 JsBridge:jsBridge = new JsBridge(vWebView);
加入 url 监控:
vWebView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); Log.e("onPageFinished", url); jsBridge.monitor(url); } });
Java 注册处理方法:
jsBridge.register(new SimpleServerHandler("showPackageName") { @Override public void handle(String param, ServerCallback serverCallback) { new Handler(Looper.getMainLooper()).post(new Runnable() { @Override public void run() { String packageName = getPackageName(); Tip.showTip(getApplicationContext(), "showPackageName:" + packageName); } }); } });
Java 在处理方法中回调 Javascript:
@Override public void handle(final String param, final ServerCallback serverCallback) { new Handler(Looper.getMainLooper()).post(new Runnable() { @Override public void run() { User user = getUser(); Map<String, String> map = new Gson().fromJson(param, Map.class); String prefix = map.get("name_prefix"); Tip.showTip(mContext, "user.getName():" + prefix + "/" + user.getName()); if ("standard_error".equals(prefix)) { Map<String, String> map1 = new HashMap<>(); map1.put("msg", "get user failed"); String userMarshalling = new Gson().toJson(map1); serverCallback.invoke("fail", new MarshallableObject(userMarshalling)); } else { String userMarshalling = new Gson().toJson(user); serverCallback.invoke("success", new MarshallableObject(userMarshalling)); } } }); }
Java 执行 Js 函数:
jsBridge.invoke("jsFn4", new MarshallableString("yellow"), new ClientCallback<String>() { @Override public void onReceiveResult(String invokeName, final String invokeParam) { if ("success".equals(invokeName)) { new Handler(Looper.getMainLooper()).post(new Runnable() { @Override public void run() { Tip.showTip(getApplicationContext(), invokeParam); } }); } } @Override public String getResult(String param) { return param; } });
销毁 JsBridge
@Override protected void onDestroy() { super.onDestroy(); jsBridge.destroy(); }
Javascript 环境
Javascript 的灵活性比较高,所以要简单一些:Javascript 注册处理函数:
window.JavaBridge.serverRegister('jsFn4', function (transactInfo, color) { log("jsFn4:" + color); title.style.background = color; log("jsFn4:callback"); transactInfo.triggerCallback('success', 'background change to ' + color); });
Javascript 执行 Java 方法:
var sdk = { getUser: function (params) { var _invokeName = 'getUser'; var _invokeParam = params; var _clientCallback = params; window.JavaBridge.invoke(_invokeName, _invokeParam, _clientCallback); } }; sdk.getUser({ "name_prefix": "standard_error", "success": function (user) { log('sdk.getUser,success:' + user.name); }, "fail": function (error) { log('sdk.getUser,fail:' + error.msg); } })
详细 Demo 请参见 js-bridge-demo 工程
相关文章推荐
- Android动画效果-更新中
- Android 自定义RecyclerView布局(一)
- Android基础 ————四大组件之Service
- Android java层音频相关的分析与理解(三)调用相关
- android实践项目三玩转listview
- 4000 Android线程间通讯的几种方式
- Android_anim动画
- Android_真机和模拟器连接Android_studio问题
- 全局获取Context的技巧
- Android控件之TextView学习记录
- android去掉黑色状态栏
- Android笔记【2】--View
- Android ViewDragHelper
- AndroidStudio:图片有jpg改为png之后报错
- SQL基础入门(android,java)
- Android自动化测试之Monkeyrunner使用方法及实例
- android去除标题栏
- Android Studio导入第三方jar包
- Android-BaseAdapter的一些系统定义的子类
- 加入逻辑线程