用户界面的开发装置和开发方法与流程

本发明涉及软件开发技术领域，具体而言，涉及一种用户界面的开发装置和一种用户界面的开发方法。

背景技术：

移动应用软件作为直接与用户交互的窗口，已经逐渐引起了厂商和开发者的重视，开发出具有高认可度的移动应用软件，已经成为了移动平台占据传统市场的主要手段。

移动应用开发类似于网页应用开发，起源于更为传统的软件开发。但其关键在于移动应用通常利用一个具体移动设备提供的独特性能编写软件，目前主流的移动开发平台有IOS和Android，大多数移动软件开发都是基于IOS/Android SDK(Software Development Kit，软件开发工具包)提供丰富的原生开发API(Application Programming Interface，应用程序编程接口)进行软件开发，原生开发API提供了很多有用的界面框架和业务框架。

由于移动应用主要运行在手机和PAD(平板电脑)等移动设备上，考虑到移动设备性能和用户体验，目前主流移动应用开发还是选择原生开发方式，采用原生开发方式会遇到以下问题：

1、开发成本高

智能手机是在最近几年达到快速普及，移动应用开发人员紧缺，在各大公司对移动开发人员的争夺下，开发人员成本急剧上升；目前移动开发平台系统繁多，从经济角度来说，要同时开发和维护多个平台的应用程序，将花费企业巨大的人力和时间成本。

2、跨平台兼容问题

各种移动开发平台技术的不兼容性，将直接为移动平台应用的发展带 来重大的阻碍。从应用开发的角度来说，同样的程序逻辑却不得不在多个平台上，使用不同的语言和API重复编码；从代码维护的角度来说，针对同一个项目需要同时维护多套代码，一旦程序逻辑发生变化，将导致大规模的代码修改与回归测试。

3、应用更新周期长

目前国内Android的应用商店有几十个，这令开发者维护和推广应用的成本很高，要升级一个软件产品需要同时维护多个应用发布平台。IOS虽然只有苹果商店一个平台，但是应用审核上线时间一般在2-3周时间，对于一个瞬息变化的移动互联网应用，更新时效性太差。

因此，如何能够有效提供软件开发的效率成为亟待解决的技术问题。

技术实现要素：

本发明正是基于上述技术问题至少之一，提出了一种新的用户界面的开发方案，可以减少开发用户界面的工作量，有利于提高用户界面的开发效率。

有鉴于此，本发明提出了一种用户界面的开发装置，包括：划分单元，用于将待开发的用户界面划分为统一开发部分和独立开发部分；获取单元，用于获取用户编写的与所述统一开发部分相对应的基础组件和通过指定开发平台编写的与所述独立开发部分相对应的原生组件；生成单元，用于根据所述基础组件和所述原生组件，生成与所述指定开发平台相对应的用户界面。

在该技术方案中，通过将待开发的用户界面划分为统一开发部分和独立开发部分，并获取用户编写的基础组件和通过制定开发平台编写的原生组件，以根据基础组件和原生组件生成与指定开发平台相对应的用户界面，使得在需要开发用户界面的多个平台版本时，可以通过不同的开发平台对待开发的用户界面的独立开发部分进行开发，进而根据基础组件和对独立开发部分开发得到的原生组件生成不同开发平台对应的用户界面，避免了现有技术中完全通过原生开发方式对用户界面进行开发而造成开发难度高、维护成本高、软件更新周期长等问题，在一定程度上减少了用户界 面的开发工作量，有利于提高用户界面的开发效率。

在上述技术方案中，优选地，所述统一开发部分为HTML开发部分，所述基础组件为HTML静态页面；

所述生成单元，包括：构建单元，用于构建网站服务器环境；处理单元，用于将所述HTML静态页面嵌入所述网站服务器环境中，以完成所述用户界面的基础功能的开发；调试单元，用于通过与所述指定开发平台之间的交互接口，将所述用户界面的基础功能与所述原生组件进行对接调试，以生成与所述指定开发平台相对应的用户界面。

在上述任一技术方案中，优选地，所述划分单元具体用于：根据所述待开发的用户界面包含的多个部分的可变性和/或性能要求，将所述待开发的用户界面划分为所述统一开发部分和所述独立开发部分。

