手机页面构建方法和装置与流程

本发明涉及云计算、移动互联网领域，特别涉及一种手机页面构建方法和装置。

背景技术：

随着web技术的发展，页面表现能力增强，用户也逐渐从内容的使用者慢慢成为内容的创造者和编辑者，因此如何通过简单的界面模版和组件迅速开发手机页面，是目前的研究热点之一。

目前的拖拽式手机网页设计器主要有以下两种：一是采用基础的html(hypertextmarkuplanguage，超级文本标记语言)元素作为组件，拖拽组件，并且以可视化的方式设置元素原生的属性，来搭建和调整页面结构，需要另外添加css(或采用可视化方式设置)和js来增强样式和行为，达到真正可用；二是针对手机网页的特点，结合使用html、css(cascadingstylesheets，层叠样式表)、js(javascript，一种脚本编程语言)封装成常见的业务组件，组件的功能完善和固定，可以通过参数设置来填充内容和样式行为的调整。

以上两种方式有各自的优缺点。第一种方式功能是全面的，能实现所有网页技术能实现的外观和效果，但是使用的复杂度较高，仍然需要具有网页编程基础的专业人员来使用，且开发的时间较长，主要面向开发者或设计人员；第二种方式非常方便快捷，普通的电脑操作人员，经过简单的步骤就能构建出可用的页面，实现大多数的通用效果，但是局限性在于组件比较固化，只能设置常见的通用效果，不能满足一些个性化的需求，而且手机网页ui(userinterface，用户界面)的流行趋势改变时，需要比较频繁地对组件作调整。

技术实现要素：

鉴于以上技术问题，本发明提供了一种功能全面、组件可个性化设置的、使用方便的手机页面构建方法和装置，使得用户可通过拖拽的方式，简单快速地制作出灵活且丰富多样的页面。

根据本发明的一个方面，提供一种手机页面构建方法，包括：

根据手机页面的功能预先设置结构化组件；

根据用户指示，将目标结构化组件拖动至指定位置；

在拖动目标结构化组件的过程中，向用户显示操作提示信息。

在本发明的一个实施例中，所述根据手机页面的功能预先设置结构化组件包括：

采用自顶向下的方法对手机网页的功能进行分解；

根据分解的手机网页功能设置结构化组件，以保证组件功能的独立性和组件集合功能的完备性。

在本发明的一个实施例中，所述根据分解的手机网页功能设置结构化组件包括：

根据手机网页的信息输出功能设置文本组件和图片组件，根据手机网页的信息输入功能设置表单元素组件；

根据手机网页的外观效果展示功能，设置主体容器组件、顶/底部栏组件、菜单组件、底板组件、网格组件、横向滑动组件和开合面板组件；

根据手机网页的后台数据连接功能，设置数据源组件和表单组件。

在本发明的一个实施例中，所述根据用户指示，将结构化组件拖动至指定位置包括：

根据用户选择，从工具栏或界面现有组件中确定目标结构化组件；

根据用户指示，将目标结构化组件拖动至指定界面；

根据用户指示以及嵌套规则，对目标结构化组件进行嵌套使用；

根据用户指示，将目标结构化组件拖动至指定位置，并隐藏辅助显示效果。

在本发明的一个实施例中，所述根据手机页面的功能预先设置结构化组件还包括：

将结构化组件根据嵌套规则分为顶级容器组件、容器组件和原子内容组件，其中：

顶级容器组件包括主体容器组件、顶/底部栏组件和菜单组件，顶级容器组件可以嵌套其他任意组件，不可被嵌套；

包装容器组件包括底板组件、网格组件、横向滑动组件、开和面板组件、数据源组件和表单组件，包装容器组件可以嵌套除顶级容器组件外的任意组件，可以被顶级容器组件和包装容器组件嵌套；

原子内容组件包括文本组件、图片组件和表单元素组件，原子内容组件不可以嵌套其他组件，可以被任意其他类的组件嵌套。

