CN116166224A

CN116166224A - 一种基于Cordova开发混合App的方法及系统

Info

Publication number: CN116166224A
Application number: CN202211709494.1A
Authority: CN
Inventors: 张远来; 晏斐; 赵辉; 杨贇
Original assignee: Tellhow Software Co ltd
Current assignee: Tellhow Software Co ltd
Priority date: 2022-12-29
Filing date: 2022-12-29
Publication date: 2023-05-26

Abstract

本发明公开了一种基于Cordova开发混合App的方法及系统，所述方法包括：集成Cordova框架，并对所述Cordova框架的JS环境进行调试；分别与web H5端约定调用方式名称、参数以及回调结果形式；对原生插件进行封装并注册至所述JS环境，以供所述web H5端调用，所述web H5端预留方法供所述移动端调用；分别对所述原生插件和所述web H5端的JS环境进行封装，以将所述原生插件以及Cordova框架进行移植，并通过所述web H5端的JS环境集成对App进行开发。本发明解决了现有技术中App开发效率低的问题。

Description

一种基于Cordova开发混合App的方法及系统

技术领域

本发明涉及软件生成技术领域，特别涉及一种基于Cordova开发混合App的方法及系统。

背景技术

根据工信部电信研究院公布的今年上半年全国手机行业运行状况，期内全国手机市场出货量1.95亿部，其中智能机为822款，占比为39.16％，智能机总体出货量达9485.5万部，占同期手机市场出货量的48.66％。智能终端的快速递增，并以移动终端为载体构建了包括操作系统、应用商店、开发者、应用等在内的完整的移动生态链，促进了终端体验更为丰富和多元化。所有能在电脑上实现的服务都能在移动终端上实现。智能终端已经成为我生活不可或缺的一部分，终端深刻的改变了我们的生活方式、生活习惯。

移动端应用App正向功能增强化、多模化、定制化、平台开放化的方向发展，被广泛应用于各行各业用来实现“互联网+”。随着移动终端的普及和移动互联网的不断发展，App应用的开发需求量越来越大，社交、娱乐、购物、导航以及企业应用越来越多的领域需要移动App的开发。但原生App存在开发周期长、成本高、适配复杂、维护迭代效率低等缺点。

发明内容

有鉴于此，本发明的目的在于提供一种基于Cordova开发混合App的方法及系统，旨在解决现有技术中App开发效率低的问题。

本发明是这样实现的：

一种基于Cordova开发混合App的方法，所述方法包括：

集成Cordova框架，并对所述Cordova框架的JS环境进行调试；

分别与web H5端约定调用方式名称、参数以及回调结果形式；

对原生插件进行封装并注册至所述JS环境，以供所述web H5端调用，所述web H5端预留方法供所述移动端调用；

分别对所述原生插件和所述web H5端的JS环境进行封装，以将所述原生插件以及Cordova框架进行移植，并通过所述web H5端的JS环境集成对App进行开发。

进一步的，上述基于Cordova开发混合App的方法，其中，所述集成Cordova框架，并对所述Cordova框架的JS环境进行调试的步骤包括：

建立基础架构，所述基础框架至少包括icon配置、网络请求工具封装、添加基础公共类以及包名配置。

进一步的，上述基于Cordova开发混合App的方法，其中，所述分别与web H5端约定调用方式名称、参数以及回调结果形式的步骤包括：

在原生插件中引入Cordova框架，通过原生端组成JS方法注册约定与所述web H5端的调用方式名称，通过数据获取解析参数，通过结果回传以Json形式将结果回传。

进一步的，上述基于Cordova开发混合App的方法，其中，所述对原生插件进行封装并注册至所述JS环境，以供所述web H5端调用，所述web H5端预留方法供所述移动端调用的步骤包括：

通过原生层封装插件并注册JS API方法，供所述web H5端调用，所述web H5端通过调用相应的方法从所述移动端获取相应的数据资源。

进一步的，上述基于Cordova开发混合App的方法，其中，所述分别对所述原生插件和所述web H5端的JS环境进行封装，以将所述原生插件以及Cordova框架进行移植，并通过所述web H5端的JS环境集成对App进行开发的步骤包括：

基于原生插件注册的方法列表经过统一封装，以将所述原生插件以及Cordova框架移植到多个App内。

进一步的，上述基于Cordova开发混合App的方法，其中，所述方法还包括：

控制所述web H5封装出一套JS脚手架，所述web H5端中的第三方应用可通过引入封装好的JS环境集成到对应的多个App中。

通过原生端调用JS方法调用web H5预留的方法，可主动的将相应的数据资源传递给web H5端，web H5端可将处理的结果通过请求结果反馈给移动端。

