CN107577459B - 一种基于组件化的拖拽式跨平台应用开发系统及方法 - Google Patents

Abstract

本发明公开了一种基于组件化的拖拽式跨平台应用开发系统，其包括有：组件管理模块，包括有多个供用户选择且用于组装成页面的组件；组件拖拽式操作模块，用于执行用户的选择命令和拖拽命令，对已选组件进行页面布局和事件绑定，并生成网页应用配置参数；网页应用生成模块，用于根据所述网页应用配置参数生成网页应用；规则引擎，用于将网页应用配置参数转换为可运行于移动设备上的移动应用配置参数；移动应用生成模块，根据所述移动应用配置参数生成移动应用资源包；移动应用运行模块，用于获取所述移动应用资源包并运行于移动设备。本发明操作简便、可提高开发效率、无需单独对移动应用做生成操作，简化了跨平台应用的生成过程。

Description

一种基于组件化的拖拽式跨平台应用开发系统及方法

技术领域

本发明涉及应用开发系统，尤其涉及一种基于组件化的拖拽式跨平台应用开发系统及方法。

背景技术

随着科技的发展，硬件水平逐渐提高，多种多样的应用软件已然深入了人们的生活。然而，面对众多不同的操作系统，所涉及的开发语言和环境都不相同，所以每种操作系统都需要相应的开发者重新去开发应用，这就导致了人力成本的增加和资源的浪费。而且不同的设备，需要不同的适配方案，大大降低了开发者的开发效率。针对上述问题，专利CN104615462A提出一种跨平台的移动应用生成服务端，能够根据用户的请求，提取请求中的配置信息，获得资源目录，构建应用生成脚本，然后调用相应操作系统底层编译指令生成应用程序安装包。该方法是提高了开发效率，但是应用程序仍然需要开发者按照传统开发模式开发，跟不上需求的变动，而且每当界面或需求有变动，需要重新编译生成安装包，用户需要更新安装包。

现有技术中构建移动应用的解决方案大致有如下几种：

第一种，采用原生编写和构建移动应用。这种方法无疑性能是最好的，但是这种方法所需的成本和所需的时间也是最多的。市面上存在多种终端系统，每一种操作系统所需要的开发环境和开发语言都不相同，这就需要针对每种操作系统都要有熟悉该系统的开发人员去开发和构建应用，成本大大增加。而且移动设备的种类繁多，适配这些设备也是一个重复繁琐的过程。

第二种，采用H5方式构建移动应用。该方法是采用html+css实现响应式的 web页面，然后在移动应用中内嵌了webview去加载这些页面。这种方法实现了跨平台，即编写一次，可以在不同的移动设备上运行，而且也不需要繁琐的适配过程。但是这种方法构建出来的应用，性能和体验确差强人意，响应时间过长，可以感到明显的卡顿。再者，该方法实现的页面不便于调用移动设备的硬件，例如摄像头等，所能实现的功能有限。

第三种，采用跨平台应用开发的平台和框架。该方法较第二种方法性能有所提高，而且有较完善的方式和原生模块通信，调用移动设备硬件，实现更加丰富的功能。开发者只需掌握一种开发语言即可开发出不同操作系统的应用软件，极大的提高了开发效率，减少了人力成本。但是使用这些平台和框架，开发者仍需按照传统的开发模式，根据设计图每个页面逐步的进行开发，这种方式仍然阻碍了效率，而且，一旦产品需求和设计变动，开发就需要按照之前的模式重新来一遍，不利于跟随产品需求的快速变动。其次，如果在一个项目或多个项目中有相同的设计或页面，需要开发者手动把相同的代码复制到相应位置，也增加了重复的工作。最后，开发完成后，仍然需要开发者针对不同的操作系统编译和生成相应的安装包。

第四种，采用拖拽式的跨平台应用开发框架。该方法提供web页面，可以使用拖拽页面的方式组建应用，然后绑定页面所需展示的数据和指定页面之间的跳转关系，最后调用后台编译服务生成移动应用。与以上几种方法比较，该方法操作更加简便，界面之间的跳转不再固定化，由用户来指定，可以创建出更加个性化的应用。该方法生成移动应用有两种方式，第一种方式，开发两套页面，一套网页页面，一套移动应用页面，网页应用和移动应用之间有映射关系，在拖拽网页页面后，会根据映射关系找到对应的移动应用页面。第二种方式，使用H5开发页面，在web页面进行拖拽组装页面，然后移动端只是内嵌了 webview去加载组装好的web页面。这两种方式构建的应用，只能做数据的展示，页面布局较简单，而且并没有事件的响应，缺乏交互性。