根据本发明的另一方面，提供一种手机页面构建装置，包括组件设置模块、组件移动模块和辅助显示模块，其中：

组件设置模块，用于根据手机页面的功能预先设置结构化组件；

组件移动模块，用于根据用户指示，将目标结构化组件拖动至指定位置；

辅助显示模块，在组件移动模块拖动目标结构化组件的过程中，向用户显示操作提示信息。

在本发明的一个实施例中，组件设置模块包括网页功能分解单元和组件设置单元，其中：

网页功能分解单元，用于采用自顶向下的方法对手机网页的功能进行分解；

组件设置单元，用于根据分解的手机网页功能设置结构化组件，以保证组件功能的独立性和组件集合功能的完备性。

在本发明的一个实施例中，组件设置单元用于根据手机网页的信息输出功能设置文本组件和图片组件，根据手机网页的信息输入功能设置表单元素组件；根据手机网页的外观效果展示功能，设置主体容器组件、顶/底部栏组件、菜单组件、底板组件、网格组件、横向滑动组件和开合面板组件；并根据手机网页的后台数据连接功能，设置数据源组件和表单组件。

在本发明的一个实施例中，组件移动模块包括组件选择单元、组件拖动单元、组件嵌套单元和组件位置确定单元，其中：

组件选择单元，用于根据用户选择，从工具栏或界面现有组件中确定目标结构化组件；

组件拖动单元，用于根据用户指示，将目标结构化组件拖动至指定界面；

组件嵌套单元，用于根据用户指示以及嵌套规则，对目标结构化组件进行嵌套使用；

组件位置确定单元，用于根据用户指示，将目标结构化组件拖动至指定位置，并隐藏辅助显示效果。

在本发明的一个实施例中，组件设置模块还包括组件分类单元，其中：

组件分类模块，用于将结构化组件根据嵌套规则分为顶级容器组件、容器组件和原子内容组件，其中：

顶级容器组件包括主体容器组件、顶/底部栏组件和菜单组件，顶级容器组件可以嵌套其他任意组件，不可被嵌套；

包装容器组件包括底板组件、网格组件、横向滑动组件、开和面板组件、数据源组件和表单组件，包装容器组件可以嵌套除顶级容器组件外的任意组件，可以被顶级容器组件和包装容器组件嵌套；

原子内容组件包括文本组件、图片组件和表单元素组件，原子内容组件不可以嵌套其他组件，可以被任意其他类的组件嵌套。

在本发明的一个实施例中，所述装置还包括前端展现模块，其中前端展现模块包括工具栏单元、页面设计展示单元和属性编辑单元，其中：

工具栏单元，用于向用户展示预先设置的结构化组件，以便用户选择目标结构化组件；

页面设计展示单元，用于向用户展示页面设计过程和涉及效果；

属性编辑单元，用于接收用户针对结构化组件的属性编辑信息，以便对结构化组件的属性进行编辑。

本发明功能全面，组件可个性化设置，使用方便；使得用户可通过拖拽的方式，简单快速地制作出灵活且丰富多样的页面。

附图说明

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

图1为本发明手机页面构建方法一个实施例的示意图。

图2为本发明一个实施例中预先设置结构化组件的示意图。

图3为本发明一个实施例中手机网页功能分解的示意图。

图4为本发明一个实施例中手机网页界面区域划分的示意图。

图5为本发明一个实施例中手机网页界面内容布局方式的示意图。

图6为本发明一个实施例中结构化组件嵌套规则的示意图。

图7为本发明一个实施例中将结构化组件拖动至指定位置的示意图。

图8为本发明另一实施例中将结构化组件拖动至指定位置的示意图。

图9为本发明手机页面构建装置第一实施例的示意图。

图10为本发明一个实施例中组件设置模块的示意图。

图11为本发明一个实施例中组件移动模块的示意图。

图12为本发明手机页面构建装置第二实施例的示意图。

图13为本发明一个实施例中前端展现模块的示意图。