本发明的另一个目的在于提供一种基于Cordova开发混合App的系统，所述系统包括：

集成模块，用于集成Cordova框架，并对所述Cordova框架的JS环境进行调试；

约定模块，用于分别与web H5端约定调用方式名称、参数以及回调结果形式；

封装模块，用于对原生插件进行封装并注册至所述JS环境，以供所述web H5端调用，所述web H5端预留方法供所述移动端调用；

开发模块，用于分别对所述原生插件和所述web H5端的JS环境进行封装，以将所述原生插件以及Cordova框架进行移植，并通过所述web H5端的JS环境集成对App进行开发。

本发明的另一个目的在于提供一种可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上述任意一项所述的方法的步骤。

本发明的另一个目的在于提供一种电子设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述任一所述的方法的步骤。

本发明通过集成Cordova框架，并对Cordova框架的JS环境进行调试；分别与webH5端约定调用方式名称、参数以及回调结果形式；对原生插件进行封装并注册至JS环境，以供web H5端调用，web H5端预留方法供移动端调用；分别对原生插件和web H5端的JS环境进行封装，以将原生插件以及Cordova框架进行移植，并通过web H5端的JS环境集成对App进行开发。实现web应用和安卓、iOS两端的深度交互，兼具“NativeApp”良好用户交互体验的优势”和“WebApp跨平台开发的优势”，可通过web H5功能调用相应的Native方法，进而调用硬件设备，也可实现安卓和iOS端调用web H5功能方法，满足不同的开发需求，快速高效的开发功能的同时也可快速更新上线发版，解决了现有技术中的App开发效率低的问题。

附图说明

图1为本发明第一实施例中基于Cordova开发混合App的方法的流程图；

图2为本发明第二实施例中基于Cordova开发混合App的系统的结构框图。

如下具体实施方式将结合上述附图进一步说明本发明。

具体实施方式

为了便于理解本发明，下面将参照相关附图对本发明进行更全面的描述。附图中给出了本发明的若干实施例。但是，本发明可以以许多不同的形式来实现，并不限于本文所描述的实施例。相反地，提供这些实施例的目的是使对本发明的公开内容更加透彻全面。

需要说明的是，当元件被称为“固设于”另一个元件，它可以直接在另一个元件上或者也可以存在居中的元件。当一个元件被认为是“连接”另一个元件，它可以是直接连接到另一个元件或者可能同时存在居中元件。本文所使用的术语“垂直的”、“水平的”、“左”、“右”以及类似的表述只是为了说明的目的。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。本文所使用的术语“及/或”包括一个或多个相关的所列类型的任意的和所有的组合。

本发明提出一种基于Cordova开发混合App的方法，具体的，移动端通过集成Cordova框架，实现原生端的App与web H5互相调用，通过数据进行参数传递及通过结果回传进行结果的回调，使web H5嵌入到原生端App，并进行相应的交互处理，从而实现App的高效开发。

以下将结合具体实施例和附图来详细说明如何实现App的高效开发。

实施例一

请参阅图1，所示为本发明第一实施例中的基于Cordova开发混合App的方法，所述方法包括步骤S10～S12。

步骤S10，集成Cordova框架，并对所述Cordova框架的环境进行调试。

具体的，为了实现在移动端上进行App的自行开发，需要移动端建立基础架构，其中，基础框架采用Cordova框架，该基础框架至少包括icon配置、网络请求工具封装、添加基础公共类、包名配置等，移动端包括但不限于手机、平板以及智慧手表等。

步骤S11，分别与web H5端约定调用方法名称、传入参数以及回调结果形式。

其中，移动端在原生插件中引入Cordova框架，通过原生端注册JS方法注册约定的方法名称，通过数据获取解析参数，通过结果回传以Json形式将结果回传，其中传参数据模型为：{data:“key”}。

步骤S12，对原生插件进行封装并注册至所述JS环境，以供所述web H5端调用，所述web H5端预留方法供所述移动端调用。

其中，移动端通过原生端注册JS API方法，预留给web H5调用，web H5通过调用相应的方法从移动端获取相应的数据资源。移动端通过原生端调用JS方法调用web H5预留的方法，可主动的将相应的数据资源传递给web H5端，web H5端可将处理的结果通过请求结果反馈给移动端。

步骤S13，分别对所述原生插件和所述web H5端的JS环境进行封装，以将所述原生插件以及Cordova框架进行移植，并通过所述web H5端的JS环境集成对App进行开发。

