本发明专利技术涉及移动端软件开发技术领域，更具体的说，涉及一种面向移动端混合开发的前端优化方法及装置。本发明专利技术提供的面向移动端混合开发的前端优化方法，移动端通过混合容器交互统一及提速组件，实现原生端与H5端之间的通信交互：所述混合容器交互统一及提速组件，设置有消息监听队列池，通过消息监听队列池，对交互参数和交互处理数据进行传递以及回调，使H5端与原生端实现统一交互处理；所述消息监听对列池包括交互数据信息、消息id、回调方法函数。本发明专利技术采用混合开发框架进行移动端开发APP开发，使H5端与原生端实现统一交互处理，交互方式效率更高，维护性更好，同时实现访问网页的提速，极大的提高开发效率，降低开发成本。降低开发成本。降低开发成本。
【技术实现步骤摘要】
一种面向移动端混合开发的前端优化方法及装置
[0001]本专利技术涉及移动端软件开发
，更具体的说，涉及一种面向移动端混合开发的前端优化方法及装置。
技术介绍
[0002]随着移动互联网和智能终端的飞速发展，移动终端逐渐成为人们生活中不可或缺的一部分。随之而来的，各种应用于移动终端上的APP(Application，应用程序)也大量出现。
[0003]随着业务需求更新，在企业应用开发中App为适应业务需要进行快速迭代。现有的APP开发技术包括以下方式：原生App开发、网页App开发以及混合型App(Hybrid App)开发。
[0004]混合型App开发，即跨平台的混合开发，比如同时支持iOS和安卓两大平台的混合开发，体验感比较好，而且可以跨平台，维护起来不用修改多个端，APP开发成本相对较低，时间成本也少。
[0005]现有混合型App开发技术，采用H5与原生Native的交互方式，使用H5实现变化频繁的业务。H5即HTML5，是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
[0006]然而H5无法直接获取App原生信息，需使用App中WebView的JS函数注入方式供H5调用，达到混合型App开发中的信息交互。由于信息传递都是单向传递且不支持数据返回，H5和原生Native一次交互，需定义两次才能完成，这样交互方式过于繁琐，效率不高。
[0007]同时，现有混合型App开发技术，H5需分别指定每个操作系统平台的交互方式，这也导致了更新流程较慢，维护较为不便的问题。
技术实现思路
[0008]本专利技术的目的是提供一种面向移动端混合开发的前端优化方法及装置，解决现有技术中混合型APP开发技术中H5和原生Native交互方式的效率低、维护性差的问题。
[0009]本专利技术的目的是提供一种面向移动端混合开发的前端优化方法及装置，解决现有技术中混合型APP开发技术中访问网页的加载速度慢的问题。
[0010]为了实现上述目的，本专利技术提供了一种面向移动端混合开发的前端优化方法，移动端通过混合容器交互统一及提速组件，实现原生端与H5端之间的通信交互：
[0011]所述混合容器交互统一及提速组件，设置有消息监听队列池，通过消息监听队列池，对交互参数和交互处理数据进行传递以及回调，使H5端与原生端实现统一交互处理；
[0012]所述消息监听对列池包括交互数据信息、消息id、回调方法函数。
[0013]在一实施例中，所述混合容器交互统一及提速组件包括H5引擎层和原生引擎层，
[0014]所述H5引擎层分别与视图层、原生引擎层进行通信交互；
[0015]所述原生引擎层分别与H5引擎层、操作系统进行通信交互。
[0016]在一实施例中，所述H5引擎层包括H5软件开发工具包；
[0017]所述视图层包括前端框架、H5页面和静态网页；
[0018]通过H5软件开发工具包，为H5页面提供接入接口，将H5页面的异步处理机制，通过Promise形式封装成同步调用；
[0019]H5引擎层接收原生引擎层发送的消息并统一进行处理。
[0020]在一实施例中，所述原生引擎层包括不同操作系统类型的应用软件开发工具包；
[0021]通过应用软件开发工具包，为不同操作系统类型的应用软件提供接收统一格式消息的接入接口。
[0022]在一实施例中，所述原生引擎层，内置交互处理池；
[0023]通过交互处理池进行交互处理并将处理结果封装成统一格式消息，发送至H5引擎层。
[0024]在一实施例中，所述原生引擎层，通过交互处理池，进行预置的交互处理；
[0025]所述原生引擎层，通过交互处理池，进行自定义的交互处理。
[0026]在一实施例中，所述H5页面，通过H5引擎层在消息监听池内注册对原生引擎层的监听；
[0027]所述H5页面，通过H5引擎层获取H5软件开发工具包实例，调用H5软件开发工具包的请求交互处理指令，向原生引擎层传递发送交互类型和交互参数。
[0028]在一实施例中，通过H5软件开发工具包创建Promise对象，生成回调消息id；
[0029]将Promise对象的回调方法函数及回调消息id放入消息监听对列池中，并将交互数据通过底层消息发送方式发送给原生引擎层；
[0030]原生引擎层，接收交互数据并进行处理，将处理结果和返回消息id发送至H5软件开发工具包；
[0031]所述H5页面，通过返回消息id在消息监听对列池中查找对应Promise对象的回调方法函数。
[0032]在一实施例中，应用软件开发工具包设置加载拦截器，通过加载拦截器实现静态资源的获取，进一步包括以下步骤：
[0033]在原生引擎层通过Webview访问网站时，所述加载拦截器，通过缓存策略判断是否从缓存中获取资源或写入资源；
[0034]如果判断为可以从缓存中获取资源或写入资源，则通过加载拦截器对访问网站进行过滤，获得静态资源。
[0035]在一实施例中，所述缓存策略，进一步包括白名单、时间、缓存资源大小和网站最后修改标记。
[0036]在一实施例中，采用三级缓存加载方案，对资源进行加载，同时写入缓存并显示；
[0037]所述三级缓存加载方案，包括内存加载、磁盘加载和网络加载。
[0038]在一实施例中，所述操作系统，进一步包括iOS、Android、RN和Flutter。
[0039]为了实现上述目的，本专利技术提供了一种面向移动端混合开发的前端优化装置，包括∶至少一个存储器和至少一个处理器；
[0040]所述至少一个存储器，用于存储机器可读程序；
[0041]所述至少一个处理器，用于调用所述机器可读程序，执行如上述任一所述的方法。
[0042]为了实现上述目的，本专利技术提供了一种计算机可读介质，其特征在于，所述计算机
可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行如上述任一所述的方法。
[0043]本专利技术提供的一种面向移动端混合开发的前端优化方法及装置，采用混合开发框架进行移动端开发APP开发，通过消息监听队列池对交互参数和交互处理数据进行传递以及回调，使H5端与原生端实现统一交互处理，交互方式效率更高，维护性更好，同时实现访问网页的提速，极大的提高开发效率，降低开发成本。
附图说明
[0044]本专利技术上述的以及其他的特征、性质和优势将通过下面结合附图和实施例的描述而变的更加明显，在附图中相同的附图标记始终表示相同的特征，其中：
[0045]图1揭示了根据本专利技术一实施例的面向移动端混合开发的前端优化框架的架构图；
[0046]图2揭示了根据本专利技术一实施例的H5与原生端统一交互的流程图；
[0047]图3揭示了根据本专利技术本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种面向移动端混合开发的前端优化方法，其特征在于，移动端通过混合容器交互统一及提速组件，实现原生端与H5端之间的通信交互：所述混合容器交互统一及提速组件，设置有消息监听队列池，通过消息监听队列池，对交互参数和交互处理数据进行传递以及回调，使H5端与原生端实现统一交互处理；所述消息监听对列池包括交互数据信息、消息id、回调方法函数。2.根据权利要求1所述的面向移动端混合开发的前端优化方法，其特征在于，所述混合容器交互统一及提速组件包括H5引擎层和原生引擎层，所述H5引擎层分别与视图层、原生引擎层进行通信交互；所述原生引擎层分别与H5引擎层、操作系统进行通信交互。3.根据权利要求2所述的面向移动端混合开发的前端优化方法，其特征在于，所述H5引擎层包括H5软件开发工具包；所述视图层包括前端框架、H5页面和静态网页；通过H5软件开发工具包，为H5页面提供接入接口，将H5页面的异步处理机制，通过Promise形式封装成同步调用；H5引擎层接收原生引擎层发送的消息并统一进行处理。4.根据权利要求1所述的面向移动端混合开发的前端优化方法，其特征在于，所述原生引擎层包括不同操作系统类型的应用软件开发工具包；通过应用软件开发工具包，为不同操作系统类型的应用软件提供接收统一格式消息的接入接口。5.根据权利要求1所述的面向移动端混合开发的前端优化方法，其特征在于，所述原生引擎层，内置交互处理池；通过交互处理池进行交互处理并将处理结果封装成统一格式消息，发送至H5引擎层。6.根据权利要求5所述的面向移动端混合开发的前端优化方法，其特征在于，所述原生引擎层，通过交互处理池，进行预置的交互处理；所述原生引擎层，通过交互处理池，进行自定义的交互处理。7.根据权利要求3所述的面向移动端混合开发的前端优化方法，其特征在于，所述H5页面，通过H5引擎层在消息监听池内注册对原生引擎层的监听；所述H5页面，通过H5引擎层获取H5软件开发工具包实例，调用H5软件开发工具包的请求交互处理指令，向原生引...
【专利技术属性】
技术研发人员：周晔，穆海洁，梁星元，杨仑，曾卫珍，仝彦彦，
申请(专利权)人：上海汇付支付有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。