CN104636139B - 一种可视化跨平台移动应用开发与生成*** - Google Patents

Abstract

本发明公开一种可视化跨平台移动应用开发与生成***，所述***包括：图源库模块，用于存储图源库，图源库包括视图库、列表库、HTML元素库、控件库；编辑模块，用于在浏览器中呈现编辑窗，并在收到用户的编辑信息之后调用图源库以及将用户编辑的工程文件发送到工程目录管理模块；编辑窗为可视化可拖拽式编辑窗，包括代码编辑窗、属性编辑窗和大纲编辑窗；工程目录管理模块，用于将用户编辑的工程文件保存在服务器端；插件处理模块，用于在服务器端管理和维持移动应用插件库；一键生成模块，用于在后台响应用户的安装包生成请求，生成跨平台移动应用安装包供用户下载使用。本发明的***可实现跨平台可视化移动应用设计到移动应用生成的整套流程。

Description

一种可视化跨平台移动应用开发与生成***

技术领域

本发明涉及计算机技术领域，具体涉及一种可视化跨平台移动应用开发与生成***。

背景技术

随着硬件技术的不断完善造成的智能手机价格下降与性能提升，再加上3G网络的不断普及，智能手机越来越成为人们生活中重要的一部分。随之，移动应用开发也成为了新兴研究领域。当前，市场上流行着多种智能手机操作***，于是移动应用产品往往要考虑对多个平台的支持。各平台都有一套相对独立的开发流程与开发语言，这对于移动应用开发者意味着一定量的重复劳动。比如安卓Android操作***的移动应用通常使用JAVA语音来开发，苹果公司的iOS操作***移动应用通常使用Object C语言来开发，而微软公司的Windows Phone操作***移动应用通常使用C#语言来开发。

当前，有三种主流的移动应用开发方式，分别为原生应用开发方式、Web应用开发方式和基于WEB的混合式开发方式。

原生应用开发方式使用每个操作***所规定的语言和操作***对外提供的应用程序编程接口(Application Programming Interface，API)进行开发。由于每个操作***的语言一般具有较大差异，如果要让一个移动应用适用于多个平台，将不得不面临重复编码的工作。而Web应用开发方式利用各操作***对HTML、JavaScript、CSS这套Web技术的支持实现移动应用的跨平台，并利用诸如PhoneGap之类的跨平台中间件将移动应用封装成为独立的移动应用。Web语言相对于JAVA、Object C、C#之类的手机原生应用开发语言入门门槛更低更易于掌握，而且核心代码只需开发一次，加上少量针对各操作***的部署工作，就能生成跨平台的移动应用。不过，这种Web跨平台应用也有其局限性，主要是复杂功能与***的实现不如原生开发方式灵活。所以，基于WEB技术，并以原生插件作为扩展的混合式跨平台应用开发方式，除了程序主体依然能够单次开发跨平台运行外，比纯粹的Web应用开发具有更好的可扩展性和灵活性。

在工程上，目前基于例如PhoneGap等跨平台适配中间件的应用开发与应用生成一般是割裂开的，需要分两步进行，通常开发流程是编程人员先在一套环境中完成移动应用的编码，然后要在其他环境中调用各手机操作***编译指令进行移动应用生成。

发明内容

本发明所要解决的技术问题是现有的移动应用开发与生成是割裂开的过程，需要分两步进行，即先在一套环境中完成移动应用的编码，然后在其他环境中调用各手机操作***编译指令进行移动应用生成的问题。

为此目的，本发明提出一种可视化跨平台移动应用开发与生成***，所述***包括：

图源库模块，用于存储图源库，所述图源库包括视图库、列表库、HTML元素库、控件库；

编辑模块，用于在浏览器中呈现编辑窗，并在收到用户的编辑信息之后调用所述图源库以及将用户编辑的工程文件发送到工程目录管理模块；所述编辑窗为可视化可拖拽式编辑窗，包括代码编辑窗、属性编辑窗和大纲编辑窗；

