基于原生开发语言实现跨平台应用开发的系统及方法

摘要

本发明涉及一种基于原生开发语言实现跨平台应用开发的系统及方法，其中包括图形化移动应用开发工具，用以进行移动应用的开发和移动应用的编译导出；移动应用发布平台，用以将移动应用向外发布；移动客户端，用以运行移动应用。采用该种结构的基于原生开发语言实现跨平台应用开发的系统及方法，不仅降低了移动应用开发的复杂度、使移动应用开发简单高效，只需开发一套代码，就可以运行在多种移动平台、极大的提高了移动应用的开发效率、降低了代码维护的成本，为使用者带来最佳的用户体验，另外，本发明使还使用了增量更新技术，让移动应用更新更加方便快捷、节省更新需要的网络流量，具有更广泛的应用范围。

说明书

技术领域

本发明涉及计算机软件技术领域，尤其涉及企业移动应用技术领域，具体是指一种基于 原生开发语言实现跨平台应用开发的系统及方法。

背景技术

随着智能移动设备高速发展和普及,移动网络技术的不断突破，移动互联网已经深刻地影 响了人们的生活方式，移动应用程序已经逐渐取代一些电脑的程序，甚至有部分人士已经完 全脱离台式电脑，移动智能设备已经超越了传统的PC，成为最主要的上网方式。

现在，每台移动设备上运行着数以百计的移动应用，诸如交友、娱乐、购物、工作等很 多简单的生活行为都可以逐渐通过移动设备上的各类应用得到满足。从移动市场下载安装各 种移动应用已经为一种习惯，微信，微博等移动应用的下载和安装量已经达到的数亿的规模。

统计表明，在应用市场中，每天都有数以万计新应用上架，移动应用也成为了互联网时 代下一大热点。

目前，移动应用开发主要有两种方式：第一种是使用原生技术开发。第二种是使用web 技术开发。

使用原生技术开发是指，针对移动操作系统使用其提供的开发语言和技术进行移动应用 开发。目前，Apple的IOS操作系统和Google的Android操作系统占移动操作系统95％以上 的市场份额。在IOS移动操作系统上开发原生移动需要使用IOS提供的开发工具Xcode和开 发语言Object-c。在Android移动操作系统上进行原生应用开发需要使用eclipse开发工具和 Android开发语言。IOS和Android提供的各自的移动应用打包工具，应用开发完成后，需要 使用各自的打包工具进行打包，然后发布到应用市场。使用原生开发可以获得最佳的性能和 用户体验，更好的贴合操作系统，最充分的使用操作系统的能力。

使用web技术开发是指使用Html、Javscript、CSS语言进行移动应用开发。Web开发技 术复杂度比较低，学习和使用相对比较简单。使用Web技术开发的移动应用可以部署在Web 服务器上，通过移动设备上的浏览器或者通过使用WebView等组件进行访问。

使用原生技术开发移动应用主要不足之处在于：第一，技术复杂度高，针对不同的移动 操作系统需要使用不同的开发工具和开发语言，开发工具的使用方式和语言的技术细节以及 操作系统的特性都不一样，比如Object-c是属于c系列的语言，而Anroid是属于java系统的 开发语言，这极大的增加了开发人员的学习成本。第二，开发维护工作量大，一个移动应用 需要针对不同操作系统开发和测试，开发和维护的工作量成倍增加。

使用Web技术开发移动应用主要的不足之处在于：第一，开发的移动应用性能和用户体 验存在问题。第二，不能使用移动设备提供的能力，如摄像头，定位等。

发明内容

本发明的目的是克服了上述现有技术的原生应用开发技术复杂度高、开发和维护工作量 大的缺点，提供了一种能够实现于移动操作系统、原生开发语言无关、开发简单、效率高、 系统架构简单、稳定可靠、使用维护方便快捷、应用范围广泛的基于原生开发语言实现跨平 台应用开发的系统及方法。

