[发明专利]页面处理方法及相关装置

说明书

本发明的目的是提供页面处理方法及相关装置，以去除测量比对工作，提高开发效率。在本发明中，可向前端页面注入对比参考图，叠加展示前端页面和注入的对比参考图，其中，至少对比参考图以设定的透明度显示，可实现前端页面和对比参考图同时显现。对比参考图如同描红字帖(背景图像)，前端页面如同覆盖在描红字帖上的透明薄纸。这样不用测量，即可对二者进行比对。在二者不一致时，可重新设置渲染属性参数来刷新更改前端页面，进而消除前端页面与对比参考图不一致的地方。因此，本发明实施例所提供的技术方案，去除了前端工程师反复测量比对的工作，使得前端开发效率大大增加。

技术领域

本发明涉及数据处理领域，特别是涉及页面处理方法及相关装置。

背景技术

在制作网页时，很多时候，需要设计师先用图片处理软件制作出前端页面的对比参考图(也称为设计稿)。然后交由前端工程师，由前端工程师依照对比参考图开发前端页面，进行页面处理。

传统的页面处理方式包括徒手切图，也即纯手工一点一点测量打造切出页面。其过程类似于，对比着一个飞机模型(飞机模型相当于对比参考图)，在纸上设计出一个同等大小的飞机。

传统方式下，即使设计师在对比参考图上标注所有的参数，前端工程师也需要通过多次测量，反复比对，最终才能打造出类似于或完全相同于对比参考图的前端页面。其流程如图1所示。

以上边距为例，请参见图2，对比参考图要求上下两行相距20像素。但对于前端页面，上下两行的距离受到诸多因素的影响。例如，行高属性(line-height)、默认内联样式(padding)、默认边距(border)、字体属性(font-family)、字体大小(font-size)、字符种类(中英文及其他)等等均会影响上下行的距离。

因此，前端工程师需要使用测量工具(如截图工具)截取前端页面上下两行的空隙，然后读取截图高度值以检测上下两行的边距值，之后调整代码中下行元素的上边距(margin-top)的赋值(也即图2中的调整代码样式细节)，刷新页面(更改代码后刷新生效)。然后，再次截图测量上下两行的空隙是否相距20像素。如此，反复检测反复调整，最终验证得到下行元素的上边距赋值为16px时，可实现上下两行间距为20像素。

上述只列举了上边距，在制作一个页面的过程中，调整测量工作大量重复出现，极为耗时。

发明内容

本发明的目的是提供页面处理方法及相关装置，以去除测量比对工作，提高开发效率。

一种页面处理方法，应用于装载有浏览器的电子设备，所述方法包括：

向前端页面注入对比参考图；

叠加展示所述前端页面和注入的对比参考图；其中，至少所述对比参考图以设定的透明度显示，以便确定所述前端页面和对比参考图是否一致，在不一致时重新设置渲染属性参数；

加载重新设置的渲染属性参数；

根据所述渲染属性参数刷新所述前端页面。

本发明实施例还提供一种页面处理装置，应用于装载有浏览器的电子设备，所述装置包括：

注入资源模块，用于向前端页面注入对比参考图；

监听展示模块，用于叠加展示所述前端页面和注入的对比参考图；其中，至少所述对比参考图以设定的透明度显示，以便确定所述前端页面和对比参考图是否一致，在不一致时重新设置渲染属性参数；

加载模块，用于加载重新设置的渲染属性参数；

渲染模块，用于根据所述渲染属性参数刷新所述前端页面。

本发明实施例还提供一种电子设备，包括上述的页面处理装置。