【技术实现步骤摘要】
前端界面代码生成方法、装置、电子设备及存储介质
本申请涉及计算机
，特别是涉及一种前端界面代码生成方法、装置、电子设备及存储介质。
技术介绍
随着计算机技术的发展，客户端类型越来越多，为了保持产品界面的一致性，设计师设计的UI(用户界面)通常需要在不同类型的客户端显示，如网页端、PC端、移动终端等。在传统的图形用户界面开发过程中，设计师设计出的用户界面，通常需要交付给编码工程师，由编码工程师通过编写代码将图形用户界面中的界面元素布局到前端，但是，传统的界面布局方法需要编码工程师手动编写代码并布局界面元素，开发效率低。现有技术中还出现了一种前端界面代码生成方法，通过深度学习的方式，根据图形用户界面的设计稿的截屏图片生成前端界面代码。基于深度学习生成前端界面代码的方法相比传统技术在生成前端界面代码速度上有了很大提升，但是截屏图片相对完整设计稿丢失了许多编程必要信息，导致生成的代码准确率很低，无法达到工程级别的使用要求。现有技术中还有一种通过预先建立代码标准模板、通用脚本文件以及信息项配置表，根据配置处理结果自动加载元素和调用脚本文件，生成Web界面的方法，但是，...
【技术保护点】
1.一种前端界面代码生成方法，其特征在于，包括：获取前端界面设计稿导出的源数据中包括的控件的位置信息；基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案；根据所述布局方案生成所述前端界面的代码。
【技术特征摘要】
1.一种前端界面代码生成方法，其特征在于，包括：获取前端界面设计稿导出的源数据中包括的控件的位置信息；基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案；根据所述布局方案生成所述前端界面的代码。2.根据权利要求1所述的方法，其特征在于，所述基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案的步骤，包括：基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案；确定所述备选布局方案的候选评分；选择所述候选评分满足预设条件的所述备选布局方案，作为所述控件的布局方案。3.根据权利要求2所述的方法，其特征在于，所述基于所述控件的位置信息，对未布局的控件进行模拟布局，以确定备选布局方案的步骤，包括：基于所述控件的位置信息确定每个未布局控件相关的已布局控件；根据所述控件的位置信息，确定每个所述未布局控件相对与其相关的已布局控件的单项要素布局评分；根据所述单项要素布局评分，确定当前最易布局的未布局控件；将所述当前最易布局的未布局控件标记为已布局控件；重复执行基于所述控件的位置信息确定每个未布局控件相关的已布局控件，至将所述当前最易布局控件标记为已布局控件的步骤，直至所有控件均标记为已布局控件；按照被标记为已布局控件的顺序，确定所述控件的当前备选布局方案。4.根据权利要求3所述的方法，其特征在于，所述根据所述单项要素布局评分，确定当前最易布局的未布局控件的步骤之后，还包括：根据所述单项要素布局评分，确定当前候选布局控件；根据所述当前最易布局的未布局控件和所述当前候选布局控件，进行布局方案分裂处理；所述按照被标记为已布局控件的顺序，确定所述控件的当前备选布局方案的步骤之后，还包括：若存在分裂布局方案，则依次基于各条分裂布局方案进行模拟布局，确定对应的备选布局方案。5.根据权利要求1所述的方法，其特征在于，所述基于所述控件的位置信息，通过模拟布局或容器内控件迭代的方式确定所述控件的布局方案的步骤，包括：将所有未布局控件加入未指定容器类型的根容器；从根容器开始，基于所述控件的位置信息，按照父容器到子容器的顺序，对容器中的控件进行迭代分组，并将分组得到的每组控件移入相应子容器；确定所述容器的容器类型；基于所述容器类型、所述容器对应的层级关系，确定相应容器内控件的布局方案。6.根据权利要求5所述的方法，其特征在于，所述从根容器开始，基于所述控件的位置信息，按照父容器到子容器的顺序，对容器中的控件进行迭代分组，并将分组得到的每组控件移入相应子容器的步骤，包括：从根容器开始，按照父容器到子容器的顺序，迭代对每个...
【专利技术属性】
技术研发人员：彭笑风，郝田田，顾健，张玲，火智英，梁士兴，何佳，张杰，胡朝旭，
申请(专利权)人：北京三快在线科技有限公司，
类型：发明
国别省市：北京,11
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。