一种网页开发方法及设备技术

一种网页开发方法，包括：获取目标网页的设计稿；对设计稿所包含的元素依次进行行切割和/或列切割；基于对设计稿所包含的元素的切割顺序，生成用于表征每次切割所得到的各个布局块的嵌套关系的视图树，其中，每个布局块中均包括至少一个元素，每个布局块均由至少一个行切割线和/或一个列切割线组成，元素为一段文字或一张图片；基于视图树，生成视图树文件；基于视图树文件得到目标网页。由此，通过设计稿直接生成最终的产品，彻底解决网页设计与前端开发之间的割裂现象，解决了当前设计稿更新无法实时更新产品的问题，大大增强了产品发布迭代效率。迭代效率。迭代效率。

【技术实现步骤摘要】
一种网页开发方法及设备


[0001]本申请涉及信息技术(informat ion techno logy，I T)
，尤其涉及一种网页开发方法及设备。

技术介绍

[0002]在网页开发过程中，一般是网页设计师先完成网页的设计稿(比如：一张网页的图片等)，再将该设计稿移交给前端开发工程师。之后，前端开发工程师基于设计稿中的内容，开发与该设计稿相关的网页的代码。在对前端开发工程师开发的代码测试通过后，可以将该代码对外发布，至此即完成一个网页的开发工作。
[0003]由目前网页开发的过程可知，网页设计师和前端开发工程师之间的工作存在严重的割裂现象，这导致网页设计师已经在设计软件中做了一遍，前端开发还需要跟着设计稿再做一遍，不仅存在重复劳动，还容易由于沟通问题，导致产品和设计不一致的现象。同时，网页设计师了解产品的逻辑，但不直接实现产品；前端开发工程师实现产品，但不了解产品的逻辑，整体配合效率较低，存在巨大的鸿沟。因此，如何提升网页开发的质量和效率是目前亟需解决的技术问题。

技术实现思路

[0004]本申请提供了一种网页开本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页开发方法，其特征在于，所述方法包括：获取目标网页的设计稿；对所述设计稿所包含的元素依次进行行切割和/或列切割；基于对所述设计稿所包含的元素的切割顺序，生成用于表征每次切割所得到的各个布局块的嵌套关系的视图树，其中，每个所述布局块中均包括至少一个元素，每个所述布局块均由至少一个行切割线和/或一个列切割线组成，所述元素为一段文字或一张图片；基于所述视图树，生成视图树文件；基于所述视图树文件得到所述目标网页。2.根据权利要求1所述的方法，其特征在于，所述方法还包括：基于为所述设计稿中包含的每段文字所分配的标识，以及，各个所述标识关联的文字，生成Markdown文件，其中，所述Markdown文件中包括各个所述标识、各个所述标识关联的文字，以及，各个所述标识与所述设计稿中包含的文字间的关联关系；基于所述视图树文件得到所述目标网页包括：基于所述视图树文件生成Hugo模板文件，所述Hugo模板文件包括网页的层级、样式和脚本，基于所述Hugo模板文件和所述Markdown文件进行组合，得到所述目标网页。3.根据权利要求2所述的方法，其特征在于，所述方法还包括：获取用户在所述Markdown文件对目标文字的更新操作；基于更新后的所述Markdown，对所述目标网页中的所述目标文件进行更新。4.根据权利要求2或3所述的方法，其特征在于，基于所述视图树文件生成Hugo模板文件包括：基于所述视图树文件、所述设计稿中布局的结构属性和元素的样式属性，生成所述Hugo模板文件。5.根据权利要求4所述的方法，其特征在于，所述结构属性包括：设计稿中元素的位置和文字的排布模式中的至少一项；所述样式属性包括：所述设计稿中文字的字体、字号、颜色，所述设计稿的背景颜色，所述设计稿中边框的粗细、圆角、阴影等中的至少一项。6.根据权利要求1所述的方法，其特征在于，基于所述视图树文件得到所述目标网页包括：基于所述视图树文件生成超文本标记语言HTML文件、层叠样式表CSS文件和JavaScript文件，其中，所述HTML文件包括网页的层级及文字；基于所述HTML文件、CSS文件及JavaScript文件进行组合得到所述目标网页。7....

【专利技术属性】
技术研发人员：冯浩霖，俞伟生，
申请(专利权)人：超聚变数字技术有限公司，
类型：发明
国别省市：