为了实现上述目的，本发明的基于原生开发语言实现跨平台应用开发的系统及方法具有 如下构成：

该基于原生开发语言实现跨平台应用开发的系统，其主要特点是，所述的系统包括：

图形化移动应用开发工具，用以进行移动应用的开发和移动应用的编译导出；

移动应用发布平台，用以将移动应用向外发布；

移动客户端，用以运行移动应用。

较佳地，所述的图形化移动应用开发工具包括：

移动应用项目管理模块，用以进行移动应用的创建、修改和删除；

HTML文件管理模块，用以进行HTML格式文件的创建、修改和删除；

Javascript文件管理模块，用以进行Javascript格式文件的创建、修改和删除；

CSS文件管理模块，用以进行CSS代码的录入、修改和保存；

移动应用编译引擎模块，用以在移动应用导出时对移动应用项目进行编译；

移动应用导出模块，用以将移动应用导出成移动应用部署包。

较佳地，所述的移动应用发布平台包括：

移动应用上传模块，用以基于Web将移动应用上传；

移动应用管理模块，用以对上传的移动应用进行管理；

移动应用发布模块，用以对外提供移动应用的下载渠道。

较佳地，所述的移动客户端包括：

更新引擎模块，用以从所述的移动应用发布平台下载移动应用到客户端；

Javscript引擎模块，用以解析、加载和运行Javascript代码；

CSS引擎模块，用以解析、加载CSS代码；

Bridge模块，用以进行Javascript代码和原生代码之间的通讯；

Widget管理器，用以加载和管理Widget；

UI模型模块，用以对移动应用的界面进行描述；

UI渲染引擎模块，用以根据UI模型，原生的UI控件，渲染出原生的UI界面。

本发明还涉及一种通过所述的系统基于原生开发语言实现跨平台应用开发的方法，其特 征在于，所述的方法包括以下步骤：

(1)所述的图形化移动应用开发工具进行移动应用的开发；

(2)所述的图形化移动应用开发工具进行移动应用的编译导出；

(3)所述的移动应用发布平台将移动应用向外发布；

(4)所述的移动客户端从所述的移动应用发布平台上下载并运行移动应用。

较佳地，所述的图形化移动应用开发工具进行移动应用的开发，包括以下步骤：

(1-1)图形化移动应用开发工具读取控件提示配置文件后使用xml格式解析器对所述的 提示配置文件进行解析并于内存中创建控件提示属性和接口提示模型；

(1-2)图形化移动应用开发工具读取控件编译配置文件后使用xml格式解析器对所述的 编译配置文件进行解析生成控件编译模型；

(1-3)开发人员进行移动应用开发；

(1-4)图形化移动应用开发工具根据用户创建项目操作在磁盘上创建移动项目录结构；

(1-5)图形化移动应用开发工具根据用户创建文件创造在移动项目录中创建相应的文 件。

较佳地，所述的图形化移动应用开发工具进行移动应用的编译导出，包括以下步骤：

(2-1)图形化移动应用开发工具根据用户导出操作请求获取待编译移动应用项目的存放 目录；

(2-2)图形化移动应用开发工具创建临时目录以存放编译的中间产物；

(2-3)图形化移动应用开发工具遍历项目目录，在临时目录中创建相同的目录结构，并 且把移动项目中除HTML文件和Css文件外的其余文件拷贝到对应的临时目录中；

(2-4)图形化移动应用开发工具对HTML文件和CSS文件进行编译操作；

(2-5)图形化移动应用开发工具对编译临时目录进行压缩生成可用于发布的移动应用发 布文件。

较佳地，所述的移动应用发布平台将移动应用向外发布，包括以下步骤：

(3-1)用户访问所述的移动应用发布平台的移动应用上传界面；

(3-2)移动应用发布平台接收上传文件并在磁盘上保存上传文件；

(3-3)移动应用发布平台在数据库表中记录发布移动应用的信息。

较佳地，所述的移动客户端下载并运行移动应用，包括以下步骤：

