CN104572042B - 移动终端设备的跨平台中间件装置及其实现方法 - Google Patents

Abstract

本发明实施例提供了一种移动终端设备的跨平台中间件装置及其实现方法。该装置主要包括：系统层单元向移动终端设备提供跨平台API，通过跨平台API接入移动终端设备；应用层单元通过超文本标记语言、样式文件和脚本语言构建并存储跨平台UI组件，根据移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数对标准UI组件进行渲染，将标准UI组件渲染成符合移动终端设备所应用的操作系统的原生态UI组件，对原生态UI组件进行显示。本发明可以屏蔽各种移动终端设备的操作系统API的复杂性，为移动终端提供一个完整的支撑环境，能够使用Web技术快速开发，同时获得近似原生应用的样式和用户体验，避免重复开发，开发者不需要学习不同开发语言。

Description

移动终端设备的跨平台中间件装置及其实现方法

技术领域

本发明涉及媒体通信技术领域，尤其涉及一种移动终端设备的跨平台中间件装置及其实现方法。

背景技术

随着通信技术的不断发展和移动终端设备的不断普及，对各种移动互联网应用和服务的需求也急剧增加。目前移动互联网主流的开发模式，一般是根据各个移动操作系统提供的开发库和开发环境，使用各个移动开发平台的原生开发语言进行开发。

然而，当前移动操作系统的种类繁多，仅主流移动操作系统就有三个之多（Android，iOS，Windows Phone）。每个移动开发平台提供不同的开发工具和API（Application Programming Interface，应用程序编程接口），开发者需要学习不同开发语言，不同开发工具，才能将同一个应用发布到不同平台。另外由于各种移动终端设备的硬件差异较大，需要针对不同屏幕分辨率，不同系统的特有操作习惯做单独定制，所以导致移动终端的应用开发门槛较高，开发周期长。

发明内容

本发明的实施例提供了一种移动终端设备的跨平台中间件装置及其实现方法，以实现。

本发明提供了如下方案：

一种移动终端设备的跨平台中间件装置，包括：

系统层单元，用于向移动终端设备提供跨平台应用程序编程接口API，通过所述跨平台API接入移动终端设备；

应用层单元，用于通过超文本标记语言、样式文件和脚本语言构建并存储跨平台标准用户接口界面UI组件，根据所述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数对所述标准UI组件进行渲染，将所述标准UI组件渲染成符合所述移动终端设备所应用的操作系统的原生态UI组件，对所述原生态UI组件进行显示。

所述的标准UI组件包括：列表、组合按钮、导航条、弹出对话框、滚动条和开关按钮。

所述的应用层单元包括：

标准UI组件管理单元，用于通过Html5、风格样式表CSS和脚本语言构建并存储跨平台标准UI组件；

渲染处理单元，用于根据所述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数，将所述标准UI组件渲染成符合所述移动终端设备所应用的操作系统的原生态UI组件；

原生态UI组件应用单元，用于通过显示屏显示所述原生态UI组件，根据所述移动终端设备的状态变化绑定系统事件和用户事件，将所述原生态UI组件绑定的数据源按照所述原生态UI组件的样式在所述显示屏上进行显示。

所述的系统层单元包括：

跨平台API构建模块，用于通过脚本语言构建跨平台API，向移动终端设备提供所述跨平台API；

移动终端设备接入模块，用于通过所述跨平台API接入移动终端设备；

跨平台API与原生态API互相调用模块，用于根据所述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数，以及所述跨平台API的接口特征，实现所述跨平台API与所述移动终端设备所应用的操作系统的原生态API之间的通信交互。

所述的跨平台API与原生态API互相调用模块，具体用于针对Android平台，跨平台API到原生态API的通信通过处理javascript输入提示函数的Java代码来实现，原生态API到跨平台API的通信通过轮询本地回调服务器的消息队列来实现；

针对iOS平台，跨平台API到原生态API的通信通过拦截UIWebView中页面装载请求来实现，原生态API到跨平台API的通信是通过UIwebview的stringByEvaluatingJavascriptFromString方法实现；

针对Windows Phone7平台，跨平台API到原生态API的通信通过Webview中的window.extrenal.Notify()方法来实现的，原生态API到跨平台API的通信通过本地的WebBrower对象的InvokeScript()方法来实现。

