CN108762805A - 一种基于Cordova和Typescript的Hybrid开发框架及框架设计方法 - Google Patents

Abstract

本发明涉及一种基于Cordova和Typescript的Hybrid开发框架及框架设计方法，所述框架包括基础层、插件层、配置层、业务层以及扩展层，Cordova原生框架运用打包命令将前端生成的代码和Cordova原生文件打包，生成适用于移动终端的安装文件，引用Typescript编程语言，完成Webpack打包工具的配置、Javascript脚本文件的配置、调用Cli命令行界面进行调试，构建Hybrid框架，使得Hybrid框架的开发更快捷，更灵活，更健壮，更方便调试。

Description

一种基于Cordova和Typescript的Hybrid开发框架及框架设 计方法

技术领域

本发明涉及计算机技术领域，具体涉及一种基于Cordova和Typescript的Hybrid开发框架及框架设计方法。

背景技术

目前，前端技术迅猛发展，前端技术不仅仅被用来实现网页的开发，也被用来开发客户端程序，和客户端技术相比，前端技术来开发客户端程序有一次开发多处应用的特点，还可以方便的实现热更新，更适合于快速开发实现以及迭代功能。

流行的Hybrid开发框架主要有React native和Lonic。React native需要涉及到一些客户端开发技术，比较复杂。Lonic基于Cordova，开发方便快捷，但是不稳定，其提供的UIComponent经常会有Bug，所使用的Angular比较重，适用于开发复杂的系统，不适合于客户端程序员协作开发，同时学习曲线陡峭，不适合快速上手。

发明内容

鉴于现有技术存在的问题，本发明的目的是提供一种基于Cordova和Typescript的Hybrid开发框架及框架设计方法，利用Webpack打包前端代码，通过Cordova打包成客户端代码，并引入Typescript增强健壮性，增加日志插件，Http插件，模拟数据插件，供使用者挑选。提供了基础的功能，同时并不限制视图层技术。

为了实现上述目的，本发明采用的技术方案为一种基于Cordova和Typescript的Hybrid开发框架，所述框架包括基础层、插件层、配置层、业务层以及扩展层；

所述基础层为Cordova原生框架，用于将前端生成的代码和Cordova原生文件打包，生成适用于移动终端的安装文件；

所述插件层用于为所述Cordova原生框架提供扩展功能；

所述配置层用于进行Webpack打包工具的配置和Javascript脚本文件的配置，并调用Cli命令行界面进行调试，构建Hybrid框架；

所述业务层用于所述Hybrid框架提供可视化的开发界面；

所述扩展层用于通过Npm包管理工具下载插件为所述Hybrid框架提供扩展功能。

在上述技术方案中，所述基础层中Cordova原生框架包括原生的Webview网页视图以及交互功能，所述交互功能是与Javascript脚本文件的交互的功能。

在上述技术方案中，所述配置层Javascript脚本文件包括启动Express服务器的文件，Webpack配置文件用于打包文件，。

在上述技术方案中，所述扩展层中，所述扩展功能包括日志系统以及模拟数据。

本发明还公开一种基于Cordova和Typescript的Hybrid开发框架的设计方法，所述方法包括以下步骤：

S1、Cordova原生框架调用打包命令将前端生成的代码和Cordova原生文件打包，生成适用于移动终端的安装文件；

S2、在步骤S1中的Cordova原生框架中引入插件提供扩展功能；

S3、引用Typescript编程语言，完成Webpack打包工具的配置、Javascript脚本文件的配置、调用Cli命令行界面进行调试，构建Hybrid框架；

S4、开发者在所述Hybrid框架提供的可视化开发界面中完成开发；

S5、通过Npm包管理工具下载插件为所述的Hybrid框架提供扩展功能。

在上述技术方案中，所述步骤S1中Cordova原生框架包括原生的Webview网页视图以及交互功能，所述交互功能是与Javascript脚本文件的交互的功能。

在上述技术方案中，所述步骤S3中Javascript脚本文件包括启动Express服务器的文件，Webpack配置文件用于打包文件。

在上述技术方案中，所述步骤S5中所述扩展的功能包括日志系统以及模拟数据。

本发明还公开一种基于Cordova和Typescript的Hybrid开发框架，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述基于Cordova和Typescript的Hybrid开发框架方法的步骤。