(4-1)移动客户端从所述的移动应用发布平台下载移动应用文件；

(4-2)移动客户端对下载的移动应用文件进行解压至移动应用端应用目录；

(4-3)移动客户端解析CSS编译文件并在内存中形成CSS模型；

(4-4)移动客户端读取移动应用配置文件，从配置文件中获取移动应用的首页URL；

(4-5)移动客户端对首页URL进行转换，转换成移动客户端本地的文件路径；

(4-6)移动客户端根据首页文件路径读取移动客户端文件中的代码；

(4-7)移动客户端运行读取的文件中的代码，在Javascript引擎模块中形成界面控件模 型树；

(4-8)移动客户端在Javascript引擎模块中把界面控件模型树通过JSON序列化成字符 串并调用bridge通道，把序列化的字符串传递给原生渲染引擎；

(4-9)移动客户端对json字串符反序列化，在原生端形成界面控件模型树；

(4-10)移动客户端采用原生渲染引擎模块遍历控件模型树，依次创建原生控件；

(4-11)移动客户端采用原生渲染引擎模块调用客户端系统接口，把渲染完成的整个原 生控件实例界面添加到系统界面上；

(4-12)移动客户端显示移动应用界面。

采用了该发明中的基于原生开发语言实现跨平台应用开发的系统及方法，由于提供了基 于HTML、Javascript、CSS的移动应用开发工具，通过该工具开发移动应用，在应用导出时 对HTML、Javscript、CSS文件进行编译；然后由移动客户端下载和运行。移动客户端运行 时先由Javascript引擎加载和运行Javascript代码，形成界面描述模型；再由原生渲染引擎创 建由原生控件组成的界面。本方法不仅降低了移动应用开发的复杂度、使移动应用开发简单 高效，只需开发一套代码，就可以运行在多种移动平台、极大的提高了移动应用的开发效率、 降低了代码维护的成本。而且，移动应用在运行时完全生成原生UI控件，移动应用使用者操 作的是由原生控件组成的功能页面，从而为使用者带来最佳的用户体验。另外，本发明使还 使用了增量更新技术，让移动应用更新更加方便快捷、节省更新需要的网络流量，具有更广 泛的应用范围。

附图说明

图1为本发明的基于原生开发语言实现跨平台应用开发的系统的结构示意图。

图2为本发明的移动项目的项目目录结构示意图。

图3为本发明的移动应用的编译导出的流程图。

图4为本发明的移动应用在客户端运行的流程图。

具体实施方式

为了能够更清楚地描述本发明的技术内容，下面结合具体实施例来进行进一步的描述。

实现该利用移动应用原生开发语言实现跨平台应用开发的系统，包括图形化移动应用开 发工具，移动应用发布平台，和移动客户端。(图1)

图形化的移动应用开发工具提供移动应用的开发和移动应用的编译导出能力，主要包括 移动应用项目管理模块、HTML文件管理、Javascript文件管理、CSS文件管理、移动应用编 译引擎、移动应用导出模块。

所述移动应用管理模块提供移动应用的创建、修改和删除功能。通过移动应用项目创建 功能可以创建移动应用项目目录结构。(图2)

所述HTML文件管理提供HTML格式文件创建、修改、删除的功能，并且提供HTML 编辑器对HTML文件进行录入、修改和保存。

所述Javascript文件管理提供Javascript格式文件创建、修改、删除的功能，并且提供 Javascript编辑器对Javascript文件进行录入、修改和保存。

所述CSS文件编辑器提供了CSS代码的录入、修改和保存功能。

所述移动应用编译引擎在移动应用导出时，对移动应用项目进行编译，把项目中的HTML 文件和css文件编译成中间代码。

所述移动应用导出模块提供移动应用导出功能，把移动项目导出成可以移动应用部署包。

移动应用发布平台主要提供移动应用发布功能，在移动应用开发平台上开发的移动应用 通过移动应用发布平台向外发布，包括移动应用上传模块、移动应用管理模块、移动应用发 布模块。

