CN106610826B - 在线场景应用的制作方法及装置 - Google Patents

Abstract

本发明公开了一种在线场景应用的制作方法及装置，属于计算机技术领域。所述方法包括：当检测到对第一区域内任一用户界面组件的拖拽操作时，根据检测到的拖拽操作，将用户界面组件复制后移动到指定在线场景应用制作界面的第二区域内；获取第二区域内每个用户界面组件对应的结构代码及样式代码；执行第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用。本发明在指定在线场景应用制作界面的第一区域上提供用户界面组件，无需用户学习专业的制作技术，依据不同在线场景应用的设计需求，通过在第二区域上进行模板的配置、组件的拖拽及微调整，即可制作出符合用户需求的在线场景应用，因此，大大地降低了学习成本及制作难度。

Description

在线场景应用的制作方法及装置

技术领域

本发明涉及计算机技术领域，特别涉及一种在线场景应用的制作方法及装置。

背景技术

在线场景应用是指利用网页承载的，满足不同传播途径、运营场景及功能特性的网页应用。在线场景应用将赋予美感的用户场景与应用的功能相结合，在触发用户交互参与的同时，为用户提供了一种极致简单的连接和体验方式。

目前，在线场景应用主要包括HTML(HyperText Markup Language，超级文本标记语言)5场景、网页版PPT(Power point，演示文稿)及网页版邮件等。这几种在线场景应用的制作参见如下方式。

HTML5在线场景应用在制作时，需要专业的视觉设计师与前端开发工程师共同完成。视觉设计师提供HTML5场景的视觉稿，前端工程师依据视觉稿制作出所需的UI组件，进而通过对制作的UI组件进行渲染，得到HTML5页面。

网页版PPT在制作时，借助开源的Javascript组件(如Reveal.js)制作出网页版PPT所需的UI组件，进而通过对制作的UI组件进行渲染，得到网页版PPT。

网页版邮件在制作时，需要在客户端中安装OutLook等软件，并借助安装的OutLook等软件完成。然而受限于Outlook等软件的性能，制作的网页版邮件中的内容多为简单的图文组合，如果制作具有丰富视觉效果的邮件内容，则需要专业的视觉设计师设计出邮件模板的视觉稿，并依据邮件模板的视觉稿制作出所需的UI组件，进而通过对制作的多个UI组件进行渲染，得到具有丰富内容的网页版邮件。

在实现本发明的过程中，发明人发现相关技术至少存在以下问题：

现有的在线场景应用制作方法需要具有用户具有较高专业制作技术，该过程学习成本较高，制作难度较大。

发明内容

为了解决相关技术的问题，本发明实施例提供了一种在线场景应用的制作方法及装置。所述技术方案如下：

一方面，提供了一种在线场景应用的制作方法，所述方法包括：

在指定在线场景应用制作界面的第一区域内，显示多个用户界面组件，每个用户界面组件对应一个结构代码及样式代码；

当检测到对所述第一区域内任一用户界面组件的拖拽操作时，根据检测到的拖拽操作，将所述用户界面组件复制后移动到指定在线场景应用制作界面的第二区域内；

获取所述第二区域内每个用户界面组件对应的结构代码及样式代码；

执行所述第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用。

另一方面，提供了一种在线场景应用的制作装置，所述装置包括：

显示模块，用于在指定在线场景应用制作界面的第一区域内，显示多个用户界面组件，每个用户界面组件对应一个结构代码及样式代码；

移动模块，用于当检测到对所述第一区域内任一用户界面组件的拖拽操作时，根据检测到的拖拽操作，将所述用户界面组件复制后移动到指定在线场景应用制作界面的第二区域内；

第一获取模块，用于获取所述第二区域内每个用户界面组件对应的结构代码及样式代码；

执行模块，用于执行所述第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用。

本发明实施例提供的技术方案带来的有益效果是：

在指定在线场景应用制作界面的第一区域上提供用户界面组件，无需用户学习专业的制作技术，依据不同在线场景应用的设计需求，通过在第二区域上进行模板的配置、组件的拖拽及微调整，即可制作出符合用户需求的在线场景应用，因此，大大地降低了学习成本及制作难度。

附图说明

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

图1是本发明一个实施例提供的一种在线场景应用的制作方法流程图；

图2是本发明另一个实施例提供的另一种在线场景应用的制作方法流程图；

图3是本发明另一个常见UI组件的示意图；

图4是本发明另一个实施例提供的一种指定在线场景应用制作界面的示意图；

图5是本发明另一个实施例提供的一种创建在线场景应用模板的示意图；

图6是本发明另一个实施例提供的一种字体颜色规范的示意图；

图7是本发明另一个实施例提供的一种字体颜色规范的示意图；

图8是本发明另一个实施例提供的在线场景应用的发布结果图；