在上述任一技术方案中，优选地，所述划分单元具体还用于：将所述多个部分中固定不变的部分和/或性能要求大于或等于预定需求的部分划分为所述独立开发部分，并将所述多个部分中除所述独立开发部分的其它部分划分为所述统一开发部分。

在该技术方案中，通过将多个部分中固定不变的部分和/或性能要求大于或等于预定需求的部分划分为独立开发部分，并将除独立开发部分之外的其它部分划分为统一开发部分，使得在需要调整用户界面时，无需在每个开发平台上均进行调整，仅需对统一开发部分进行调整即可，有效降低了用户界面开发的工作量。

在上述任一技术方案中，优选地，所述指定开发平台包括：IOS开发平台、Android开发平台、Windows Phone开发平台、第三方应用提供的开发平台。其中，第三方应用可以是微信、twitter等。

根据本发明的另一方面，还提出了一种用户界面的开发方法，包括：将待开发的用户界面划分为统一开发部分和独立开发部分；获取用户编写的与所述统一开发部分相对应的基础组件和通过指定开发平台编写的与所述独立开发部分相对应的原生组件；根据所述基础组件和所述原生组件，生成与所述指定开发平台相对应的用户界面。

在该技术方案中，通过将待开发的用户界面划分为统一开发部分和独 立开发部分，并获取用户编写的基础组件和通过制定开发平台编写的原生组件，以根据基础组件和原生组件生成与指定开发平台相对应的用户界面，使得在需要开发用户界面的多个平台版本时，可以通过不同的开发平台对待开发的用户界面的独立开发部分进行开发，进而根据基础组件和对独立开发部分开发得到的原生组件生成不同开发平台对应的用户界面，避免了现有技术中完全通过原生开发方式对用户界面进行开发而造成开发难度高、维护成本高、软件更新周期长等问题，在一定程度上减少了用户界面的开发工作量，有利于提高用户界面的开发效率。

在上述技术方案中，优选地，所述统一开发部分为HTML开发部分，所述基础组件为HTML静态页面；根据所述基础组件和所述原生组件，生成与所述指定开发平台相对应的用户界面的步骤，具体包括：构建网站服务器环境；将所述HTML静态页面嵌入所述网站服务器环境中，以完成所述用户界面的基础功能的开发；通过与所述指定开发平台之间的交互接口，将所述用户界面的基础功能与所述原生组件进行对接调试，以生成与所述指定开发平台相对应的用户界面。

在上述任一技术方案中，优选地，将待开发的用户界面划分为统一开发部分和独立开发部分的步骤，具体包括：根据所述待开发的用户界面包含的多个部分的可变性和/或性能要求，将所述待开发的用户界面划分为所述统一开发部分和所述独立开发部分。

在上述任一技术方案中，优选地，将所述多个部分中固定不变的部分和/或性能要求大于或等于预定需求的部分划分为所述独立开发部分，并将所述多个部分中除所述独立开发部分的其它部分划分为所述统一开发部分。

在该技术方案中，通过将多个部分中固定不变的部分和/或性能要求大于或等于预定需求的部分划分为独立开发部分，并将除独立开发部分之外的其它部分划分为统一开发部分，使得在需要调整用户界面时，无需在每个开发平台上均进行调整，仅需对统一开发部分进行调整即可，有效降低了用户界面开发的工作量。

在上述任一技术方案中，优选地，所述指定开发平台包括：IOS开发 平台、Android开发平台、Windows Phone开发平台、第三方应用提供的开发平台。

通过以上技术方案，可以将待开发的用户界面划分为统一开发部分和独立开发部分，避免了通过不同的开发平台对用户界面的所有部分分别进行开发而造成开发难度高、维护成本高、软件更新周期长等问题，减少开发用户界面的工作量，有利于提高用户界面的开发效率。

附图说明

图1示出了根据本发明的实施例的用户界面的开发装置的示意框图；

图2示出了根据本发明的实施例的用户界面的开发方法的示意流程图；

图3示出了根据本发明的实施例的跨平台用户界面的快速开发方法的示意流程图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。

图1示出了根据本发明的实施例的用户界面的开发装置的示意框图。

如图1所示，根据本发明的实施例的用户界面的开发装置100，包括：划分单元102、获取单元104和生成单元106。

其中，划分单元102，用于将待开发的用户界面划分为统一开发部分和独立开发部分；获取单元104，用于获取用户编写的与所述统一开发部分相对应的基础组件和通过指定开发平台编写的与所述独立开发部分相对应的原生组件；生成单元106，用于根据所述基础组件和所述原生组件，生成与所述指定开发平台相对应的用户界面。