实际应用中，网页应用和移动应用有很大的差异：首先，组件的实现方式，网页应用和移动应用所运行的操作系统不同，组件如果需要调用硬件时在实现方式上会有较大的差异。其次，界面布局的不同，网页应用一般运行在电脑上，屏幕较大，所以布局会比较宽，而移动应用运行在移动设备上，屏幕较小，所以网页应用的布局并不适用于移动设备上。再者，网页应用和移动应用的操作方式也不相同，网页应用一般用鼠标拖动和滚动，而移动设备则是用手势操作滑动。操作方式和界面布局的不同也导致事件响应的不同，网页应用的点击事件，在移动应用上换成滑动事件会更加符合操作习惯。由于存在上述差异，致使网页组件不能直接放在移动设备上运行，在web端实现拖拽后，移动端要么使用H5，要么针对移动端再拖拽一次，其过程比较繁琐。

发明内容

本发明要解决的技术问题在于针对现有技术的不足，提供一种基于组件化的拖拽式跨平台应用开发系统及方法，该系统和方法的操作简便、可有效提高开发效率，一次构建后可多处运行，在生成网页应用的同时还生成对应的移动应用，无需再单独对移动应用做生成操作，进而简化了跨平台应用的生成过程。

为解决上述技术问题，本发明采用如下技术方案。

一种基于组件化的拖拽式跨平台应用开发系统，其包括有：一组件管理模块，包括有多个供用户选择且用于组装成页面的组件；一组件拖拽式操作模块，用于执行用户的选择命令和拖拽命令，对已选组件进行页面布局和事件绑定，并生成网页应用配置参数；一网页应用生成模块，用于根据所述网页应用配置参数生成网页应用；一规则引擎，用于将网页应用配置参数转换为可运行于移动设备上的移动应用配置参数；一移动应用生成模块，根据所述移动应用配置参数生成移动应用资源包；一移动应用运行模块，用于获取所述移动应用资源包并运行于移动设备。

优选地，所述组件管理模块包括有组件上传子模块和组件权限管理子模块，所述组件上传子模块用于上传组件资源包，所述组件权限管理子模块用于根据用户信息得出该用户的权限，查询和反馈当前用户能够使用的组件列表，以供选择组件。

优选地，所述组件拖拽式操作模块执行拖拽命令时，根据组件的位置、排序信息和各组件之间的关联关系生成网页应用配置参数。

优选地，所述网页应用生成模块根据网页应用配置参数中组件的位置和排序信息生成相应样式的网页应用，以及根据网页应用配置参数中各组件的关联关系生成组件之间可相互响应方法和事件的网页应用。

优选地，所述系统包括一组件管理模块、一组件拖拽式操作模块、一网页应用生成模块、一规则引擎、一移动应用生成模块及一移动应用运行模块，所述组件管理模块包括有多个供用户选择且用于组装成页面的组件，所述方法包括如下步骤：步骤S1，用户通过浏览器登录应用开发系统，调用组件拖拽式操作模块；步骤S2，用户向组件拖拽式操作模块输入选择命令和拖拽命令，利用所述组件拖拽式操作模块对已选组件进行页面布局和事件绑定，并生成网页应用配置参数，之后判断，若需要生成网页应用，则执行步骤S3，若需要生成移动应用，则执行步骤S5；步骤S3，用户完成配置操作，发起编译网页应用请求，将所述网页应用配置参数发送至网页应用生成模块；步骤S4，所述网页应用生成模块根据编译网页应用请求中的网页应用配置参数生成网页应用，以供用户使用；步骤S5，用户完成配置操作，发起编译移动应用请求，将所述网页应用配置参数发送至规则引擎；步骤S6，所述规则引擎接收到编译移动应用请求中的网页应用配置参数，按照引擎中已配置的转换规则，将网页应用配置参数转换为可运行于移动设备上的移动应用配置参数，转换完成后，将所述移动应用配置参数发送至移动应用生成模块；步骤S7，所述移动应用生成模块根据所述移动应用配置参数生成移动应用资源包；步骤S8，用户利用移动应用运行模块获取所述移动应用资源包并运行于移动设备。

优选地，所述步骤S2中，用户通过浏览器页面拖拽可使用的组件并放置到相应的位置，之后生成包含组件位置、排序信息和各组件之间的关联关系的网页应用配置参数，再发送编译网页应用请求和编译移动应用请求。

