CN108875063A - 一种基于手机端页头自定义修改风格及功能的方法 - Google Patents

Abstract

本发明公开了一种基于手机端页头自定义修改风格及功能的方法，其特征在于，包括步骤1，区分出常用页头组件和非常用页头组件；步骤2：自动抓取并识别组件；步骤3：移动端页头组件筛选及过滤，并形成移动端组件信息；步骤4：基于PC端设置的页头风格形成移动端网页页头风格；步骤6:页头风格效果的展示；步骤7：移动端页头组件列表的初始化；步骤8：勾选组件；步骤9：保存页头风格标识码和页头组件参数并计算页头显示效果。本发明通过内置的多套风格样式，能够满足用户的个性化需求，并且内置风格的样式会随着组件和功能的变化而适当的调整，流式布局能合理的调整各个模块的在页头的位置来保证美观性。

Description

一种基于手机端页头自定义修改风格及功能的方法

技术领域

本发明涉及网页设计领域，特别是涉及一种基于手机端页头自定义修改风格及功能的方法。

背景技术

伴随着智能机诞生，人们已经逐渐将日常的办公、信息获取及生活娱乐开始从pc端(个人)迁移到移动端，这也意味着对于移动端网站的美观和用户体验的要求会越来越高。对于移动端网站而言，网站页头显得尤其重要，既承载着对网站logo和企业信息包括整体风格的展示，还得拥有导航，登录/注册功能，对于电商网站更得涉及支付和个人购物信息的展示。

传统的建站***虽然能在一定程度上满足用户的响应式需求，但在手机端网站的页头方面，往往是趋于模板类型的，即是固定无法改变的，缺乏样式灵活性。无法满足用户多样化的需求。又或者无法满足功能的多样性。即所需要的功能没有，但不需要的功能却无法去掉。而且很难将样式美观和功能多样有机的结合到一块。当然也存在操作很复杂，对于新手体验者很难快速掌握，学习成本比较高的缺点。

为解决和满足人们对于移动端网站日趋美观和拥有强大功能的迫切需求，如何实现移动端网页页头既能顺应网页版功能日益更新的功能，又能保证美观和良好的用户体验，是值得去关注的技术问题。

发明内容

本发明所要解决的技术问题是克服现有技术的不足，提供一种基于手机端页头自定义修改风格及功能的方法。

为解决上述技术问题，本发明提供一种基于手机端页头自定义修改风格及功能的方法，包括如下步骤：

步骤1：基于对大量电子商务网站网页页头区域内共性组件分析，区分出常用页头组件和非常用页头组件，并将所有常用页头组件的集合定义为手机端网页页头常用组件列表，即页头常用组件列表，用于存储在手机端页头区域出现频率较多的组件信息；

步骤2：自动抓取并识别组件：当用户在pc端(个人电脑)添加并设置完某一个网页的所有组件后，切换至手机端时，***将根据PC端网页内各个组件定义在其DIV包裹框的组件信息，判断该组件属于哪一类型组件，并提取PC端网页页头区域内所有组件的数据，即PC端页头组件数据，打包发送至服务器端；

步骤3：移动端页头组件筛选及过滤，并形成移动端组件信息：当服务器端接收到PC端页头组件数据后，根据页头常用组件列表对获取到的PC端页头组件筛选和删除，若PC端页头组件能在页头常用组件列表中找到，则保留该PC端页头组件；若PC端页头组件不能在页头常用组件列表中找到，则删除该PC端页头组件；

步骤4：基于PC端设置的页头风格形成移动端网页页头风格：在PC端网页向移动端切换时，根据PC端页头最后一次设置保存的页头风格为依据，生成移动端页头风格；

步骤6:页头风格效果的展示：当用户在风格缩略图列表中选中一种风格时，向后台发送获取风格对应的HTML、CSS及JavaScript的请求，待请求响应后，将新获取的HTML、CSS及JavaScript内容去替换移动端页头原有的HTML、CSS及JavaScript内容，并基于新的HTML、CSS及JavaScript内容进行效果展示；