本发明还公开一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求上述任一项所述基于Cordova和Typescript的Hybrid开发框架方法的步骤。

本发明一种基于Cordova和Typescript的Hybrid开发框架及框架设计方法，具有以下有益效果：本发明利用Webpack打包前端代码，通过Cordova打包成客户端代码，并引入Typescript增强健壮性，增加日志插件，Http插件，模拟数据插件，供使用者挑选。提供了基础的功能，同时并不限制视图层技术，使得Hybrid开发更方便，灵活。

附图说明

图1为本发明实施例一提供一种基于Cordova和Type script的Hybrid开发框架示意图；

图2为本发明实施例二提供一种基于Cordova和Type script的Hybrid开发框架提供开发者完成开发实现流程示意图；

图3为本发明实施例三提供的一种基于Cordova和Typ escript的Hybrid开发框架设计方法流程示意图；

图4为本发明实施例四提供的一种基于Cordova和Typ escript的Hybrid开发框架的电子设备结构示意图。

具体实施方式

本发明提供一种基于Cordova和Typescript的Hybrid开发框架及框架设计方法，使得Hybrid开发更方便，灵活。

为使得本发明的发明目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本发明一部分实施例，而非全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

本发明如图1所示实施例一提供一种基于Cordova和Typescript的Hybrid开发框架，所述框架包括基础层11、插件层12、配置层13、业务层14以及扩展层15；

所述基础层11为Cordova原生框架，用于将前端生成的代码和Cordova原生文件打包，生成适用于移动终端的安装文件；

所述Cordova是Hybrid app的框架，是一个开源的移动开发框架。允许用标准的Web技术和JavaScript做跨平台开发。应用在每个平台的具体执行被封装，并依靠符合标准的Api绑定去访问每个设备的功能。

所述JavaScript为脚本语言，是一种动态类型、弱类型、基于原型的语言。

所述的移动终端可选为使用安卓系统或Ios系统的移动设备。

可选的，所述基础层中提供的原生网页视图为WebView，可以给应用提供完整用户访问界面

可选的，所述基础层中，提供的交互功能为Cordova原生框架与所述配置Javascrip脚本文件及Html文件交互。

所述插件层12用于为所述Cordova原生框架提供扩展功能；

可选的，所述插件是Cordova系统的重要组成部分。它提供了Cordova和原生组件相互通信的接口并绑定到了标准的设备Api上，能够通过JavaScript调用原生代码。

所述Api(Application Programming Interface)即应用程序编程接口，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。

所述配置层13用于进行Webpack打包工具的配置和Javascript脚本文件的配置，并调用Cli命令行界面进行调试，构建Hybrid框架；

所述Cli(command-line interface)命令行界面是较为广泛的用户界面，用户通过键盘输入指令，计算机接收到指令后，予以执行，也称之为字符用户界面。

可选的，所述Typescript作为Javascript的超集，提供了类型检查，类，接口，装饰器等非常实用的功能。极大的增加了代码的健壮性，让前端开发更简洁。而Webpack作为前端打包最流行的工具，可以将前端代码打包成简洁，小巧，通用的版本。两者作为框架的基础技术，提供将打包前端代码的工作。对比Ionic(ionic是一个用来开发混合手机应用的，开源的，免费的代码库)隐藏起来的打包配置，本文提供显式的Webpack打包默认配置，不仅方便了开发者开发，也让开发者可以实现自定义的打包步骤。而只使用了Typescript，没有使用Angular，在保证开发健壮性的同时，让开发者可以自由选择合适的前端技术。

可选的，Javascrip脚本文件包括启动Express服务器的文件。

可选的，配置层的配置分为两个部分，一个是进行开发版本的配置，此配置是为了进行热更新，另一个是发布版本配置，此配置是了让文件更小，进行打包压缩。

所述业务层14用于所述Hybrid框架提供可视化的开发界面；

可选的，当开发者开发时，在Src目录下编写前端代码。编译时，会将打包，压缩好的代码放到Cordova的WWW根目录下。开发时，启动Express服务器，方便及时看到效果，以及调试代码。模拟机调试时，启动安卓的模拟器，并同时打开Adb，接收模拟机的Log文件，过滤掉系统Log文件，留下对于我们有用的JavaScript代码的Log文件。打包时调用Cordova的打包命令，将程序打包成安卓或Ios文件。