图9是本发明另一个实施例提供的一种在线场景应用的制作装置的结构示意图；

图10是本发明另一个实施例提供的一种在线场景应用的制作装置的结构示意图；

图11是本发明另一个实施例提供的一种在线场景应用的制作装置的结构示意图；

图12是本发明另一个实施例提供的一种在线场景应用的制作装置的结构示意图；

图13是本发明另一个实施例提供的一种在线场景应用的制作装置的结构示意图；

图14是本发明另一个实施例提供的一种在线场景应用的制作终端的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

本发明实施例提供了一种在线场景应用的制作方法，参见图1，本实施例提供的方法流程包括：

101、在指定在线场景应用制作界面的第一区域内，显示多个用户界面组件，每个用户界面组件对应一个结构代码及样式代码。

102、当检测到对第一区域内任一用户界面组件的拖拽操作时，根据检测到的拖拽操作，将用户界面组件复制后移动到指定在线场景应用制作界面的第二区域内。

103、获取第二区域内每个用户界面组件对应的结构代码及样式代码。

104、执行第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用。

本发明实施例提供的方法，在指定在线场景应用制作界面的第一区域上提供用户界面组件，无需用户学习专业的制作技术，依据不同在线场景应用的设计需求，通过在第二区域上进行模板的配置、组件的拖拽及微调整，即可制作出符合用户需求的在线场景应用，因此，大大地降低了学习成本及制作难度。

在本发明的另一个实施例中，显示多个用户界面组件之前，还包括：

获取多个用户界面组件视觉稿；

获取每个用户界面组件视觉稿对应的结构代码和样式代码；

将每个用户界面组件视觉稿对应的结构代码和样式代码封装成一个用户界面组件。

在本发明的另一个实施例中，获取每个用户界面组件视觉稿对应的结构代码和样式代码之后，还包括：

如果任一用户界面组件视觉稿标识有交互行为，则获取用户界面组件视觉稿对应的交互代码。

在本发明的另一个实施例中，执行第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用之后，还包括：

将指定在线场景应用上传到网络服务器，由网络服务器提供指定在线场景应用下载地址对应的二维码。

在本发明的另一个实施例中，该方法还包括：

获取预先设置的场景制作格式，场景制作格式包括颜色格式、字体字号格式、排版格式、图标格式、图片尺寸格式、商标LOGO格式、页面布局格式、动画格式、组件和组件交互格式；

基于场景制作格式制作指定在线场景应用。

上述所有可选技术方案，可以采用任意结合形成本发明的可选实施例，在此不再一一赘述。

本发明实施例提供了一种在线场景应用的制作方法，为了便于后续的叙述，本实施例以用户界面组件为UI组件为例进行说明，参见图2，本实施例提供的方法流程包括：

201、终端获取多个UI组件视觉稿。

其中，终端可以为PC(Personal Computer，个人电脑)、平板电脑等，本实施例不对终端的产品类型作具体的限定。UI组件为将一段或几段完成各自功能的代码段封装成一个或几个独立的部分，并通过一个或几个具有各自功能的代码段，最终完成用户界面的显示。参见图3，常见的UI组件，包括但不限于多图片轮播组件、单图片组件、视频组件、文本组件、可展开文本组件、弹出图片组件、联系我们组件、预约报名组件、留言板组件、地图控件组件、日程/议程组件、多条文本组件、多人物控件组件、在线报名组件、弹出式文本组件、抽奖组件、一键通话组件、网站链接组件、答题&测试组件、场景相册组件、点赞组件、场景推荐组件等等。

视觉稿(Mockup)是高保真的静态设计图，通俗来讲，视觉稿就是视觉设计的草稿或终稿，能够表达信息框架，静态演示内容和功能。UI组件的视觉稿为UI组件在终端显示界面上所展示的图形，仍以上述图3为例，文本组件视觉稿即为文本组件表示的图形。

终端在获取UI组件视觉稿时，可以收集当前已制作的UI组件视觉稿，还可以根据在线场景应用的制作需求，基于画图工具如photoshop及页面制作工具制作出符合在线场景应用需求的UI组件视觉稿等。

202、终端获取每个UI组件视觉稿对应的结构代码和样式代码。

HTLM5在线场景应用本质上由一个或多个网页构成，为了能够将UI组件与HTLM网页衔接起来，本实施例提供的方法还将获取每个UI组件视觉稿对应的结构代码和样式代码。其中，结构代码可以为HTML代码，用于控制UI组件视觉稿对应的HTML网页结构。样式代码可以为CSS代码，用于控制UI组件视觉稿在HTLM网页上实际的展示效果。