图14为本发明手机页面构建装置第三实施例的示意图。

图15为本发明一个实施例中创建商品列表页面的示意图。

图16为本发明一个实施例中商品列表页面的最终效果示意图。

图17为本发明一个实施例中商品列表页面的结构化组件灵活变化的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为授权说明书的一部分。

在这里示出和讨论的所有示例中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它示例可以具有不同的值。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

图1为本发明手机页面构建方法一个实施例的示意图。优选的，本实施例可由本发明手机页面构建装置执行。如图1所示，该方法包括以下步骤：

步骤1，根据手机页面的功能预先设置结构化组件。

步骤2，根据用户指示，将目标结构化组件拖动至指定位置。

步骤3，在拖动目标结构化组件的过程中，向用户显示操作提示信息。

下面通过具体实施例对本发明上述实施例的步骤1-3进行进一步介绍。

图2为本发明一个实施例中预先设置结构化组件的示意图。如图2所示，图1实施例的步骤1可以包括：

步骤11，采用自顶向下的方法对手机网页的功能进行分解。针对手机网页功能的特点，需要涵盖的功能包括：信息输出输入、外观效果展示、后台数据连接。总体功能分解如附图3。

步骤12，根据分解的手机网页功能设置结构化组件，以保证组件功能的独立性和组件集合功能的完备性。

在本发明的一个实施例中，步骤12具体可以包括：

步骤121，针对信息输出输入功能。

根据手机网页的信息输出功能设置文本组件和图片组件，根据手机网页的信息输入功能设置表单元素组件。

步骤122，外观效果展示功能。

步骤1221，根据手机网页界面展示的特点，将界面划分为主体区域、顶/底部栏区域、菜单(上、下、左、右、浮层五个部分)区域，分别对应设计主体容器组件、顶/底部栏组件、菜单组件。区域划分如附图4。

步骤1222，各个区域的内容布局以纵向为主，对应设计底板组件；横向及其他方式为辅，包括横向分栏，对应设计网格组件；横向滑动，对应设计横向滑动组件；局部内容块的显示/隐藏，对应设计开合面板组件。各种布局方式如附图5。

步骤123，后台数据连接功能。

步骤123主要包括：获取后台数据供前端展示，对应设计数据源组件；提交用户输入数据到后台，对应设计表单组件。

在本发明的一个实施例中，如图2所示，图1实施例的步骤1还可以包括：

步骤13，将结构化组件根据嵌套规则分为顶级容器组件、容器组件和原子内容组件，组件的嵌套规则如下(参见图6)：

顶级容器组件包括主体容器组件、顶/底部栏组件和菜单组件，顶级容器组件可以嵌套其他任意组件，不可被嵌套。

包装容器组件包括底板组件、网格组件、横向滑动组件、开和面板组件、数据源组件和表单组件，包装容器组件可以嵌套除顶级容器组件外的任意组件，可以被顶级容器组件和包装容器组件嵌套。

原子内容组件包括文本组件、图片组件和表单元素组件，原子内容组件不可以嵌套其他组件，可以被任意其他类的组件嵌套。

在本发明的另一实施例中，如图2所示，图1实施例的步骤1还可以包括：

步骤14，在设计结构化组件的过程中，还需要自底向上的考虑技术实现，确保组件的可用性。

充分利用网页编程技术中与各个组件功能契合的技术特性来构建组件，达到最好实现效果。以下是构建各个组件的关键技术：

1、主体容器组件：html的块元素div实现，div元素原生的纵向伸缩特性实现纵向可无限嵌套放置组件；css的min-height属性控制其为空时默认高度充满整个界面。

2、顶/底部栏组件：html的顶/底部栏元素header/footer实现；css的position属性控制定位固定在顶/底部。

3、菜单组件：html的辅助区块元素aside实现；css的position、top、bottom、left、right属性控制其定位，translate属性控制其过场效果；js绑定监听事件，触发其打开关闭。

