前期调研
调研对象:
支付宝,微信,云之家
调研文档:
Android中JS与Java的极简交互库 SimpleJavaJsBridge
设计需求
阅读类型的业务功能页面需要由前端H5实现,需要做到服务端可控;
页面界面更改减少重新发布新版本的频率;
功能页面部分原型需求无法实现,需要原生功能支持;
对未来业务功能的拓展,方便迭代;
作用和意义
定制化JSBridge实际上是拓展NativeApp的hybrid程度, 参照微信和支付宝,可打造APP强力的生态圈;
jsBridge在支付,钱包,媒体拓展,图片处理,活动页面,用户地理位置网络状态都能得到原生强有力支持;
对于阅读性页面有更多拓展;
优秀的通信设计方案
前端和Native对对方的细节知道的越少越好,减少耦合度,暴露的接口尽量控制在5个以内;
js与Native之间的通信,最好定义一套通信协议或者规则,减少js代码为兼容不同系统而过多if;
主动发送消息给对方时,对方尽量对该消息进行反馈,即使无需求对某些功能做反馈,减少if判断的兼容代码;
实现方式(交互形式)
Native 调用 JS
使用前端暴露在window下的一个方法或者一个对象的方法;_handlerFromApp(message)
JSBridge._handlerFromApp(message)
方法名: handlerFromApp
参数:
message: {
cbId : "cb_(:id)_(:timeStamp)", //回调函数的id
status: 0, //状态数据 (0:失败, 1:成功)
msg : "ok", //反馈的消息
data : {
//... //一些处理后的数据
}
}
以下提供的部分参考方法
未对其进行真实测试,因为我使用的是iframe的方法,但原理几乎相同
建议封装后提供给Native开发工程师放入对应的APP包中,在webView读取页面的时候用对应的Native语言注入页面,避免页面在前端导入被抓取;
var doc = JSBridge || window;
var uniqueId = 1;
var invokeCBMap = {};
var listenCBMap = {};
//
fu