关于终端获取每个UI组件视觉稿对应的结构代码的方式，包括但不限于技术人员使用HTML语言在终端上为每个UI组件视觉稿编写相应的HTML结构代码，终端通过检测技术人员的输入操作，获取技术人员为每个UI组件视觉稿编写的HTML结构代码，进而将技术人员为每个UI组件视觉稿编写的HTML结构代码作为每个UI组件视觉稿对应的结构代码。

关于终端获取每个UI组件视觉稿对应的样式代码的方式，包括但不限于技术人员使用CSS语言在终端上为每个UI组件视觉稿编写相应的CSS(Cascading Style Sheets，层叠样式表)样式代码，终端通过检测技术人员的输入操作，获取技术人员为每个UI组件视觉稿编写的CSS样式代码，进而将技术人员为每个UI组件视觉稿编写的样式码作为每个UI组件视觉稿对应的样式代码。

以UI组件视觉稿为多图片轮播组件视觉稿为例，终端获取到的多图片轮播组件视觉稿对应的HTML结构代码和CSS样式代码如下述表1。

表1

通常有些UI组件视觉稿标识的UI组件是纯静态的，没有交互行为，例如，文本组件、一键通话组件、抽奖组件等等，但有些UI组件视觉稿标识的组件具有交互行为，例如，多图轮播组件视觉稿标识的多图轮播组件具有轮播显示行为，以及左右滑屏时切换图片的行为等等，为使这些标识有交互行为的UI组件能够展现出相应的交互行为，终端在获取每个UI组件视觉稿对应的结构代码和样式代码之后，如果任一UI组件视觉稿标识有交互行为，则终端还将获取该UI组件视觉稿对应的交互代码。其中，交互代码可以为Javascript代码等。

关于终端获取标识有交互行为的UI组件视觉稿对应的交互代码的方式，包括但不限于当技术人员使用Javascript代码封装UI组件视觉稿标识的交互行为时，终端检测技术人员的输入操作，并根据检测到的输入操作，获取标识有交互行为的UI组件视觉稿对应的交互代码。当然，技术人员还可以使用开源的Javascript组件为标识有交互行为的UI组件视觉稿添加相应的交互代码，终端检测技术人员的操作，并根据检测到的操作，获取具有交互行为的UI组件视觉稿对应的交互代码。

上述终端获取标识有交互行为的UI组件视觉稿对应的交互代码的方式，仅为了解释并发明，并不能对本发明构成限制，在实际应用中终端还可以采用其他方式获取标识有交互行为的UI组件视觉稿对应的交互代码，例如，终端还可获取技术人员通过Motion.JS组件库中的slide组件为UI组件视觉稿添加的交互代码等。

以获取技术人员通过Motion.JS组件库中的slide组件实现多图轮播组件的交互行为功能为例，终端获取到的多图轮播组件视觉稿对应的交互代码如下：

203、终端将每个UI组件视觉稿对应的结构代码和样式代码封装成一个UI组件。

基于上述步骤202中获取到的每个UI组件视觉稿对应的结构代码和样式代码，终端通过对每个UI组件视觉稿对应的结构代码和样式代码进行封装，使得每个UI组件的结构代码、样式代码及视觉稿之间一一对应，从而得到一个UI组件。

将每个UI组件对应的结构代码和样式代码封装成一个UI组件之后，可将UI组件中的数据以JSON数据格式的形式存储到mongodb数据库中。例如，

当将所有常用UI组件都通过JSON文件存储完成后，即可在页面上使用制作好的UI组件。

需要说明的是，如果任一UI组件视觉稿还标识有交互行为，则终端在将该UI组件视觉稿对应的结构代码和样式代码封装成一个UI组件时，还应将该UI组件视觉稿对应的交互代码一同进行封装。

通过上述步骤201～203完成了在线场景应用UI组件的制作，基于所制作的UI组件，为了提高在线场景应用制作过程的交互友好性，便于用户观看在线场景应用的整个制作过程，终端还提供了一个支持可视化拖拽UI组件的页面编辑器，该页面编辑器主要通过javascript来实现，由研发人员根据自己的经验及项目使用习惯总结出来的使用方式，并基于该使用方式及编码经验编码得到的编辑器，该页面编辑器可用于制作HTML5页面、网页版PPT、网页版邮件等多种在线场景应用，基于该页面编辑器，用户可通过上述步骤进行所见即所得的在线场景应用制作。

为了直观地展示页面编辑器的生成过程，下面以步骤1～2为例进行说明。

1、获取可用的UI组件列表，其中，获取到的可用的UI组件的关键性代码如下(以jQuery为例)：

在代码层面可得到如下数据：

根据这些代码，研发人员可使用业界开源的javascript库：siwg生成html结构，其核心代码如下：

2、提供所见即所得的页面编辑、预览区域。

在实现页面编辑器的时候，研发人员前后端统一使用了javascript+html+css实现编辑器的最基本UI效果，比如研发人员先模拟一个手机模拟器在预览区域，其核心HTML代码如下：

