JSBridge(Android和IOS平台)的设计和实现

前言

对于商务类的app,随着app注册使用人数递增,app的运营者们就会逐渐考虑在应用中开展一些推广活动。大多数活动具备时效性强、运营时间短的特征,一般产品们和运营者们都是通过wap页面快速投放到产品的活动模块。Wap页面可以声文并茂地介绍活动,但活动的最终目标是通过获取特权、跳转进入本地功能模块,最后达成交易。如何建立wap页面和本地Native页面的深度交互,这就需要用到本文介绍的JSBridge。

此外一些平台类的产品,如大家每天都在使用的微信、支付宝、手机qq等,无一例外都在使用集成JSBridge的webContainer完成众多业务组件功能,大大减少了客户端Native开发的工作量,不仅节约了大量人力开发成本,还能避开产品上线更新的版本审核周期限制(特别是IOS平台)。当然这些超级APP有强大的技术力量支撑,通过JSBridge有计划的进行API规范接口,不断向前端Wap开发人员开放,并在版本上向下兼容。但对于我们刚起步运营的中小级app来说暂时还没有必要如此大张旗鼓,相反前面提到的wap活动推广则是我们的主要需求。

为了满足这个需求,本文通过提炼JSBridge的核心部分改造成JSService方式供各个不同的产品零修改方式使用。各个不同的产品只需要按照插件的方式提供Native扩展接口,并在各自封装的webContainer中调用JSService对Wap调用进行拦截处理。

具体产品应用

目前该框架同时覆盖了Android和IOS平台,在我司的几个电商类产品中都得到了很好的使用,并趋于稳定。
本文的Demo工程运行效果如下:

1

jsapidemo_ios.png

2

jsapidemo_android.jpg

关于JSAPI的接口封装

JSAPI的封装包括核心JS和对外开放接口JS两个部分。 核心JS部分通过拦截某Q的wap请求页面获取,获取的JS进行编码混淆处理,已经通过调试进行了注释,其主要过程就是对参数和回调进行封装,并构建一个url链接通过创建一个隐藏的iframe进行发送。核心JS代码阅读

对参数和回调进行封装部分的代码如下:

创建iframe发送JSBridge调用请求:

对外开放接口的封装:(使用者只需要对该部分进行接口扩展即可)

核心JS代码调用说明

JSService的具体实现-插件运行机制

JSService部分是基于Phonegap的Cordova引擎的基础上简化而来,其基本原理参照Cordova的引擎原理如图所示:

3

JSBridgeIOS_1.png

一般app中都有自己定制的Webcontainer,为了更好的跟已有项目相融合,在Cordova的基础上我们进行了简化,通过JSAPIService服务的方式进行插件扩展开发如图所示:

4

JSBridgeIOS_2.png

本JSBridge是基于Phonegap的Cordova引擎的基础上简化而来, Android平台Webview和JS的交互方式共有三种:

  1. ExposedJsApi:js直接调用java对象的方法;(同步)
  2. 重载chromeClient的prompt 截获方案;(异步)
  3. url截获+webview.loadUrl回调的方案;(异步)

为了和IOS保持一致的JSAPI,只能选用第三套方案;

基于JSService的插件开发、配置和使用

IOS平台

git地址:https://github.com/Lede-Inc/LDJSBridge_IOS.git

在Native部分,定义一个模块插件对应于创建一个插件类, 模块中的每个插件接口对应插件类中某个方法。

集成LDJSBridge_IOS框架之后,只需要继承框架中的插件基类LDJSPlugin,如下所示:

  • 插件接口定义

  • 自定义插件接口实现

  • 在plugin.json文件中对plugin插件的统一配置

  • 在webContainer中对JSService初始化, 当初始化完成之后,向前端页面发送一个ReadyEvent,前端即可开始调用JSAPI接口;

Android平台

git地址:https://github.com/Lede-Inc/LDJSBridge_Android.git

  • 插件接口定义

  • LDJSPlugin 属性方法说明

  • 自定义插件接口实现

  • 在封装的webContainer中注册服务并调用:

结束

第一次写博客,写得糙和不好的地方望见谅,本人将会不断改善和提高自身能力;所以本博客主要提供大概的解决方案,望能够和有需要的人士交流沟通具体实现方式的差异。

1 1 收藏 1 评论

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部