工程目录管理模块，用于将所述用户编辑的工程文件保存在服务器端；

插件处理模块，用于在服务器端管理和维持移动应用插件库；

一键生成模块，用于在后台响应用户的安装包生成请求，生成跨平台移动应用安装包供用户下载使用。

可选的，所述***还包括：

登录管理模块，用于根据用户在浏览器端输入的用户名及密码，向所述用户提供工作空间，所述工作空间为保存在服务器端的所述用户专有的工作空间。

可选的，所述工程目录管理模块，还用于隔离不同用户的工作空间。

可选的，所述插件处理模块，还用于在后台接受用户上传的自定义插件，并抽取得到插件文件和插件功能接口，并将所述自定义插件增加到所述移动应用插件库中。

可选的，所述一键生成模块，具体用于：在接收到用户的安装包生成请求之后，从所述工程目录管理模块中调用所述用户编辑的工程文件以及从所述插件处理模块中调用与所述用户编辑的工程文件相应的插件，实现所述用户编辑的工程文件与插件的适配，生成跨平台移动应用安装包供用户下载使用。

相比于现有技术，本发明的跨平台移动应用开发与生成***可实现跨平台可视化移动应用设计到移动应用生成的整套流程。

附图说明

图1示出了一种可视化跨平台移动应用开发与生成***结构图；

图2示出了一种用户与可视化跨平台移动应用开发与生成***进行交互的流程图；

图3示出了一种基于WEB跨平台的移动应用开发生成***结构图；

图4示出了一种插件处理模块结构图；

图5示出了一种Android插件审核流程图；

图6示出了一种iOS插件审核流程图；

图7示出了一种资源抽取器结构图；

图8示出了一种插件加载模块工作流程图；

图9示出了一种对于Android插件的加载流程图；

图10示出了一种对于iOS插件的加载流程图；

图11示出了一种一键生成模块工作流程图；

图12示出了一种一键生成模块结构图。

具体实施方式

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

如图1所示，本实施例公开一种可视化跨平台移动应用开发与生成***，所述***包括：

登录管理模块，用于根据用户在浏览器端输入的用户名及密码，向所述用户提供工作空间，所述工作空间为保存在服务器端的所述用户专有的工作空间。

图源库模块，用于存储图源库，所述图源库包括视图库、列表库、HTML元素库、控件库；

编辑模块，用于在浏览器中呈现编辑窗，并在收到用户的编辑信息之后调用所述图源库以及将用户编辑的工程文件发送到工程目录管理模块；所述编辑窗为可视化可拖拽式编辑窗，包括代码编辑窗、属性编辑窗和大纲编辑窗；

工程目录管理模块，用于将所述用户编辑的工程文件保存在服务器端，还用于隔离不同用户的工作空间；

插件处理模块，用于在服务器端管理和维持移动应用插件库，还用于在后台接受用户上传的自定义插件，并抽取得到插件文件和插件功能接口，并将所述自定义插件增加到所述移动应用插件库中；

一键生成模块，用于在后台响应用户的安装包生成请求，生成跨平台移动应用安装包供用户下载使用；具体用于：在接收到用户的安装包生成请求之后，从所述工程目录管理模块中调用所述用户编辑的工程文件以及从所述插件处理模块中调用与所述用户编辑的工程文件相应的插件，实现所述用户编辑的工程文件与插件的适配，生成跨平台移动应用安装包，比如Android安装包或iOS安装包，供用户下载使用。

图2为用户与上述实施例中的可视化跨平台移动应用开发与生成***进行交互的流程图，包括以下步骤：

步骤A、启动后台服务器；

步骤B、用户通过浏览器访问本发明提供的拖拽式界面工具并登录；

步骤C、用户若无上传插件的需求，跳转至步骤I；否则，用户上传其自定义插件转至步骤D；