当用户在页面编辑器上编辑页面组件时，页面编辑器需要时时预览编辑后的效果，其核心代码如下：

204、终端在指定在线场景应用制作界面的第一区域内，显示多个用户界面UI组件，每个UI组件对应一个结构代码及样式代码。

其中，指定在线场景应用可以为HTML5页面、网页版PPT、网页版邮件等在线场景应用中的任一种，指定在线场景应用制作界面为页面编辑器在制作指定在线场景应用时的编辑界面。指定在线场景应用制作界面由第一区域、第二区域等多个区域组成，其中，第一区域为所制作的UI组件的显示区域，用于显示制作的UI组件，第二区域为所见即所得的页面编辑、预览区域，用于制作在线场景应用。如图4所示，第一区域位于指定在线场景应用制作界面的左侧位置，第二区域位于指定在线场景应用制作界面的右侧中间位置，第一区域内显示有4个UI组件，分别为UI组件1、UI组件2、UI组件3及UI组件4。

205、当检测到对第一区域内任一UI组件的拖拽操作时，终端根据检测到的拖拽操作，将UI组件复制后移动到指定在线场景应用制作界面的第二区域内。

当用户通过鼠标拖拽等方式对第一区域内的任一UI组件执行拖拽，终端在检测到对该UI组件的拖拽操作时，对该UI组件进行复制，如果终端检测到该复制后的UI组件被拖动到第二区域内，则根据检测到的拖拽操作，终端将该复制后的UI组件移动到指定在线场景应用制作界面的第二区域内。仍以上述图4为例，当检测到用户对UI组件2的拖拽操作时，终端对该UI组件2进行复制，进而根据检测到的操作，将复制后的UI组件2移动到第二区域内。

需要说明的是，由于第二区域的大小是有限的，而在指定在线场景应用制作过程中，用户可能会对多个UI组件进行拖拽操作，为了合理化利用第二区域的显示区域，用户可根据指定在线场景应用的实际制作需求，通过鼠标、触控等方式对第二区域内的UI组件进行样式(位置、大小等)、内容或行为的调整，终端检测到用户的操作后，根据检测到的操作，对第二区域内的UI组件进行相应的调整。例如，用户通过鼠标将第二区域内的任一UI组件从中间位置移动到左上角，终端在检测到用户的操作后，根据检测到的操作，将该UI组件由中间位置移动到左上角。

206、终端获取第二区域内每个UI组件对应的结构代码及样式代码。

当指定在线场景应用制作界面的第二区域接收到拖放进来的UI组件后，终端将按照由先到后的拖放顺序，读取并保存该UI组件对应的HTML5结构代码和CSS样式代码，以及Javascript代码。

需要说明的是，如果用户未对第二区域内的UI组件的样式、内容或行为等进行调整，则终端获取到的UI组件对应的样式代码即为技术人员为该UI组件编写的CSS样式代码；如果用户对第二区域内的UI组件的样式、内容或行为等进行调整，则终端获取到的UI组件对一个的样式代码应为该UI组件在第二区域内当前显示形式对应的样式代码。

207、终端执行第二区域内每个UI组件的对应结构代码及样式代码，得到指定在线场景应用。

终端根据第二区域内的UI组件，执行第二区域内的各个UI组件对应的HTML5结构代码及样式代码，如果任一UI组件还具有交互行为，则终端还将执行该UI组件对应的Javascript代码。通过执行第二区域内每个UI组件对应的结构代码、样式代码及Javascript代码，可得到指定在线场景应用。为了能够将操作结果及时反馈给用户，终端还实时地将所制作的指定在线场景应用呈现给用户。

另外，为了能够根据用户的意愿制作出指定在线场景应用，终端在执行第二区域内每个UI组件的对应结构代码及样式代码，得到指定在线场景应用之前，还可在指定在线场景应用制作界面上显示制作选项，当检测到该选项被选中，终端可执行第二区域内每个UI组件的对应结构代码及样式代码，得到指定在线场景应用的步骤。

上述步骤205～207具体操作时，可采用如下代码实现：

首先，用户可以通过鼠标拖拽的方式，将所需UI组件拖到页面编辑、预览区域(即本实施例中所述的第二区域)中。由于该步骤的操作是由用户自主操作，因而页面编辑器会响应用户的操作并生成对应UI组件的HTML代码结构。其生成的核心代码如下：

其次、页面编辑、预览区域接收到拖放进来的UI组件后，读取并保存该组件对应的HTML5结构代码、CSS样式代码以及实现行为功能的Javascript代码。