所述移动应用上传模块提供基于Web的移动上传能力。

所述移动应用管理模块提供对上传的移动应用管理能力，包括应用版本管理，更新管理， 发布管理。

所述移动应用发布模块对外提供移动应用的下载能力。

移动客户端是移动应用的运行容器，移动客户端为IOS和Android两个版本，两个版本 具有相同的功能和模块，分别运行在IOS操作系统和Android操作系统上。移动客户端负责 下载、解析、加载、运行移动应用。移动客户端包括移动应用更新引擎，Javscript引擎，CSS 引擎、Bridge模块、Widget管理器、UI模型、UI渲染引擎。

所述更新引擎负责从发布平台下载移动应用到客户端。

所述Javscript引擎负责解析、加载和运行Javascript代码。

所述CSS引擎负责解析、加载CSS代码。

所述Bridge模块负责Javascript和原生代码之间的通讯。提供了Javascript调用原生代码 和原生代码调用Javascript代码的通道。

所述Widget管理器负责加载和管理Widget模型。

所述UI模型负责对移动应用的界面进行描述。

所述UI渲染引擎负责根据UI模型，原生的UI控件，渲染出原生的UI界面。

实现该利用移动应用原生开发语言实现跨平台应用开发的方法，包括移动应用开发、移 动应用导出、移动应用发布和移动应用运行四个操作步骤。

所述的移动应用开发操作包括以下处理步骤：

(1)用户启动开发工具。

(2)开发工具进行系统初始化操作。

(3)系统读取控件提示配置文件,使用xml格式解析器对文件进行解析，然后在内存中 创建控件提示属性和接口提示模型。控件属性和接口提示模型用于在使用HTML文件编译器 进行开发时，对输入的标签和javscript对象的属性和接口进行提示，提高代码录入的效率和 速度。属性提示模型包括标签名称、属性、属性缺省值。接口提示模型包括对象类型，接口 名称，参数名称。

(4)系统读取控件编译配置文件，使用xml格式解析器对文件进行解析，解析后生控件 编译模型。控件编译模型包括控件类型、控件名称、控件编译模板文件。控件编译模板文件 是指编译控件所需要的velecity编译模板。Velocity是一个基于java的模板引擎(template  engine)。它允许任何人仅仅使用简单的模板语言(template language)来引用由java代码定义 的对象。

(5)开发人员进行移动应用开发，其主要流程是创建移动项目，创建和编辑HMTL文 件、javascript文件和CSS文件，导入图片等其它资源。

(6)系统根据用户创建项目操作，在磁盘上创建移动项目录结构。

(7)系统根据用户创建HTMl操作，移动项目录中创建HTML文件。

(8)系统根据用户创建CSS文件操作，移动项目录中创建CSS文件。

(9)系统根据用户创建Javascript操作，移动项目录中创建Javascript文件。

所述移动应用导出操作包括以下处理步骤：

(1)用户使用移动应用开发平台完成移动应用的开发，向开发平台提交应用导出操作；

(2)系统接收用户导出操作请求，获取待编译移动应用项目的存放目录。

(3)系统创建编译临时目录，用于存放编译的中间产物。

(4)系统遍历项目目录，在临时目录中创建相同的目录结构，并且把移动项目中除HTML 文件和CSS文件外的其余文件拷贝到对应的临时目录中。

(5)系统对HTML文件进行编译操作。

(a)系统遍历项目读取一个HTML文件。

(b)系统使用HTML语法解析器，对HTML文件进行HTML语法解析，形成界面模型 树。

(c)系统对界面模型树进行遍历，依次把控件编译成相对应的目标代码，具体过程如下：

(i)系统从界面模型树上获取一个控件模型，从控件模型中获取控件类型。

(ii)系统根据类型，调用编译管理器接口，获取控件模型对应用的编译模板文件路径。

(iii)系统读取控件编译模板文件，调用Velecity编译引擎的编译接口，把控件模型作为 输入参数，获得编译的目标代码。

