若插件不存在，插件抽取模块将抽取到的各类资源分类存储在服务器端插件库；否则执行下一步G ;
[0046]步骤G、插件库中插件通过插件加载模块处理，等待编译生成移动应用；
[0047]步骤H、拖拽式界面工具读取插件库信息，动态引入插件命名空间和生成插件选择列表；
[0048]步骤1、用户通过所见即所得的拖拽是操作完成移动应用UI设计与事件绑定，编辑环境一方面定义呈现出设计的视觉效果，另一方面根据事先定义好的拖拽式动作，生成对应的程序代码；
[0049]步骤J、用户请求生成安装包；
[0050]步骤K、应用适配模块和插件适配模块更新应用配置信息和工程属性配置；
[0051]步骤L、生成用于生成应用安装包的编译脚本，并调用各智能手机操作系统底层编译指令；
[0052]步骤M、向客户端浏览器提供应用安装包下载地址，用户下载并安装应用。
[0053]实施例所提供的整套移动应用开发的方法流程总体上是基于B/S(Br0WSer/Server)架构，相比于传统的移动应用生成平台的单机模式，能够很容易地在任意联网计算机上使用，同时也能进行多人通过公共账号协作开发。另外，本系统提供的拖拽式界面工具，使得用户能够以一种所见即所得方式进行移动应用开发，比一般的纯代码编写方式更为直观。传统的移动应用开发使用基于各个智能手机操作系统的原生开发，不具有跨平台特性；而本系统使用了基于WEB的跨平台框架，程序主体可以做到开发一次即可跨平台部署，提升了工作效率。此外，本系统还提供了插件形式的跨平台框架扩展，用户可以自行上传高效的原生插件，系统能够自动地抽取出其中的方法调用接口，这样用户能开发的程序比一般的纯跨平台架构的程序更具有灵活性，也比手工的跨平台架构扩展方式流程更简便。另外，相比于通常情况下移动应用开发方式中编码与应用生成分步进行的流程，本系统在后台将其联系在了一起，在同一个界面设计环境中就能完成相应的功能。
[0054]基于WEB跨平台的移动应用开发生成环境，包括登录管理模块、跨平台框架、编辑环境(可视化编辑器、属性编辑器、代码编辑器、大纲编辑器)、图源库、工程目录管理模块、插件上传模块及其接口、一键生成模块及其接口:
[0055]登录管理模块，接受用户在浏览器端系统登录界面输入的用户名及密码，检查其用户的合法性，根据不同的登录用户获取其对应的工作空间路径，编辑环境接收到此路径通过工程目录管理模块分别加载每个用户各自编辑的文件，并且提供用户注册功能；
[0056]跨平台框架以HTML+JavaScript+CSS技术作为主要语言进行编辑，在一键生成模块使用跨平台适配中间件，进行跨平台的应用安装包生成。具体来说，如图3所示，编辑环境生成的程序对应为图3中的Web应用部分。跨平台中间件将Web应用置入了一个原生程序框架中并作为其资源进行调用。诸多移动操作系统提供了 Web浏览器窗口组件，也就是图3中的WebView。在一般的原生应用中，WebView的主要作用是用来显示网络传输得到的HTML的内容或者被其他原生应用调用来显示本地HTML内容。而此框架下的移动应用程序首先创建一个调用WebView的原生应用作为框架，该原生应用框架启动后将通过调用WebView显示Web程序。当使用各移动操作系统例如照相、短信等底层功能或第三方插件时，这些功能与插件按照跨平台中间件规范封装成为若干个JS接口，这些JS接口统一在一份plugin列表中注册并管理。当Web视图调用这些插件后，它们与JavaScript代码进行异步通信，利用跨平台中间件通过JS接口发送异步请求队列，完成了从Web视图到原生代码的消息传递，从而使Web应用能够调用到系统功能。
[0057]编辑环境，包括可视化编辑器、属性编辑器、代码编辑器、和大纲编辑器。
[0058]可视化编辑器，在浏览器中提供所见即所得的用户操作界面，以HTML页面列表形式呈现图源库与插件库，并根据如下图源库中定义的拖拽式操作动作在页面内程序对应的组件视觉效果；
[0059]属性编辑器，提供移动应用图源库中的界面元素的属性设置和事件绑定。这里提供了设置各种HTML常见属性的接口，包含大小、位置、颜色等属性和DOM信息，并且通过HTML的onclick等与事件相关的属性绑定事件，可以使HTML中预设的事件函数，也可以是通过跨平台框架封装的js接口中的函数；
[0060]属性编辑器中的事件绑定提供了用户插件的功能入口，分为两级的下拉列表，第一级下拉列表列举所有的用户插件，第二级下拉列表列举第一级下拉列表所选取的插件的功能接口。每个下拉列表都有一个与其对应的元数据集类，这个元数据集类封装了初始化、变更、清理等一系列方法去操纵下拉列表。在初始化整个属性编辑器模块时，两级下拉列表的元数据集类中的初始化方法会自动调用。第一级下拉列表对应的初始化方法将发送Ajax请求到后台，后台扫描插件库中的本地插件，返回插件列表，在第一级下拉列表中显示；当第一级下拉列表的选项改变时，相应的事件监听器会被触发，下拉列表中的选项会被当做参数传递给第二级下拉列表对应的变更方法，变更方法以此作为依据去向后台请求某个特定插件的所有功能接口，并显示；当第二级下拉列表的选项改变时，其事件监听器也会被触发，此时所选择的html中元素的onclick事件所调用的方法被修改为第二级下拉列表中的选项。
[0061]代码编辑器，一方面提供手写Web代码接口进行程序微调与扩展，另一方面调用图源库对应的Widget信息，将模拟编辑器中引入的图源和插件及属性编辑器中设置的属性和绑定的事件，转化成为对应的程序代码，并且在生成的代码中引入用户插件提供方法所需的命名空间，完成界面到代码的实时映射；
[0062]大纲编辑器，通过读取代码文件中的文本，识别符合W3C规范的HTML元素的标签对，比如<DIV>与〈/DIV〉。然后根据这些标签所定义的用户界面层次关系，分层次呈现用户编辑的移动应用的视图与元素的层次大纲，用来在编辑界面中分层次选取元素。由于有时根据需要会有一些元素在位置上是重叠的，这样可以控制各个元素在可视化编辑器中是否显示，便于对其的选择与进一步操作；
[0063]图源库，定义和管理常用移动应用界面元素的库文件供代码编辑器以js脚本形式在HTML的〈HEADX/HEAD〉中以script标签引入，并为库文件定义其中所有组件的拖拽动作及特有属性，供包括可视化编辑器、属性编辑器、代码编辑器等其他组件调用。图源库中每个组件是以一个Widget进行管理的，每个Widget包括了 WidgetName.html、WidgetName.js、WidgetName_oam.json、WidgetName_widgets.json 四个文件。其中第一个文件供可视化编辑器调用，内容是定义该组件的视觉层面HTML代码，使得拖动后能立刻显示出组件的视觉效果。第二个文件为统一的对外呈现接口，里面指向了该Widget的其他文件。第三个文件以JSON的形式定义了该Widget的名称name、版本vers1n、所需资源库require和代码编辑器中需要转化的目标代码content等信息。第四个文件则定义了该Widget在浏览器页面中的图源选择菜单里的显示效果，如名称name、类型type、种类category、图标icon、附加属性property等信息。
[0064]工程目录管理模块，将用户编辑的工程文件在服务器端该用户的工作空间目录路径中保存管理，通过限制每个用户只能访问其工作空间目录及其子目录隔离不同用户的工作空间。用户的工作空间中的所有文件可以供用户下次登录时读取或者被一键生成模块调用；
[0065]插件处理模块，如图4所示，基于WEB跨平台的移动应用开发生成环境中的插件处理模块又包括以下几个组成部分:
[0066]插件审核，检查用户上传的插件格式是否符合本系统环境所要求的规范；
[0067]Android插件审核流程如图5所示:
[0068]步骤1、用户点击基于WEB跨平台的移动应用开发生成环境的界面中的Android插件上传按钮
[0069]步骤2、将用户上传的zip包插件打开，开始进行