步骤D、插件处理模块对用户上传的插件进行格式审核，若符合规范，则转至步骤E；

步骤E、插件处理模块中资源抽取器分类抽取其中用户插件中资源；

步骤F、检查用户上传的插件是否已经存在，若插件不存在，插件抽取模块将抽取到的各类资源分类存储在服务器端插件库；否则执行下一步G；

步骤G、插件库中插件通过插件加载模块处理，等待编译生成移动应用；

步骤H、拖拽式界面工具读取插件库信息，动态引入插件命名空间和生成插件选择列表；

步骤I、用户通过所见即所得的拖拽是操作完成移动应用UI设计与事件绑定，编辑环境一方面定义呈现出设计的视觉效果，另一方面根据事先定义好的拖拽式动作，生成对应的程序代码；

步骤J、用户请求生成安装包；

步骤K、应用适配模块和插件适配模块更新应用配置信息和工程属性配置；

步骤L、生成用于生成应用安装包的编译脚本，并调用各智能手机操作***底层编译指令；

步骤M、向客户端浏览器提供应用安装包下载地址，用户下载并安装应用。

实施例所提供的整套移动应用开发的方法流程总体上是基于B/S(Browser/Server)架构，相比于传统的移动应用生成平台的单机模式，能够很容易地在任意联网计算机上使用，同时也能进行多人通过公共账号协作开发。另外，本***提供的拖拽式界面工具，使得用户能够以一种所见即所得方式进行移动应用开发，比一般的纯代码编写方式更为直观。传统的移动应用开发使用基于各个智能手机操作***的原生开发，不具有跨平台特性；而本***使用了基于WEB的跨平台框架，程序主体可以做到开发一次即可跨平台部署，提升了工作效率。此外，本***还提供了插件形式的跨平台框架扩展，用户可以自行上传高效的原生插件，***能够自动地抽取出其中的方法调用接口，这样用户能开发的程序比一般的纯跨平台架构的程序更具有灵活性，也比手工的跨平台架构扩展方式流程更简便。另外，相比于通常情况下移动应用开发方式中编码与应用生成分步进行的流程，本***在后台将其联系在了一起，在同一个界面设计环境中就能完成相应的功能。

基于WEB跨平台的移动应用开发生成环境，包括登录管理模块、跨平台框架、编辑环境(可视化编辑器、属性编辑器、代码编辑器、大纲编辑器)、图源库、工程目录管理模块、插件上传模块及其接口、一键生成模块及其接口：

登录管理模块，接受用户在浏览器端***登录界面输入的用户名及密码，检查其用户的合法性，根据不同的登录用户获取其对应的工作空间路径，编辑环境接收到此路径通过工程目录管理模块分别加载每个用户各自编辑的文件，并且提供用户注册功能；

跨平台框架以HTML+JavaScript+CSS技术作为主要语言进行编辑，在一键生成模块使用跨平台适配中间件，进行跨平台的应用安装包生成。具体来说，如图3所示，编辑环境生成的程序对应为图3中的Web应用部分。跨平台中间件将Web应用置入了一个原生程序框架中并作为其资源进行调用。诸多移动操作***提供了Web浏览器窗口组件，也就是图3中的WebView。在一般的原生应用中，WebView的主要作用是用来显示网络传输得到的HTML的内容或者被其他原生应用调用来显示本地HTML内容。而此框架下的移动应用程序首先创建一个调用WebView的原生应用作为框架，该原生应用框架启动后将通过调用WebView显示Web程序。当使用各移动操作***例如照相、短信等底层功能或第三方插件时，这些功能与插件按照跨平台中间件规范封装成为若干个JS接口，这些JS接口统一在一份plugin列表中注册并管理。当Web视图调用这些插件后，它们与JavaScript代码进行异步通信，利用跨平台中间件通过JS接口发送异步请求队列，完成了从Web视图到原生代码的消息传递，从而使Web应用能够调用到***功能。