步骤7：移动端页头组件列表的初始化，具体为：针对步骤3中已筛选出的移动端组件，内置的筛选函数将根据这些组件在PC端设置时是否保存情况，选择性地在移动端页头显示；

步骤8：在步骤7形成的移动端页头组件列表中，基于移动端页头设置的需要，在移动端页头组件列表中的组件选择性勾选；并根据勾选与否，相应地，勾选的组件在移动端页头区域内增加和消失；

步骤9：当在移动端保存页头风格和页头组件设置时，页头风格标识码和页头组件参数都会传送至后台数据库中保存；同时根据移动端显示屏尺寸计算页头在移动端界面中的显示效果，计算公式为：展示值＝移动设备的高度-页头已经占据的高度。

所述步骤1中，手机端网页页头常用组件列表中包含LOGO、导航、搜索、语言栏、图片、文本、图文展示、分享、社交关注、货币切换、登录状态、购物车状态；

所述步骤2中，PC端页头组件数据包括组件信息、组件是否新增及组件在网页端保存与否情况，所述组件信息包括组件的名称和组件自身携带的数据；

所述步骤4中，若PC端页头没有设置风格，则移动端的页头不使用任何风格效果，需要执行步骤5在移动端设置页头风格；

步骤5：移动端页头风格的设置：当移动端接收到设置操作请求时，向后台发出操作请求，所述操作是指生成并显示出列表，所述列表包括风格缩略图列表和步骤3中已筛选出页头组件列表；

所述步骤7中，根据组件数据在数据库中是否存储，判定组件在PC端设置时是否保存，如果数据库中能找到组件数据，说明组件在PC端设置时已保存；如果数据库中未能找到组件数据，说明组件在PC端设置时未保存。

所述步骤3中，针对已保留的PC端页头组件，如果存在相同的组件，则执行去重处理，仅保留一个PC端页头组件，删除其余重复的。

所述步骤5中，在风格缩略图列表中，每一种风格具备唯一的标识码。

所述步骤7中，若在PC端设置时有保存某一个组件，则在由PC端转换至移动端的过程中，默认在移动组件设置栏中选中该组件，同时在移动端页头区域内显示组件内容；若在PC端设置时没有保存，则在由PC端转换至手机端的过程中，既不会在手机端组件设置栏勾选该组件，也不会在移动端页头区域内显示组件内容。

所述步骤9中，还包括基于展示值计算组件的尺寸，页头组件参数包括移动组件设置栏中组件的唯一标识以及该组件是否被勾选的记录。

所述步骤9中，基于展示值计算组件的尺寸包括进行居中、居右或者响应式处理。

本发明所达到的有益效果:用户可以很大程度上的自定义自己网站在手机端页头的展示，具体体现在可以选择整体风格的样式和动态添加需要的组件及组件所带来的相应功能。内置的多套风格可以很大程度上满足用户的个性化需求。风格样式会在组件的增加或者减少时自动调整来达到最好的显示效果。部分组件的布局都是动态计算设备的尺寸以便保证在所有设备下的完美展示。在保证美观，响应式，功能强大的前提下，完全不需要写一行代码且只需简单的几次鼠标点击即可完成。在一些不太规范的用户操作下，会自动容错和校正，比如加了两个导航，会自动选择功能性强美观度高的那个。部分交互只是改变页面结构，不会向后台发送请求以便于更快的响应用户的操作。

本发明通过内置的多套风格样式，能够满足用户的个性化需求，并且内置风格的样式会随着组件和功能的变化而适当的调整，流式布局能合理的调整各个模块的在页头的位置来保证美观性。

附图说明

图1为本发明的示例性实施例的方法流程简图；

图2为本发明的示例性实施例中的网页端页头组件设置效果示意图；

图3为本发明的示例性实施例中适用于手机端页头风格和功能修改的***实现图；

图4为本发明的示例性实施例中构建的常用页头组件列表示意图；

图5为本发明的示例性实施例中构建的风格缩略图列表示意图；