优选地，所述步骤S4～步骤S5中，所述网页应用生成模块接收到编译网页应用请求后，从编译网页应用请求中获取网页应用配置参数，根据网页应用配置参数中的组件位置和排序信息在页面中摆放组件，再根据网页应用配置参数中的组件关联参数，绑定组件间的事件方法，绑定完成后，完成网页应用编译。

优选地，所述步骤S6中，规则引擎的转换过程包括：步骤S60，所述规则引擎接收编译移动应用请求，从编译移动应用请求中获取网页应用配置参数；步骤S61，根据规则引擎中预设的网页应用组件和移动应用组件的映射关系，处理网页应用配置参数中的每个组件；步骤S62，根据网页应用组件名称，获取移动应用组件名称；步骤S63，根据网页应用组件的属性、方法、事件，获取移动应用组件的属性、方法、事件，并按照网页应用组件配置的组件关联参数，生成对应的移动应用组件之间的组件关联参数；步骤S64，保存当前组件转换后的移动应用配置参数；步骤S65，循环处理步骤S62～步骤S64，直至每个组件循环处理完成后，转换结束，将转换得到的移动应用配置参数发送至移动应用生成模块。

优选地，所述步骤S7中，所述移动应用生成模块的执行过程包括如下步骤：步骤S70,所述移动应用生成模块接收编译请求，从编译请求中获取移动应用配置信息；步骤S71，所述移动应用生成模块检查是否存在项目编译资源：若没有编译资源，则停止编译，若存在编译资源，则继续执行；步骤S72，根据移动应用配置参数获取当前编译项目的项目名，拷贝当前项目的升级包到指定目录并解压覆盖；步骤S73，根据应用配置信息中页面参数的页面名称，新建页面；步骤S74，根据应用配置信息中页面参数的标题信息，修改生成页面中的标题，并在页面中添加指定的组件；步骤S75，根据应用配置信息中页面参数的组件关联关系，绑定组件间的事件与方法的调用；步骤S76，记录页面需要的组件名称，过滤整个应用中的重复组件；步骤S78，循环执行步骤S73～步骤S76，直至每个页面循环处理完成后，执行步骤S79；步骤S79，根据步骤S76中记录的组件名称，在预设的移动组件仓库中获取指定的组件资源到指定目录并解压；步骤 S80，分析组件资源中的组件属性参数，获取并记录组件运行需要的依赖包，过滤整个应用中所有组件依赖包中的重复依赖包；步骤S81，对于需要依赖图片资源的组件，如果当前组件有依赖资源，则将依赖资源复制编译资源中的指定目录；步骤S82，重复执行步骤S79～步骤S81，直至每个组件循环处理完成后，根据步骤S80中记录的依赖包名称，安装整个应用所需要的依赖包；步骤S81，在应用的全局组件管理文件中声明应用中所有的页面和组件；步骤S82，在编译资源中执行编译命令，编译移动应用；步骤S83，编译完成后，生成编译结果文件可通过互联网访问的URL路径，并将该路径生成二维码，供外部下载使用，结束移动应用编译过程。

优选地，所述步骤S8中，所述移动应用运行模块的执行过程包括：步骤S84，用户使用移动应用，在应用启动时自动发起检查，检查是否存在更新的运行资源包，若存在，则执行步骤S85，若不存在，则执行步骤S87；步骤S85，从服务器下载最新资源包；步骤S86，解压并替换移动本地的资源包；步骤S87，加载本地资源包，之后运行移动应用。

本发明公开的基于组件化的拖拽式跨平台应用开发系统，其基于组件化组装应用页面，用户根据需求拖拽选择组件组建页面，可以快速构建出客制化的页面，同时利用组件事件的绑定，由用户指定事件的响应，使得构建出的应用更具有交互性，此外在规则引擎的作用下，能根据生成的网页应用智能分析并转换为对应的移动应用，整个过程用户只需操作页面上拖拽组件拼装应用页面，由系统生成网页应用，同时在系统后台可自动调用规则引擎做转换，无需单独对每个系统做构建，进而实现了一次构建多处运行，大大提高了操作的便捷性。

附图说明

图1为本发明基于组件化的拖拽式跨平台应用开发系统的组成框图。

图2为组件上传子模块的组成框图。

图3为组件权限管理子模块执行过程的流程图。

图4为组件拖拽式操作模块执行过程的流程图。

图5为网页应用生成模块执行过程的流程图。

图6为规则引擎执行过程的流程图。

图7为移动应用生成模块执行过程的流程图。

图8为移动应用运行模块执行过程的流程图。

具体实施方式