4、底板：html的块元素div实现，div元素原生的纵向排列特性实现纵向布局；css的width和height属性控制大小，background-color、border、border-radius属性控制形状样式，padding属性控制四周的边距。

5、网格组件：多个html的块元素div组合实现；css的float属性控制内容块的横向排列，width属性设置各个分栏的宽度。

6、横向滑动组件：两层结构的html的块元素div组合实现；css的overflow属性隐藏超出页面的内容；js实现事件的监听、滑动效果。

7、开合面板组件：多个html的块元素div组合实现；css的display属性控制内容块的显示和隐藏样式；js实现事件监听，触发显示和隐藏的切换。

8、数据源组件：ajax技术获取后台数据，更新至前端。

9、表单组件：ajax技术提交数据至后台，提示状态信息。

10、文本组件：html的文本元素p元素实现；css的font-size、font-family、font-weight、font-style、color、line-height等属性控制文字的各种样式。

11、图片组件：html的图片元素img实现；css的width、height属性控制大小。

12、表单元素组件：html的表单元素input、textarea、select等实现，元素属性palceholder实现文本框的输入提示，checked实现单/多选框的选中状态，selected实现选择框的选中状态，rows控制控制多行文本框的行数列数。

图7为本发明一个实施例中将结构化组件拖动至指定位置的示意图。如图7所示，图1实施例的步骤2可以包括：

步骤21，根据用户选择，从工具栏或界面现有组件中确定目标结构化组件。

步骤22，根据用户指示，将目标结构化组件拖动至指定界面。

步骤23，根据用户指示以及嵌套规则，对目标结构化组件进行嵌套使用。

步骤24，根据用户指示，将目标结构化组件拖动至指定位置，并隐藏辅助显示效果。

图8为本发明另一实施例中将结构化组件拖动至指定位置的示意图。如图8所示，图1实施例的步骤2可以包括：

步骤(1)，顶级容器类组件显示在默认位置，以设置参数的方式设置是否显示和调整状态。

步骤(2)，其他组件以拖拽的方式来放置位置，并且以设置参数的方式调整状态。

步骤(3)，可从组件工具面板拖拽新的组件添加，也可以从界面拖拽已存在的组件到新的位置，内部嵌套的组件跟随父组件整体拖拽。

步骤(4)，拖拽经过组件上方时，显示出上下层嵌套的层次结构，可放置的位置显示引导性提示。

步骤(5)，拖拽离开界面或放置组件后，取消所有辅助信息，恢复到正常的界面状态，即和最终要实现的效果保持一致。

基于本发明上述实施例提供的基于结构化组件的拖拽式手机页面方法，为手机网页快速构建提供解决方案，面向普通电脑操作人员，提供一种功能全面、组件可个性化设置的、使用方便的手机网页设计方法，使得用户可通过拖拽的方式，简单快速地制作出灵活且丰富多样的页面。

本发明上述实施例针对手机网页的特点，将页面拆分成独立的、可嵌套的组件，并基于此提供了多粒度的业务组件；在拖拽式操作方面，提出并实现了可显示辅助效果的方案，在无操作时隐藏所有辅助效果，保持界面与最终展示效果一致。

相比现有的采用基础的html元素作为组件的实现方式，本发明上述实施例的优点在于：使用简单，没有技术门槛，普通的电脑操作人员能轻易上手；针对性强，制作出的页面符合手机网页常见展现方式和业务逻辑；开发快速，组件粒度相对合理，拖拽过程相对优化，参数设置的概括性高，大大减少了操作时间。

相比现有的封装固化业务组件的实现方式，本发明上述实施例中结构化组件的优点在于：比较灵活，既能通过嵌套的组件完成复杂的展现和功能，又能调整内部部分组件，来完成一些个性化的需求；生命周期持久，界面是由一些基本的功能组件构成的，不容易随时间而改变，当手机网页ui的流行趋势改变时，可以很容易地使用基础组件搭建出新的业务模块。