编辑环境，包括可视化编辑器、属性编辑器、代码编辑器、和大纲编辑器。

可视化编辑器，在浏览器中提供所见即所得的用户操作界面，以HTML页面列表形式呈现图源库与插件库，并根据如下图源库中定义的拖拽式操作动作在页面内程序对应的组件视觉效果；

属性编辑器，提供移动应用图源库中的界面元素的属性设置和事件绑定。这里提供了设置各种HTML常见属性的接口，包含大小、位置、颜色等属性和DOM信息，并且通过HTML的onclick等与事件相关的属性绑定事件，可以使HTML中预设的事件函数，也可以是通过跨平台框架封装的js接口中的函数；

属性编辑器中的事件绑定提供了用户插件的功能入口，分为两级的下拉列表，第一级下拉列表列举所有的用户插件，第二级下拉列表列举第一级下拉列表所选取的插件的功能接口。每个下拉列表都有一个与其对应的元数据集类，这个元数据集类封装了初始化、变更、清理等一系列方法去操纵下拉列表。在初始化整个属性编辑器模块时，两级下拉列表的元数据集类中的初始化方法会自动调用。第一级下拉列表对应的初始化方法将发送Ajax请求到后台，后台扫描插件库中的本地插件，返回插件列表，在第一级下拉列表中显示；当第一级下拉列表的选项改变时，相应的事件***会被触发，下拉列表中的选项会被当做参数传递给第二级下拉列表对应的变更方法，变更方法以此作为依据去向后台请求某个特定插件的所有功能接口，并显示；当第二级下拉列表的选项改变时，其事件***也会被触发，此时所选择的html中元素的onclick事件所调用的方法被修改为第二级下拉列表中的选项。

代码编辑器，一方面提供手写Web代码接口进行程序微调与扩展，另一方面调用图源库对应的Widget信息，将模拟编辑器中引入的图源和插件及属性编辑器中设置的属性和绑定的事件，转化成为对应的程序代码，并且在生成的代码中引入用户插件提供方法所需的命名空间，完成界面到代码的实时映射；

大纲编辑器，通过读取代码文件中的文本，识别符合W3C规范的HTML元素的标签对，比如<DIV>与</DIV>。然后根据这些标签所定义的用户界面层次关系，分层次呈现用户编辑的移动应用的视图与元素的层次大纲，用来在编辑界面中分层次选取元素。由于有时根据需要会有一些元素在位置上是重叠的，这样可以控制各个元素在可视化编辑器中是否显示，便于对其的选择与进一步操作；

图源库，定义和管理常用移动应用界面元素的库文件供代码编辑器以js脚本形式在HTML的<HEAD></HEAD>中以script标签引入，并为库文件定义其中所有组件的拖拽动作及特有属性，供包括可视化编辑器、属性编辑器、代码编辑器等其他组件调用。图源库中每个组件是以一个Widget进行管理的，每个Widget包括了WidgetName.html、WidgetName.js、WidgetName_oam.json、WidgetName_widgets.json四个文件。其中第一个文件供可视化编辑器调用，内容是定义该组件的视觉层面HTML代码，使得拖动后能立刻显示出组件的视觉效果。第二个文件为统一的对外呈现接口，里面指向了该Widget的其他文件。第三个文件以JSON的形式定义了该Widget的名称name、版本version、所需资源库require和代码编辑器中需要转化的目标代码content等信息。第四个文件则定义了该Widget在浏览器页面中的图源选择菜单里的显示效果，如名称name、类型type、种类category、图标icon、附加属性property等信息。

工程目录管理模块，将用户编辑的工程文件在服务器端该用户的工作空间目录路径中保存管理，通过限制每个用户只能访问其工作空间目录及其子目录隔离不同用户的工作空间。用户的工作空间中的所有文件可以供用户下次登录时读取或者被一键生成模块调用；

插件处理模块，如图4所示，基于WEB跨平台的移动应用开发生成环境中的插件处理模块又包括以下几个组成部分：

