System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() 一种H5页面的生成方法及装置制造方法及图纸_技高网

一种H5页面的生成方法及装置制造方法及图纸

技术编号:44203766 阅读:4 留言:0更新日期:2025-02-06 18:38
本申请提供了一种H5页面的生成方法及装置,其中,方法包括:获取包括目标图层的初始设计稿;获取标记后的设计稿,所述标记后的设计稿为根据页面组件需求对目标图层标记得到,页面组件需求用于指示目标H5页面的配置信息;通过图层解析插件解析所述标记后的设计稿,以得到领域特定语言DSL文件;基于与领域特定语言DSL文件相匹配的组件模板数据生成所述目标H5页面。本申请实施例基于页面组件需求对设计稿进行标记,通过图层解析插件将标记后的设计稿转换为DSL文件,并基于DSL文件生成所需的H5页面。由此可见,本申请实施例提供了一种基于图层自动化解析以实现H5页面自动化生成的方法,提高了H5页面的开发效率。

【技术实现步骤摘要】

本申请涉及网页开发,尤其涉及一种h5页面的生成方法及装置。


技术介绍

1、h5页面是指基于超文本标记语言5(hypertext markup language 5,html5)技术开发的网页页面。h5页面由于其便捷的编辑与维护、适用于多种设备、易于传播等优势得到广泛应用。

2、一个h5页面,从构思到开发出来,其开发周期很短,这要求开发人员在短时间内全新开发出一个h5页面,然而现有的h5页面开发过程中,h5页面的素材是通过设计部门将设计稿中的素材裁剪后给到运营部门,运营部门使用素材在活动模板编辑器进行相关配置,跨部门协作过程以及配置过程中可能存在错误导致现有的h5页面开发过程效率低。


技术实现思路

1、有鉴于此,本申请提供了一种h5页面的生成方法及装置,用以提高h5页面的开发效率。

2、其技术方案如下:

3、第一方面,本申请实施例提供了一种h5页面的生成方法,所述方法包括:

4、获取初始设计稿,所述初始设计稿包括目标图层;

5、获取标记后的设计稿,所述标记后的设计稿为根据页面组件需求对所述目标图层标记得到,所述页面组件需求用于指示目标h5页面的配置信息;

6、通过图层解析插件解析所述标记后的设计稿,以得到领域特定语言dsl文件;

7、基于与所述领域特定语言dsl文件相匹配的组件模板数据生成所述目标h5页面。

8、在一种可选的实现方式中,所述获取标记后的设计稿,包括:

9、根据所述页面组件需求确定标记信息,所述标记信息包括目标图层的组件标识信息以及组件配置信息;

10、基于所述标记信息对所述目标图层的图层名称进行标记,以得到所述标记后的设计稿。

11、在一种可选的实现方式中,所述通过图层解析插件解析所述标记后的设计稿,得到领域特定语言dsl文件,包括:

12、获取所述标记后的设计稿对应的图层集,所述图层集包括:已标记的图层以及未标记的图层;

13、对所述图层集中的未标记的图层进行合并,并将所述图层集中的每个图层转换为智能对象图层;

14、对所述图层集中的智能对象图层进行解锁,以得到预处理后的图层集;

15、解析所述预处理后的图层集,获得所述领域特定语言dsl文件,所述领域特定语言dsl文件用于指示所述预处理后的图层集中各个图层的图层信息。

16、在一种可选的实现方式中,所述解析所述预处理后的图层集,获得所述领域特定语言dsl文件,包括:

17、确定待解析图层,所述待解析图层为遍历所述预处理后的图层集中的各个图层获得;

18、响应于所述待解析图层为智能对象图层,在新创建的窗口中打开所述待解析图层;

19、获取所述待解析图层的图层参数信息,所述图层参数信息包括图层名称以及图层颜色;

20、响应于所述待解析图层为已标记的图层,基于所述图层名称获取所述待解析图层的标记信息,并基于所述待解析图层的图层尺寸信息以及所述待解析图层的标记信息所指示的组件配置信息对所述待解析图层进行裁切,以得到目标组件图层;

21、基于所述图层参数信息、所述待解析图层的标记信息以及所述目标组件图层构建所述领域特定语言dsl文件。

22、在一种可选的实现方式中,在所述解析所述预处理后的图层集之前,所述方法还包括:

23、将所述标记后的设计稿备份为初始标记设计稿;

24、响应于完成构建所述领域特定语言dsl文件或解析所述预处理后的图层集出现异常,基于所述初始标记设计稿进行设计稿回滚。

25、在一种可选的实现方式中,所述基于与所述领域特定语言dsl文件相匹配的组件模板数据生成所述目标h5页面,包括:

26、基于所述领域特定语言dsl文件确定目标图层的组件标识信息;