图9为本发明手机页面构建装置第一实施例的示意图。如图9所示，本发明基于结构化组件的拖拽式手机页面构建装置可以包括组件设置模块91、组件移动模块92和辅助显示模块93，其中：

组件设置模块91，用于根据手机页面的功能预先设置结构化组件。

组件移动模块92，用于根据用户指示，将目标结构化组件拖动至指定位置。

辅助显示模块93，在组件移动模块92拖动目标结构化组件的过程中，向用户显示操作提示信息。

图10为本发明一个实施例中组件设置模块的示意图。如图10所示，图9实施例中的组件设置模块91可以包括网页功能分解单元911和组件设置单元912，其中：

网页功能分解单元911，用于采用自顶向下的方法对手机网页的功能进行分解。

组件设置单元912，用于根据分解的手机网页功能设置结构化组件，以保证组件功能的独立性和组件集合功能的完备性。

在本发明的一个实施例中，组件设置单元912可以用于根据手机网页的信息输出功能设置文本组件和图片组件，根据手机网页的信息输入功能设置表单元素组件；根据手机网页的外观效果展示功能，设置主体容器组件、顶/底部栏组件、菜单组件、底板组件、网格组件、横向滑动组件和开合面板组件；并根据手机网页的后台数据连接功能，设置数据源组件和表单组件。

在本发明的一个实施例中，如图10所示，组件设置模块91还可以包括组件分类单元913，其中：

组件分类单元913，用于将结构化组件根据嵌套规则分为顶级容器组件、容器组件和原子内容组件，其中：

顶级容器组件包括主体容器组件、顶/底部栏组件和菜单组件，顶级容器组件可以嵌套其他任意组件，不可被嵌套；

包装容器组件包括底板组件、网格组件、横向滑动组件、开和面板组件、数据源组件和表单组件，包装容器组件可以嵌套除顶级容器组件外的任意组件，可以被顶级容器组件和包装容器组件嵌套；

原子内容组件包括文本组件、图片组件和表单元素组件，原子内容组件不可以嵌套其他组件，可以被任意其他类的组件嵌套。

图11为本发明一个实施例中组件移动模块的示意图。如图11所示，图9实施例中的组件移动模块92可以包括组件选择单元921、组件拖动单元922、组件嵌套单元923和组件位置确定单元924，其中：

组件选择单元921，用于根据用户选择，从工具栏或界面现有组件中确定目标结构化组件。

组件拖动单元922，用于根据用户指示，将目标结构化组件拖动至指定界面。

组件嵌套单元923，用于根据用户指示以及嵌套规则，对目标结构化组件进行嵌套使用；

组件位置确定单元924，用于根据用户指示，将目标结构化组件拖动至指定位置，并隐藏辅助显示效果。

基于本发明上述实施例提供的基于结构化组件的拖拽式手机页面装置，针对手机网页的结构化组件设计方案：采用自顶向下的方法对手机网页的功能进行分解，以此为基础来设计组件，确保了组件功能的独立性，和组件集合功能的完备性；组件的嵌套使用，可以得到无限多种组合变化的功能，使得设计器具有极大地灵活性；每个组件的技术实现充分利用网页编程技术中原生与之最契合方法，确保达到最好的可用性和兼容性。

本发明上述实施例采用对结构化组件所即所得的拖拽操作方法。在拖拽操作时显示出辅助效果，如组件显示层次结构、组件类型提示、拖拽放置位置提示等，来引导使用户准确、快速地将组件放置到想要的位置；无操作时隐藏所有辅助效果，保持界面与最终所要得到的状态一致。

图12为本发明手机页面构建装置第二实施例的示意图。与图9所示实施例相比，在图12所示实施例中，所述手机页面构建装置还可以包括前端展现模块94。

图13为本发明一个实施例中前端展现模块的示意图。如图13所示，图12实施例中的前端展现模块94可以包括工具栏单元941、页面设计展示单元942和属性编辑单元943，其中：