在该技术方案中，通过将待开发的用户界面划分为统一开发部分和独立开发部分，并获取用户编写的基础组件和通过制定开发平台编写的原生组件，以根据基础组件和原生组件生成与指定开发平台相对应的用户界面，使得在需要开发用户界面的多个平台版本时，可以通过不同的开发平台对待开发的用户界面的独立开发部分进行开发，进而根据基础组件和对独立开发部分开发得到的原生组件生成不同开发平台对应的用户界面，避免了现有技术中完全通过原生开发方式对用户界面进行开发而造成开发难度高、维护成本高、软件更新周期长等问题，在一定程度上减少了用户界面的开发工作量，有利于提高用户界面的开发效率。

在上述技术方案中，优选地，所述统一开发部分为HTML开发部分，所述基础组件为HTML静态页面；

所述生成单元106，包括：构建单元1062，用于构建网站服务器环境；处理单元1064，用于将所述HTML静态页面嵌入所述网站服务器环境中，以完成所述用户界面的基础功能的开发；调试单元1066，用于通过与所述指定开发平台之间的交互接口，将所述用户界面的基础功能与所述原生组件进行对接调试，以生成与所述指定开发平台相对应的用户界面。

在上述任一技术方案中，优选地，所述划分单元102具体用于：根据所述待开发的用户界面包含的多个部分的可变性和/或性能要求，将所述待开发的用户界面划分为所述统一开发部分和所述独立开发部分。

在上述任一技术方案中，优选地，所述划分单元102具体还用于：将所述多个部分中固定不变的部分和/或性能要求大于或等于预定需求的部分划分为所述独立开发部分，并将所述多个部分中除所述独立开发部分的其它部分划分为所述统一开发部分。

在该技术方案中，通过将多个部分中固定不变的部分和/或性能要求大于或等于预定需求的部分划分为独立开发部分，并将除独立开发部分之外的其它部分划分为统一开发部分，使得在需要调整用户界面时，无需在每个开发平台上均进行调整，仅需对统一开发部分进行调整即可，有效降低了用户界面开发的工作量。

在上述任一技术方案中，优选地，所述指定开发平台包括：IOS开发平台、Android开发平台、Windows Phone开发平台、第三方应用提供的开发平台。其中，第三方应用可以是微信、twitter等。

图2示出了根据本发明的实施例的用户界面的开发方法的示意流程图。

如图2所示，根据本发明的实施例的用户界面的开发方法，包括：

步骤202，将待开发的用户界面划分为统一开发部分和独立开发部分；

步骤204，获取用户编写的与所述统一开发部分相对应的基础组件和通过指定开发平台编写的与所述独立开发部分相对应的原生组件；

步骤206，根据所述基础组件和所述原生组件，生成与所述指定开发平台相对应的用户界面。

在该技术方案中，通过将待开发的用户界面划分为统一开发部分和独立开发部分，并获取用户编写的基础组件和通过制定开发平台编写的原生组件，以根据基础组件和原生组件生成与指定开发平台相对应的用户界面，使得在需要开发用户界面的多个平台版本时，可以通过不同的开发平台对待开发的用户界面的独立开发部分进行开发，进而根据基础组件和对独立开发部分开发得到的原生组件生成不同开发平台对应的用户界面，避免了现有技术中完全通过原生开发方式对用户界面进行开发而造成开发难度高、维护成本高、软件更新周期长等问题，在一定程度上减少了用户界面的开发工作量，有利于提高用户界面的开发效率。

在上述技术方案中，优选地，所述统一开发部分为HTML开发部分，所述基础组件为HTML静态页面；根据所述基础组件和所述原生组件，生成与所述指定开发平台相对应的用户界面的步骤，具体包括：构建网站服务器环境；将所述HTML静态页面嵌入所述网站服务器环境中，以完成所述用户界面的基础功能的开发；通过与所述指定开发平台之间的交互接口，将所述用户界面的基础功能与所述原生组件进行对接调试，以生成与所述指定开发平台相对应的用户界面。

在上述任一技术方案中，优选地，将待开发的用户界面划分为统一开 发部分和独立开发部分的步骤，具体包括：根据所述待开发的用户界面包含的多个部分的可变性和/或性能要求，将所述待开发的用户界面划分为所述统一开发部分和所述独立开发部分。