为了最大限度地降低用户制作在线场景应用的制作成本，本实施例还可利用上述步骤201～203制作好的UI组件以及页面编辑器制作出几种在线场景应用模板，如果所制作的指定场景模板应用符合用户的使用需求，用户可直接使用该制作好的指定场景模板，如果所指作的指定在线场景应用不符合用户的使用需求，用户可采用上述步骤204～207重新制作出新的在线场景应用。如图5所示，用户可根据实际需要选择创建空白在线场景应用，或者选择某个制作好的在线场景应用模板为起点创建在线场景应用。

为了便于用户或公司传达品牌标识、标准，本实施例提供的方法在制作指定在线场景应用之前，还获取预先设置的场景制作格式，该场景制作格式包括颜色格式、字体字号格式、排版格式、图标格式、图片尺寸格式、LOGO格式、页面布局格式、动画格式、组件和组件交互格式等，进而基于场景制作格式制作指定在线场景应用。基于该预先设置的场景制作格式，用户或公司无论制作HTML5在线场景应用、网页版PPT、网页版邮件等任一种在线场景应用，均可以准确传达用户标识或公司标识。

关于预先设置的场景制作格式的方式，下面以字体颜色格式的设置过程为例进行说明。

在本实施例中，页面编辑器所能编辑的在线场景应用界面中的文字有三个层级，分别为主文、副文、提示文案等，在白色背景下，字体颜色依次为黑色、深灰色及灰色，对应的颜色值分别为#333333、#666666、#999999，具体的显示效果可参见图6。如果在界面中使用背景色为#eeeeee，则分割线依次使用#e5e5e5或cccccc的颜色值，深浅相间，具体的显示效果可参见图7。

通常在线场景应用的内容都是基于网页承载的，当终端执行第二区域内每个UI组件的对应结构代码及样式代码，得到指定在线场景应用之后，终端还在指定在线场景应用制作界面上提供发布选项，当检测到发布选项被选中，借助NodeJS、PHP(HypertextPreprocessor，超文本预处理器)等技术将指定在线场景应用上传到网络服务器，当上传成功后，网络服务器提供指定在线场景应用下载地址对应的二维码、URL(Uniform ResoureLocator，统一资源定位器)，以便于用户使用终端扫描二维码或点击该URL的获取指定在线场景应用。采用该种方式，无需通过磁盘文件即可分享传播指定场景应用，不仅提高了传播效率，而且节省了磁盘资源。图8为终端将制作的指定在线场景应用成功上传到网络服务器后，所提供的指定在线场景应用下载地址对应的二维码的示意图。

为了直观地展示采用本发明提供的方法所制作的在线场景应用与传统的在线场景应用制作方法的优势，下面以表2为例进行介绍。

表2

本发明实施例提供的方法，在指定在线场景应用制作界面的第一区域上提供用户界面组件，无需用户学习专业的制作技术，依据不同在线场景应用的设计需求，通过在第二区域上进行模板的配置、组件的拖拽及微调整，即可制作出符合用户需求的在线场景应用，因此，大大地降低了学习成本及制作难度。

参见图9，本发明实施例提供了一种在线场景应用的制作装置的结构示意图，该装置包括：

显示模块901，用于在指定在线场景应用制作界面的第一区域内，显示多个用户界面组件，每个用户界面组件对应一个结构代码及样式代码；

移动模块902，用于当检测到对第一区域内任一用户界面组件的拖拽操作时，根据检测到的拖拽操作，将用户界面组件复制后移动到指定在线场景应用制作界面的第二区域内；

第一获取模块903，用于获取第二区域内每个用户界面组件对应的结构代码及样式代码；

执行模块904，用于执行第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用。

参见图10，该装置还包括：

第二获取模块905，用于获取多个用户界面组件视觉稿；

第三获取模块906，用于获取每个用户界面组件视觉稿对应的结构代码和样式代码；

封装模块907，用于将每个用户界面组件视觉稿对应的结构代码和样式代码封装成一个用户界面组件。

参见图11，该装置还包括：

第四获取模块908，用于当任一用户界面组件视觉稿标识有交互行为时，获取用户界面组件视觉稿对应的交互代码。

参见图12，该装置还包括：

上传模块909，用于将指定在线场景应用上传到网络服务器，由网络服务器提供指定在线场景应用下载地址对应的二维码。

参见图13，该装置还包括：

第五获取模块910，用于获取预先设置的场景制作格式，场景制作格式包括颜色格式、字体字号格式、排版格式、图标格式、图片尺寸格式、商标LOGO格式、页面布局格式、动画格式、组件和组件交互格式；

制作模块911，用于基于场景制作格式制作指定在线场景应用。

综上，本发明实施例提供的装置，在指定在线场景应用制作界面的第一区域上提供用户界面组件，无需用户学习专业的制作技术，依据不同在线场景应用的设计需求，通过在第二区域上进行模板的配置、组件的拖拽及微调整，即可制作出符合用户需求的在线场景应用，因此，大大地降低了学习成本及制作难度。

