一种基于HTML5的三层式混合开发系统及其开发方法技术方案

本发明专利技术涉及一种基于HTML5的三层式混合开发系统及其开发方法，在HTML5编译层和原生层间设置桥接层，使系统不仅可以在HTML5编译层开发，也可以在原生层开发，还可以交互，结合原生开发和H5应用开发的优点取长补短。本发明专利技术以中间处理层处理H5和原生之间的通讯，H5页面在Android和iOS都可进行良好的交互，解除H5页面不能访问一些系统API的限制，Android和iOS系统通过一套H5代码实现功能开发，大大减少开发人员开发新功能的时间、减少App端发布次数和耗费时间，避免频繁更新App对用户带来的不良影响；结合模块化开发，实现用户无感知更新App内模块内容，给用户带来更好的使用体验。给用户带来更好的使用体验。给用户带来更好的使用体验。

【技术实现步骤摘要】
一种基于HTML5的三层式混合开发系统及其开发方法


[0001]本专利技术涉及电数字数据处理的
，特别涉及一种基于HTML5的三层式混合开发系统及其开发方法。

技术介绍

[0002]HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
[0003]现在的App端开发，一种是原生应用开发，就是在Android、iOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发，另一种即是采用H5应用开发；然而，前者的可移植性比较差，特别是对于同一功能模块的的原生App来说，Android和iOS都要各自开发，同样的逻辑、界面要编写两套，十分繁琐、工作效率低下，并且iOS的App上架App Store的审核周期较长、限制较多，也拖延了应用发布的计划；而后者虽也是利用Web技术进行的App开发，但是基于iOS和Android系统层面的安全性考虑，H5移动应用不能直接进行设备硬件的访问以及离线存储，所以在体验和性能上具有很大的局限性。

技术实现思路

