界面提供系统及界面提供方法技术领域
本申请涉及互联网技术领域，特别涉及一种界面提供系统及界面提供方法。
背景技术
随着移动互联技术的不断发展，移动终端越来越普及，基于移动终端开发
了大量的应用程序(APP)。目前，移动终端APP(特别是针对NativeAPP)
的主要实现方式是在移动终端中安装APP客户端，APP客户端接收服务器端
提供的数据，并且通过APP客户端将界面和流程写在客户端本地，从而进行
加载和渲染等操作。然而，这样的实现方式存在如下缺点：
首先，对于每个APP客户端开发来说，都需要去了解该APP客户端的业
务场景和流程，例如运行APP客户端的移动终端的操作系统类型等，并且需
要根据该APP客户端的具体特性来实现，从而使得APP客户端的开发速度较
慢。
其次，对于界面和流程的更新等，都必须要对APP客户端进行更新或升
级。由于对不同的移动终端与用户来说，APP客户端的版本往往有很多个，不
能很好的统一。因此，界面和流程的更新往往需要同时维护多个版本的APP
客户端，不仅导致业务更新不够及时，而且服务器端需要同时维护多个版本的
APP客户端也极大地增加了工作量。
最后，由于界面和流程的相关程序都记录在APP客户端本地，因此很容
易出现界面注入和逻辑篡改等安全问题。
发明内容
本申请旨在至少在一定程度上解决现有技术中的上述技术问题之一。
为此，本申请的一个目的在于提出一种开发速度快、更新工作量小和安全
性高的界面提供系统。
本申请实施例的第一方面提出一种界面提供系统，包括：服务器和客户端，
其中，该服务器，用于生成界面描述数据，并根据该客户端的请求将该界面描
述数据和脚本数据发送至该客户端，其中，该界面描述数据基于JSON格式生
成并用于生成界面，该脚本数据用于在被执行时将该客户端中的API接口与
该界面中的界面元素进行关联，该界面描述数据包括界面类型数据、控件样式
数据CSS、菜单内容数据和布局数据；该客户端，用于接收并加载该界面描述
数据，并执行该脚本数据。
在本申请的实施例中，界面提供系统具有以下三方面的技术效果。
1)提高了界面的开发速度
在本申请的实施例中，服务器基于JSON格式直接生成统一的界面描述数
据，并将界面描述数据和脚本数据发送至客户端。因此服务器可以生成格式统
一的界面描述数据，本申请从而界面的开发无需关注界面运行平台的具体特
性，进而提高了界面的开发速度。
2)降低了更新界面所需的工作量
在本申请的实施例中，界面描述数据均基于JSON格式生成，由于JSON
格式具有极强的可扩展性和通用性，因此在各个平台上均可以很好的进行加
载。这就使得无需随着服务器的内容更新而更新客户端，从而减小界面更新所
需的工作量。
3)提高了界面的安全性
在本申请的实施例中，由于界面描述数据和脚本数据均在服务器中生成，
即界面和流程的相关数据都记录在服务器远端而非APP客户端本地，进而，
避免了界面注入和逻辑篡改等安全性问题的出现。
在本申请的一个具体实施例中，该布局数据包括垂直布局数据和/或水平
布局数据，该垂直布局数据包括至少一个垂直布局块，每个该垂直布局块包括
基本元素数据和/或水平布局子数据，该水平布局数据包括至少一个水平布局
块，每个该水平布局块包括基本元素数据和/或垂直布局子数据。
优选地，在本申请实施例的界面提供系统中，该界面类型数据包括：小窗
口类型数据window、全屏界面类型数据fullscreen、提示类型数据toast和弹框
类型数据dialog。
优选地，在本申请实施例的界面提供系统中，该基本元素数据包括：控件
类型数据、控件名称数据name、控件值数据value、控件样式子数据和显示判
断数据display。
此外，在本申请实施例的界面提供系统中，该脚本数据还用于根据用户针
对该客户端生成的界面输入的操作指令调用该客户端对应的API接口，或者
向该服务器反馈该操作指令以控制该界面进行相应跳转。
本申请实施例的第二方面提出一种界面提供方法，包括：服务器生成界面
描述数据，并根据客户端的请求将该界面描述数据和脚本数据发送至该客户
端；客户端接收并加载该界面描述数据，并执行该脚本数据，其中，该界面描
述数据基于JSON格式生成并用于生成界面，该界面描述数据包括界面类型数
据、控件样式数据CSS、菜单内容数据和布局数据。
在本申请的实施例中，界面提供方法具有以下三方面的技术效果。
1)提高了界面的开发速度
在本申请的实施例中，服务器基于JSON格式直接生成统一的界面描述数
据，并将界面描述数据和脚本数据发送至客户端。因此服务器可以生成格式统
一的界面描述数据，本申请从而使得界面的开发无需关注界面运行平台的具体
特性，进而提高了界面的开发速度。
2)降低了更新界面所需的工作量
在本申请的实施例中，界面描述数据均基于JSON格式生成，由于JSON
格式具有极强的可扩展性和通用性，因此在各个平台上均可以很好的进行加
载。这就使得无需随着服务器的内容更新而更新客户端，从而减小界面更新所
需的工作量。
3)提高了界面的安全性
在本申请的实施例中，由于界面描述数据和脚本数据均在服务器中生成，
即界面和流程的相关数据都记录在服务器远端而非APP客户端本地，进而，
避免了界面注入和逻辑篡改等安全性问题的出现。
本申请实施例的第三方面提出一种服务器，包括：界面描述数据生成模块，
用于生成界面描述数据和脚本数据；发送模块，用于根据客户端的请求将该界
面描述数和脚本数据发送至该客户端，其中，该脚本数据用于在被执行时将该
客户端中的API接口与该界面中的界面元素进行关联，该界面描述数据基于
JSON格式生成，该界面描述数据包括界面类型数据、控件样式数据CSS、菜
单内容数据和布局数据。
本申请实施例的第四方面提出一种客户端，包括：接收模块，用于接收界
面描述数据和脚本数据；加载模块，用于加载该界面描述数据并执行该脚本数
据，其中，该脚本数据用于在被执行时将该客户端中的API接口与该界面中
的界面元素进行关联，该界面描述数据基于JSON格式生成，该界面描述数据
包括界面类型数据、控件样式数据CSS、菜单内容数据和布局数据。
附图说明
图1是根据本申请实施例的界面提供系统的结构示意图；图2是根据本申
请实施例的界面提供系统的布局数据之间的关系的示意图；
图3是根据本申请实施例的界面提供系统的垂直布局数据的示意图；
图4是根据本申请实施例的界面提供系统的基本元素数据的示意图；
图5是根据本申请实施例的界面提供系统的水平布局数据的示意图；
图6是根据本申请实施例的界面提供方法的流程图；以及
图7是根据本申请实施例的界面提供系统的效果图。
具体实施方式
下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自
始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元
件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本申请，而不
能理解为对本申请的限制。
在本申请的描述中，“多个”的含义是两个或两个以上，除非另有明确具体
的限定。此外，对于本领域的普通技术人员而言，可以根据具体情况理解上述
术语在本申请中的具体含义。
下面参照附图来描述根据本申请实施例提出的界面提供系统和界面提供
方法。
图1是根据本申请实施例的界面提供系统的结构示意图。
如图1所示，在本申请的一个实施例中，界面提供系统包括：服务器10
和客户端20。其中，服务器10用于生成界面描述数据a。根据客户端20的请
求，服务器10将界面描述数据a和脚本数据b发送至客户端20。其中，界面
描述数据a基于JSON格式生成并用于生成界面，脚本数据b用于在被执行时
将客户端20中的API接口与界面中的界面元素进行关联，即客户端20可通
过执行脚本数据b进行操作系统的高权限数据的读取，以进行与操作系统的高
权限数据相关的操作，并保证了用户的应用体验，例如，采用预制功能对应表
来执行预制功能，例如发短信和通过Lua脚本解释器以解释执行Lua脚本。
此外，界面描述数据a包括界面类型数据、控件样式数据CSS、菜单内容
数据和布局数据。此外，客户端20用于接收并加载界面描述数据a，并执行
脚本数据b。由于JSON格式中的JSON数组的顺序性，因此可以很好地用来
控制界面元素的显示顺序，且由于JSON节点的父子关系，可以很好地用来描
述页面布局和元素容器，同时由于JSON节点的水平扩展和键值唯一性，可以
很好地用来描述元素的类型功能和样式。在本发明的实施例中，客户端20可
为移动终端，如手机等，当然在本发明的其他实施例中，客户端20也可为其
他类型的终端。
在本申请的一个具体实施例中，界面类型数据a包括：用于描述小窗口界
面显示的小窗口类型数据window，用于描述全屏界面显示的全屏界面类型数
据fullscreen，用于描述提示界面显示的提示类型数据toast和用于描述弹框界
面显示的弹框类型数据dialog。
在本申请的该实施例中，布局数据包括垂直布局数据和/或水平布局数据。
其中，该垂直布局数据包括至少一个垂直布局块，并且每个垂直布局块包括基
本元素数据和/或水平布局子数据，同时，水平布局数据也包括至少一个水平
布局块，并且每个水平布局块也包括基本元素数据和/或垂直布局子数据。其
中，基本元素数据包括：控件类型数据、控件名称数据name、控件值数据value、
控件样式子数据和显示判断数据display。
此外，在本申请的该实施例中，脚本数据b还用于根据用户针对客户端生
成的界面输入的操作指令调用客户端对应的API接口，或者向服务器反馈操
作指令以控制界面进行相应跳转。
在本申请的一个具体实施例中，所述界面描述数据a的基本结构如下：
其中，type、block、menu和css均为该界面描述数据的基本元素，type
为类型数据，block为布局块，menu为菜单内容数据，css为控件样式数据。
需要说明的是，在本申请的该实施例中，由于服务器可以基于JSON格式
直接生成格式统一的界面描述数据，并将界面描述数据和脚本数据发送至客户
端。因此本申请服务器可以生成格式统一的界面描述数据，从而使得界面的开
发无需关注界面运行平台的具体特性，进而提高了界面的开发速度。
此外，在本申请的该实施例中，类型数据type包括：用于描述小窗口界
面显示的小窗口类型数据window，用于描述全屏界面显示的全屏界面类型数
据fullscreen，用于描述提示界面显示的提示类型数据toast和用于描述弹框界
面显示的弹框类型数据dialog。
在本申请的另一个实施例中，如表1所示，布局数据Element由五个基础
属性数据组成：类型数据type、控件名称name、控件值value、控件样式数据
CSS和是否显示display。
属性名称
含义
type
类型数据
name
控件名称
value
控件值
CSS
控件样式数据
display
是否显示
表1布局数据的基础属性数据表
图2是根据本申请实施例的界面提供系统的布局数据之间的关系的示意
图。
如图2所示，在本申请的该实施例中，垂直布局数据Block、水平布局数
据Component和基本元素数据SimpleElement均是该布局数据Element的子类，
均由上述五个基础属性数据的全部或部分构成。其中，垂直布局数据Block包
括至少一个垂直布局块，且每个该垂直布局块均包括基本元素数据
SimpleElement和/或水平布局子数据。此外，水平布局数据Component包括至
少一个水平布局块，且每个该水平布局块均包括基本元素数据SimpleElement
和/或垂直布局子数据。本申请的实施例采用的垂直布局块和水平布局块可以
在二元维度上精确地描述界面组成，理论上可以支持无限的细分。
具体地，在本申请实施例中，如图3所示，垂直布局数据Block包括垂直
布局块block0、block1、block2、block3、block4及blocki，其中，每个垂
直布局块block均具有表示垂直布局块的高度的数据，如高度wrapcontent，
以及表示垂直布局块block的宽度的数据，如宽度fillparent，并且每个垂直布
局块block的高度wrapcontent都是内容自适应的，每个垂直布局块block的
宽度fillparent都是充满父节点的。该垂直布局数据Block的具体数据结构如
下：
从上述垂直布局数据Block的数据结构中可以看出，该垂直布局数据Block
由三个布局块组成，每个布局块均包含了类型数据type、控件名称name以及
是否显示display这三个基础属性数据。
图4是根据本申请实施例的界面提供系统的基本元素数据的示意图。
在本申请的一个具体实施例中，如图4所示，基本元素数据SimpleElement
包括多个元素element0、element1、element2以及elementi，由于基本元素
数据SimpleElement与垂直布局数据Block均是布局数据Element的一个子类，
因此，该基本元素数据SimpleElement与垂直布局数据Block类似，即，其每
个元素element均具有高度wrapcontent和宽度fillparent，并且每个元素
element的高度wrapcontent都是内容自适应的，每个元素element的宽度fill
parent都是充满父节点的。该基本元素数据SimpleElement的具体数据结构如
下：
其中，与垂直布局数据Block相类似地，该基本数据元素SimpleElement
也包含了类型数据type、控件名称name以及是否显示display这三个基础属性
数据。此外，该基本数据元素SimpleElement还包括一些扩展属性，以描述其
他语义，例如，label、input、password、checkbox、radio、link、combox、icon、
button、img、web等基础控件。
图5是根据本申请实施例的界面提供系统的水平布局数据的示意图。
在本申请的一个具体实施例中，如图5所示，所述水平布局数据Component
包括两个基本元素数据element0.2.0和element0.2.2以及一个垂直布局子数据
block2.1。与垂直布局数据Block和基本元素数据SimpleElement相类似地，
该水平布局数据Component也包括至少一个布局块block，并且每个布局块
block均具有表示布局块block的高度的数据，高度wrapcontent，以及表示布
局块block的宽度的数据，宽度fillparent，并且每个布局块block的高度wrap
content都是内容自适应的，每个布局块block的宽度fillparent都是充满父节
点的。该水平布局数据Component的具体数据结构如下：
从上述水平布局数据Component的数据结构中可以看出，该水平布局数据
Component由三个布局块组成，每个布局块均包含了类型数据type、控件名称
name以及是否显示display这三个基础属性数据。
在本申请的一个实施例中，控件样式数据CSS用于控件的样式，该控件
样式数据CSS采用标识的CSS语法，例如：
此外，在本申请的该实施例中，利用控件样式数据CSS的可水平扩展性，
还可引入私有属性，以辅助平台和业务区分。
在本申请的实施例中，界面描述数据均基于JSON格式生成，由于布局数
据具有此结构特点，因此可以非常方便地在各个平台上进行加载，因此，对于
界面的更新，只需在服务器端进行，无需客户端随服务器的内容更新而更新，
从而减小界面更新所需的工作量。
此外，由于界面描述数据和脚本数据均在服务器中生成，即界面和流程的
相关数据都记录在服务器远端而非APP客户端本地，进而，避免了界面注入
和逻辑篡改等安全性问题的出现。
如图1所示，在本申请的一个具体实施例中，本申请服务器10包括界面
描述数据生成模块101和发送模块102。界面描述数据生成模块101用于生成
界面描述数据a和脚本数据b。在本申请的一个实施例中，脚本数据b用于在
被执行时将客户端20中的API接口与界面中的界面元素进行关联，界面描述
数据a基于JSON格式生成，界面描述数据a包括界面类型数据、控件样式数
据CSS、菜单内容数据和布局数据。发送模块102用于根据客户端20的请求
将界面描述数据a和脚本数据b发送至客户端20。
如图1所示，在本申请的一个具体实施例中，客户端20包括接收模块201
和加载模块202。接收模块201用于接收界面描述数据a和脚本数据b。加载
模块202用于加载所述界面描述数据a并执行所述脚本数据b。在本申请的该
实施例中，脚本数据b用于在被执行时将客户端20中的API接口与界面中的
界面元素进行关联，界面描述数据a基于JSON格式生成，界面描述数据a包
括界面类型数据、控件样式数据CSS、菜单内容数据和布局数据。此外，在本
发明的实施例中，客户端20可为移动终端，如手机等，当然在本发明的其他
实施例中，客户端20也可为其他类型的终端。
图6是根据本申请实施例的界面提供方法的流程图。
如图6所示，本申请实施例的界面提供方法包括：
S1，服务器生成界面描述数据，并根据客户端的请求将所述界面描述数据
和脚本数据发送至所述客户端。其中，界面描述数据基于JSON格式生成并用
于生成界面，并且界面描述数据包括界面类型数据、控件样式数据CSS、菜单
内容数据和布局数据。
S2，客户端接收并加载所述界面描述数据，并执行所述脚本数据。其中，
脚本数据用于在被执行时将客户端中的API接口与界面中的界面元素进行关
联。
在申请的一个优选实施例中，界面类型数据包括：用于描述小窗口界面显
示的小窗口类型数据window，用于描述全屏界面显示的全屏界面类型数据
fullscreen，用于描述提示界面显示的提示类型数据toast和用于描述弹框界面
显示的弹框类型数据dialog。
此外，在本申请的该实施例中，布局数据包括垂直布局数据和/或水平布
局数据。其中，该垂直布局数据包括至少一个垂直布局块，并且每个垂直布局
块包括基本元素数据和/或水平布局子数据，同时，水平布局数据也包括至少
一个水平布局块，并且每个水平布局块也包括基本元素数据和/或垂直布局子
数据。其中，基本元素数据包括：控件类型数据、控件名称数据name、控件
值数据value、控件样式子数据和显示判断数据display。
在本申请的一个优选实施例中，界面描述数据的基本结构有类型数据
type、布局块block、菜单内容数据menu和控件样式数据css组成。在本申请
的该实施例中，由于服务器可以基于JSON格式直接生成格式统一的界面描述
数据，并将界面描述数据和脚本数据发送至客户端。因此本申请服务器可以生
成格式统一的界面描述数据，从而使得界面的开发无需关注界面运行平台的具
体特性，进而提高了界面的开发速度。
此外，在本申请的该实施例中，类型数据type包括：用于描述小窗口界
面显示的小窗口类型数据window，用于描述全屏界面显示的全屏界面类型数
据fullscreen，用于描述提示界面显示的提示类型数据toast和用于描述弹框界
面显示的弹框类型数据dialog。
如图2所示，在本申请的另一个实施例中，布局数据Element由五个基础
属性数据组成：类型数据type、控件名称name、控件值value、控件样式数据
CSS和是否显示display。在本申请的该实施例中，垂直布局数据Block、水平
布局数据Component和基本元素数据SimpleElement均是该布局数据Element
的子类，均由上述五个基础属性数据的全部或部分构成。其中，垂直布局数据
Block包括至少一个垂直布局块，且每个该垂直布局块均包括基本元素数据
SimpleElement和/或水平布局子数据。此外，水平布局数据Component包括至
少一个水平布局块，且每个该水平布局块均包括基本元素数据SimpleElement
和/或垂直布局子数据。本申请的实施例采用的垂直布局块和水平布局块可以
在二元维度上精确地描述界面组成，理论上可以支持无限的细分。
具体地，在本申请实施例中，如图3所示，垂直布局数据Block包括垂直
布局块block0、block1、block2、block3、block4及blocki，其中，每个垂
直布局块block均具有表示垂直布局块的高度的数据，如高度wrapcontent，
以及表示垂直布局块block的宽度的数据，如宽度fillparent，并且每个垂直布
局块block的高度wrapcontent都是内容自适应的，每个垂直布局块block的
宽度fillparent都是充满父节点的。
在本申请的一个优选实施例中，如图4所示，基本元素数据SimpleElement
包括多个元素element0、element1、element2以及elementi，由于基本元素
数据SimpleElement与垂直布局数据Block均是布局数据Element的一个子类，
因此，该基本元素数据SimpleElement与垂直布局数据Block类似，即，其每
个元素element均具有高度wrapcontent和宽度fillparent，并且每个元素
element的高度wrapcontent都是内容自适应的，每个元素element的宽度fill
parent都是充满父节点的。此外，该基本数据元素SimpleElement还包括一些
扩展属性，以描述其他语义，例如，label、input、password、checkbox、radio、
link、combox、icon、button、img、web等基础控件。
在本申请的一个具体实施例中，如图5所示，所述水平布局数据Component
包括两个基本元素数据element0.2.0和element0.2.2以及一个垂直布局子数据
block2.1。与垂直布局数据Block和基本元素数据SimpleElement相类似地，
该水平布局数据Component也包括至少一个布局块block，并且每个布局块
block均具有表示布局块block的高度的数据，高度wrapcontent，以及表示布
局块block的宽度的数据，宽度fillparent，并且每个布局块block的高度wrap
content都是内容自适应的，每个布局块block的宽度fillparent都是充满父节
点的。
此外，在本申请的一个实施例中，控件样式数据CSS用于控件的样式，
该控件样式数据CSS采用标识的CSS语法。在本申请的该实施例中，利用控
件样式数据CSS的可水平扩展性，还可引入私有属性，以辅助平台和业务区
分。
在本申请的实施例中，界面描述数据均基于JSON格式生成，由于布局数
据具有此结构特点，因此可以非常方便地在各个平台上进行加载，因此，对于
界面的更新，只需在服务器端进行，无需客户端随服务器的内容更新而更新，
从而减小界面更新所需的工作量。
此外，由于界面描述数据和脚本数据均在服务器中生成，即界面和流程的
相关数据都记录在服务器远端而非APP客户端本地，进而，避免了界面注入
和逻辑篡改等安全性问题的出现。
在本申请的一个实施例中，通过本申请的界面提供系统及界面提供方法提
供的界面效果图如图7所示。
在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、
“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、
结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，
对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的
具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合
适的方式结合。此外，本领域的技术人员可以将本说明书中描述的不同实施例
或示例进行接合和组合。
尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例
是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的
范围内可以对上述实施例进行变化、修改、替换和变型。