用户界面的搭建方法及系统、电子设备、存储介质与流程

1.本发明涉及界面搭建领域，具体涉及一种用户界面的搭建方法及系统、电子设备、存储介质。


背景技术：

2.低代码平台是基于不同活动组件快速搭建活动页面，基本已有的组件可搭建符合日常活动需要的页面。但是由于营销活动的高时效性和高灵活性，当已有组件不满足需求营销活动设计需求，或者需要一定的元素自由组合的场景。若开发人员再新开发一个满足需求的新组件，需要历经需求评审、调研、排期，开发上线一个完整的周期，时间比较长，效率比较低。


技术实现要素：

3.本发明要解决的技术问题是为了克服现有技术中用户界面搭建不够高效和灵活的缺陷，提供一种用户界面的搭建方法及系统、电子设备、存储介质。
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.图1为本发明实施例提供的一种用户界面的搭建方法的流程图；
31.图2为本发明实施例提供的另一种用户界面的搭建方法的流程图；
32.图3为本发明实施例提供的一种用户界面的搭建方法的操作过程的第一示意图；
33.图4为本发明实施例提供的一种用户界面的搭建方法的操作过程的第二示意图；
34.图5为本发明实施例提供的一种用户界面的搭建方法的操作过程的第三示意图；
35.图6为本发明实施例提供的一种用户界面的搭建方法的用户第一界面图；
36.图7为本发明实施例提供的一种用户界面的搭建方法的用户第二界面图；
37.图8为本发明实施例提供的一种用户界面的搭建系统的结构示意图；
38.图9为本发明实施例提供的一种电子设备的结构示意图。
具体实施方式
39.下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。
40.如图1所示，本发明实施例提供的一种用户界面的搭建方法包括以下步骤：
41.s11、获取界面基础组件。
42.界面基础组件基于低代码平台生成并且界面基础组件包括用户界面的至少一个构成要素，低代码平台基于不同界面基础组件快速搭建用户界面，用户界面的构成要素包括但不限于背景、按钮、图片等。
43.在一个实施例中，界面基础组件包括以下至少一种：图片组件、按钮组件、背景组件、文本组件。
44.其中，除了上述组件外，界面基础组件还包括但不限于价格组件、标签组件等。
45.s12、组合界面基础组件，以搭建用户界面的目标场景组件。
46.用户界面的目标场景组件包括但不限于日常活动需要的场景组件、营销活动需要
的组件、元素可自由组合的组件，用户针对不同的界面基础组件进行自由拼接组合，快速定制符合需求的目标场景组件。
47.在一个实施例中，组合界面基础组件的步骤包括：将界面基础组件拖入界面搭建框架内，更改界面基础组件的属性，以搭建用户界面的目标场景组件，界面基础组件的属性包括以下至少一种：定位、布局方式、位置。
48.用户根据自己的不同需求将界面基础组件通过draggable(拖拽)技术，从组件库拖拽一个或多个界面基础组件到界面搭建框架内，以便界面基础组件的后续操作运用。在获取界面基础组件后，更改界面基础组件的属性，例如定位、布局方式和位置，所有属性配置的更改都实时反应在界面搭建框架上，可以高灵活度和高自由度的快速搭建目标场景组件及界面配置。
49.其中，除了上述属性参数外，界面基础组件的属性还包括但不限于组件名称、可见群体、生效时间、宽度、高度等。
50.在一个实施例中，组合界面基础组件的步骤包括：
51.点击界面基础组件，以将界面基础组件放入界面搭建框架内；
52.更改界面基础组件的属性，以搭建用户界面的目标场景组件。
53.用户根据自己的不同需求，从组件库点击一个或多个界面基础组件到界面搭建框架内，以便界面基础组件的后续操作运用。在获取界面基础组件后，更改界面基础组件的属性，例如定位、布局方式和位置，所有属性配置的更改都实时反应在界面搭建框架上，可以高灵活度和高自由度的快速搭建目标场景组件及界面配置。
54.其中，除了上述属性参数外，界面基础组件的属性还包括但不限于组件名称、可见群体、生效时间、宽度、高度等。
55.在一个实施例中，组合界面基础组件的步骤包括：
56.将界面基础组件拖入界面搭建框架内；点击界面基础组件，以将界面基础组件放入界面搭建框架内；更改界面基础组件的属性，以搭建用户界面的目标场景组件。
57.用户根据自己的不同需求将界面基础组件通过draggable技术，从组件库拖拽一个或多个界面基础组件到界面搭建框架内，或从组件库点击一个或多个界面基础组件到界面搭建框架内，以便界面基础组件的后续操作运用。在获取界面基础组件后，更改界面基础组件的属性，例如定位、布局方式和位置，所有属性配置的更改都实时反应在界面搭建框架上，可以高灵活度和高自由度的快速搭建目标场景组件及界面配置。
58.其中，除了上述属性参数外，界面基础组件的属性还包括但不限于组件名称、可见群体、生效时间、宽度、高度等。
59.在一个实施例中，更改界面基础组件的属性的步骤包括：
60.获取界面基础组件的属性栏，基于属性栏更改界面基础组件的属性。
61.点击界面基础组件进入对应的属性栏，通过修改属性栏中的属性更改界面基础组件的属性。
62.在一个实施例中，组合界面基础组件的步骤还包括：
63.将界面基础组件拖入界面搭建框架内，拖拽移动界面基础组件，以搭建用户界面的目标场景组件。
64.在界面搭建框架内通过moveable(移动)技术，拖拽界面基础组件的位置进行位置
布局的改动，拖拽界面基础组件进行更改大小、缩放、旋转等功能，按照设计方案高度还原，完成目标场景组件的搭建。
65.在一个实施例中，还包括：存储目标场景组件以进行二次开发。
66.用户针对不同的界面基础组件进行自由拼接组合，快速组合符合需求的目标场景组件，保存目标场景组件作为用户界面搭建的一部分，或基于搭建的目标场景组件导出的代码进行二次开发，开发出符合不同业务需求的场景组件。
67.自由组合及配置快速生成符合营销活动需求的组件，提高了组件的灵活性和多样性，通过拖拽配置界面基础组件，搭建复杂的目标场景组件，存储目标场景组件直接用于用户界面搭建，或导出目标场景组件的代码并进行二次开发，上线新的组件供用户使用，减少了技术开发人员重复的工作量，使组件搭建的效率和产研效率都提高，减少企业的成本。
68.下面结合图2对用户界面的搭建方法作进一步说明：
69.用户开始用户界面的搭建，低代码平台选择新建界面基础组件，进入界面搭建框架内，选择添加整体背景图层，从组件库中添加界面基础组件至界面搭建框架，并编辑界面基础组件，更改界面基础组件的配置属性及数据，在更改完成后，点击检测配置是否完整，若配置不完整，例如生效时间未设置，则提示相关错误配置项，再次更改界面基础组件的配置属性及数据，点击检测是否完整，直至配置完成，搭建了用户界面的目标场景组件，关闭属性栏，预览用户界面，检测整个目标场景组件是否配置完成，若配置未完成，则再次从组件库中添加界面基础组件，配置属性以完成搭建。目标场景组件搭建完成后，保存目标场景组件作为用户界面搭建的一部分，或基于搭建的目标场景组件导出的代码进行二次开发，开发出符合不同业务需求的场景组件。
70.下面结合用户界面的操作过程示意图，举个实例对用户界面的搭建方法作进一步说明：
71.如图3所示，在低代码平台原有的固定精选组件的基础上，独立一套界面基础组件搭建的逻辑，用户基于系统已有的组件库，例如背景组件、图片组件、按钮组件、价格组件，从组件库中拖拽或点击一个或多个界面基础组件到界面搭建框架内，然后在界面搭建框架内拖拽界面基础组件的位置，进行位置布局的改动，或通过点击界面基础组件进入界面基础组件的属性栏，在属性栏中更改该界面基础组件的定位、布局方式、位置及大小等属性如图4所示，属性栏中的界面基础组件的属性包括但不限于组件名称、可见群体、组建生效时间、背景图等，按照设计方案高度还原，完成目标场景组件的搭建如图5所示，所有属性配置实时反应在界面搭建框架上，高灵活度和高自由度的快速搭建组件及界面配置。目标场景组件搭建完成后，保存目标场景组件作为用户界面搭建的一部分，或基于搭建的目标场景组件导出的代码进行二次开发，开发出符合不同业务需求的场景组件，显著提升产品、设计和开发人员的效率。
72.下面结合用户界面，再举个实例对用户界面的搭建方法作进一步说明：
73.如图6所示，低代码平台一侧为组件库，中间为界面搭建框架，另一侧为界面基础组件的属性栏，用户从组件库中拖拽或点击界面基础组件至界面搭建框架内，在界面搭建框架内拖拽更改界面基础组件的位置等属性，或通过点击界面基础组件进入属性栏，更改界面基础组件的属性，完成目标场景组件的搭建，搭建过程中所有属性配置实时反应在界面搭建框架上，实时预览，目标场景组件搭建完成后，保存目标场景组件作为用户界面搭建
的一部分如图7所示。
74.本发明实施例还提供一种用户界面的搭建系统如图8所示，系统包括：
75.获取模块81，用于获取界面基础组件；所述界面基础组件基于低代码平台生成并且所述界面基础组件包括所述用户界面的至少一个构成要素；
76.组合模块82，用于组合所述界面基础组件，以搭建所述用户界面的目标场景组件。在一个实施例中，组合模块包括：
77.第一拖拽单元，用于将所述界面基础组件拖入界面搭建框架内；
78.第一更改单元，用于更改所述界面基础组件的属性，以搭建所述用户界面的目标场景组件；
79.点击单元，用于点击所述界面基础组件，以将所述界面基础组件放入界面搭建框架内；
80.第二更改单元，用于更改所述界面基础组件的属性，以搭建所述用户界面的目标场景组件；
81.所述界面基础组件的属性包括以下至少一种：定位、布局方式、位置。
82.在一个实施例中，组合模块还包括：
83.获取单元，用于获取所述界面基础组件的属性栏；
84.第三更改单元，用于基于所述属性栏更改所述界面基础组件的属性。
85.在一个实施例中，组合模块还包括：
86.第二拖拽单元，用于将所述界面基础组件拖入界面搭建框架内；
87.第三拖拽单元，用于拖拽移动所述界面基础组件，以搭建所述用户界面的目标场景组件。
88.可选地，所述界面基础组件包括以下至少一种：图片组件、按钮组件、背景组件、文本组件。
89.在一个实施例中，还包括：
90.存储模块，用于存储所述目标场景组件以进行二次开发。
91.对于系统实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本发明方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
92.本发明实施例还提供一种电子设备如图9所示，包括存储器、处理器及存储在存储器上并用于在处理器上运行的计算机程序，处理器执行计算机程序时实现上述任一实施例所述的用户界面的搭建方法。图9显示的电子设备90仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。如图9所示，电子设备90可以以通用计算设备的形式表现，例如其可以为服务器设备。电子设备90的组件可以包括但不限于：上述至少一个处理器91、上述至少一个存储器92、连接不同系统组件(包括存储器92和处理器91)的总线93。
93.总线93包括数据总线、地址总线和控制总线。
94.存储器92可以包括易失性存储器，例如随机存取存储器(ram)921和/或高速缓存
存储器922，还可以进一步包括只读存储器(rom)923。
95.存储器92还可以包括具有一组(至少一个)程序模块924的程序工具925(或实用工具)，这样的程序模块924包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
96.处理器91通过运行存储在存储器92中的计算机程序，从而执行各种功能应用以及数据处理，例如上述任一实施例所述的用户界面的搭建方法。
97.电子设备90也可以与一个或多个外部设备94通信。这种通信可以通过输入/输出(i/o)接口95进行。并且，模型生成的电子设备90还可以通过网络适配器96与一个或者多个网络(例如局域网(lan)，广域网(wan)和/或公共网络，例如因特网)通信。如图9所示，网络适配器96通过总线93与电子设备90的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备90使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、raid(磁盘阵列)系统、磁带驱动器以及数据备份存储系统等。
98.本发明实施例还提供一种计算机存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述任一实施例提供的用户界面的搭建方法。
99.虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。

