前言 18年元旦三天内和朋友突击了下,勉强是将雏形做出来了,后续的API慢慢完善.(当然了,主力还是那个朋友,本人只是初涉iOS,勉强能看懂,修修改改而已) 大致内容如下: JSBridge核心交互部分 ui.page等部分常用API的实现(其它慢慢完善) 组件(自定义)API拓展的实现 API的权限校验仅预留了一个入口,模拟最简单的实现 其它如离线资源加载更新,底层优化等机制暂时不提供 项目的结构 这个项目中,为了方便,就没有分成多个静态库了(事实上是可以这样做的),而是全部都放在一个项目中…

前言 本文介绍quick hybrid框架的核心JSBridge的实现 由于在最新版本中,已经没有考虑iOS7等低版本,因此在选用方案时没有采用url scheme方式,而是直接基于WKWebView实现 交互原理 具体H5和Native的交互原理可以参考前文的H5和Native交互原理 交互原理图如下: 预计的最终效果 如果一步一步来分析,最后再看效果,可能会很枯燥,甚至还有点化简为繁的样子.(感觉直接看代码应该是最简单的,奈何每次写成文章时都得加一大堆的描述) 因此,先来看看最终完成后应该是…

章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hybrid]JSBridge的实现 [quick hybrid]H5和原生的职责划分 [quick hybrid]API的分类:短期API.长期API [quick hybrid]API规划 [quick hybrid]API多平台支撑的实现 [quick hybrid]组件(自定义)API的实现 […

前言 Hybrid架构的核心就是JSBridge交互,而实现这个交互的前提是弄清楚H5和Native端的交互 本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理 (之前也整理过类似的文章,本系列重新梳理) Native与H5交互的两种方式 原生和前端的交互有两种方式:url scheme以及JavaScriptCore(在Android中是addJavascriptInterface) url scheme适用于所有的系统设备(低版本Android和低版本iOS都…

前言 在JSBridge实现后,前端网页与原生的交互已经通了,接下来就要开始规划API,明确需要提供哪一些功能来供前端调用. 但是在这之前,还有一点重要工作需要做: 明确H5与Native的职责划分,确定哪一些功能可以由H5实现,哪一些功能只能由原生实现 Native与H5职责划分 使用Hybrid模式,用H5开发页面的本质是: 减少工作量(一套代码,多个平台),以及快速的更新迭代(譬如线上更新),而且还需要考虑Native端的高性能以及系统API调用能力(否则直接用纯H5就可以了) 因此在进行…

前言 一切就绪,开始规划API,这里在规划前对API进行了一次分类:短期API.长期API 首先申明下,这个是在实际框架演变过程中自创的一个概念,其它混合框架可能也会有这个概念,但应该是会在原生底层来实现,而不是前端实现.. 而这里由于是前端驱动,所以相比其它混合框架,前端多了一个处理引擎(包括多平台适配,API处理等等) 划分的凭据 根据API回调的实际执行次数来划分,执行一次自动回收的是短期API,可以执行多次的是长期API 譬如,短期回调包括: ui alert,toast等等 page…

前言 虽然说本系列中架构篇是第一章,但实际过程中是在慢慢演化的第二版中才有这个概念, 经过不断的迭代,演化才逐步稳定 明确目标 首先明确需要做成一个什么样的框架? 大致就是: 一套API规范(统一Android与iOS),所有API异步调用(防止阻塞) 提供大部分原生功能的API(包括很多常用的功能给H5使用) 原生需要能调用到H5中注册的方法(用关于原生主动通知) 部分API需要支持H5环境(譬如alert需要在Android.iOS.浏览器中同时运行) API类别需要包括事件监听(如网络变化…

章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hybrid]JSBridge的实现 [quick hybrid]H5和原生的职责划分 [quick hybrid]API的分类:短期API.长期API [quick hybrid]API规划 [quick hybrid]API多平台支撑的实现 [quick hybrid]组件(自定义)API的实现 […

前言 前文中就有提到,Hybrid模式的核心就是在原生,而本文就以此项目的Android部分为例介绍Android部分的实现. 提示,由于各种各样的原因,本项目中的Android容器确保核心交互以及部分重要API实现,关于底层容器优化等机制后续再考虑完善. 大致内容如下: JSBridge核心交互部分 ui.page.navigator等部分常用API的实现 组件(自定义)API拓展的实现 容器h5支撑的部分完善(如支持fileinput文件选择,地理定位等-默认不生效的) API的权限校验仅预…

前言 API实现阶段之JS端的实现,重点描述这个项目的JS端都有些什么内容,是如何实现的. 不同于一般混合框架的只包含JSBridge部分的前端实现,本框架的前端实现包括JSBridge部分.多平台支持,统一预处理等等. 项目的结构 在最初的版本中,其实整个前端库就只有一个文件,里面只规定着如何实现JSBridge和原生交互部分.但是到最新的版本中,由于功能逐步增加,单一文件难以满足要求和维护,因此重构成了一整个项目. 整个项目基于ES6.Airbnb代码规范,使用gulp + rollup构建…