(19)中华 人民共和国 国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210059217.4 (22)申请日 2022.01.19 (71)申请人 平安国际智慧城市科技股份有限公 司 地址 518000 广东省深圳市前海深港合作 区妈湾兴海 大道3048号前海自贸大厦 1-34层 (72)发明人 陶宗尧　 (74)专利代理 机构 广州三环 专利商标代理有限 公司 44202 代理人 陈燕 (51)Int.Cl. G06F 9/451(2018.01) G06F 16/958(2019.01) (54)发明名称 界面生成方法、 装置、 计算机设备和存储介 质 (57)摘要 本申请实施例提供了一种界面生 成方法、 装 置、 计算机设备和存储介质， 应用于应用开发技 术领域， 包括： 采用同步读取文件方法获取目标 UI设计图对应的目标html文件； 从目标html文件 中提取构成目标UI界面的多个组件的组件信息 和目标UI界面的页面尺寸信息； 根据每个组件的 组件信息和页面尺寸信息确定每个组件在目标 UI界面中的布局 信息和组件样式， 并基于每个组 件的布局信息和组件样式生 成组件结构化信息； 遍历组件结构化信息生成dom树， 并对dom树进行 渲染处理， 得到前端代码来生成目标UI界面， 可 提高界面生成效率。 本申请涉及区块链技术， 如 可将目标html文件写入区块链中， 以用于根据目 标html文 件生成前端代码等场景。 权利要求书2页 说明书12页 附图4页 CN 114398138 A 2022.04.26 CN 114398138 A 1.一种界面 生成方法， 其特 征在于， 包括： 当检测到针对目标UI设计图的确认操作时， 采用同步读取文件方法获取所述目标UI设 计图对应的目标超文本标记语言html文件， 所述目标UI设计图是在UI设计工具生成的， 所 述目标UI设计图用于构建目标UI界面； 从所述目标html文件中提取构成所述目标UI界面的多个组件的组件信息和所述目标 UI界面的页面尺寸信息； 根据每个组件的组件信息和所述页面尺寸信息确定所述每个组件在所述目标UI界面 中的布局信息和组件样式， 并基于所述每个组件在所述目标UI界面中的布局信息和组件样 式生成组件结构化信息； 遍历所述组件结构化信息生成文档对象模型dom树， 并对所述dom树进行渲染处理， 得 到所述目标UI界面对应的前端代码； 调用所述前端代码生成所述目标UI界面。 2.根据权利要求1所述的方法， 其特征在于， 所述从所述目标html文件中提取构成所述 目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息， 包括： 采用变长字符编码规则对所述目标html文件进行编码格式转换， 得到所述目标html文 件对应的目标格式转换 结果； 从所述目标格 式转换结果中， 获取构建所述目标UI界面的多个组件的组件信 息和所述 目标UI界面的页面尺寸信息 。 3.根据权利要求2所述的方法， 其特征在于， 所述从所述目标格式转换结果中， 获取构 建所述目标UI界面的多个组件的组件信息和所述目标UI界面的页面尺寸信息， 包括： 获取正则表示式， 所述正则表达 式用于指示获取每个组件的组件信 息和UI界面的页面 尺寸信息的目标起始位置和目标 结束位置； 根据所述正则表达式在所述目标格式转换结果中确定所述目标起始位置和所述目标 结束位置， 并从所述目标起始 位置和所述目标结束位置 之间的字符信息中提取所述目标UI 界面中每 个组件的组件信息和所述目标UI界面的页面尺寸信息 。 4.根据权利要求1所述的方法， 其特征在于， 所述根据每个组件的组件信 息和所述页面 尺寸信息确定所述每 个组件在所述目标UI界面中的布局信息和组件样式， 包括： 根据每个组件的组件信息和所述页面尺寸信息确定各个组件之间的组件关系以及所 述每个组件在所述目标UI界面的布局信息； 根据所述各个组件之间的组件关系以及所述每个组件在所述目标UI界面的布局信息 确定所述每 个组件的组件样式。 5.根据权利要求1所述的方法， 其特征在于， 所述基于所述每个组件在所述目标UI界面 中的布局信息和组件样式生成组件结构化信息， 包括： 根据每个组件在所述目标UI界面中的布局信息和组件样式， 采用公共组件 flexContainer对所述每 个组件进行布局处 理， 得到所述目标UI界面的弹性布局； 根据所述弹性布局配置所述每个组件的组件样式字段、 布局信 息字段和第 一组件属性 字段； 根据所述每个组件的组件样式字段、 布局信 息字段和第 一组件属性字段生成组件结构 化信息。权　利　要　求　书 1/2 页 2 CN 114398138 A 26.根据权利要求5所述的方法， 其特征在于， 所述根据所述每个组件的组件样式字段、 布局信息 字段和第一组件属性字段生成组件结构化信息， 包括： 基于所述每个组件的组件样式字段、 布局信 息字段和第 一组件属性字段生成初始结构 化信息； 获取提取指示信息， 所述 提取指示信息用于指示获取目标字段的字段信息； 从所述初始结构化信 息提取所述提取指示信 息所指示的目标字段的字段信 息， 并将提 取到的目标字段的字段信息生成组件结构化信息 。 7.根据权利要求5所述的方法， 其特征在于， 所述多个组件为UI设计工具中的组件； 所 述根据所述每个组件的组件样式字段、 布局信息字段和第一组件属性字段生成组件结构化 信息， 包括： 针对所述多个组件中的目标组件， 根据 所述UI设计工具包括的组件与前端包括的组件 之间的对应关系， 判断所述目标 组件的组件属性是否与相对应目标前端组件的组件属性相 同， 所述组件属性至少包括以下一种： 组件名和组件类型； 若所述目标组件的组件属性与相对应目标前端组件的组件属性不相同， 则为所述目标 组件添加第二组件属性字段， 所述第二组件属性字段的字段信息包括所述目标前端组件的 组件属性； 基于所述每个组件的组件样式字段、 布局信息字段、 第一组件属性字段和所述第二组 件属性字段生成组件结构化信息 。 8.一种界面 生成装置， 其特 征在于， 包括： 获取单元， 用于当检测到针对目标UI设计 图的确认操作时， 采用同步读取文件方法获 取所述目标UI设计图对应的目标超文本标记语 言html文件， 所述目标UI设计图是通过UI设 计工具生成的， 所述目标UI设计图用于构建目标UI界面； 处理单元， 用于从所述目标html文件中提取构成所述目标UI界面的多个组件的组件信 息和所述目标UI界面的页面尺寸信息； 所述处理单元， 还用于根据每个组件的组件信 息和所述页面尺寸信 息确定所述每个组 件在所述目标UI界面中的布局信息和组件样式， 并基于所述每个组件在所述目标UI界面中 的布局信息和组件样式生成组件结构化信息； 所述处理单元， 还用于遍历所述组件结构化信息生成文档对象模型dom树， 并对所述 dom树进行渲染处 理， 得到所述目标UI界面对应的前端代码； 所述处理单元， 还用于调用所述前端代码生成所述目标UI界面。 9.一种计算机设备， 其特 征在于， 包括存 储器， 用于存 储计算机程序； 处理器， 调用所述存储器中的所述计算机程序， 用于执行如权利要求1～7任一项所述 的界面生成方法。 10.一种计算机存储介质， 其特征在于， 所述计算机存储介质存储有计算机程序， 所述 计算机程序包括程序指令， 所述程序指令被处理器执行时， 执行权利要求1～7任一项所述 的界面生成方法。权　利　要　求　书 2/2 页 3 CN 114398138 A 3