(iv)重复步骤i，编译完整棵模型树，获取HMTL文件完整的编译目标代码。

(d)系统把目标代码保存成文件，拷贝到临时目录中。

(e)重复步骤a，直至编译完成个项目中的HTML文件。

(6)系统对CSS文件进行编译操作。

(a)系统遍历项目读取CSS文件。

(b)系统使用CSS解析器，对CSS文件进行CSS语法解析，形成CSS模型。

(c)系统对CSS模型进行JSON序列化，形成JSON字符串。

(d)系统把JSON字符串保存成文件。

(e)重复步骤a,直至编译完成所有CSS文件

(7)系统对编译临时目录进行压缩，生成可用于发布的移动应用发布文件。

所述移动应用发布操作包括以下处理步骤：

(a)用户通过浏览器访问发布平台上的移动应用上传页面，选择要上传的移动应用发布 文件，点击上传按钮。

(b)发布平台接收上传文件，并在磁盘上保存上传文件。

(c)发布平台在数据库表中记录发布应用的信息，包括：应用名称、应用大小、应用版 本。

(d)发布平台等待客户端下载移动应用。

所述移动应用运行操作包括以下处理步骤：

(1)移动客户端从发布服务器下载移动应用文件。

(2)移动客户端对下载的移动应用文件进行解压，解压到客户端应用目录。

(3)移动客户端初始化CSS引擎。

(a)移动客户端遍历加载应用目录中的CSS编译文件。

(b)移动客户端用JSON解析器，对CSS编译文件进行解析，在内存中形成CSS模型， CSS模型包括CSS类名、CSS属性。

(4)移动客户端读取移动应用配置文件，从配置文件中获取移动应用的首页URL。

(5)移动客户端对首页URL进行转换，转换成客户端本地的文件路径。

(6)移动客户端根据首页文件路径读取客户端文件中的代码。

(7)移动客户端调用Javascript引擎运行接口，运行读取的文件中的代码，在Javascript 引擎中形成界面控件模型树。

(8)Javascript引擎把界面控件模型树通过JSON序列化成字符串。

(9)Javascript引擎调用bridge通道，把序列化的字符串传递给原生渲染引擎。

(10)移动客户端调用原生渲染引擎接口对json字串符反序列化，在原生端形成界面控 件模型树。

(11)原生渲染引擎遍历控件模型树，依次创建原生控件。

(a)原生渲染引擎从控件树上获取一个控件模型对象。

(b)原生渲染引擎调用模型对象的接口，从模型中获取控件类型。

(c)原生渲染引擎根据控件类型，调用widget管理器接口，创建一个原生控件实例。

(d)原生渲染引擎调用控件模型对象接口，获取模型上的所有属性配置

(e)原生渲染引擎根据属性名称，依次调用原生控件实例对象接口把属性设置到原生控 件实例对象上。

(f)原生渲染引擎根据控件模型中的CSS类名，调用CSS接引擎接口，从CSS引擎中 获取CSS属性配置。

(g)原生渲染引擎根据CSS属性名称，依次调用原生控件实例接口把CSS属性设置到 原生控件实例对象上。

(h)重复过程a，直至整个树上的控件模型都渲染完成

(12)原生渲染引擎调用客户端系统接口，把渲染完成的整个原生控件实例界面添加到 系统界面上。

(13)移动客户端显示界面。

在实际运用中，本发明实施过程如下：

1)开发工具初始化，操作系统调用Shell.Start()接口。

2)开发工具加载控件提示模型。提示模型管理器接口如下：

系统调用PromptManager的load接口加载所有控件提示配置，调用parseFile接口对提示 配置文件进行解析，最终形成一个Map结构，控件类型名称作为Map中的key,map中对应的 value值是Prompt对象。

控件提示模型文件格式如下：

3)开发工具加载控件编译模型。提示模型管理器接口如下：