下面结合附图和实施例对本发明作更加详细的描述。

本发明公开了一种基于组件化的拖拽式跨平台应用开发系统，请参照图1，其包括有一组件管理模块、一组件拖拽式操作模块、一网页应用生成模块、一规则引擎、一移动应用生成模块及一移动应用运行模块，其中：

所述组件管理模块包括有多个供用户选择且用于组装成页面的组件；

所述组件拖拽式操作模块用于执行用户的选择命令和拖拽命令，对已选组件进行页面布局和事件绑定，并生成网页应用配置参数；

所述网页应用生成模块用于根据所述网页应用配置参数生成网页应用；

所述规则引擎用于将网页应用配置参数转换为可运行于移动设备上的移动应用配置参数；

所述移动应用生成模块根据所述移动应用配置参数生成移动应用资源包；

所述移动应用运行模块用于获取所述移动应用资源包并运行于移动设备。

上述拖拽式跨平台应用开发系统，其基于组件化组装应用页面，用户根据需求拖拽选择组件组建页面，可以快速构建出客制化的页面，同时利用组件事件的绑定，由用户指定事件的响应，使得构建出的应用更具有交互性，此外在规则引擎的作用下，能根据生成的网页应用智能分析并转换为对应的移动应用，整个过程用户只需操作页面上拖拽组件拼装应用页面，由系统生成网页应用，同时在系统后台可自动调用规则引擎做转换，无需单独对每个系统做构建，进而实现了一次构建多处运行，大大提高了操作的便捷性。

本实施例中，组件拖拽式操作模块在执行拖拽的同时会生成缓存信息，包括组件的位置和排序信息以及组件间的关联关系，操作完后调用接口来保存组件的缓存信息。所述组件管理模块在组件上传之后，保存组件的属性，根据用户权限提供相应组件的下载。所述网页应用生成模块根据保存的应用配置参数，按照参数描述的组件的位置和排序信息，生成指定样式的网页应用；按照参数描述的组件间的关联关系，生成不同组件之间可以互相响应方法和事件的网页应用。所述规则引擎将网页应用和移动应用之间的差异按照一定的规则进行转换，使得网页应用在转换后能生成对应的移动应用。规则引擎根据编辑网页应用保存的配置信息，配置信息包括组件的标识、组件的位置、组件绑定的事件、组件的排列顺序等，按照这些信息转换为适合于运行在移动设备上的应用生成配置信息。

此外，所述移动应用生成模块可实现如下功能：

A、分析：根据规则引擎所述生成的配置信息进行分析提取；

B、智能重组：对分析完成的结果进行智能重组，该步骤可能会对规则引擎中生成的内容进行调整以适用于移动应用；

C、模板填充：将重组的内容填充到预先编制的模板中；

D、编译：将重组后的内容进行编译生成相应的移动应用；

E、打包：对编译后的内容进行打包，输出一个移动应用包及包含该应用的目标手机平台的应用程序；

F、移动应用运行模块：该模块至少包含可运行于目前已知的移动操作系统的应用程序，通过将所生成的移动应用从服务器拉取并运行。

本实施例中，所述组件管理模块包括有组件上传子模块和组件权限管理子模块，所述组件上传子模块用于上传组件资源包，所述组件权限管理子模块用于根据用户信息得出该用户的权限，查询和反馈当前用户能够使用的组件列表，以供选择组件。进一步地，请参照图2，组件上传子模块的执行过程包括：首先，开发人员上传组件资源包。资源包有网页组件资源包、移动各平台组件资源包，每个资源包中需要包含组件在使用中需要的可执行代码、资源图片；其次，开发人员注册组件的属性、方法、事件。每个组件对外暴露的属性、方法、事件都需要在此注册，以便其它组件进行调用；此外，开发人员配置组件的使用权限。本系统中的组件是包含了用户界面和业务逻辑，为避免因权限问题造成数据的安全问题，因此需要对组件的使用进行权限控制。开发人员在提交组件时，需要配置当前组件能够被哪些角色的用户使用。

请参照图3，所述组件权限管理子模块的执行过程包括：首先，接收到获取用户组件列表的请求；其次，根据请求中传递的用户参数，获取当前用户的权限；再次，根据得到的权限，查询出当前用户所属角色能够使用的组件列表；此外，返回查询出的组件列表。在所述组件权限管理子模块的作用下，系统可以根据用户权限为其提供可用的组件，从而方便了对组件的分类、管理和调用。

作为一种优选方式，所述组件拖拽式操作模块执行拖拽命令时，根据组件的位置、排序信息和各组件之间的关联关系生成网页应用配置参数。