所述的系统层单元还包括：

第三方插件扩展单元：用于获得本地原生功能的javascript钩子文件，用原生开发语言编写的代码和移动终端设备进行交互。

一种移动终端设备的跨平台中间件装置的实现方法，包括：

通过超文本标记语言、样式文件和脚本语言构建并存储跨平台标准用户接口界面UI组件；

向移动终端设备提供跨平台应用程序编程接口API，通过所述跨平台API接入移动终端设备；

根据所述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数对所述标准UI组件进行渲染，将所述标准UI组件渲染成符合所述移动终端设备所应用的操作系统的原生态UI组件，对所述原生态UI组件进行显示。

所述的通过超文本标记语言、样式文件和脚本语言构建并存储跨平台标准用户接口界面UI组件，包括：

通过Html5、风格样式表CSS和脚本语言构建并存储跨平台标准UI组件。

所述的对所述原生态UI组件进行显示之后，还包括：

通过显示屏显示所述原生态UI组件后，根据所述移动终端设备的状态变化绑定系统事件和用户事件，将所述原生态UI组件绑定的数据源按照所述原生态UI组件的样式在所述显示屏上进行显示。

所述的向移动终端设备提供跨平台应用程序编程接口API，通过所述跨平台API接入移动终端设备，包括：

通过脚本语言构建跨平台API，向移动终端设备提供所述跨平台API；

通过所述跨平台API接入移动终端设备；

根据所述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数，以及所述跨平台API的接口特征，实现所述跨平台API与所述移动终端设备所应用的操作系统的原生态API之间的通信交互。

所述的根据所述移动终端设备所应用的操作系统的Webview接口特点，实现所述跨平台API与所述移动终端设备所应用的操作系统的原生态API之间的通信交互，包括：

针对Android平台，跨平台API到原生态API的通信通过处理javascript输入提示函数的Java代码来实现，原生态API到跨平台API的通信通过轮询本地回调服务器的消息队列来实现；

针对iOS平台，跨平台API到原生态API的通信通过拦截UIWebView中页面装载请求来实现，原生态API到跨平台API的通信是通过UIwebview的stringByEvaluatingJavascriptFromString方法实现；

针对Windows Phone7平台，跨平台API到原生态API的通信通过Webview中的window.extrenal.Notify()方法来实现的，原生态API到跨平台API的通信通过本地的WebBrower对象的InvokeScript()方法来实现。

由上述本发明的实施例提供的技术方案可以看出，本发明实施例的跨平台中间件装置可以屏蔽各种移动终端设备的操作系统API的复杂性，为移动终端提供一个完整的支撑环境，能够使用Web技术快速开发，同时获得近似原生应用的样式和用户体验，避免重复开发，开发者不需要学习不同开发语言，不同开发工具，就能将同一个应用发布到不同平台，大大减轻开发者负担。本发明实施例的跨平台中间件装置具有简单，高效，可扩展性强的特点。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例一提供的一种移动终端设备的跨平台中间件装置的具体结构示意图，图中，系统层单元10，应用层单元20；

图2为本发明实施例二提供的一种移动终端设备的跨平台中间件装置的实现方法的处理流程图；

图3为本发明实施例二提供的一种跨平台API的实现类图。

具体实施方式

为便于对本发明实施例的理解，下面将结合附图以几个具体实施例为例做进一步的解释说明，且各个实施例并不构成对本发明实施例的限定。

本发明实施例使用一套代码在不同移动终端设备的平台上自动展示对应移动开发平台原生UI（USER INTERFACE，用户接口界面）组件的效果，同时提供视图导航，页面与数据分离机制，动态模板机制。

实施例一

该实施例提供了一种移动终端设备的跨平台中间件装置，其具体结构如图1所示，包括：

系统层单元，用于向移动终端设备提供跨平台API（Application ProgrammingInterface，应用程序编程接口），通过所述跨平台API接入移动终端设备；