具体的，基于原生组件注册的方法列表经过统一封装，可将原生组件以及Cordova框架移植到多个App内使用。web H5封装出一套JS环境，第三方web H5应用可通过引入封装好的JS环境集成到对应的多个App中，web H5端调用使用方法。该过程全局引用Cordova，var channel＝require('Cordova/channel')；var platform＝require('Cordova/platform')；在需要获取原生信息时调用j s封装的方法(方法名跟原生保持一致如callbackFromNative:function(callbackId,isSuccess,status,args,keepCallback)即原生返回的数据。

综上，本发明上述实施例中的基于Cordova开发混合App的方法，通过集成Cordova框架，并对Cordova框架的JS环境进行调试；分别与web H5端约定调用方式名称、参数以及回调结果形式；对原生插件进行封装并注册至JS环境，以供web H5端调用，web H5端预留方法供移动端调用；分别对原生插件和web H5端的JS环境进行封装，以将原生插件以及Cordova框架进行移植，并通过web H5端的JS环境集成对App进行开发。实现web应用和安卓、iOS两端的深度交互，兼具“NativeApp”良好用户交互体验的优势”和“WebApp跨平台开发的优势”，可通过web H5功能调用相应的Native方法，进而调用硬件设备，也可实现安卓和iOS端调用web H5功能方法，满足不同的开发需求，快速高效的开发功能的同时也可快速更新上线发版，解决了现有技术中的App开发效率低的问题。

实施例二

请参阅图2，所示为本发明第二实施例中提出的基于Cordova开发混合App的系统，所述系统包括：

集成模块100，用于集成Cordova框架，并对所述Cordova框架的JS环境进行调试；

约定模块200，用于分别与web H5端约定调用方式名称、参数以及回调结果形式；

封装模块300，用于对原生插件进行封装并注册至所述JS环境，以供所述web H5端调用，所述web H5端预留方法供所述移动端调用；

开发模块400，用于分别对所述原生插件和所述web H5端的JS环境进行封装，以将所述原生插件以及Cordova框架进行移植，并通过所述web H5端的JS环境集成对App进行开发。

进一步的，上述基于Cordova开发混合App的系统，其中，所述集成模块具体用于：

进一步的，上述基于Cordova开发混合App的系统，其中，所述约定模块具体用于：

进一步的，上述基于Cordova开发混合App的系统，其中，所述封装模块具体用于：

进一步的，上述基于Cordova开发混合App的系统，其中，所述开发模块包括：

移植单元，用于基于原生插件注册的方法列表经过统一封装，以将所述原生插件以及Cordova框架移植到多个App内。

进一步的，上述基于Cordova开发混合App的系统，其中，所述开发模块还包括：

集成单元，用于控制所述web H5封装出一套JS脚手架，所述web H5端中的第三方应用可通过引入封装好的JS环境集成到对应的多个App中。

进一步的，上述基于Cordova开发混合App的系统，其中，所述系统还包括：

传递模块，用于通过原生端调用JS方法调用web H5预留的方法，可主动的将相应的数据资源传递给web H5端，web H5端可将处理的结果通过请求结果反馈给移动端。

实施例三

本发明另一方面还提供一种可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现上述实施例一中所述的方法的步骤。

实施例四

本发明另一方面还提供一种电子设备，所述电子设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述实施例一中所述的方法的步骤。

以上各个实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

本领域技术人员可以理解，在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，“计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。

计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或它们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims

1.一种基于Cordova开发混合App的方法，其特征在于，应用于移动端，所述方法包括：

集成Cordova框架，并对所述Cordova框架的JS环境进行调试；

分别与web H5端约定调用方式名称、参数以及回调结果形式；

2.根据权利要求1所述的基于Cordova开发混合App的方法，其特征在于，所述集成Cordova框架，并对所述Cordova框架的JS环境进行调试的步骤包括：

3.根据权利要求2所述的基于Cordova开发混合App的方法，其特征在于，所述分别与web H5端约定调用方式名称、参数以及回调结果形式的步骤包括：

4.根据权利要求1所述的基于Cordova开发混合App的方法，其特征在于，所述对原生插件进行封装并注册至所述JS环境，以供所述web H5端调用，所述web H5端预留方法供所述移动端调用的步骤包括：

5.根据权利要求1所述的基于Cordova开发混合App的方法，其特征在于，所述分别对所述原生插件和所述web H5端的JS环境进行封装，以将所述原生插件以及Cordova框架进行移植，并通过所述web H5端的JS环境集成对App进行开发的步骤包括：

6.根据权利要求5所述的基于Cordova开发混合App的方法，其特征在于，所述方法还包括：

7.根据权利要求1中所述的基于Cordova开发混合App的方法，其特征在于，所述方法还包括：

8.一种基于Cordova开发混合App的系统，其特征在于，所述系统包括：

9.一种可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1至7中任意一项所述的方法的步骤。

10.一种电子设备，其特征在于，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如权利要求1至7任一所述的方法的步骤。