【技术实现步骤摘要】
代码信息的生成方法、装置、设备及存储介质
[0001]本申请涉及可视化设计
,尤其涉及一种代码信息的生成方法、装置、设备及存储介质。
技术介绍
[0002]Vue是一套用于构建用户界面的渐进式框架,具有灵活、易用、高效的特点,是目前最主流的前端开发框架之一。在通过Vue构建用户界面时,需要生成用户界面对应的代码信息。
[0003]在现有技术中,用户界面内包括多个组件。首先,获取组件模型数据和组件资源文件;然后,根据组件模型数据和组件资源文件,生成多个可视化组件;最后,确定多个可视化组件对应的代码信息,根据多个可视化组件对应的代码信息,生成用户界面对应的代码信息。
[0004]然而,专利技术人发现现有技术至少存在如下技术问题:当用户界面内包括的多个组件的数量较多时,确定多个可视化组件对应的代码信息所花费的时间较长,进而导致编写用户界面对应的代码信息的效率较低。
技术实现思路
[0005]本申请提供一种代码信息的生成方法、装置、设备及存储介质,用以提高编写用户界面对应的代码信息的效率。 />[0006]第一本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种代码信息的生成方法,其特征在于,包括:展示前端的用户操作界面,所述用户操作界面内包括资源选择区和组件布局区,所述资源选择区内包括组件列表按钮、区块列表按钮和页面列表按钮;基于所述组件列表按钮、所述区块列表按钮和所述页面列表按钮上的预设操作,在所述组件布局区展示目标用户界面;基于所述目标用户界面的展示内容,生成所述目标用户界面对应的代码信息,所述目标用户界面的展示内容包括页面模板和至少一个组件区块。2.根据权利要求1所述的方法,其特征在于,所述基于所述组件列表按钮、所述区块列表按钮和所述页面列表按钮上的预设操作,在所述组件布局区展示目标界面,包括:基于所述页面列表按钮上的点击操作,展示页面模板菜单栏,所述页面模板菜单栏内包括多个页面模板图标,基于任一页面模板图标上的点击操作,在所述组件布局区展示所述任一页面模板图标对应的页面模板,所述页面模板内包括多个第一组件;基于所述区块列表按钮上的点击操作,展示组件区块菜单栏,所述组件区块菜单栏内包括多个组件区块图标,基于任一组件区块图标上的拖拽操作,在所述页面模板内展示所述任一区块模板图标对应的组件区块,所述组件区块内包括多个第二组件。3.根据权利要求2所述的方法,其特征在于,所述目标用户界面的展示内容包括页面模板、至少一个组件区块和至少一个组件;所述基于任一页面模板图标上的点击操作,在所述组件布局区展示所述任一页面模板图标对应的页面模板之后,还包括:基于所述组件列表按钮上的点击操作,展示组件列表菜单栏,所述组件列表菜单栏内包括多个组件图标;基于任一组件图标上的拖拽操作,在所述页面模板内展示所述任一组件图标对应的第三组件。4.根据权利要求2所述的方法,其特征在于,还包括:基于所述页面模板内任一第一组件上的拖拽操作,调整所述任一第一组件在所述页面模板内的位置;和/或,基于所述组件区块内任一第二组件上的拖拽操作,调整所述任一第二组件在所述组件区块内的位置。5.根据权利要求1所述的方法,其特征在于,所述基于所述目标用户界面的展示内容,生成所述目标用户界面对应的代码信息,包括:基于所述目标用户界面的展示内容,确定所述展示内容包括的多个组件的组件树信息,所述组件树信息用于表示父组件和子组件之间的嵌套关系;基于所述多个组件的组件树信息,生成所述目标用户界面对应的代码信息。6.根据权利要求5所述的方法,其特征在于,所述基于所述目标用户界面的展示内容,确定所述展示内容包括的多个组件的组件树信息,包括:确定所述目标用户界面内的页面模板包括的多个第一组件、所述至少一个组件区块包括的多个第二组件和所述目标用户界面内的至少一个第三组件;获取所述多个第一组件、所述多个第二组件和所述至少一个第三组件的基本属性信息、事件属性信息、函数属性信息和子组件信息,得到所述展示内容包括的多个组件的组件
树信息。7.根据权利要求5所述的方法,其特征在于,所述基于所述多个组件的组件树信息,生成所述目标用户界面对应的代码信息,包括:遍历所述多个组件的组件树信息,生成所述多个组件的页面模板代码、页面脚本代码和层叠样式代码;将所述多个...
【专利技术属性】
技术研发人员:李鑫海,陈郓,杨朋飞,宋秀庆,王树杰,
申请(专利权)人:中原银行股份有限公司,
类型:发明
国别省市:
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。