工具栏单元941，用于向用户展示预先设置的结构化组件，以便用户选择目标结构化组件。

页面设计展示单元942，用于向用户展示页面设计过程和涉及效果。

属性编辑单元943，用于接收用户针对结构化组件的属性编辑信息，以便对结构化组件的属性进行编辑。

图14为本发明手机页面构建装置第三实施例的示意图。如图14所示，所述手机页面构建装置可以包括web前端模块100和后台服务云平台200，其中：

web前端模块100，可以实现为本发明上述实施例的前端展现模块94。

后台服务云平台200，可以实现为本发明上述实施例的组件设置模块91、组件移动模块92和辅助显示模块93。

下面通过具体示例对本发明进行说明：

图15为本发明一个实施例中创建商品列表页面的示意图。

一、如图15所示，商品列表页面采用的结构化组件可以包括：

1、数据源组件：负责请求后台商品数据；实时填充内容，即根据第一个单元格的内容智能填充其他所有单元格。

2、底板组件：负责一个列表项区块的划分。

3、网格组件：a、负责搭建列表的基本骨架、绑定数据源(每个单元格与一条数据绑定)b、一个列表项中的结构布局。

4、文本组件：展示商品的文字信息和样式，绑定数据源(文字内容与数据字段绑定)。

5、图片组件展示商品的图片信息和样式，绑定数据源(图片链接与数据字段绑定)。

二、选用的结构化组件的层次结构，如图15所示，可以包括：

1、第一层数据源组件，使内部的组件能使用它请求到的数据。

2、第二层是一个多行1列的网格组件，形成列表的基本形态。

3、第三层是底板组件，划分出每一行的区块，设置底部边线来分隔行。

4、第四层是一个1行2列的网格，将每行划分成左右两列。

5、第五层是一个1行4列的网格组件，将列的右侧区域进一步划分为4列。

6、再在分割好的区域中分别放置图片组件和文字组件。

三、显示最终效果

在结构化组件拖拽完毕后，以上的层次结构线消失，显示正常效果。如图16所示。

四、结构化组件的灵活变化

当业务需求发生变化，需要以图册的样式展现商品列表(如图17所示)，只要将最外层的多行1列的网格设置为多行2列，再对单元格内部的内容做简单调整即可实现。

相比现有的采用基础的html元素作为组件的实现方式，本发明上述实施例的优点在于：使用简单，没有技术门槛，普通的电脑操作人员能轻易上手；针对性强，制作出的页面符合手机网页常见展现方式和业务逻辑；开发快速，组件粒度相对合理，拖拽过程相对优化，参数设置的概括性高，大大减少了操作时间。

相比现有的封装固化业务组件的实现方式，本发明上述实施例中结构化组件的优点在于：比较灵活，既能通过嵌套的组件完成复杂的展现和功能，又能调整内部部分组件，来完成一些个性化的需求；生命周期持久，界面是由一些基本的功能组件构成的，不容易随时间而改变，当手机网页ui的流行趋势改变时，可以很容易地使用基础组件搭建出新的业务模块。

在上面所描述的组件设置模块91、组件移动模块92、辅助显示模块93等功能单元可以实现为用于执行本申请所描述功能的通用处理器、可编程逻辑控制器(plc)、数字信号处理器(dsp)、专用集成电路(asic)、现场可编程门阵列(fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件或者其任意适当组合。

至此，已经详细描述了本发明。为了避免遮蔽本发明的构思，没有描述本领域所公知的一些细节。本领域技术人员根据上面的描述，完全可以明白如何实施这里公开的技术方案。

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

本发明的描述是为了示例和描述起见而给出的，而并不是无遗漏的或者将本发明限于所公开的形式。很多修改和变化对于本领域的普通技术人员而言是显然的。选择和描述实施例是为了更好说明本发明的原理和实际应用，并且使本领域的普通技术人员能够理解本发明从而设计适于特定用途的带有各种修改的各种实施例。