插件审核，检查用户上传的插件格式是否符合本***环境所要求的规范；

Android插件审核流程如图5所示：

步骤1、用户点击基于WEB跨平台的移动应用开发生成环境的界面中的Android插件上传按钮

步骤2、将用户上传的zip包插件打开，开始进行插件审核

步骤3、通过后缀名检查插件源码文件夹中是否包含必要的java源码文件，防止用户误操作。若存在，进行步骤4，否则跳出插件处理流程。

步骤4、检查插件工程根目录下是否存在按照一行一函数名的规范填写的功能接口文件。若存在，进入资源抽取流程，否侧跳出插件处理流程。

iOS插件审核流程如图6所示：

步骤1、用户点击基于WEB跨平台的移动应用开发生成环境的界面中的iOS插件上传按钮

步骤2、将用户上传的zip包插件打开，开始进行插件审核

步骤3、通过后缀名检查插件源码文件夹中是否包含必要的*.m和*.h源码文件，防止用户误操作。若存在，进行步骤4，否则跳出插件处理流程。

步骤4、检查插件工程根目录下是否存在按照一行一函数名的规范填写的功能接口文件。若存在，进入资源抽取流程，否侧跳出插件处理流程。

对于Windows Phone插件也类似于此。

资源抽取器，处理用户通过拖拽式界面工具中的插件上传接口上传的自定义插件，判断其对应操作***，将其中的资源文件、代码文件、库文件、配置文件等分类抽取，分别转递给插件库中对应工程目录中。其具体工作流程如图7所示：

步骤1、插件审核流程结束后，进入资源抽取流程

步骤2、分类别分别抽取用户上传插件不同目录中的源文件、库文件、配置文件、资源文件

步骤3、将抽取出的各文件分别存储在插件库对应文件夹。

步骤4、进入插件加载流程

插件库，将资源抽取器抽取到的各类文件在服务器端本地化存储，并且检索读取用户插件按照规范编写的配置文件呈现出的可以被调用的接口函数名称，将此接口函数传递给属性编辑器，生成下拉选择菜单，供用户选择使用，也供插件加载模块加载模块用以生成应用。

插件加载模块，将插件预加载至移动应用工程中，准备供插件适配模块调用，成为可以被一键生成模块直接调用的插件工程，其中安卓***插件需要进行插件工程配置和第三方库配置，而iOS***需要进行工程基本信息配置、第三方库和cocoa framework配置、原文件工程引用自动添加。其具体的工作流程图如图8所示。

对于Android插件的加载过程如图9所示：

步骤1、资源抽取流程结束后，开始进入Android插件加载流程

步骤2、对本地化在插件库中的插件，将其整体拷贝至Android的跨平台应用主工程的同级目录下，并通过修改AndroidManifest.xml来设置插件工程为Android的跨平台应用主工程的一个Library Project

步骤3、如果插件工程用到了第三方库，需要在AndroidManifest.xml对其权限等信息进行配置

步骤4、向属性编辑器的插件列表传递插件名、插件接口函数等信息

步骤5、提供功能接口定义。

对于iOS插件的加载过程如图10所示：

步骤1、资源抽取流程结束后，开始进入iOS插件加载流程

步骤2、对本地化在插件库中的插件，将其整体拷贝至iOS的跨平台应用主工程中。

步骤3、通过iOS工程，自动化配置第三方库和cocoa framework

步骤4、对于iOS插件工程用到的源文件、资源文件，以及第三方库文件，通过预制的脚本，生成每个文件的引用值序列，将其引用添加到iOS的跨平台应用主工程配置文件中。

步骤5、向属性编辑器的插件列表传递插件名、插件接口函数等信息

步骤6、提供功能接口定义

对于Windows Phone插件也类似于此。

一键生成模块工作流程如图11所示，它用于接收用户生成移动应用请求，自动打包生成对应移动应用，并提供给用户下载。如图12所示，其主要包括以下几个组成部分：