技术特征：
1.一种用户界面的搭建方法，其特征在于，方法包括：获取界面基础组件；所述界面基础组件基于低代码平台生成并且所述界面基础组件包括所述用户界面的至少一个构成要素；组合所述界面基础组件，以搭建所述用户界面的目标场景组件。2.如权利要求1所述的方法，其特征在于，组合所述界面基础组件的步骤包括：将所述界面基础组件拖入界面搭建框架内；更改所述界面基础组件的属性，以搭建所述用户界面的目标场景组件；和/或，点击所述界面基础组件，以将所述界面基础组件放入界面搭建框架内；更改所述界面基础组件的属性，以搭建所述用户界面的目标场景组件；所述界面基础组件的属性包括以下至少一种：定位、布局方式、位置。3.如权利要求2所述的方法，其特征在于，更改所述界面基础组件的属性的步骤包括：获取所述界面基础组件的属性栏；基于所述属性栏更改所述界面基础组件的属性。4.如权利要求1所述的方法，其特征在于，组合所述界面基础组件的步骤还包括：将所述界面基础组件拖入界面搭建框架内；拖拽移动所述界面基础组件，以搭建所述用户界面的目标场景组件。5.如权利要求1所述的方法，其特征在于，所述界面基础组件包括以下至少一种：图片组件、按钮组件、背景组件、文本组件。6.如权利要求1所述的方法，其特征在于，还包括：存储所述目标场景组件以进行二次开发。7.一种用户界面的搭建系统，其特征在于，系统包括：获取模块，用于获取界面基础组件；所述界面基础组件基于低代码平台生成并且所述界面基础组件包括所述用户界面的至少一个构成要素；组合模块，用于组合所述界面基础组件，以搭建所述用户界面的目标场景组件；存储模块，用于存储所述目标场景组件以进行二次开发。8.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行计算机程序时实现如权利要求1-6中任一项所述的用户界面的搭建方法。9.一种计算机存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-6中任一项所述的用户界面的搭建方法。

技术总结
本发明公开了一种用户界面的搭建方法及系统、电子设备、存储介质，方法包括：获取界面基础组件；所述界面基础组件基于低代码平台生成并且所述界面基础组件包括所述用户界面的至少一个构成要素；组合所述界面基础组件，以搭建所述用户界面的目标场景组件。本发明提高了组件的灵活性和多样性，减少企业的成本。减少企业的成本。减少企业的成本。


技术研发人员：罗旭辉 左邦阳 顾佳璐
受保护的技术使用者：携程计算机技术（上海）有限公司
技术研发日：2023.05.30
技术公布日：2023/8/9