参见图14，其示出了本发明实施例所涉及在线场景应用的制作终端的结构示意图，该终端可以用于实施上述实施例中提供的在线场景应用的制作方法。具体来讲：

终端1400可以包括RF(Radio Frequency，射频)电路110、包括有一个或一个以上计算机可读存储介质的存储器120、输入单元130、显示单元140、传感器150、音频电路160、WiFi(Wireless Fidelity，无线保真)模块170、包括有一个或者一个以上处理核心的处理器180、以及电源190等部件。本领域技术人员可以理解，图14中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

RF电路110可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器180处理；另外，将涉及上行的数据发送给基站。通常，RF电路110包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM)卡、收发信机、耦合器、LNA(Low Noise Amplifier，低噪声放大器)、双工器等。此外，RF电路110还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于GSM(Global System of Mobile communication，全球移动通讯系统)、GPRS(General Packet Radio Service，通用分组无线服务)、CDMA(CodeDivision Multiple Access，码分多址)、WCDMA(Wideband Code Division MultipleAccess,宽带码分多址)、LTE(Long Term Evolution,长期演进)、电子邮件、SMS(ShortMessaging Service，短消息服务)等。

存储器120可用于存储软件程序以及模块，处理器180通过运行存储在存储器120的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器120可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据终端1400的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器120还可以包括存储器控制器，以提供处理器180和输入单元130对存储器120的访问。