系统调用PromptManager的load接口加载所有控件提示配置，调用parseFile接口对提示 编译文件进行解析，最终形成一个Map结构，控件类型名称作为Map中的key,map中对应的 value值是控件的编译模板文件。控件编译模板文件是基于VeleCity语法格式的文件，以<div> 控件为例，其编译模板文件内容为：

4)开发人员在应用开发过程中，创建项目，创建HTML，Css,Javascript文件操作，都通 过调用资源管理器接口完成,资源管理器接口实现如下：

开发人员创建移动应用时，系统调用ResourceManager.createProject创建一个应用，开发 人员创建HTML文件时，系统调用ResouceManager.createHtmlFile创建文件。

5)移动项目开发完成后编译导出，导出管理器接口实现如下：

开发人员执行导出操作，系统调用ExportManager的export接口，开始导出。调用 createTmpDir接口创建临时目录，再调用copyResource接口，把项目资源copy到临时目录， 调用compileHtml和compleCss接口对HTML文件和CSS文件进行编译。最后，调用zipFile 接口对零时目录进行压缩打包。

6)HTML文件编译过程如下，首先调用HtmlAnalyzer的doanalyz接口进行分析，形成 Control Tree,然后对ControlTree进行遍历，获取每一个cortal调用HtmlCompileManager的 complie接口进行编译。

输入HTMl文件内容为：

<html>

<body>

<div height＝”200”width＝”200”></div>

</body>

</html>

编译后结果为：

New Emp.Panel({height:200,width:200})；

7)CSS文件编译过程如下，首先调用CSSAnalyzer的doanalyz接口进行分析，形成CSS Model,然后对CSSModel进行Json序列化。

输入CSS文件内容为：

.MyDivCss

{color:blue；

background:red}

编译后结果为：

{MyDivCss:{color:blue,background:red}}

8)客户端运行后，下载过程如下：客户端调用下载管理器DownloadManager的download 接口，从移动发布平台下载移动应用。再调用DeployManager的Deploy接口部署移动应用。

9)客户端调用ConfigManager的getEntryUrl接口从配置文件中获取移动入口页面的地址， 再调用ConverManage的convertUrl接口转换为客户端本地地址。

10)客户端读取入口文件代码，然后调用JavascriptEngine的Eval接口执行， JavascriptEngine执行后，形javascript对象，然后调用JavascriptEngine调用javasript对象的 toJson接口，把javascript对象序列化成json字符串。

11)JavascriptEngine调用Briger的toNative接口，把json字符串传递给原生渲染引擎。

12)原生渲染引擎接口定义如下：

客户端设备RdnerEnginer的pasre接口，对json字符串地反序列化，在原生端形成json 模型，然后调用render接口，对json模型进行原生渲染。

以输入的javascript代码:

New Panel({width:200,height:300})

实际运行的原生代码为：

LinerLayout l＝New LinerLayout()；

l.setLayoutParams(new LinerLayout.LayoutParams(200,300))；

13)客户端调用setContent接口，把渲染的界面再客户端显示。

采用了该发明中的基于原生开发语言实现跨平台应用开发的系统及方法，由于提供了基 于HTML、Javascript、Css的移动应用开发工具，通过该工具开发移动应用，在应用导出时 对HTML、Javscript、Css文件进行编译；然后由移动客户端下载和运行。移动客户端运行时 先由Javascript引擎加载和运行Javascript代码，形成界面描述模型；再由原生渲染引擎创建 由原生控件组成的界面。本方法不仅降低了移动应用开发的复杂度、使移动应用开发简单高 效，只需开发一套代码，就可以运行在多种移动平台、极大的提高了移动应用的开发效率、 降低了代码维护的成本。而且，移动应用在运行时完全生成原生UI控件，移动应用使用者操 作的是由原生控件组成的功能页面，从而为使用者带来最佳的用户体验。另外，本发明使还 使用了增量更新技术，让移动应用更新更加方便快捷、节省更新需要的网络流量，具有更广 泛的应用范围。

在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以作出各种 修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限 制性的。