请参照图4，所述组件拖拽式操作模块的具体执行过程包括：首先，用户通过浏览器页面拖拽可使用的组件放置到不同的位置，生成组件位置和排序信息配置参数；其次，用户操作已经摆放好的组件，配置组件间事件和方法的调用，生成组件关联参数；此外，将生成的组件位置和排序信息配置参数和组件关联参数保存到系统后台，并发送编译网页应用请求和编译移动应用请求。其中，用户仅通过浏览器页面即可设定组件位置、对各组件进行排序以及设置各组件间的事件关系，该过程直观、简单，因而方便了用户操作。

本实施例中，所述网页应用生成模块根据网页应用配置参数中组件的位置和排序信息生成相应样式的网页应用，以及根据网页应用配置参数中各组件的关联关系生成组件之间可相互响应方法和事件的网页应用。请参照图5，所述网页应用生成模块的具体执行过程包括：首先，接收到编译请求，从编译请求中获取应用配置信息；其次，根据配置信息中的组件位置和排序信息配置参数，在页面中摆放组件；此外，根据配置信息中的组件关联参数，绑定组件间的事件方法调用，绑定完成后，网页应用编译完成，用户可在浏览器中使用生成的网页应用。在网页应用生成模块的作用下，可根据用户配置的参数直接生成与网页界面相匹配的网页应用，该网页应用可运行于计算机，并通过计算机的网页浏览器进行展示。

本发明还公开了一种基于组件化的拖拽式跨平台应用开发方法，请参照图 1，该方法基于一系统实现，所述系统包括一组件管理模块、一组件拖拽式操作模块、一网页应用生成模块、一规则引擎、一移动应用生成模块及一移动应用运行模块，所述组件管理模块包括有多个供用户选择且用于组装成页面的组件，所述方法包括如下步骤：

步骤S1，用户通过浏览器登录应用开发系统，调用组件拖拽式操作模块；

步骤S2，用户向组件拖拽式操作模块输入选择命令和拖拽命令，利用所述组件拖拽式操作模块对已选组件进行页面布局和事件绑定，并生成网页应用配置参数，之后判断，若需要生成网页应用，则执行步骤S3，若需要生成移动应用，则执行步骤S5；

步骤S3，用户完成配置操作，发起编译网页应用请求，将所述网页应用配置参数发送至网页应用生成模块；

步骤S4，所述网页应用生成模块根据编译网页应用请求中的网页应用配置参数生成网页应用，以供用户使用；

步骤S5，用户完成配置操作，发起编译移动应用请求，将所述网页应用配置参数发送至规则引擎；

步骤S6，所述规则引擎接收到编译移动应用请求中的网页应用配置参数，按照引擎中已配置的转换规则，将网页应用配置参数转换为可运行于移动设备上的移动应用配置参数，转换完成后，将所述移动应用配置参数发送至移动应用生成模块；

步骤S7，所述移动应用生成模块根据所述移动应用配置参数生成移动应用资源包；

步骤S8，用户利用移动应用运行模块获取所述移动应用资源包并运行于移动设备。

上述拖拽式跨平台应用开发方法中，用户通过浏览器登录应用生成系统，使用组件拖拽式操作模块，组件拖拽式操作模块将用户信息传递给组件管理模块，获取用户可以使用的组件列表，用户通过组件拖拽式操作模块，操作选择的组件，进行页面的布局以及事件的绑定，得到生成的网页应用配置参数，用户完成配置操作后，发起编译网页应用请求，将配置参数发送至网页应用生成模块，网页应用生成模块根据请求中的配置参数，生成网页应用，供用户使用生成的网页应用。上述过程中，如果需要生成移动应用，则在用户完成配置操作后，发起编译移动应用请求，将配置参数发送规则引擎，由规则引擎接收到请求中的配置参数，按照引擎中已配置的转换规则，将原有的网页应用配置参数转换为移动应用配置参数，转换完成后，将得到的移动应用配置参数发送给移动应用生成模块，移动应用生成模块根据请求中的配置参数，生成移动应用资源包，最后用户使用移动应用运行模块，获取生成的移动应用资源包，从而在移动端使用通过拖拽式操作得到的移动应用。

上述方法中，所述步骤S2中，用户通过浏览器页面拖拽可使用的组件并放置到相应的位置，之后生成包含组件位置、排序信息和各组件之间的关联关系的网页应用配置参数，再发送编译网页应用请求和编译移动应用请求。该步骤所生成的网页应用配置参数，作为编译成网页应用或移动应用的初始参数，在该网页应用配置参数的基础上，当用户需要编译成网页应用或移动应用时，方便系统直接调用。