27、基于所述目标图层的组件标识信息匹配目标组件模板;

28、从所述领域特定语言dsl文件中获取与所述目标组件模板的配置需求相匹配的目标组件模板数据,所述目标组件模板数据包括所述目标组件图层;

29、基于所述目标组件模板数据对所述目标模板组件进行组装,以获得目标组件结构化数据;

30、基于所述目标组件结构化数据生成所述目标h5页面。

31、第二方面,本申请实施例提供了一种h5页面的生成装置,所述装置包括:

32、设计稿获取模块,用于获取初始设计稿,所述初始设计稿包括目标图层;

33、所述设计稿获取模块,还用于获取标记后的设计稿,所述标记后的设计稿为根据页面组件需求对所述目标图层标记得到,所述页面组件需求用于指示目标h5页面的配置信息;

34、插件解析模块,用于通过图层解析插件解析所述标记后的设计稿,以得到领域特定语言dsl文件;

35、页面生成模块,用于基于与所述领域特定语言dsl文件相匹配的组件模板数据生成所述目标h5页面。

36、在一种可选的实现方式中,所述设计稿获取模块,包括:

37、标记确定子模块,用于根据所述页面组件需求确定标记信息,所述标记信息包括目标图层的组件标识信息以及组件配置信息;

38、图层标记子模块,用于基于所述标记信息对所述目标图层的图层名称进行标记,以得到所述标记后的设计稿。

39、在一种可选的实现方式中,所述插件解析模块,包括:

40、图层集获取子模块,用于获取所述标记后的设计稿对应的图层集,所述图层集包括:已标记的图层以及未标记的图层;

41、图层合并子模块,用于对所述图层集中的未标记的图层进行合并,并将所述图层集中的每个图层转换为智能对象图层;

42、图层解锁子模块,用于对所述图层集中的智能对象图层进行解锁,以得到预处理后的图层集;

43、图层解析子模块,用于解析所述预处理后的图层集,获得所述领域特定语言dsl文件,所述领域特定语言dsl文件用于指示所述预处理后的图层集中各个图层的图层信息。

44、在一种可选的实现方式中,所述图层解析子模块,具体用于:

45、确定待解析图层,所述待解析图层为遍历所述预处理后的图层集中的各个图层获得;

46、响应于所述待解析图层为智能对象图层,在新创建的窗口中打开所述待解析图层;

47、获取所述待解析图层的图层参数信息,所述图层参数信息包括图层名称以及图层颜色;

48、响应于所述待解析图层为已标记的图层,基于所述图层名称获取所述待解析图层的标记信息,并基于所述待解析图层的图层尺寸信息以及所述待解析图层的标记信息所指示的组件配置信息对所述待解析图层进行裁切,以得到目标组件图层;

49、基于所述图层参数信息、所述待解析图层的标记信息以及所述目标组件图层构建所述领域特定语言dsl文件。

50、上述技术方案具有如下有益效果:

51、本申本文档来自技高网...

【技术保护点】

1.一种H5页面的生成方法,其特征在于,所述方法包括:

2.根据权利要求1所述的方法,其特征在于,所述获取标记后的设计稿,包括:

3.根据权利要求2所述的方法,其特征在于,所述通过图层解析插件解析所述标记后的设计稿,得到领域特定语言DSL文件,包括:

4.根据权利要求3所述的方法,其特征在于,所述解析所述预处理后的图层集,获得所述领域特定语言DSL文件,包括:

5.根据权利要求3或4所述的方法,其特征在于,在所述解析所述预处理后的图层集之前,所述方法还包括:

6.根据权利要求3或4所述的方法,其特征在于,所述基于与所述领域特定语言DSL文件相匹配的组件模板数据生成所述目标H5页面,包括:

7.一种H5页面的生成装置,其特征在于,所述装置包括:

8.根据权利要求7所述的装置,其特征在于,所述设计稿获取模块,包括:

9.根据权利要求8所述的装置,其特征在于,所述插件解析模块,包括:

10.根据权利要求9所述的装置,其特征在于,所述图层解析子模块,具体用于:

【技术特征摘要】

1.一种h5页面的生成方法,其特征在于,所述方法包括:

2.根据权利要求1所述的方法,其特征在于,所述获取标记后的设计稿,包括:

3.根据权利要求2所述的方法,其特征在于,所述通过图层解析插件解析所述标记后的设计稿,得到领域特定语言dsl文件,包括:

4.根据权利要求3所述的方法,其特征在于,所述解析所述预处理后的图层集,获得所述领域特定语言dsl文件,包括:

5.根据权利要求3或4所述的方法,其特征在于,在所述解析所述预处理后的图层...

【专利技术属性】
技术研发人员:张喜张宗博
申请(专利权)人:深圳依时货拉拉科技有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1