输入单元130可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，输入单元130可包括触敏表面131以及其他输入设备132。触敏表面131，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面131上或在触敏表面131附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面131可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器180，并能接收处理器180发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面131。除了触敏表面131，输入单元130还可以包括其他输入设备132。具体地，其他输入设备132可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元140可用于显示由用户输入的信息或提供给用户的信息以及终端1400的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元140可包括显示面板141，可选的，可以采用LCD(Liquid Crystal Display，液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等形式来配置显示面板141。进一步的，触敏表面131可覆盖显示面板141，当触敏表面131检测到在其上或附近的触摸操作后，传送给处理器180以确定触摸事件的类型，随后处理器180根据触摸事件的类型在显示面板141上提供相应的视觉输出。虽然在图14中，触敏表面131与显示面板141是作为两个独立的部件来实现输入和输入功能，但是在某些实施例中，可以将触敏表面131与显示面板141集成而实现输入和输出功能。

终端1400还可包括至少一种传感器150，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板141的亮度，接近传感器可在终端1400移动到耳边时，关闭显示面板141和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于终端1400还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路160、扬声器161，传声器162可提供用户与终端1400之间的音频接口。音频电路160可将接收到的音频数据转换后的电信号，传输到扬声器161，由扬声器161转换为声音信号输出；另一方面，传声器162将收集的声音信号转换为电信号，由音频电路160接收后转换为音频数据，再将音频数据输出处理器180处理后，经RF电路110以发送给比如另一终端，或者将音频数据输出至存储器120以便进一步处理。音频电路160还可能包括耳塞插孔，以提供外设耳机与终端1400的通信。

WiFi属于短距离无线传输技术，终端1400通过WiFi模块170可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图14示出了WiFi模块170，但是可以理解的是，其并不属于终端1400的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器180是终端1400的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器120内的软件程序和/或模块，以及调用存储在存储器120内的数据，执行终端1400的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器180可包括一个或多个处理核心；可选的，处理器180可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器180中。

终端1400还包括给各个部件供电的电源190(比如电池)，优选的，电源可以通过电源管理系统与处理器180逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源190还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，终端1400还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，终端1400的显示单元是触摸屏显示器，终端1400还包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行。所述一个或者一个以上程序包含用于执行以下操作的指令：

在指定在线场景应用制作界面的第一区域内，显示多个用户界面组件，每个用户界面组件对应一个结构代码及样式代码；

当检测到对第一区域内任一用户界面组件的拖拽操作时，根据检测到的拖拽操作，将用户界面组件复制后移动到指定在线场景应用制作界面的第二区域内；

获取第二区域内每个用户界面组件对应的结构代码及样式代码；

执行第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用。

假设上述为第一种可能的实施方式，则在第一种可能的实施方式作为基础而提供的第二种可能的实施方式中，终端的存储器中，还包含用于执行以下操作的指令：

显示多个用户界面组件之前，还包括：

获取多个用户界面组件视觉稿；

获取每个用户界面组件视觉稿对应的结构代码和样式代码；

将每个用户界面组件视觉稿对应的结构代码和样式代码封装成一个用户界面组件。

假设上述为第二种可能的实施方式，则在第二种可能的实施方式作为基础而提供的第三种可能的实施方式中，终端的存储器中，还包含用于执行以下操作的指令：

获取每个用户界面组件视觉稿对应的结构代码和样式代码之后，还包括：

如果任一用户界面组件视觉稿标识有交互行为，则获取用户界面组件视觉稿对应的交互代码。

假设上述为第三种可能的实施方式，则在第三种可能的实施方式作为基础而提供的第四种可能的实施方式中，终端的存储器中，还包含用于执行以下操作的指令：

执行第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用之后，还包括：

将指定在线场景应用上传到网络服务器，由网络服务器提供指定在线场景应用下载地址对应的二维码。

假设上述为第四种可能的实施方式，则在第四种可能的实施方式作为基础而提供的第五种可能的实施方式中，终端的存储器中，还包含用于执行以下操作的指令：该方法还包括：

获取预先设置的场景制作格式，场景制作格式包括颜色格式、字体字号格式、排版格式、图标格式、图片尺寸格式、商标LOGO格式、页面布局格式、动画格式、组件和组件交互格式；

基于场景制作格式制作指定在线场景应用。

本发明实施例提供的终端，在指定在线场景应用制作界面的第一区域上提供用户界面组件，无需用户学习专业的制作技术，依据不同在线场景应用的设计需求，通过在第二区域上进行模板的配置、组件的拖拽及微调整，即可制作出符合用户需求的在线场景应用，因此，大大地降低了学习成本及制作难度。

本发明实施例还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中的存储器中所包含的计算机可读存储介质；也可以是单独存在，未装配入终端中的计算机可读存储介质。该计算机可读存储介质存储有一个或者一个以上程序，该一个或者一个以上程序被一个或者一个以上的处理器用来执行在线场景应用的制作方法，该方法包括：

在指定在线场景应用制作界面的第一区域内，显示多个用户界面组件，每个用户界面组件对应一个结构代码及样式代码；

当检测到对第一区域内任一用户界面组件的拖拽操作时，根据检测到的拖拽操作，将用户界面组件复制后移动到指定在线场景应用制作界面的第二区域内；

获取第二区域内每个用户界面组件对应的结构代码及样式代码；

执行第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用。

假设上述为第一种可能的实施方式，则在第一种可能的实施方式作为基础而提供的第二种可能的实施方式中，终端的存储器中，还包含用于执行以下操作的指令：

显示多个用户界面组件之前，还包括：

获取多个用户界面组件视觉稿；

获取每个用户界面组件视觉稿对应的结构代码和样式代码；

将每个用户界面组件视觉稿对应的结构代码和样式代码封装成一个用户界面组件。

假设上述为第二种可能的实施方式，则在第二种可能的实施方式作为基础而提供的第三种可能的实施方式中，终端的存储器中，还包含用于执行以下操作的指令：

获取每个用户界面组件视觉稿对应的结构代码和样式代码之后，还包括：

如果任一用户界面组件视觉稿标识有交互行为，则获取用户界面组件视觉稿对应的交互代码。

假设上述为第三种可能的实施方式，则在第三种可能的实施方式作为基础而提供的第四种可能的实施方式中，终端的存储器中，还包含用于执行以下操作的指令：

执行第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用之后，还包括：

将指定在线场景应用上传到网络服务器，由网络服务器提供指定在线场景应用下载地址对应的二维码。

假设上述为第四种可能的实施方式，则在第四种可能的实施方式作为基础而提供的第五种可能的实施方式中，终端的存储器中，还包含用于执行以下操作的指令：该方法还包括：

获取预先设置的场景制作格式，场景制作格式包括颜色格式、字体字号格式、排版格式、图标格式、图片尺寸格式、商标LOGO格式、页面布局格式、动画格式、组件和组件交互格式；

基于场景制作格式制作指定在线场景应用。

本发明实施例提供的计算机可读存储介质，在指定在线场景应用制作界面的第一区域上提供用户界面组件，无需用户学习专业的制作技术，依据不同在线场景应用的设计需求，通过在第二区域上进行模板的配置、组件的拖拽及微调整，即可制作出符合用户需求的在线场景应用，因此，大大地降低了学习成本及制作难度。

本发明实施例中提供了一种图形用户接口，该图形用户接口用在在线场景应用的制作终端上，该执行在线场景应用的制作终端包括触摸屏显示器、存储器和用于执行一个或者一个以上的程序的一个或者一个以上的处理器；该图形用户接口包括：

在指定在线场景应用制作界面的第一区域内，显示多个用户界面组件，每个用户界面组件对应一个结构代码及样式代码；

当检测到对第一区域内任一用户界面组件的拖拽操作时，根据检测到的拖拽操作，将用户界面组件复制后移动到指定在线场景应用制作界面的第二区域内；

获取第二区域内每个用户界面组件对应的结构代码及样式代码；

执行第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用。

本发明实施例提供的图形用户接口，在指定在线场景应用制作界面的第一区域上提供用户界面组件，无需用户学习专业的制作技术，依据不同在线场景应用的设计需求，通过在第二区域上进行模板的配置、组件的拖拽及微调整，即可制作出符合用户需求的在线场景应用，因此，大大地降低了学习成本及制作难度。

需要说明的是：上述实施例提供的在线场景应用的制作装置在制作在线场景应用时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将在线场景应用的制作装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的在线场景应用的制作装置与在线场景应用的制作方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种在线场景应用的制作方法，其特征在于，所述方法包括：

在制作用户界面组件时，获取多个用户界面组件视觉稿；

获取每个用户界面组件视觉稿对应的结构代码和样式代码；

对于每个用户界面组件视觉稿，将所述用户界面组件视觉稿对应的结构代码和样式代码封装成一个用户界面组件；

当制作在线场景应用时，在指定在线场景应用制作界面的第一区域内，显示已制作完成的多个用户界面组件，每个用户界面组件对应一个结构代码及样式代码；

当检测到对所述第一区域内任一用户界面组件的拖拽操作时，根据检测到的拖拽操作，将所述用户界面组件复制后移动到指定在线场景应用制作界面的第二区域内；

若检测到用户对所述用户界面组件的调整操作，根据所述调整操作修改所述用户界面组件的样式代码，所述调整操作包括样式、内容或行为中的至少一种；

获取所述第二区域内每个用户界面组件对应的结构代码及样式代码；

当检测到制作选项的触发操作时，执行所述第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用。

2.根据权利要求1所述的方法，其特征在于，所述获取每个用户界面组件视觉稿对应的结构代码和样式代码之后，还包括：

如果任一用户界面组件视觉稿标识有交互行为，则获取所述用户界面组件视觉稿对应的交互代码。

3.根据权利要求1所述的方法，其特征在于，所述执行所述第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用之后，还包括：

将所述指定在线场景应用上传到网络服务器，由所述网络服务器提供所述指定在线场景应用下载地址对应的二维码。

4.根据权利要求1至3中任一权利要求所述的方法，其特征在于，所述方法还包括：

获取预先设置的场景制作格式，所述场景制作格式包括颜色格式、字体字号格式、排版格式、图标格式、图片尺寸格式、商标LOGO格式、页面布局格式、动画格式、组件和组件交互格式；

基于所述场景制作格式制作所述指定在线场景应用。

5.一种在线场景应用的制作装置，其特征在于，所述装置包括：

第二获取模块，用于在制作用户界面组件时，获取多个用户界面组件视觉稿；

第三获取模块，用于获取每个用户界面组件视觉稿对应的结构代码和样式代码；

封装模块，用于对于每个用户界面组件视觉稿，将所述用户界面组件视觉稿对应的结构代码和样式代码封装成一个用户界面组件；

显示模块，用于当制作在线场景应用时，在指定在线场景应用制作界面的第一区域内，显示已制作完成的多个用户界面组件，每个用户界面组件对应一个结构代码及样式代码；

移动模块，用于当检测到对所述第一区域内任一用户界面组件的拖拽操作时，根据检测到的拖拽操作，将所述用户界面组件复制后移动到指定在线场景应用制作界面的第二区域内；

所述移动模块，还用于若检测到用户对所述用户界面组件的调整操作，根据所述调整操作修改所述用户界面组件的样式代码，所述调整操作包括样式、内容或行为中的至少一种；

第一获取模块，用于获取所述第二区域内每个用户界面组件对应的结构代码及样式代码；

执行模块，用于当检测到制作选项的触发操作时，执行所述第二区域内每个用户界面组件的对应结构代码及样式代码，得到指定在线场景应用。

6.根据权利要求5所述的装置，其特征在于，所述装置还包括：

第四获取模块，用于当任一用户界面组件视觉稿标识有交互行为时，获取所述用户界面组件视觉稿对应的交互代码。

7.根据权利要求5所述的装置，其特征在于，所述装置还包括：

上传模块，用于将所述指定在线场景应用上传到网络服务器，由所述网络服务器提供所述指定在线场景应用下载地址对应的二维码。

8.根据权利要求5至7中任一权利要求所述的装置，其特征在于，所述装置还包括：

第五获取模块，用于获取预先设置的场景制作格式，所述场景制作格式包括颜色格式、字体字号格式、排版格式、图标格式、图片尺寸格式、商标LOGO格式、页面布局格式、动画格式、组件和组件交互格式；

制作模块，用于基于所述场景制作格式制作所述指定在线场景应用。

9.一种终端，其特征在于，所述终端包括处理器和存储器，所述存储器用于存储至少一条程序代码，所述至少一条程序代码由所述处理器加载并执行权利要求1至4任一权利要求所述的在线场景应用的制作方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质用于存储至少一条程序代码，所述至少一条程序代码用于执行权利要求1至4任一权利要求所述的在线场景应用的制作方法。

Images