作为一种优选方式，所述步骤S4～步骤S5中，所述网页应用生成模块接收到编译网页应用请求后，从编译网页应用请求中获取网页应用配置参数，根据网页应用配置参数中的组件位置和排序信息在页面中摆放组件，再根据网页应用配置参数中的组件关联参数，绑定组件间的事件方法，绑定完成后，完成网页应用编译。由于网页应用配置参数是由用户在浏览器端直接设置的，其界面布局与所要生成的网页应用界面布局能够直接匹配，因此能够直接编译为网页应用。

本实施例中，因网页应用配置参数是由用户在浏览器端直接设置的，该网页应用配置参数中的界面布局仅适合展示与网页界面，当应用安装于移动设备时，由于移动设备的界面较小，所以应当将网页应用配置参数转换为移动应用配置参数，为实现这一过程，本实施例优选采用规则引擎进行参数转换，请参照图6，所述步骤S6中，规则引擎的转换过程包括：

步骤S60，所述规则引擎接收编译移动应用请求，从编译移动应用请求中获取网页应用配置参数；

步骤S61，根据规则引擎中预设的网页应用组件和移动应用组件的映射关系，处理网页应用配置参数中的每个组件；

步骤S62，根据网页应用组件名称，获取移动应用组件名称；

步骤S63，根据网页应用组件的属性、方法、事件，获取移动应用组件的属性、方法、事件，并按照网页应用组件配置的组件关联参数，生成对应的移动应用组件之间的组件关联参数；

步骤S64，保存当前组件转换后的移动应用配置参数；

步骤S65，循环处理步骤S62～步骤S64，直至每个组件循环处理完成后，转换结束，将转换得到的移动应用配置参数发送至移动应用生成模块。

本实施例中，将网页应用配置参数转换为移动应用配置参数后，还需将移动应用配置参数编译为可在移动设备上运行的移动应用，请参照图7，所述步骤 S7中，所述移动应用生成模块的执行过程包括如下步骤：

步骤S70,所述移动应用生成模块接收编译请求，从编译请求中获取移动应用配置信息；

步骤S71，所述移动应用生成模块检查是否存在项目编译资源：若没有编译资源，则停止编译，若存在编译资源，则继续执行；其中，项目编译资源是编译指定移动应用的编译环境，每一个移动应用都需要有对应的编译资源；

步骤S72，根据移动应用配置参数获取当前编译项目的项目名，拷贝当前项目的升级包到指定目录并解压覆盖；其中，升级包是项目编译资源中没有进行具体应用编译之前的原始资源包，为避免多次使用同一个编译资源进行编译导致数据混淆，需要在编译之前更新升级包；

步骤S73，根据应用配置信息中页面参数的页面名称，新建页面；

步骤S74，根据应用配置信息中页面参数的标题信息，修改生成页面中的标题，并在页面中添加指定的组件；

步骤S75，根据应用配置信息中页面参数的组件关联关系，绑定组件间的事件与方法的调用；

步骤S76，记录页面需要的组件名称，过滤整个应用中的重复组件；

步骤S78，循环执行步骤S73～步骤S76，直至每个页面循环处理完成后，执行步骤S79；

步骤S79，根据步骤S76中记录的组件名称，在预设的移动组件仓库中获取指定的组件资源到指定目录并解压；

步骤S80，分析组件资源中的组件属性参数，获取并记录组件运行需要的依赖包，过滤整个应用中所有组件依赖包中的重复依赖包；

步骤S81，对于需要依赖图片资源的组件，如果当前组件有依赖资源，则将依赖资源复制编译资源中的指定目录；

步骤S82，重复执行步骤S79～步骤S81，直至每个组件循环处理完成后，根据步骤S80中记录的依赖包名称，安装整个应用所需要的依赖包；

步骤S81，在应用的全局组件管理文件中声明应用中所有的页面和组件；

步骤S82，在编译资源中执行编译命令，编译移动应用；

步骤S83，编译完成后，生成编译结果文件可通过互联网访问的URL路径，并将该路径生成二维码，供外部下载使用，结束移动应用编译过程。

上述执行过程中，在所述移动应用生成模块的作用下，可根据规则引擎所述生成的配置信息进行分析提取，之后对分析完成的结果进行智能重组，并对规则引擎中生成的内容进行调整以适用于移动应用，之后输出一个移动应用包及应用程序，以便于在移动设备上安装运行。