图6为本发明的示例性实施例中基于电脑端页头组件形成的手机端页头组件列表示意图；

图7为本发明的示例性实施例中基于手机端的组件和风格自定义调整效果；

图8为本发明的示例性实施例中随手机端组件增加自动调整展示效果的流程图；

图9为本发明的示例性实施例中组件新增后的手机端组件布局示意图。

具体实施方式

下面结合附图和示例性实施例对本发明作进一步的说明：

图1为本发明的示例性实施例的方法流程简图，具体步骤有：

步骤301：基于对大量电子商务网站移动端网页页头区域内共性组件分析，区分出常用页头组件和非常用页头组件，并将所有常用页头组件的集合定义为移动端网页页头常用组件列表，即页头常用组件列表，以记录在手机端页头区域出现频率较多的组件信息；

在本发明实施例中构建的页头常用组件列表中包含LOGO、导航、搜索、语言栏、图片、文本、图文展示、分享、社交关注、货币切换、登录状态、购物车状态，如图4所示，通过名称去判断它是什么类型组件：

步骤302：当用户在PC端添加并设置完某一个网页的所有组件后，切换至手机端时，将根据PC端网页内各个组件定义在其DIV包裹框的组件信息，判断该组件属于哪一类型组件，并提取PC端网页页头区域内所有组件的数据，即PC端页头组件数据，及页头风格识别码打包发送至服务器端，其中，PC端页头组件数据包括组件信息、组件是否新增及组件在PC端保存与否情况；组件信息包括组件的名称和组件自身携带的数据，比如是文本组件，那么数据就是这段文本；比如是图片组件，那数据就是这张图片；

步骤303：基于PC端页头组件筛选移动端页头组件，具体为：当服务器端接收到PC端页头组件数据后，基于组件信息，根据与页头常用组件列表比照，执行PC端页头组件的筛选和删除：若PC端页头组件能在页头常用组件列表中找到，则保留该PC端页头组件；若PC端页头组件不能在页头常用组件列表中找到，则删除该PC端页头组件；

针对上述步骤中已保留的PC端页头组件，根据组件信息判定是否存在相同的组件，如若有，则执行去重处理，仅保留一个PC端页头组件，删除其余重复的；

步骤304：针对步骤3中已筛选出的移动端页头组件，形成本发明实施例中手机端页头组件列表，并根据这些组件在数据库中保存与否的情况，以可视化的形式标记并在移动端页头显示有保存记录的组件；

如图2所示，本发明实施例中，PC端网页设置时保存的组件有logo组件，高级导航，社交关注，货币切换，未保存的组件有产品搜索，因此在由PC端转换至手机端后，手机端页头组件列表中会勾选logo组件，高级导航，社交关注，货币切换组件，并在手机端页头区域显示，而由于产品搜索组件并没有保存至数据库中，因此手机端页头组件列表中虽会记录产品搜索组件，但并不会勾选和在手机端页头区域选中；

步骤305：手机端页头风格初始化：服务器根据接收到的PC端页头风格标识码，若页头风格标识码为0或没有赋值，则不执行任何操作，此时说明PC端页头没有设置风格，相对应，手机端页头也默认没有风格；如身份标识码有赋值，调用页面渲染函数获取该风格对应的HTML代码、CSS资源及JavaScript资源，并加载至手机端呈现效果；不同的页头风格会在字体(大小、类型、颜色)、背景及排版布局存在差异性；

步骤306：手机端页头风格的自定义设置，具体为：当移动端接收到设置操作请求时，向服务器发出操作请求，所述操作是指显示出列表，所述列表包括风格缩略图列表(如图5)和手机端页头组件列表(如图6)；用户根据风格缩略图列表中的效果展示图自由选择，当选中某一个风格后，执行步骤307；