可选的，所述Adb工具即Android Debug Bridge(安卓调试桥)Tools。它是一个命令行窗口，用于通过电脑端与模拟器或者真实设备交互。

所述扩展层15用于通过Npm包管理工具下载插件为所述Hybrid框架提供扩展功能。

可选的，所述扩展层中，所述扩展功能包括日志系统以及模拟数据。

所述日志系统，Hybrid开发不同于网页开发，由于代码被放在原生组件中，使得调试更困难，Bug更难以定位。这就需要一个合适的日志系统。本发明提供一个日志插件，定义了Verbose，Debug，Info，Error四个级别，可以动态的设置打印日志的等级。

所述模拟机调试，由于安卓机有多种型号，多种版本，利用模拟器可以方便的选择安卓版本和机型，比真机测试更方便。目前Ionic并没有提供日志的功能。本发明提供的日志功能，可以极大提升开发者调试时的效率。

所述配置层中将开发者编写调试后的前端代码通过Webpack打包工具进行打包，将打包后的文件放置于基础层Cordova原生框架根目录文件夹中，随后在基础层Cordova原生框架中的打包命令将存储于文件夹中打包文件的源代码再打包，生成适用于移动终端的安装包。

所述扩展层中使用日志系统时，会需要使用插件层中的console插件，当扩展层中模拟器调试过程中，此插件会将产生的Log日志文件传至显示界面的Shell命令可视化窗口，可供开发者查阅。

如图2所示为本发明提供实施例二基于Cordova使用Typescript的Hybrid的开发框架提供给开发者完成开发的具体实现流程：

步骤21、首先引入Typescript和Webpack，完成默认的打包配置，让开发者可以迅速开始开发；

步骤22、启动Express服务器，在开发时，可及时了解代码更新的反馈；

步骤23、当开发完成以后，需要在启动模拟机，进行模拟测试，可查看模拟机上测试的日志系统。

可选的，使用Express提供一个简单的Web服务器，方便开发者看到开发的页面，Express和Webpack搭配，不仅提供浏览页面的功能，还可以提供热更新服务，让改动及时生效，提高了开发效率。

可选的，模拟机上测试的日志，方便定位问题，本发明提供一个Cli命令行界面，启动安卓模拟器，利用Cordova的日志插件和Adb服务接收日志，并利用Grep命令过滤掉开发者不关心的模拟器系统日志。

可选的，日志级别的动态设置使得开发者可以建立完备的日志系统，在需要时过滤掉不需要的日志，更方便的定位Bug。同时以插件形式存在，使得后期可以扩展，开发者可以根据需要自己开发合适的日志插件，完成自定义的日志功能。

如图3所示为本发明实施例三提供的一种基于Cordova和Typescript的Hybrid开发框架的设计方法，所述方法包括以下步骤：

S1、Cordova原生框架调用打包命令将前端生成的代码和Cordova原生文件打包，生成适用于移动终端的安装文件；

S2、在步骤S1中的Cordova原生框架中引入插件提供扩展功能；

S3、引用Typescript编程语言，完成Webpack打包工具的配置、Javascript脚本文件的配置、调用Cli命令行界面进行调试，构建Hybrid框架；

S4、开发者在所述Hybrid框架提供的可视化开发界面中完成开发；

S5、通过Npm包管理工具下载插件为所述的Hybrid框架提供扩展功能。

可选的，所述步骤S1中Cordova原生框架包括原生的Webview网页视图以及交互功能，所述交互功能是与Javascript脚本文件的交互的功能。

可选的，所述步骤S3中Javascript脚本文件包括启动express服务器的文件，Webpack配置文件用于打包文件。

可选的，所述步骤S5中所述扩展的功能包括日志系统以及模拟数据。

如图4所示为本发明实施例四提供的一种基于Cordova和Typescript的Hybrid开发框架的电子设备结构示意图，所述实施例的电子设备包括：处理器40、存储器41以及存储在所述存储器41中并可在所述处理器40上运行的计算机程序42。所述处理器40执行所述计算机程序42时实现上述各方法实施例中的步骤，所述处理器40执行所述计算机程序42时实现上述装置实施例中各模块的功能。