应用层单元，用于通过HTML（超文件标示语言，HyperText Markup Language）样式文件和脚本语言构建并存储跨平台标准UI（USER INTERFACE，用户接口界面）组件，根据所述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数对所述标准UI组件进行渲染，将所述标准UI组件渲染成符合所述移动终端设备所应用的操作系统的原生态UI组件，对所述原生态UI组件进行显示。所述的标准UI组件可以包括：列表、组合按钮、导航条、弹出对话框、滚动条和开关按钮。

具体的，所述的应用层单元可以包括：

标准UI组件管理单元，用于通过Html5、CSS（Cascading Style Sheet，风格样式表）和javascript等脚本语言构建并存储跨平台标准UI组件；

渲染处理单元，用于根据所述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数，将所述标准UI组件渲染成符合所述移动终端设备所应用的操作系统的原生态UI组件；

从标准UI组件到原生态UI组件的渲染过程包括以下步骤：

对待渲染标准UI组件检查语法错误，如果发现存在语法错误，渲染过程结束；

获取当前操作系统平台参数；

初始化标准UI组件，指定类型ID，添加描述信息，分析依赖模块；

根据当前平台参数，为标准UI组件添加新的语义标签和功能标签，从父控件继承功能函数，绑定事件；

使用预设的CSS（Cascading Style Sheet，风格样式表）渲染当前UI标准组件，最终呈现出原生态UI组件的样式和功能操作模式。

原生态UI组件应用单元，用于通过显示屏显示所述原生态UI组件，根据所述移动终端设备的状态变化绑定系统事件和用户事件，将所述原生态UI组件绑定的数据源按照所述原生态UI组件的样式在所述显示屏上进行显示。

具体的，所述的系统层单元可以包括：

跨平台API构建模块，用于通过javascript等脚本语言构建跨平台API，向移动终端设备提供所述跨平台API；

移动终端设备接入模块，用于通过所述跨平台API接入移动终端设备；

跨平台API与原生态API互相调用模块，用于根据所述移动终端设备当前应用的操作系统的环境和版本等系统参数和开发平台的Webview接口特点等平台参数，以及所述跨平台API的接口特征，实现所述跨平台API与所述移动终端设备所应用的操作系统的原生态API之间的通信交互。

具体用于针对Android平台，跨平台API到原生态API的通信通过处理javascript输入提示函数的Java代码来实现，原生态API到跨平台API的通信通过轮询本地回调服务器的消息队列来实现；

针对iOS平台，跨平台API到原生态API的通信通过拦截UIWebView中页面装载请求来实现，原生态API到跨平台API的通信是通过UIwebview的stringByEvaluatingJavascriptFromString方法实现；

针对Windows Phone7平台，跨平台API到原生态API的通信通过Webview中的window.extrenal.Notify()方法来实现的，原生态API到跨平台API的通信通过本地的WebBrower对象的InvokeScript()方法来实现。

所述的系统层单元还可以包括：

第三方插件扩展单元：用于获得本地原生功能的javascript等脚本语言钩子文件，用原生开发语言编写的代码（如Java,Object-C和#C）和底层的移动终端设备进行交互。

在硬件实现上，上述系统层单元可以包括加速计、摄像头、对移动终端设备音频和视频的捕获功能的支持、罗盘、网络状态信息、移动终端设备通信录、移动终端设备操作系统信息、访问文件系统、获取地理位置，音频文件的录制或回放，本地化的通知机制、嵌入式数据库支持等。

实施例二

基于图1所示的移动终端设备的跨平台中间件装置，该实施例提供的一种移动终端设备的跨平台中间件装置的实现方法的处理流程如图2所示，包括如下的处理步骤：

步骤S210、通过跨平台中间件装置的系统层单元提供的跨平台API接入移动终端设备。

步骤S220、获得所述移动终端设备当前应用的操作系统的环境和版本等系统参数，如Android4.0或iOS6.1等，再获取上述移动终端设备所应用的开发平台的Webview接口特点等平台参数。

根据上述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数，以及所述跨平台API的接口特征，实现所述跨平台API与所述移动终端设备所应用的操作系统的原生态API之间的通信交互。

该实施例提供的一种跨平台API的实现类图如图3所示，其中针对不同移动终端设备的平台对开发者提供了统一的接口，但是底层实现方法由于平台差异，实现方法并不相同。