在上述任一技术方案中，优选地，将所述多个部分中固定不变的部分和/或性能要求大于或等于预定需求的部分划分为所述独立开发部分，并将所述多个部分中除所述独立开发部分的其它部分划分为所述统一开发部分。

在该技术方案中，通过将多个部分中固定不变的部分和/或性能要求大于或等于预定需求的部分划分为独立开发部分，并将除独立开发部分之外的其它部分划分为统一开发部分，使得在需要调整用户界面时，无需在每个开发平台上均进行调整，仅需对统一开发部分进行调整即可，有效降低了用户界面开发的工作量。

在上述任一技术方案中，优选地，所述指定开发平台包括：IOS开发平台、Android开发平台、Windows Phone开发平台、第三方应用提供的开发平台。

以下以通过HTML5(HTML即Hyper Text Markup Language，超文本标记语言)技术对上述的统一开发部分进行编写为例详细说明本发明的技术方案。

在该实施例中，基于移动设备的跨平台用户界面的快速开发方法，包括以下步骤：

1、根据用户界面的开发需求，将待开发的用户界面分离为HTML5开发部分与原生开发部分(如通过IOS平台、Android平台等进行开发的部分)。

2、根据需求编写HTML5静态页面，并搭建网站服务器环境，以及完成网站复杂功能组件开发。

3、将通过HTML5对HTML5开发部分编写好的HTML5静态页面模板套入网站，完成具体功能开发。

4、对于安卓平台：根据需求完成分解后的安卓端原生开发部分。

对于IOS平台：根据需求完成分解后的IOS端原生开发部分。

5、对于安卓平台：通过JS(JavaScript，一种脚本语言)接口实现HTML5静态页面与原生代码的交互，并进行交互部分的接口调试，完成安卓平台的用户界面开发。

对于IOS平台：通过JS(JavaScript，一种脚本语言)接口实现HTML5静态页面与原生代码的交互，并进行交互部分的接口调试，完成IOS平台的用户界面开发。

对于其它平台的用户界面开发过程与上述类似，如对于微信公众账号，则可以通过绑定微信公众账号菜单，完成微信端的界面开发。

6、将开发后的用户界面进行整体功能的联调。

其中，上述步骤1在进行分离时，可以将可灵活变换部分分离出来作为HTML5开发部分，将固定不变或对性能体验要求较高的功能页面作为原生开发部分。

在上述步骤2中，编写HTML5静态页面可以引入第三方框架，如phonegap、jquery mobile、sencha touch等。搭建网站服务器环境时，可以使用tomcat服务、mysql数据库和springmvc框架结构等。

在上述步骤3中，可以采用freemarker模板技术进行静态页面嵌套，并引入开发好的模块组件。

上述过程可参照图3所示。

如图3所示，根据本发明的实施例的跨平台用户界面的快速开发方法，包括：

步骤302，根据用户界面的开发需求，进行功能分离，如分离为HTML5开发部分和原生开发部分。

步骤304，进行网站复杂组件的开发。

步骤306，进行HTML5静态页面的开发。

步骤308，进行JS桥接库的开发。其中，JS桥接库主要负责处理HTML5与原生代码之间的交互等。

步骤310，进行安卓部分的开发。即当需要开发安卓平台的用户界面时，通过安卓平台完成原生开发部分。

步骤312，进行IOS部分的开发。即当需要开发IOS平台的用户界面 时，通过IOS平台完成原生开发部分。

步骤314，综合步骤304、步骤306和步骤308的开发结果完成HTML5的页面套用。

步骤316，进行网站部署。

步骤318，针对安卓平台，进行JS接口的开发。

步骤320，针对IOS平台，进行JS接口的开发。

步骤322，完成用户界面的功能联调。

其中，若需要开发其它平台的用户界面，则流程与上述开发IOS和安卓平台的过程类似。

以上结合附图详细说明了本发明的技术方案，本发明提出了一种新的用户界面的开发方案，可以将待开发的用户界面划分为统一开发部分和独立开发部分，避免了通过不同的开发平台对用户界面的所有部分分别进行开发而造成开发难度高、维护成本高、软件更新周期长等问题，减少开发用户界面的工作量，有利于提高用户界面的开发效率。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。