步骤307：根据选中的风格获取该风格的身份标识码，通过调用页面渲染函数，从数据库中获取对应的HTML代码、CSS资源及JavaScript资源，并将新获取的HTML代码、CSS资源及JavaScript资源替换手机端页头原有的HTML代码、CSS资源及JavaScript资源；基于新的HTML、CSS及JavaScript内容在手机端形成效果展示，如图7所示；

如图8所示，基于图7现需要新添加一个组件“产品搜索”，在手机端页头组件列表中选中此组件；页面渲染函数获取到新增组件名，将组件内容渲染在手机端页头区域内：在屏幕尺寸不变的情况下，当搜索组件增加后，原来的锁图标会往左移，搜索图标会居右。基于下拉框展示值＝移动设备的高度-页头已经占据的高度，计算组件的尺寸，组件新增后的手机端组件布局示意图如图9所示；

如图3所示，界面上主要包括三个功能模块，即风格选择模块201，组件选择模块202，手机预览模块203。

所述风格选择模块，用于控制手机端网页页头的风格选择，通过调用页面渲染函数，传入已选定风格对应的身份识别值，以从数据库中调用与选定风格匹配的页面CSS、JavaScript资源传入手机预览模板处理；

所述组件选择模块，一方面用于控制网页端向手机端切换时，调用组件筛选函数对呈现在手机端页头区域内的组件进行筛选和过滤；另一方面控制手机端网页页头区域内的组件增加和删除，并结合页面渲染函数，传入组件名，已从数据库中调用组件参数传入手机预览模块处理，即根据从组件选择模块传入组件选择指令，结合页面渲染函数，直接在手机预览模块进行添加和删除组件。

所述手机预览模块，用于获取从风格选择模块传入的页面CSS、JavaScript资源，替换原有的页面CSS、JavaScript资源和获取从组件选择模块传入组件选择指令之后，才会在手机端网页页头渲染出欲增加的组件或删除组件显示效果，并根据布局调整公式：展示值(下拉框高度)＝移动设备的高度-页头已经占据的高度，计算布局的尺寸，在手机端做即时效果展示包括进行居中、居右或者响应式处理。

本发明通过内置的多套风格样式，能够满足用户的个性化需求，并且内置风格的样式会随着组件和功能的变化而适当的调整，流式布局能合理的调整各个模块的在页头的位置来保证美观性，用户可以很大程度上的自定义自己网站在手机端页头的展示，具体体现在可以选择整体风格的样式和动态添加需要的组件及组件所带来的相应功能。内置的多套风格可以很大程度上满足用户的个性化需求。风格样式会在组件的增加或者减少时自动调整来达到最好的显示效果。部分组件的布局都是动态计算设备的尺寸以便保证在所有设备下的完美展示。在保证美观，响应式，功能强大的前提下，完全不需要写一行代码且只需简单的几次鼠标点击即可完成。在一些不太规范的用户操作下，会自动容错和校正，比如加了两个导航，会自动选择功能性强美观度高的那个。部分交互只是改变页面结构，不会向后台发送请求以便于更快的响应用户的操作。

以上实施例不以任何方式限定本发明，凡是对以上实施例以等效变换方式做出的其它改进与应用，都属于本发明的保护范围。

Claims (7)

1.一种基于手机端页头自定义修改风格及功能的方法，其特征在于，包括以下步骤：

步骤1：基于对大量电子商务网站网页页头区域内共性组件分析，区分出常用页头组件和非常用页头组件，并将所有常用页头组件的集合定义为手机端网页页头常用组件列表，即页头常用组件列表，用于存储在手机端页头区域出现频率较多的组件信息；

步骤2：自动抓取并识别组件：当用户在pc端(个人电脑)添加并设置完某一个网页的所有组件后，切换至手机端时，***将根据PC端网页内各个组件定义在其DIV包裹框的组件信息，判断该组件属于哪一类型组件，并提取PC端网页页头区域内所有组件的数据，即PC端页头组件数据，打包发送至服务器端；