应用适配模块，从安装包生成请求接口中，提取出用户提交的欲生成移动应用的平台、版本等信息，并更新对应平台的智能移动应用配置信息文件中内容；

脚本构造模块，判断在移动应用开发与生成环境中发出应用生成请求的用户，获取其所在的用户工作目录路径；根据应用适配模块从用户请求中提取出的平台信息，获取资源目录路径，并使用这些路径变量动态构造该请求对应的应用生成脚本；

应用生成模块，根据应用适配模块从用户请求中提取出的平台信息，使用脚本构造器生成的应用生成脚本，分别调用各移动终端操作***底层编译指令，生成对应移动应用；

日志管理模块，提取应用生成模块中各移动终端操作***编译时的输出信息并保存在服务器端，以便***管理员在必要时刻查阅；

应用下载接口，获取生成的移动应用安装包，利用下载服务器生成URI转递给浏览器，供其处理并下载。

虽然结合附图描述了本发明的实施方式，但是本领域技术人员可以在不脱离本发明的精神和范围的情况下做出各种修改和变型，这样的修改和变型均落入由所附权利要求所限定的范围之内。

Claims (5)

1.一种可视化跨平台移动应用开发与生成***，其特征在于，所述***包括：

图源库模块，用于存储图源库，所述图源库包括视图库和列表库和HTML元素库和控件库；

编辑模块，用于在浏览器中呈现编辑窗，并在收到用户的编辑信息之后调用所述图源库以及将用户编辑的工程文件发送到工程目录管理模块；所述编辑窗为可视化可拖拽式编辑窗，包括代码编辑窗、属性编辑窗和大纲编辑窗；

工程目录管理模块，用于将所述用户编辑的工程文件保存在服务器端；

插件处理模块，用于在服务器端管理和维持移动应用插件库；

一键生成模块，用于在后台响应用户的安装包生成请求，生成跨平台移动应用安装包供用户下载使用，具体包括应用适配模块，从安装包生成请求接口中，提取出用户提交的欲生成移动应用的平台和版本的信息，并更新对应平台的智能移动应用配置信息文件中内容；脚本构造模块，判断在移动应用开发与生成环境中发出应用生成请求的用户，获取其所在的用户工作目录路径；根据应用适配模块从用户请求中提取出的平台信息，获取资源目录路径，并使用这些路径变量动态构造该请求对应的应用生成脚本；应用生成模块，根据应用适配模块从用户请求中提取出的平台信息，使用脚本构造模块生成的应用生成脚本，分别调用各移动终端操作***底层编译指令，生成对应移动应用；日志管理模块，提取应用生成模块中各移动终端操作***编译时的输出信息并保存在服务器端，以便***管理员在必要时刻查阅；应用下载接口，获取生成的移动应用安装包，利用下载服务器生成URI转递给浏览器，供其处理并下载。

2.根据权利要求1所述的***，其特征还在于，所述***还包括：

登录管理模块，用于根据用户在浏览器端输入的用户名及密码，向所述用户提供工作空间，所述工作空间为保存在服务器端的所述用户专有的工作空间。

3.根据权利要求2所述的***，其特征还在于，所述工程目录管理模块，还用于隔离不同用户的工作空间。

4.根据权利要求1所述的***，其特征还在于，所述插件处理模块，还用于在后台接受用户上传的自定义插件，并抽取得到插件文件和插件功能接口，并将所述自定义插件增加到所述移动应用插件库中。

5.根据权利要求1所述的***，其特征在于，所述一键生成模块，具体用于：在接收到用户的安装包生成请求之后，从所述工程目录管理模块中调用所述用户编辑的工程文件以及从所述插件处理模块中调用与所述用户编辑的工程文件相应的插件，实现所述用户编辑的工程文件与插件的适配，生成跨平台移动应用安装包供用户下载使用。