[0004]本专利技术解决了现有技术中存在的问题，提供了一种优化的基于HTML5的三层式混合开发系统及其开发方法。
[0005]本专利技术所采用的技术方案是，一种基于HTML5的三层式混合开发系统，所述系统包括：一HTML5编译层，用于利用Web技术进行App开发；一原生层，为移动平台开发层；一桥接层，用于在原生层和HTML5编译层之间进行信息桥接。
[0006]优选地，所述原生层包括Android和iOS的编译层，所述编译层以Objective
‑
C和Java的WebView组件进行编译。
[0007]优选地，所述桥接层配合设置定义模块，用于定义H5端和原生层的交互函数，以交互函数进行入参和出参。
[0008]一种所述的基于HTML5的三层式混合开发系统的开发方法，所述方法包括HTML5编译层开发方法和原生层开发方法。
[0009]优选地，所述HTML5编译层开发方法包括以下步骤：步骤a.1：初始化桥接层，注册交互函数；步骤a.2：在HTML5编译层监听原生层信息，若收到原生层的消息，则调用交互函数，进行下一步，否则，在HTML5编译层正常编译，重复步骤a.2；步骤a.3：处理交互。
[0010]优选地，所述原生层的消息通过安卓控件和/或iOS控件实现与HTML5编译层的交互。
[0011]优选地，所述原生层开发方法包括以下步骤：步骤b.1：初始化桥接层，注册交互函数；步骤b.2：在原生层监听HTML5编译层信息，在需要使用交互函数的位置调用交互函数，进行下一步，否则，在原生层正常编译，重复步骤b.2；步骤b.3：原生层处理交互。
[0012]优选地，所述开发方法包括预加载逻辑。
[0013]优选地，所述预加载逻辑包括在HTML5编译层载入内容推送模块，缓存首屏数据，使用终端应用层原生传输通道请求页面主资源，在初始化的同时并行请求首屏数据；所述首屏数据包括预设的若干分块数据层，逐块加载。
[0014]优选地，所述预加载逻辑还包括以下步骤：步骤c.1：在编译中对每个页面分配关联页面；步骤c.2：在用户点取当前页面后，预加载关联页面；步骤c.3：在用户访问下一页面后，保留预加载的关联页面中下一页面的关联页面，释放其余已预加载的关联页面中的无关页面，并预加载与下一页面有关的其他关联页面；步骤c.4：以下一页面为当前页面，返回步骤c.3。
[0015]本专利技术涉及一种优化的基于HTML5的三层式混合开发系统及其开发方法，通过在利用Web技术进行App开发的HTML5编译层和作为移动平台开发层的原生层间设置桥接层，用于在原生层和HTML5编译层之间进行信息桥接，使得系统不仅可以在HTML5编译层开发，也可以在原生层开发，还可以交互，结合原生开发和H5应用开发的优点，取长补短。
[0016]本专利技术构建了中间处理层，处理H5和原生之间的通讯，Android和iOS均适用，可使H5页面在Android和iOS都可进行良好的交互，解除H5页面不能访问一些系统API的限制，这样Android和iOS系统，都可以通过一套H5代码实现功能开发，大大的减少了开发人员开发新功能的时间，大大减少App端发布次数和耗费时间，也避免频繁更新App对用户带来的不良影响；结合模块化开发，可以实现用户无感知更新App内模块内容，给用户带来更好的使用体验。
附图说明
[0017]图1为本专利技术的系统结构示意图，其中，箭头所示为信息交互的方向；图2为本专利技术的HTML5编译层开发方法流程图；图3为本专利技术的原生层开发方法流程图。
具体实施方式
[0018]下面结合实施例对本专利技术做进一步的详细描述，但本专利技术的保护范围并不限于此。
[0019]本专利技术涉及一种基于HTML5的三层式混合开发系统，所述系统包括：一HTML5编译层，用于利用Web技术进行App开发；一原生层，为移动平台开发层；所述原生层包括Android和iOS的编译层，所述编译层以Objective
‑
C和Java的WebView组件进行编译。
[0020]一桥接层，用于在原生层和HTML5编译层之间进行信息桥接；所述桥接层配合设置定义模块，用于定义H5端和原生层的交互函数，以交互函数进行入参和出参。
[0021]本专利技术中，利用JavaScript与Java和Objective
‑
C之间的通讯，实现H5页面调用原生的API，从而实现H5和原生的交互，实现混合开发；系统整体包括原生层、JS桥接层、fusion
‑
tools工具层三层，JS桥接层是WebViewJavascriptBridge，用于在原生层Objective
‑
C和Java的WebView组件（WKWebView、UIWebView和WebView）与H5之间发送消息、作为桥接，fusion
‑
tools是工具层，用于定义H5端和原生层交互函数，入参和出参。
[0022]本专利技术中，原生代码注入WebViewJavascriptBridge 库后，在所使用的WebView页面初始化Bridge对象，然后注册fusion
‑
tool里面的函数，监听JavaScript和原生间的通讯，从而实现 Native与JS的交互，通过这个桥，一些H5无法直接调用的API，经由原生层交互，从而达到调用效果。
[0023]本专利技术还涉及一种所述的基于HTML5的三层式混合开发系统的开发方法，所述方法包括HTML5编译层开发方法和原生层开发方法。
[0024]所述HTML5编译层开发方法包括以下步骤：步骤a.1：初始化桥接层，注册交互函数；步骤a.2：在HTML5编译层监听原生层信息，若收到原生层的消息，则调用交互函数，进行下一步，否则，在HTM本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于HTML5的三层式混合开发系统，其特征在于：所述系统包括：一HTML5编译层，用于利用Web技术进行App开发；一原生层，为移动平台开发层；一桥接层，用于在原生层和HTML5编译层之间进行信息桥接。2.根据权利要求1所述的一种基于HTML5的三层式混合开发系统，其特征在于：所述原生层包括Android和iOS的编译层，所述编译层以Objective
‑
C和Java的WebView组件进行编译。3.根据权利要求1所述的一种基于HTML5的三层式混合开发系统，其特征在于：所述桥接层配合设置定义模块，用于定义H5端和原生层的交互函数，以交互函数进行入参和出参。4.一种权利要求1~3之一所述的基于HTML5的三层式混合开发系统的开发方法，其特征在于：所述方法包括HTML5编译层开发方法和原生层开发方法。5.根据权利要求4所述的一种基于HTML5的三层式混合开发系统的开发方法，其特征在于：所述HTML5编译层开发方法包括以下步骤：步骤a.1：初始化桥接层，注册交互函数；步骤a.2：在HTML5编译层监听原生层信息，若收到原生层的消息，则调用交互函数，进行下一步，否则，在HTML5编译层正常编译，重复步骤a.2；步骤a.3：处理交互。6.根据权利要求5所述的一种基于HTML5的三层式混合开发系统的开发方法，其特征在于：所述原生层的消息通过安卓控...

【专利技术属性】
技术研发人员：吴志华，陆昕，鲍碧波，
申请(专利权)人：绿漫科技有限公司，
类型：发明
国别省市：