所述一种基于Cordova和Typescript的Hybrid开发框架的电子设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备，所述一种基于Cordova和Typescript的Hybrid开发框架的电子设备可包括，但不限于，处理器40、存储器41。图4仅仅是对此电子设备的示例，并不构成对此电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，所述一种基于Cordova和Typescript的Hybrid开发框架的电子设备还可以包括输入输出设备43、显示设备44等。

所述处理器40可以是中央处理单元，还可以是其他通用处理器、数字信号处理器、专用集成电路、现成可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器41可以是所述一种基于Cordova和Typescript的Hybrid开发框架的电子设备的内部存储单元、硬盘或内存。所述存储器41也可以是所述电子设备的外部存储设备，或配备的插接式硬盘，智能存储卡，安全数字卡，闪存卡等。

进一步地，所述存储器41还可以既包括所述电子设备的内部存储单元也包括外部存储设备。所述存储器41用于存储所述计算机程序以及所述电子设备所需的其他程序和数据。所述存储器41还可以用于暂时地存储已经输出或者将要输出的数据。

所述的输入输出设备43可用于接收输入的数字或字符信息，具体的，输入输出设备43还可以包括但不限于键盘、鼠标、操作杆等中的一种和多种。

所述的显示设备44可用于显示由用户输入的信息或提供给用户信息以及终端的各种菜单，显示设备44可包括显示面板，可选的，可采用液晶显示器。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各实施例的模块、方法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种基于Cordova和Typescript的Hybrid开发框架，其特征在于，所述框架包括基础层、插件层、配置层、业务层以及扩展层；

所述基础层为Cordova原生框架，用于将前端生成的代码和Cordova原生文件打包，生成适用于移动终端的安装文件；

所述插件层用于为所述Cordova原生框架提供扩展功能；

所述配置层用于进行Webpack打包工具的配置和Javascript脚本文件的配置，并调用Cli命令行界面进行调试，构建Hybrid框架；

所述业务层用于所述Hybrid框架提供可视化的开发界面；

所述扩展层用于通过Npm包管理工具下载插件为所述Hybrid框架提供扩展功能。

2.根据权利要求1所述一种基于Cordova和Typescript的Hybrid开发框架，其特征在于，所述基础层中Cordova原生框架包括原生的Webview网页视图以及交互功能，所述交互功能是与Javascript脚本文件的交互的功能。

3.根据权利要求1所述一种基于Cordova和Typescript的Hybrid开发框架，其特征在于，所述配置层Javascript脚本文件包括启动Express服务器的文件，Webpack配置文件用于打包文件。

4.根据权利要求1所述一种基于Cordova和Typescript的Hybrid开发框架，其特征在于，所述扩展层中，所述扩展功能包括日志系统以及模拟数据。

5.一种基于Cordova和Typescript的Hybrid开发框架的设计方法，其特征在于：所述方法包括以下步骤：

S1、Cordova原生框架调用打包命令将前端生成的代码和Cordova原生文件打包，生成适用于移动终端的安装文件；

S2、在步骤S1中的Cordova原生框架中引入插件提供扩展功能；

S3、引用Typescript编程语言，完成Webpack打包工具的配置、Javascript脚本文件的配置、调用Cli命令行界面进行调试，构建Hybrid框架；

S4、开发者在所述Hybrid框架提供的可视化开发界面中完成开发；

S5、通过Npm包管理工具下载插件为所述的Hybrid框架提供扩展功能。

6.根据权利要求5所述一种基于Cordova和Typescript的Hybrid开发框架的设计方法，其特征在于：所述步骤S1中Cordova原生框架包括原生的Webview网页视图以及交互功能，所述交互功能是与Javascript脚本文件的交互的功能。

7.根据权利要求5所述一种基于Cordova和Typescript的Hybrid开发框架的设计方法，其特征在于：所述步骤S3中Javascript脚本文件包括启动Express服务器的文件，Webpack配置文件用于打包文件。

8.根据权利要求5所述一种基于Cordova和Typescript的Hybrid开发框架的设计方法，其特征在于：所述步骤S5中所述扩展的功能包括日志系统以及模拟数据。

9.一种基于Cordova和Typescript的Hybrid开发框架，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求5至8中任一项所述基于Cordova和Typescript的Hybrid开发框架方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求5至8中任一项所述基于Cordova和Typescript的Hybrid开发框架方法的步骤。