[发明专利]可视化编辑方法、装置、设备及存储介质

说明书

本发明实施例提出一种可视化编辑方法、装置、设备及存储介质，其中方法包括：显示编辑界面；在所述编辑界面处于页面展现状态下，所述编辑界面显示结构展现区和编辑区，所述结构展现区包括采用界面展现语言描述的各组件的框架结构和层级关系，所述编辑区包括所述组件的可编辑属性；响应于组件选择操作，在所述结构展现区所显示的框架结构和层级关系中选择目标组件；响应于对所述目标组件的编辑操作，在所述编辑区编辑所述目标组件的属性的逻辑描述代码。本发明实施例能够提高代码编辑效率。

技术领域

本发明涉及计算机技术领域，尤其涉及一种可视化编辑方法、装置、设备及存储介质。

背景技术

现有的代码编辑方法一般采用顺序编辑的方式进行编辑，没有提供根据框架和层级关系进行编辑的方法，导致代码编辑过程不方便、编辑及修改的效率低下。

发明内容

本发明实施例提供一种可视化编辑方法、装置、设备及存储介质，以至少解决现有技术中的以上技术问题。

第一方面，本发明实施例提供了一种可视化编辑方法，包括：

显示编辑界面；

在所述编辑界面处于页面展现状态下，所述编辑界面显示结构展现区和编辑区，所述结构展现区包括采用界面展现语言描述的各组件的框架结构和层级关系，所述编辑区包括所述组件的可编辑属性；

响应于组件选择操作，在所述结构展现区所显示的框架结构和层级关系中选择目标组件；

响应于对所述目标组件的编辑操作，在所述编辑区编辑所述目标组件的属性的逻辑描述代码。

在一种实施方式中，还包括：

在所述编辑界面处于页面展现状态下，所述编辑界面还显示全局控件管理区，所述全局控件管理区用于进行代码管理、资源管理和风格管理的至少一种。

在一种实施方式中，还包括：

在所述编辑界面处于代码编辑状态下，所述编辑界面显示当前编辑的组件的逻辑描述代码。

在一种实施方式中，还包括：

在所述编辑界面显示设备选择控件和模拟画面展现区域；

响应于对所述设备选择控件的操作，确定所选择的设备信息；

在所述模拟画面展现区域，展现当前编辑的逻辑描述代码与所述设备信息适配的模拟呈现效果。

在一种实施方式中，还包括：

在所述编辑界面显示代码导出控件；

响应于对所述代码导出控件的操作，将当前编辑的逻辑描述代码导出为所述界面展现语言所定义格式的代码，并将所述代码保存到指定存储位置。

在一种实施方式中，还包括：

显示模板选择界面，所述模板选择界面包括可选择的布局模板、新创建控件及上传代码选项。

第二方面，本发明实施例还提出一种可视化编辑装置，包括：

显示模块，用于显示编辑界面；在所述编辑界面处于页面展现状态下，所述编辑界面显示结构展现区和编辑区，所述结构展现区包括采用界面展现语言描述的各组件的框架结构和层级关系，所述编辑区包括所述组件的可编辑属性；

目标组件选择模块，用于响应于组件选择操作，在所述结构展现区所显示的框架结构和层级关系中选择目标组件；

编辑模块，用于响应于对所述目标组件的编辑操作，在所述编辑区编辑所述目标组件的属性的代码。