针对Android平台，基于WebView来渲染HTML；基于Plugin的模式来封装NativeAPI，包括javascript与原生态API互相调用的核心API的和开发者自己定制的第三方插件；以覆盖prompt方法的形式来实现Web端对Android端的调用；以XHR或JSONP的方式来实现Android端向Web端返回异步调用的结果。

针对iOS平台，跨平台API对本地原生态API的调用是异步的；由于命令队列的特殊性，一般情况下，跨平台API端发出的本地请求和iOS端响应请求不是紧邻的，后者经常是批量处理前者发出的请求；iOS本地服务执行完后，会主动执行javascript端设定的回调函数。

针对Windows Phone7，跨平台API到原生态API的通信通过Webview中的window.extrenal.Notify()方法来实现的，跨平台API端的window.extrenal.Notify()方法会触发原生系统的WebBrower对象的ScriptNotify事件，传给window.extrenal.Notify()的参数被封装在本地的RoutedEventArgs对象中，由ScriptNotify事件设定的回调函数进行处理；原生代码调用跨平台API的通信是通过本地的WebBrower对象的InvokeScript()方法来完成的；

步骤S230、判断跨平台中间件装置的开发者是否指定了开发平台参数，如果是，则执行步骤250；否则，执行步骤240。

步骤S240、选取上述移动终端设备当前应用的开发平台的Webview接口特点等平台参数，执行步骤260。

步骤S250、开发者指定了开发平台参数，即使移动终端设备当前应用的开发平台的平台参数与开发者指定的开发平台参数不一致，也会强制选取开发者指定的开发平台参数；执行步骤260。

步骤S260、根据所述跨平台中间件装置所应用的操作系统的系统参数和上述步骤S240或步骤S250选取的开发平台的平台参数，将所述标准UI组件渲染成符合所述移动终端设备所应用的操作系统的原生态UI组件。当渲染成功后，执行步骤S280；当渲染失败后，执行步骤S270。

步骤S270、将标准UI组件隐藏不显示。

步骤S280、将原生态UI组件显示在屏幕上。

步骤S290、绑定事件，包括系统事件和用户事件，系统事件使开发者可以获得硬件或系统的状态变化，如网络状态，传感器数据，屏幕展示方向等变化，更好的使应用程序做出响应；

步骤S2100、渲染数据源，如果UI组件绑定数据源，将数据源中的数据根据事先预设的原生UI样式展示在屏幕上。

综上所述，本发明实施例的跨平台中间件装置可以屏蔽各种移动终端设备的操作系统API的复杂性，为移动终端提供一个完整的支撑环境，能够使用Web技术快速开发，同时获得近似原生应用的样式和用户体验，避免重复开发，开发者不需要学习不同开发语言，不同开发工具，就能将同一个应用发布到不同平台，大大减轻开发者负担。本发明实施例的跨平台中间件装置具有简单，高效，可扩展性强的特点。

本发明实施例的跨平台中间件装置通过对不同移动终端设备的开发平台的Webview组件的整合和扩展，仅利用Web技术（Html，javascript，CSS）编写一套代码，就能够开发出具有原生样式和用户体验的移动终端设备的跨平台应用，降低了移动终端的应用开发门槛，缩短了移动终端的应用开发周期。

本领域普通技术人员可以理解：附图只是一个实施例的示意图，附图中的模块或流程并不一定是实施本发明所必须的。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的装置及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求的保护范围为准。

Claims (8)

1.一种移动终端设备的跨平台中间件装置，其特征在于，包括：

系统层单元，用于向移动终端设备提供跨平台应用程序编程接口API，通过所述跨平台API接入移动终端设备；

应用层单元，所述应用层单元包括标准UI组件管理单元、渲染处理单元以及原生态UI组件应用单元；

所述标准UI组件管理单元用于通过Html5、风格样式表CSS和脚本语言构建并存储跨平台标准UI组件；

所述渲染处理单元用于根据所述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数为标准UI组件添加新的语义标签和功能标签、从父控件集成功能函数并绑定事件，使用预设的风格样式表CSS将所述标准UI组件渲染成符合所述移动终端设备所应用的操作系统的原生态UI组件；

