用户界面组件可实时编辑及渲染的方法及装置与流程

1.本发明涉及用户界面编辑技术领域，尤其涉及一种用户界面组件可实时编辑及渲染的方法及装置。


背景技术：

2.用户界面(ui)是系统和用户之间进行交互和信息交换的媒介，由一个或多个组件所组成的。随着社会的发展和人民生活水平的提高，个性化的需求越来越受到民众的欢迎，因此，在用户界面上的个性化的定制以及为了吸引用户而进行的用户界面的定期更新正越来越常见。
3.然而，在实际当中，编辑用户界面主要存在两个问题：1、每次编辑用户界面中的部分或全部组件都需修改主题资源文件并重新部署到服务器上，不能实时编辑；2、编辑用户界面的组件后必须先应用到具体页面场景中才能看到效果，无法在编辑组件属性时实时预览效果。可见，如何对用户界面组件实现可实时编辑和可实时渲染显得非常重要。


技术实现要素：

4.本发明所要解决的技术问题在于，提供一种用户界面组件可实时编辑及渲染的方法及装置，能够对用户界面组件进行实时编辑和实时渲染，提高对用户界面组件的编辑效率。
5.为了解决上述技术问题，本发明第一方面公开了一种用户界面组件可实时编辑及渲染的方法，所述方法包括：
6.获取用户界面组件的属性编辑窗口提交的用户在所述属性编辑窗口上输入的编辑信息；所述属性编辑窗口用于实时编辑所述用户界面组件的属性信息；
7.根据所述编辑信息，生成所述属性信息对应的代码；
8.将所述代码发送至用户界面浏览器，以使所述用户界面浏览器根据所述代码渲染所述用户界面组件。
9.作为一种可选的实施方式，在本发明第一方面中，所述属性编辑窗口为所述用户界面组件的可视编辑窗口或者所述用户界面组件的代码编辑窗口，所述根据所述编辑信息，生成所述属性信息对应的代码，包括：
10.确定所述编辑信息的来源；所述编辑信息的来源包括所述可视编辑窗口和/或所述代码编辑窗口；
11.当确定出所述编辑信息来自所述可视编辑窗口，根据所述编辑信息及预设的代码生成方式，生成所述用户界面组件的属性信息对应的代码；
12.当确定出所述编辑信息来自所述代码编辑窗口，根据所述编辑信息生成所述用户界面组件的属性信息对应的代码。
13.作为一种可选的实施方式，在本发明第一方面中，在所述获取用户界面组件的属性编辑窗口提交的用户在所述属性编辑窗口上输入的编辑信息之前，所述方法还包括：
14.确定需要编辑的用户界面组件的组件类型；其中，所述组件类型包括自定义类型和非自定义类型；
15.当确定需要编辑的所述组件类型为所述自定义类型时，生成代码编辑窗口的预设样式对应的样式代码，将所述样式代码发送至用户界面浏览器，以使所述用户界面浏览器渲染代码编辑窗口，并触发执行所述的获取用户界面组件的属性编辑窗口提交的用户在所述属性编辑窗口上输入的编辑信息的操作；
16.当确定需要编辑的所述组件类型为所述非自定义类型时，向用户界面浏览器发送可视编辑窗口的预设样式对应的样式配置文件，以使所述用户界面浏览器根据所述样式配置文件渲染所述可视编辑窗口，并触发执行所述的获取用户界面组件的属性编辑窗口提交的用户在所述属性编辑窗口上输入的编辑信息的操作。
17.作为一种可选的实施方式，在本发明第一方面中，所述根据所述编辑信息及预设的代码生成方式，生成所述用户界面组件的属性信息对应的代码，包括：
18.根据所述编辑信息，生成所述属性信息对应的属性文件；
19.请求所述用户界面浏览器将预设样式文件存储在所述用户界面浏览器对应的缓存中；
20.当检测到所述预设样式文件已存储在所述用户界面浏览器对应的缓存中时，获取所述属性文件和所述预设样式文件，根据所述属性文件和所述预设样式文件生成所述属性信息对应的代码。
21.作为一种可选的实施方式，在本发明第一方面中，所述将所述代码发送至用户界面浏览器，以使所述用户界面浏览器根据所述代码渲染所述用户界面组件，包括：
22.根据所述代码修改所述用户界面浏览器创建的渲染模型，以使所述用户界面浏览器根据修改后的所述渲染模型渲染所述用户界面组件。
23.作为一种可选的实施方式，在本发明第一方面中，在所述将所述代码发送至用户界面浏览器，以使所述用户界面浏览器根据所述代码渲染所述用户界面组件之后，所述方法还包括：
24.判断是否收到针对所述用户界面组件的编辑完成指令；
25.当判断出收到针对所述用户界面组件的编辑完成指令时，根据当前的所有所述用户界面组件的所述属性信息生成所述属性信息对应的属性文件；所述属性文件包括所述属性信息对应的代码；所述属性文件用于对本次编辑完成的所有所述用户界面组件的所述属性信息的备份和/或后续对所述用户界面组件进行编辑工作。
26.作为一种可选的实施方式，在本发明第一方面中，在所述将所述代码发送至用户界面浏览器，以使所述用户界面浏览器根据所述代码渲染所述用户界面组件之后，所述方法还包括：
27.判断是否收到针对所述用户界面组件的应用指令；
28.当判断出收到针对所述用户界面组件的应用指令时，根据针对所述用户界面组件的应用指令将当前的所述用户界面组件的所述属性信息应用到用户界面中。
29.本发明第二方面公开了一种用户界面组件可实时编辑及渲染的装置，所述装置包括：
30.获取模块，用于获取用户界面组件的属性编辑窗口提交的用户在所述属性编辑窗
口上输入的编辑信息；所述属性编辑窗口用于实时编辑所述用户界面组件的属性信息；
31.第一生成模块，用于根据所述编辑信息，生成所述属性信息对应的代码；
32.发送模块，用于将所述代码发送至用户界面浏览器，以使所述用户界面浏览器根据所述代码渲染所述用户界面组件。
33.作为一种可选的实施方式，在本发明第二方面中，所述属性编辑窗口为所述用户界面组件的可视编辑窗口或者所述用户界面组件的代码编辑窗口，所述第一生成模块包括：
34.确定子模块，用于确定所述编辑信息的来源；所述编辑信息的来源包括所述可视编辑窗口和/或所述代码编辑窗口；
35.第一生成子模块，用于当所述确定子模块确定出所述编辑信息来自所述可视编辑窗口，根据所述编辑信息及预设的代码生成方式，生成所述用户界面组件的属性信息对应的代码；
36.第二生成子模块，用于当所述确定子模块确定出所述编辑信息来自所述代码编辑窗口，根据所述编辑信息生成所述用户界面组件的属性信息对应的代码。
37.作为一种可选的实施方式，在本发明第二方面中，所述装置还包括：
38.确定模块，用于在所述获取模块获取用户界面组件的属性编辑窗口提交的用户在所述属性编辑窗口上输入的编辑信息之前，确定需要编辑的用户界面组件的组件类型；其中，所述组件类型包括自定义类型和非自定义类型；
39.第二生成模块，用于当所述确定模块确定需要编辑的所述组件类型为所述自定义类型时，生成代码编辑窗口的预设样式对应的样式代码；
40.所述发送模块，还用于将所述第二生成模块生成的所述样式代码发送至用户界面浏览器，以使所述用户界面浏览器渲染代码编辑窗口，并触发所述获取模块执行所述的获取用户界面组件的属性编辑窗口提交的用户在所述属性编辑窗口上输入的编辑信息的操作；
41.所述发送模块，还用于当所述确定模块确定需要编辑的所述组件类型为所述非自定义类型时，向用户界面浏览器发送可视编辑窗口的预设样式对应的样式配置文件，以使所述用户界面浏览器根据所述样式配置文件渲染所述可视编辑窗口，并触发所述获取模块执行所述的获取用户界面组件的属性编辑窗口提交的用户在所述属性编辑窗口上输入的编辑信息的操作。
42.作为一种可选的实施方式，在本发明第二方面中，所述第一生成子模块包括：
43.生成单元，用于根据所述编辑信息，生成所述属性信息对应的属性文件；
44.请求单元，用于请求所述用户界面浏览器将预设样式文件存储在所述用户界面浏览器对应的缓存中；
45.获取单元，用于当检测到所述预设样式文件已存储在所述用户界面浏览器对应的缓存中时，获取所述属性文件和所述预设样式文件；
46.所述生成单元，还用于当所述获取单元获取所述属性文件和所述预设样式文件之后，根据所述属性文件和所述预设样式文件生成所述属性信息对应的代码。
47.作为一种可选的实施方式，在本发明第二方面中，所述发送模块将所述代码发送至用户界面浏览器，以使所述用户界面浏览器根据所述代码渲染所述用户界面组件的方式
具体包括：
48.将所述代码插入到所述用户界面浏览器创建的渲染模型中，以使所述用户界面浏览器根据所述渲染模型渲染所述用户界面组件。
49.作为一种可选的实施方式，在本发明第二方面中，所述装置还包括：
50.判断模块，用于在所述发送模块将所述代码发送至用户界面浏览器，以使所述用户界面浏览器根据所述代码渲染所述用户界面组件之后，判断是否收到针对所述用户界面组件的编辑完成指令；
51.第三生成模块，用于当所述判断模块判断出收到针对所述用户界面组件的编辑完成指令时，根据当前的所有所述用户界面组件的所述属性信息生成所述属性信息对应的属性文件；所述属性文件包括所述属性信息对应的代码；所述属性文件用于对本次编辑完成的所有所述用户界面组件的所述属性信息的备份和/或后续对所述用户界面组件进行编辑工作。
52.作为一种可选的实施方式，在本发明第二方面中，所述装置还包括：
53.所述判断模块，还用于在所述发送模块将所述代码发送至用户界面浏览器，以使所述用户界面浏览器根据所述代码渲染所述用户界面组件之后，判断是否收到针对所述用户界面组件的应用指令；
54.应用模块，用于当所述判断模块判断出收到针对所述用户界面组件的应用指令时，根据针对所述用户界面组件的应用指令将当前的所述用户界面组件的所述属性信息应用到用户界面中。
55.本发明第三方面公开了另一种用户界面组件可实时编辑及渲染的装置，所述装置包括：
56.存储有可执行程序代码的存储器；
57.与所述存储器耦合的处理器；
58.所述处理器调用所述存储器中存储的所述可执行程序代码，执行本发明第一方面公开的用户界面组件可实时编辑及渲染的方法。
59.本发明第四方面公开了一种计算机可存储介质，所述计算机存储介质存储有计算机指令，所述计算机指令被调用时，用于执行本发明第一方面公开的用户界面组件可实时编辑及渲染的方法。
60.与现有技术相比，本发明实施例具有以下有益效果：
61.本发明实施例中，获取用户界面组件的属性编辑窗口提交的用户在所述属性编辑窗口上输入的编辑信息；所述属性编辑窗口用于实时编辑所述用户界面组件的属性信息；根据所述编辑信息，生成所述属性信息对应的代码；将所述代码发送至用户界面浏览器，以使所述用户界面浏览器根据所述代码渲染所述用户界面组件。可见，实施本发明能够对用户界面组件进行实时编辑和实时渲染，提高对用户界面组件的编辑效率。
附图说明
62.为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他
的附图。
63.图1是本发明实施例公开的一种用户界面组件可实时编辑及渲染的方法的流程示意图；
64.图2是本发明实施例公开的另一种用户界面组件可实时编辑及渲染的方法的流程示意图；
65.图3是本发明实施例公开的一种用户界面组件可实时编辑及渲染的装置的结构示意图；
66.图4是本发明实施例公开的另一种用户界面组件可实时编辑及渲染的装置的结构示意图；
67.图5是本发明实施例公开的又一种用户界面组件可实时编辑及渲染的装置的结构示意图。
具体实施方式
68.为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
69.本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、装置、产品或端没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或端固有的其他步骤或单元。
70.在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本发明的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
71.本发明公开了一种用户界面组件可实时编辑及渲染的方法及装置，能够对用户界面组件进行实时编辑和实时渲染，提高对用户界面组件的编辑效率。以下分别进行详细说明。
72.实施例一
73.请参阅图1，图1是本发明实施例公开的一种用户界面组件可实时编辑及渲染的方法的流程示意图。其中，图1所描述的用户界面组件可实时编辑及渲染的方法可以应用于本地服务器或者云服务器中，也可以应用于用户界面编辑系统中，本发明实施例不做限定。如图1所示，该用户界面组件可实时编辑及渲染的方法可以包括以下操作：
74.101、获取用户界面组件的属性编辑窗口提交的用户在属性编辑窗口上输入的编辑信息。
75.本发明实施例中，可选的，用户界面组件可以包括自定义组件和非自定义组件。其中，可选的，非自定义组件可以包括基础组件、交互组件以及图表组件中的至少一种。其中，可选的，基础组件可以包括用户界面全局色彩样式组件，还可以包括用户界面布局样式组
件。其中，可选的，用户界面全局色彩样式组件可以是红色全局样式组件，也可以是绿色全局样式组件，还可以是黄色全局样式组件，以此类推，本发明实施例不做限定。其中，可选的，用户界面布局样式组件可以包括居中对齐布局样式组件、左对齐布局样式组件、右对齐布局样式组件以及两端对齐布局样式组件中的至少一种。可选的，交互组件可以包括按钮组件、表单组件、单选框组件以及复选框组件中的至少一种。其中，可选的，按钮组件可以包括按钮边框组件、按钮颜色组件以及按钮文字组件中的至少一种。其中，可选的，表单组件可以包括表单标签组件、表单域组件以及表单按钮组件中的至少一种。其中，可选的，单选框组件可以包括单选按钮组件和/或单选文字标签组件。其中，可选的，复选框组件可以包括复选按钮组件和/或复选文字标签组件。可选的，图表组件可以包括折线图组件、条形图组件、饼图组件以及散点图组件中的至少一种。其中，可选的，折线图组件可以包括折线图背景颜色组件、折线图线条颜色组件、折线图线条宽度组件、折线图短划线类型组件、折线图文字颜色组件、折线图文字大小组件以及折线图文字布局组件中的至少一种。其中，可选的，条形图组件可以包括条形图背景颜色组件、条形图条形颜色组件、条形图条形宽度组件、条形图文字颜色组件、条形图文字大小组件以及条形图文字布局组件中的至少一种。其中，可选的，饼图组件可以包括饼图背景颜色组件、饼图分区线条宽度组件、饼图分区线条短划线类型组件、饼图文字颜色组件、饼图文字大小组件以及饼图文字布局组件中的至少一种。其中，可选的，散点图组件可以包括散点图背景颜色组件、散点图散点颜色组件、散点图散点大小组件、散点图散点类型组件、散点图文字颜色组件、散点图文字大小组件以及散点图文字布局组件中的至少一种。可选的，自定义组件可以包括非自定义组件中没有涉及的组件，具体可以包括个性化组件和/或特殊组件。
76.本发明实施例中，获取编辑信息这个步骤可以通过vue事件总线配置收集技术来执行。本发明实施例中，属性编辑窗口可以用于实时编辑用户界面组件的属性信息。可选的，用户界面组件的属性信息可以包括用户界面组件的属性参数名称和/或属性参数值。可选的，编辑信息可以包括修改的用户界面组件对应的属性信息。
77.102、根据编辑信息，生成属性信息对应的代码。
78.本发明实施例中，属性信息对应的代码可以用于用户界面浏览器根据代码渲染用户界面组件。可选的，属性信息对应的代码可以是基于css层叠样式表规范的代码段。
79.103、将代码发送至用户界面浏览器，以使用户界面浏览器根据代码渲染用户界面组件。
80.本发明实施例中，用户界面浏览器可以根据收到的代码渲染出用户界面组件。其中，用户界面浏览器可以包括基于trident内核浏览器(比如ie浏览器等)、基于gecko内核浏览器(比如firefox浏览器等)、基于webkit内核浏览器(比如safari浏览器、chrome浏览器等)以及基于presto内核浏览器(比如opera浏览器等)中的至少一种，本发明实施例不做限定。
81.可见，实施本发明实施例能够对用户界面组件进行实时编辑和实时渲染，提高对用户界面组件的编辑效率。
82.实施例二
83.请参阅图2，图2是本发明实施例公开的另一种用户界面组件可实时编辑及渲染的方法的流程示意图。其中，图2所描述的用户界面组件可实时编辑及渲染的方法可以应用于
本地服务器或者云服务器中，也可以应用于用户界面编辑系统中，本发明实施例不做限定。如图2所示，该用户界面组件可实时编辑及渲染的方法可以包括以下操作：
84.201、获取用户界面组件的属性编辑窗口提交的用户在属性编辑窗口上输入的编辑信息。
85.本发明实施例中，用户界面组件的属性编辑窗口可以为用户界面组件的可视编辑窗口或者用户界面组件的代码编辑窗口。需要说明的是，该可视编辑窗口和该代码编辑窗口可以在同一个页面中，也可以在不同的页面中，本发明实施例不做限定。本发明实施例中，针对步骤201的其它描述，请参照实施例一中针对步骤101的详细描述，本发明实施例不再赘述。
86.202、确定编辑信息的来源，当确定编辑信息来自可视编辑窗口，可以触发执行步骤203；当确定编辑信息来自代码编辑窗口，可以触发执行步骤204。
87.203、当确定出编辑信息来自可视编辑窗口，根据编辑信息及预设的代码生成方式，生成用户界面组件的属性信息对应的代码。
88.本发明实施例中，可视编辑窗口可以用于编辑非自定义类型的用户界面组件。可选的，预设的代码生成方式可以包括sass前端编译方法。可选的，用户界面组件的属性信息对应的代码可以是基于css层叠样式表规范的代码段。
89.204、当确定出编辑信息来自代码编辑窗口，根据编辑信息生成用户界面组件的属性信息对应的代码。
90.本发明实施例中，代码编辑窗口可以用于编辑自定义类型的用户界面组件。可选的，该窗口的编辑信息可以为用户在代码编辑窗口中编写的基于css层叠样式表规范的代码段。
91.205、将代码发送至用户界面浏览器，以使用户界面浏览器根据代码渲染用户界面组件。
92.本发明实施例中，针对步骤205的其它描述，请参照实施例一中针对步骤103的详细描述，本发明实施例不再赘述。
93.可见，实施本发明实施例能够根据编辑信息的不同来源生成不同的代码，根据不同的代码对用户界面组件进行实时编辑和实时渲染，提高对用户界面组件的编辑效率。
94.在一个可选的实施例中，在获取用户界面组件的属性编辑窗口提交的用户在属性编辑窗口上输入的编辑信息之前，该方法还可以包括：
95.确定需要编辑的用户界面组件的组件类型；其中，组件类型可以包括自定义类型和非自定义类型；
96.当确定需要编辑的组件类型为自定义类型时，生成代码编辑窗口的预设样式对应的样式代码，将样式代码发送至用户界面浏览器，以使用户界面浏览器渲染代码编辑窗口，并触发执行的获取用户界面组件的属性编辑窗口提交的用户在属性编辑窗口上输入的编辑信息的操作；
97.当确定需要编辑的组件类型为非自定义类型时，向用户界面浏览器发送可视编辑窗口的预设样式对应的样式配置文件，以使用户界面浏览器根据样式配置文件渲染可视编辑窗口，并触发执行的获取用户界面组件的属性编辑窗口提交的用户在属性编辑窗口上输入的编辑信息的操作。
98.该可选的实施例中，代码编辑窗口可以基于vscode编辑器插件，vscode编辑器插件可以用于修改用户界面组件中自定义类型的组件。可选的，样式配置文件可以为可修改的组件属性配置文件data.js。其中，data.js可以定义所有可配置属性的数据格式，可选的，数据格式可以包括最外层的category组件类型名称(比如非自定义组件或者自定义组件)和/或config配置。其中，可选的，config配置的里层可以包括type(组件的细化类型)和/或key(type类型对应的参数设定值)。
99.可见，实施该可选的实施例能够根据需要编辑的用户界面组件的类型来生成对应窗口的样式代码，从而使得用户界面浏览器渲染出对应的编辑窗口，为用户提供所需要的编辑窗口，提高编辑效率。
100.在另一个可选的实施例中，根据编辑信息基于预设的代码生成规则生成用户界面组件的属性信息对应的代码，可以包括：
101.根据编辑信息，生成属性信息对应的属性文件；
102.请求用户界面浏览器将预设样式文件存储在用户界面浏览器对应的缓存中；
103.当检测到预设样式文件已存储在用户界面浏览器对应的缓存中时，获取属性文件和预设样式文件，根据属性文件和预设样式文件生成属性信息对应的代码。
104.该可选的实施例中，属性信息对应的属性文件可以为基于开源库sass.js中writefile模块的sass变量文件。该可选的实施例中，预设样式文件可以为基于开源库sass.js的组件sass资源文件。可选的，可以通过开源库sass.js中preloadfiles模块请求用户界面浏览器执行预加载预设样式文件的操作。该可选的实施例中，可以基于开源库sass.js中compilefile模块将属性文件和预设样式文件统一编译得到属性信息对应的代码，进一步的，该代码可以为浏览器可以识别的基于css层叠样式表规范的代码。
105.可见，实施该可选的实施例能够根据属性文件和预设样式文件生成用户界面组件的属性信息对应的代码，从而有利于提高浏览器识别并渲染用户界面组件的效率和准确性。
106.在又一个可选的实施例中，将代码发送至用户界面浏览器，以使用户界面浏览器根据代码渲染用户界面组件，可以包括：
107.根据代码修改用户界面浏览器创建的渲染模型，以使用户界面浏览器根据修改后的渲染模型渲染用户界面组件。
108.该可选的实施例中，用户界面浏览器创建的渲染模型可以为dom文档对象模型。可选的，可以根据代码通过改变dom文档对象模型中的元素来修改用户界面浏览器创建的渲染模型，具体的，还可以根据代码通过改变dom文档对象文件中的head标签来修改用户界面浏览器创建的渲染模型。
109.可见，实施该可选的实施例能够根据属性信息对应的代码修改用户界面浏览器创建的渲染模型，使得浏览器根据修改后的渲染模型渲染用户界面组件，从而实现实时渲染用户界面组件，提高用户界面组件编辑效率。
110.在又一个可选的实施例中，在将代码发送至用户界面浏览器，以使用户界面浏览器根据代码渲染用户界面组件之后，该方法还可以包括：
111.判断是否收到针对用户界面组件的编辑完成指令；
112.当判断出收到针对用户界面组件的编辑完成指令时，根据当前的所有用户界面组
件的属性信息生成属性信息对应的属性文件；属性文件可以包括属性信息对应的代码；属性文件可以用于对本次编辑完成的所有用户界面组件的属性信息的备份和/或后续对用户界面组件进行编辑工作。
113.可见，实施该可选的实施例能够在收到针对用户界面组件的编辑完成指令之后，根据当前的所有用户界面组件的属性信息生成属性信息对应的属性文件，以便于对本次编辑完成的所有用户界面组件的属性信息的备份和/或后续对用户界面组件进行编辑工作。
114.在该可选的实施例中，针对用户界面组件的编辑完成指令可以来自用户端。可选的，判断是否收到针对用户界面组件的编辑完成指令，可以包括：
115.当接收到用户确定用户界面组件已全部编辑完成的信号时，确定收到针对用户界面组件的编辑完成指令；或者，
116.记录用户界面组件的编辑时长，当用户界面组件的编辑时长大于等于预定时长时，确定收到针对用户界面组件的编辑完成指令。
117.该可选的实施例中，用户确定用户界面组件已全部编辑完成的信号可以为浏览器创建的用户点击确认编辑完成按钮的信号。可见，实施该可选的实施例能够根据用户确定用户界面组件已全部编辑完成的信号或者用户界面组件的编辑时长来判断是否收到针对用户界面组件的编辑完成指令，从而实现对是否收到编辑完成指令的自动判断，提高用户界面组件编辑工作的效率。
118.在又一个可选的实施例中，在将代码发送至用户界面浏览器，以使用户界面浏览器根据代码渲染用户界面组件之后，方法还可以包括：
119.判断是否收到针对用户界面组件的应用指令；
120.当判断出收到针对用户界面组件的应用指令时，根据针对用户界面组件的应用指令将当前的用户界面组件的属性信息应用到用户界面中。
121.在该可选的实施例中，针对用户界面组件的应用指令可以来自用户端。可见，实施该可选的实施例能够根据收到的针对用户界面组件的应用指令将当前的用户界面组件的属性信息应用到用户界面中，从而将用户界面组件的编辑结果应用到实际用户界面中。
122.可选的，针对用户界面组件的应用指令可以只包括一个http请求。可见，该可选的实施例能够发出较少的http请求，有助于节省资源。
123.实施例三
124.请参阅图3，图3是本发明实施例公开的一种用户界面组件可实时编辑及渲染的装置的结构示意图。其中，图3所描述的用户界面组件可实时编辑及渲染的装置可以应用于本地服务器或者云服务器中，也可以应用于用户界面编辑系统中，本发明实施例不做限定。如图3所示，该用户界面组件可实时编辑及渲染的装置可以包括：
125.获取模块301，用于获取用户界面组件的属性编辑窗口提交的用户在属性编辑窗口上输入的编辑信息；属性编辑窗口用于实时编辑用户界面组件的属性信息；
126.第一生成模块302，用于根据编辑信息，生成属性信息对应的代码；
127.发送模块303，用于将代码发送至用户界面浏览器，以使用户界面浏览器根据代码渲染用户界面组件。
128.本发明实施例中，可选的，用户界面组件可以包括自定义组件和非自定义组件。其中，可选的，非自定义组件可以包括基础组件、交互组件以及图表组件中的至少一种。其中，
可选的，基础组件可以包括用户界面全局色彩样式组件，还可以包括用户界面布局样式组件。其中，可选的，用户界面全局色彩样式组件可以是红色全局样式组件，也可以是绿色全局样式组件，还可以是黄色全局样式组件，以此类推，本发明实施例不做限定。其中，可选的，用户界面布局样式组件可以包括居中对齐布局样式组件、左对齐布局样式组件、右对齐布局样式组件以及两端对齐布局样式组件中的至少一种。可选的，交互组件可以包括按钮组件、表单组件、单选框组件以及复选框组件中的至少一种。其中，可选的，按钮组件可以包括按钮边框组件、按钮颜色组件以及按钮文字组件中的至少一种。其中，可选的，表单组件可以包括表单标签组件、表单域组件以及表单按钮组件中的至少一种。其中，可选的，单选框组件可以包括单选按钮组件和/或单选文字标签组件。其中，可选的，复选框组件可以包括复选按钮组件和/或复选文字标签组件。可选的，图表组件可以包括折线图组件、条形图组件、饼图组件以及散点图组件中的至少一种。其中，可选的，折线图组件可以包括折线图背景颜色组件、折线图线条颜色组件、折线图线条宽度组件、折线图短划线类型组件、折线图文字颜色组件、折线图文字大小组件以及折线图文字布局组件中的至少一种。其中，可选的，条形图组件可以包括条形图背景颜色组件、条形图条形颜色组件、条形图条形宽度组件、条形图文字颜色组件、条形图文字大小组件以及条形图文字布局组件中的至少一种。其中，可选的，饼图组件可以包括饼图背景颜色组件、饼图分区线条宽度组件、饼图分区线条短划线类型组件、饼图文字颜色组件、饼图文字大小组件以及饼图文字布局组件中的至少一种。其中，可选的，散点图组件可以包括散点图背景颜色组件、散点图散点颜色组件、散点图散点大小组件、散点图散点类型组件、散点图文字颜色组件、散点图文字大小组件以及散点图文字布局组件中的至少一种。可选的，自定义组件可以包括非自定义组件中没有涉及的组件，具体可以包括个性化组件和/或特殊组件。
129.本发明实施例中，属性编辑窗口可以用于实时编辑用户界面组件的属性信息。可选的，用户界面组件的属性信息可以包括用户界面组件的属性参数名称和/或属性参数值。可选的，编辑信息可以包括修改的用户界面组件对应的属性信息。本发明实施例中，属性信息对应的代码可以用于用户界面浏览器根据代码渲染用户界面组件。可选的，属性信息对应的代码可以是基于css层叠样式表规范的代码段。
130.本发明实施例中，用户界面浏览器可以根据收到的代码渲染出用户界面组件。其中，用户界面浏览器可以包括基于trident内核浏览器(比如ie浏览器等)、基于gecko内核浏览器(比如firefox浏览器等)、基于webkit内核浏览器(比如safari浏览器、chrome浏览器等)以及基于presto内核浏览器(比如opera浏览器等)中的至少一种，本发明实施例不做限定。
131.可见，实施本发明实施例能够对用户界面组件进行实时编辑和实时渲染，提高对用户界面组件的编辑效率。
132.在一个可选的实施例中，如图4所示，属性编辑窗口为用户界面组件的可视编辑窗口或者用户界面组件的代码编辑窗口，第一生成模块302可以包括：
133.确定子模块3021，用于确定编辑信息的来源；编辑信息的来源可以包括可视编辑窗口和/或代码编辑窗口；
134.第一生成子模块3022，用于当确定子模块3021确定出编辑信息来自可视编辑窗口，根据编辑信息及预设的代码生成方式，生成用户界面组件的属性信息对应的代码；
135.第二生成子模块3023，用于当确定子模块3021确定出编辑信息来自代码编辑窗口，根据编辑信息生成用户界面组件的属性信息对应的代码。
136.该可选的实施例中，可视编辑窗口可以用于编辑非自定义类型的用户界面组件。可选的，预设的代码生成方式可以包括sass前端编译方法。可选的，用户界面组件的属性信息对应的代码可以是基于css层叠样式表规范的代码段。该可选的实施例中，代码编辑窗口可以用于编辑自定义类型的用户界面组件。可选的，该窗口的编辑信息可以为用户在代码编辑窗口中编写的基于css层叠样式表规范的代码段。
137.可见，实施该可选的实施例能够根据编辑信息的不同来源生成不同的代码，根据不同的代码对用户界面组件进行实时编辑和实时渲染，提高对用户界面组件的编辑效率。
138.在又一个可选的实施例中，如图4所示，该装置还可以包括：
139.确定模块304，用于在获取模块301获取用户界面组件的属性编辑窗口提交的用户在属性编辑窗口上输入的编辑信息之前，确定需要编辑的用户界面组件的组件类型；其中，组件类型可以包括自定义类型和非自定义类型；
140.第二生成模块305，还用于当确定模块304确定需要编辑的组件类型为自定义类型时，生成代码编辑窗口的预设样式对应的样式代码；
141.发送模块303，还用于将第二生成模块305生成的样式代码发送至用户界面浏览器，以使用户界面浏览器渲染代码编辑窗口，并触发获取模块301执行的获取用户界面组件的属性编辑窗口提交的用户在属性编辑窗口上输入的编辑信息的操作；
142.发送模块303，还用于当确定模块304确定需要编辑的组件类型为非自定义类型时，向用户界面浏览器发送可视编辑窗口的预设样式对应的样式配置文件，以使用户界面浏览器根据样式配置文件渲染可视编辑窗口，并触发获取模块301执行的获取用户界面组件的属性编辑窗口提交的用户在属性编辑窗口上输入的编辑信息的操作。
143.该可选的实施例中，代码编辑窗口可以基于vscode编辑器插件，vscode编辑器插件可以用于修改用户界面组件中自定义类型的组件。可选的，样式配置文件可以为可修改的组件属性配置文件data.js。其中，data.js可以定义所有可配置属性的数据格式，可选的，数据格式可以包括最外层的category组件类型名称(比如非自定义组件或者自定义组件)和/或config配置。其中，可选的，config配置的里层可以包括type(组件的细化类型)和/或key(type类型对应的参数设定值)。
144.可见，实施该可选的实施例能够根据需要编辑的用户界面组件的类型来生成对应窗口的样式代码，从而使得用户界面浏览器渲染出对应的编辑窗口，为用户提供所需要的编辑窗口，提高编辑效率。
145.在又一个可选的实施例中，如图4所示，第一生成子模块3022可以包括：
146.生成单元30221，用于根据编辑信息，生成属性信息对应的属性文件；
147.请求单元30222，用于请求用户界面浏览器将预设样式文件存储在用户界面浏览器对应的缓存中；
148.获取单元30223，用于当检测到预设样式文件已存储在用户界面浏览器对应的缓存中时，获取属性文件和预设样式文件；
149.生成单元30221，还用于当获取单元30223获取属性文件和预设样式文件之后，根据属性文件和预设样式文件生成属性信息对应的代码。
150.该可选的实施例中，属性信息对应的属性文件可以为基于开源库sass.js中writefile模块的sass变量文件。该可选的实施例中，预设样式文件可以为基于开源库sass.js的组件sass资源文件。可选的，可以通过开源库sass.js中preloadfiles模块请求用户界面浏览器执行预加载预设样式文件的操作。该可选的实施例中，可以基于开源库sass.js中compilefile模块将属性文件和预设样式文件统一编译得到属性信息对应的代码，进一步的，该代码可以为浏览器可以识别的基于css层叠样式表规范的代码。
151.可见，实施该可选的实施例能够根据属性文件和预设样式文件生成用户界面组件的属性信息对应的代码，从而有利于提高浏览器识别并渲染用户界面组件的效率和准确性。
152.在又一个可选的实施例中，如图4所示，发送模块303将代码发送至用户界面浏览器，以使用户界面浏览器根据代码渲染用户界面组件的方式具体可以包括：
153.将代码插入到用户界面浏览器创建的渲染模型中，以使用户界面浏览器根据渲染模型渲染用户界面组件。
154.该可选的实施例中，用户界面浏览器创建的渲染模型可以为dom文档对象模型。可选的，可以根据代码通过改变dom文档对象模型中的元素来修改用户界面浏览器创建的渲染模型，具体的，还可以根据代码通过改变dom文档对象文件中的head标签来修改用户界面浏览器创建的渲染模型。
155.可见，实施该可选的实施例能够根据属性信息对应的代码修改用户界面浏览器创建的渲染模型，使得浏览器根据修改后的渲染模型渲染用户界面组件，从而实现实时渲染用户界面组件，提高用户界面组件编辑效率。
156.在又一个可选的实施例中，如图4所示，装置还可以包括：
157.判断模块306，用于在发送模块303将代码发送至用户界面浏览器，以使用户界面浏览器根据代码渲染用户界面组件之后，判断是否收到针对用户界面组件的编辑完成指令；
158.第三生成模块307，还用于当判断模块306判断出收到针对用户界面组件的编辑完成指令时，根据当前的所有用户界面组件的属性信息生成属性信息对应的属性文件；属性文件可以包括属性信息对应的代码；属性文件用于对本次编辑完成的所有用户界面组件的属性信息的备份和/或后续对用户界面组件进行编辑工作。
159.可见，实施该可选的实施例能够在收到针对用户界面组件的编辑完成指令之后，根据当前的所有用户界面组件的属性信息生成属性信息对应的属性文件，以便于对本次编辑完成的所有用户界面组件的属性信息的备份和/或后续对用户界面组件进行编辑工作。
160.在又一个可选的实施例中，如图4所示，装置还可以包括：
161.判断模块306，还用于在发送模块303将代码发送至用户界面浏览器，以使用户界面浏览器根据代码渲染用户界面组件之后，判断是否收到针对用户界面组件的应用指令；
162.应用模块308，用于当判断模块306判断出收到针对用户界面组件的应用指令时，根据针对用户界面组件的应用指令将当前的用户界面组件的属性信息应用到用户界面中。
163.可见，实施该可选的实施例能够根据收到的针对用户界面组件的应用指令将当前的用户界面组件的属性信息应用到用户界面中，从而将用户界面组件的编辑结果应用到实际用户界面中。
164.实施例四
165.请参阅图5，图5是本发明实施例公开的又一种用户界面组件可实时编辑及渲染的装置的结构示意图。如图5所示，该用户界面组件可实时编辑及渲染的装置可以包括：
166.存储有可执行程序代码的存储器401；
167.与存储器401耦合的处理器402；
168.处理器402调用存储器401中存储的可执行程序代码，执行本发明实施例一或本发明实施例二所描述的用户界面组件可实时编辑及渲染的方法中的步骤。
169.实施例五
170.本发明实施例公开了一种计算机可存储介质，该计算机存储介质存储有计算机指令，该计算机指令被调用时，用于执行本发明实施例一或本发明实施例二所描述的用户界面组件可实时编辑及渲染的方法中的步骤。
171.实施例六
172.本发明实施例公开了一种计算机程序产品，该计算机程序产品包括存储了计算机程序的非瞬时性计算机可读存储介质，且该计算机程序可操作来使计算机执行实施例一或实施例二中所描述的用户界面组件可实时编辑及渲染的方法中的步骤。
173.以上所描述的装置实施例仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
174.通过以上的实施例的具体描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中,存储介质包括只读存储器(read-only memory，rom)、随机存储器(random access memory，ram)、可编程只读存储器(programmable read-only memory，prom)、可擦除可编程只读存储器(erasable programmable read only memory，eprom)、一次可编程只读存储器(one-time programmable read-only memory，otprom)、电子抹除式可复写只读存储器(electrically-erasable programmable read-only memory，eeprom)、只读光盘(compact disc read-only memory，cd-rom)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。
175.最后应说明的是：本发明实施例公开的一种用户界面组件可实时编辑及渲染的方法及装置所揭露的仅为本发明较佳实施例而已，仅用于说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解；其依然可以对前述各项实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或替换，并不使相应的技术方案的本质脱离本发明各项实施例技术方案的精神和范围。