步骤3：移动端页头组件筛选及过滤，并形成移动端组件信息：当服务器端接收到PC端页头组件数据后，根据页头常用组件列表对获取到的PC端页头组件筛选和删除，若PC端页头组件能在页头常用组件列表中找到，则保留该PC端页头组件；若PC端页头组件不能在页头常用组件列表中找到，则删除该PC端页头组件；

步骤4：基于PC端设置的页头风格形成移动端网页页头风格：在PC端网页向移动端切换时，根据PC端页头最后一次设置保存的页头风格为依据，生成移动端页头风格；

步骤6:页头风格效果的展示：当用户在风格缩略图列表中选中一种风格时，向后台发送获取风格对应的HTML、CSS及JavaScript的请求，待请求响应后，将新获取的HTML、CSS及JavaScript内容去替换移动端页头原有的HTML、CSS及JavaScript内容，并基于新的HTML、CSS及JavaScript内容进行效果展示；

步骤7：移动端页头组件列表的初始化：针对步骤3中已筛选出的移动端组件，内置的筛选函数将根据这些组件在PC端设置时是否保存情况，选择性地在移动端页头显示；

步骤8：在步骤7形成的移动端页头组件列表中，基于移动端页头设置的需要，在移动端页头组件列表中的组件选择性勾选；并根据勾选与否，相应地，勾选的组件在移动端页头区域内增加和消失；

步骤9：当在移动端保存页头风格和页头组件设置时，页头风格标识码和页头组件参数都会传送至后台数据库中保存；同时根据移动端显示屏尺寸计算页头在移动端界面中的显示效果，计算公式为：展示值(下拉框高度)＝移动设备的高度-页头已经占据的高度。

2.如权利要求1所述的一种基于手机端页头自定义修改风格及功能的方法，其特征在于：所述步骤1中，手机端网页页头常用组件列表中包含LOGO、导航、搜索、语言栏、图片、文本、图文展示、分享、社交关注、货币切换、登录状态、购物车状态；

所述步骤2中，PC端页头组件数据包括组件信息、组件是否新增及组件在网页端保存与否情况，所述组件信息包括组件的名称和组件自身携带的数据；

所述步骤4中，若PC端页头没有设置风格，则移动端的页头不使用任何风格效果，需要执行步骤5在移动端设置页头风格；

步骤5：移动端页头风格的设置：当移动端接收到设置操作请求时，向后台发出操作请求，所述操作是指生成并显示出列表，所述列表包括风格缩略图列表和步骤3中已筛选出页头组件列表；

所述步骤7中，根据组件数据在数据库中是否存储，判定组件在PC端设置时是否保存，如果数据库中能找到组件数据，说明组件在PC端设置时已保存；如果数据库中未能找到组件数据，说明组件在PC端设置时未保存。

3.如权利要求2所述的一种基于手机端页头自定义修改风格及功能的方法，其特征在于：所述步骤3中，针对已保留的PC端页头组件，如果存在相同的组件，则执行去重处理，仅保留一个PC端页头组件，删除其余重复的。

4.如权利要求3所述的一种基于手机端页头自定义修改风格及功能的方法，其特征在于：所述步骤5中，在风格缩略图列表中，每一种风格具备唯一的标识码。

5.如权利要求4所述的一种基于手机端页头自定义修改风格及功能的方法，其特征在于：所述步骤7中，若在PC端设置时有保存某一个组件，则在由PC端转换至移动端的过程中，默认在移动组件设置栏中选中该组件，同时在移动端页头区域内显示组件内容；若在PC端设置时没有保存，则在由PC端转换至手机端的过程中，既不会在手机端组件设置栏勾选该组件，也不会在移动端页头区域内显示组件内容。

6.如权利要求5所述的一种基于手机端页头自定义修改风格及功能的方法，其特征在于，所述步骤9中，还包括基于展示值计算组件的尺寸，页头组件参数包括移动组件设置栏中组件的唯一标识以及该组件是否被勾选的记录。

7.如权利要求6所述的一种基于手机端页头自定义修改风格及功能的方法，其特征在于，所述步骤9中，基于展示值计算组件的尺寸包括进行居中、居右或者响应式处理。