关于移动应用的下载与安装，请参照图8，所述步骤S8中，所述移动应用运行模块的执行过程包括：

步骤S84，用户使用移动应用，在应用启动时自动发起检查，检查是否存在更新的运行资源包，若存在，则执行步骤S85，若不存在，则执行步骤S87；

步骤S85，从服务器下载最新资源包；

步骤S86，解压并替换移动本地的资源包；

步骤S87，加载本地资源包，之后运行移动应用。

本发明公开的基于组件化的拖拽式跨平台应用开发系统及方法，其相比现有技术而言，本发明所需的组件由开发者提供，用户只需根据自己的需求进行选择组件，无需掌握组件开发所需的技术，大大降低了组件开发的成本。同时，本发明采用拖拽组件的方式生成应用，操作更加简便、直观，用户只需把组件拖拽到编辑区并进行相关配置，无需写任何代码即可生成网页应用和移动应用。再次，用户无需单独生成移动应用，在生成网页应用的同时会进行智能分析并重组生成对应的移动应用，大大提高了生成应用的效率。此外，由规则引擎将网页应用组件智能转换为移动应用组件，转换完成后生成二维码，用户只需扫码即可下载安装相应的移动应用，操作过程非常简便。

以上所述只是本发明较佳的实施例，并不用于限制本发明，凡在本发明的技术范围内所做的修改、等同替换或者改进等，均应包含在本发明所保护的范围内。

Claims (9)

1.一种基于组件化的拖拽式跨平台应用开发系统，其特征在于，包括有：

一组件管理模块，包括有多个供用户选择且用于组装成页面的组件；

一组件拖拽式操作模块，用于执行用户的选择命令和拖拽命令，对已选组件进行页面布局和事件绑定，并生成网页应用配置参数；

一网页应用生成模块，用于根据所述网页应用配置参数生成网页应用；

一规则引擎，用于将网页应用配置参数转换为可运行于移动设备上的移动应用配置参数；所述规则引擎根据编辑网页应用保存的配置信息转换为适合于运行在移动设备上的应用生成配置信息；所述配置信息包括：组件的标识、组件的位置、组件绑定的事件、组件的排列顺序；

一移动应用生成模块，根据所述移动应用配置参数生成移动应用资源包；

一移动应用运行模块，用于获取所述移动应用资源包并运行于移动设备。

2.如权利要求1所述的基于组件化的拖拽式跨平台应用开发系统，其特征在于，所述组件管理模块包括有组件上传子模块和组件权限管理子模块，所述组件上传子模块用于上传组件资源包，所述组件权限管理子模块用于根据用户信息得出该用户的权限，查询和反馈当前用户能够使用的组件列表，以供选择组件。

3.如权利要求1所述的基于组件化的拖拽式跨平台应用开发系统，其特征在于，所述组件拖拽式操作模块执行拖拽命令时，根据组件的位置、排序信息和各组件之间的关联关系生成网页应用配置参数。

4.如权利要求3所述的基于组件化的拖拽式跨平台应用开发系统，其特征在于，所述网页应用生成模块根据网页应用配置参数中组件的位置和排序信息生成相应样式的网页应用，以及根据网页应用配置参数中各组件的关联关系生成组件之间可相互响应方法和事件的网页应用。

5.一种基于组件化的拖拽式跨平台应用开发方法，其特征在于，该方法基于一系统实现，所述系统包括一组件管理模块、一组件拖拽式操作模块、一网页应用生成模块、一规则引擎、一移动应用生成模块及一移动应用运行模块，所述组件管理模块包括有多个供用户选择且用于组装成页面的组件，所述方法包括如下步骤：

步骤S1，用户通过浏览器登录应用开发系统，调用组件拖拽式操作模块；

步骤S2，用户向组件拖拽式操作模块输入选择命令和拖拽命令，利用所述组件拖拽式操作模块对已选组件进行页面布局和事件绑定，并生成网页应用配置参数，之后判断，若需要生成网页应用，则执行步骤S3，若需要生成移动应用，则执行步骤S5；

步骤S3，用户完成配置操作，发起编译网页应用请求，将所述网页应用配置参数发送至网页应用生成模块；

步骤S4，所述网页应用生成模块根据编译网页应用请求中的网页应用配置参数生成网页应用，以供用户使用；

步骤S5，用户完成配置操作，发起编译移动应用请求，将所述网页应用配置参数发送至规则引擎；