所述原生态UI组件应用单元用于根据所述移动终端设备的状态变化绑定系统事件和用户事件，将所述原生态UI组件绑定的数据源按照所述原生态UI组件的样式在显示屏上进行显示。

2.根据权利要求1所述的移动终端设备的跨平台中间件装置，其特征在于，所述的标准UI组件包括：列表、组合按钮、导航条、弹出对话框、滚动条和开关按钮。

3.根据权利要求1或2所述的移动终端设备的跨平台中间件装置，其特征在于，所述的系统层单元包括：

跨平台API构建模块，用于通过脚本语言构建跨平台API，向移动终端设备提供所述跨平台API；

移动终端设备接入模块，用于通过所述跨平台API接入移动终端设备；

跨平台API与原生态API互相调用模块，用于根据所述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数，以及所述跨平台API的接口特征，实现所述跨平台API与所述移动终端设备所应用的操作系统的原生态API之间的通信交互。

4.根据权利要求3所述的移动终端设备的跨平台中间件装置，其特征在于：

所述的跨平台API与原生态API互相调用模块，具体用于针对Android平台，跨平台API到原生态API的通信通过处理javascript输入提示函数的Java代码来实现，原生态API到跨平台API的通信通过轮询本地回调服务器的消息队列来实现；

针对iOS平台，跨平台API到原生态API的通信通过拦截UIWebView中页面装载请求来实现，原生态API到跨平台API的通信是通过UIwebview的stringByEvaluatingJavascriptFromString方法实现；

针对Windows Phone7平台，跨平台API到原生态API的通信通过Webview中的window.extrenal.Notify()方法来实现的，原生态API到跨平台API的通信通过本地的WebBrower对象的InvokeScript()方法来实现。

5.根据权利要求4所述的移动终端设备的跨平台中间件装置，其特征在于，所述的系统层单元还包括：

第三方插件扩展单元：用于获得本地原生功能的javascript钩子文件，用原生开发语言编写的代码和移动终端设备进行交互。

6.一种移动终端设备的跨平台中间件装置的实现方法，其特征在于，包括：

通过Html5、风格样式表CSS和脚本语言构建并存储跨平台标准用户接口界面UI组件；

向移动终端设备提供跨平台应用程序编程接口API，通过所述跨平台API接入移动终端设备；

根据所述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数为标准UI组件添加新的语义标签和功能标签、从父控件集成功能函数并绑定事件，使用预设的风格样式表CSS将所述标准UI组件渲染成符合所述移动终端设备所应用的操作系统的原生态UI组件；

通过显示屏显示所述原生态UI组件后，根据所述移动终端设备的状态变化绑定系统事件和用户事件，将所述原生态UI组件绑定的数据源按照所述原生态UI组件的样式在所述显示屏上进行显示。

7.根据权利要求6所述的移动终端设备的跨平台中间件装置的实现方法，其特征在于，所述的向移动终端设备提供跨平台应用程序编程接口API，通过所述跨平台API接入移动终端设备，包括：

通过脚本语言构建跨平台API，向移动终端设备提供所述跨平台API；

通过所述跨平台API接入移动终端设备；

根据所述移动终端设备当前应用的操作系统的系统参数和开发平台的平台参数，以及所述跨平台API的接口特征，实现所述跨平台API与所述移动终端设备所应用的操作系统的原生态API之间的通信交互。

8.根据权利要求7所述的移动终端设备的跨平台中间件装置的实现方法，其特征在于，所述的根据所述移动终端设备所应用的操作系统的Webview接口特点，实现所述跨平台API与所述移动终端设备所应用的操作系统的原生态API之间的通信交互，包括：

针对Android平台，跨平台API到原生态API的通信通过处理javascript输入提示函数的Java代码来实现，原生态API到跨平台API的通信通过轮询本地回调服务器的消息队列来实现；

针对iOS平台，跨平台API到原生态API的通信通过拦截UIWebView中页面装载请求来实现，原生态API到跨平台API的通信是通过UIwebview的stringByEvaluatingJavascriptFromString方法实现；

针对Windows Phone7平台，跨平台API到原生态API的通信通过Webview中的window.extrenal.Notify()方法来实现的，原生态API到跨平台API的通信通过本地的WebBrower对象的InvokeScript()方法来实现。