步骤S6，所述规则引擎接收到编译移动应用请求中的网页应用配置参数，按照引擎中已配置的转换规则，将网页应用配置参数转换为可运行于移动设备上的移动应用配置参数，转换完成后，将所述移动应用配置参数发送至移动应用生成模块；

步骤S7，所述移动应用生成模块根据所述移动应用配置参数生成移动应用资源包；

步骤S8，用户利用移动应用运行模块获取所述移动应用资源包并运行于移动设备；

所述步骤S6中，规则引擎的转换过程包括：

步骤S60，所述规则引擎接收编译移动应用请求，从编译移动应用请求中获取网页应用配置参数；

步骤S61，根据规则引擎中预设的网页应用组件和移动应用组件的映射关系，处理网页应用配置参数中的每个组件；

步骤S62，根据网页应用组件名称，获取移动应用组件名称；

步骤S63，根据网页应用组件的属性、方法、事件，获取移动应用组件的属性、方法、事件，并按照网页应用组件配置的组件关联参数，生成对应的移动应用组件之间的组件关联参数；

步骤S64，保存当前组件转换后的移动应用配置参数；

步骤S65，循环处理步骤S62～步骤S64，直至每个组件循环处理完成后，转换结束，将转换得到的移动应用配置参数发送至移动应用生成模块。

6.如权利要求5所述的基于组件化的拖拽式跨平台应用开发方法，其特征在于，所述步骤S2中，用户通过浏览器页面拖拽可使用的组件并放置到相应的位置，之后生成包含组件位置、排序信息和各组件之间的关联关系的网页应用配置参数，再发送编译网页应用请求和编译移动应用请求。

7.如权利要求6所述的基于组件化的拖拽式跨平台应用开发方法，其特征在于，所述步骤S4～步骤S5中，所述网页应用生成模块接收到编译网页应用请求后，从编译网页应用请求中获取网页应用配置参数，根据网页应用配置参数中的组件位置和排序信息在页面中摆放组件，再根据网页应用配置参数中的组件关联参数，绑定组件间的事件方法，绑定完成后，完成网页应用编译。

8.如权利要求5所述的基于组件化的拖拽式跨平台应用开发方法，其特征在于，所述步骤S7中，所述移动应用生成模块的执行过程包括如下步骤：

步骤S70,所述移动应用生成模块接收编译请求，从编译请求中获取移动应用配置信息；

步骤S71，所述移动应用生成模块检查是否存在项目编译资源：若没有编译资源，则停止编译，若存在编译资源，则继续执行；

步骤S72，根据移动应用配置参数获取当前编译项目的项目名，拷贝当前项目的升级包到指定目录并解压覆盖；

步骤S73，根据应用配置信息中页面参数的页面名称，新建页面；

步骤S74，根据应用配置信息中页面参数的标题信息，修改生成页面中的标题，并在页面中添加指定的组件；

步骤S75，根据应用配置信息中页面参数的组件关联关系，绑定组件间的事件与方法的调用；

步骤S76，记录页面需要的组件名称，过滤整个应用中的重复组件；

步骤S78，循环执行步骤S73～步骤S76，直至每个页面循环处理完成后，执行步骤S79；

步骤S79，根据步骤S76中记录的组件名称，在预设的移动组件仓库中获取指定的组件资源到指定目录并解压；

步骤S80，分析组件资源中的组件属性参数，获取并记录组件运行需要的依赖包，过滤整个应用中所有组件依赖包中的重复依赖包；

步骤S81，对于需要依赖图片资源的组件，如果当前组件有依赖资源，则将依赖资源复制编译资源中的指定目录；

步骤S82，重复执行步骤S79～步骤S81，直至每个组件循环处理完成后，根据步骤S80中记录的依赖包名称，安装整个应用所需要的依赖包；

步骤S81，在应用的全局组件管理文件中声明应用中所有的页面和组件；

步骤S82，在编译资源中执行编译命令，编译移动应用；

步骤S83，编译完成后，生成编译结果文件可通过互联网访问的URL路径，并将该路径生成二维码，供外部下载使用，结束移动应用编译过程。

9.如权利要求8所述的基于组件化的拖拽式跨平台应用开发方法，其特征在于，所述步骤S8中，所述移动应用运行模块的执行过程包括：

步骤S84，用户使用移动应用，在应用启动时自动发起检查，检查是否存在更新的运行资源包，若存在，则执行步骤S85，若不存在，则执行步骤S87；

步骤S85，从服务器下载最新资源包；

步骤S86，解压并替换移动本地的资源包；

步骤S87，加载本地资源包，之后运行移动应用。

Images