一种基于apaas平台的移动端可视化页面配置和渲染方法
技术领域
1.本发明涉及计算机应用技术领域,具体而言,涉及一种基于apaas平台的移动端可视化页面配置和渲染方法。
背景技术:2.apaas或应用平台即服务是一类基于云的软件,它为用户提供了一个开发、部署和管理应用程序的平台,且为用户提供了开发新应用的硬件、操作系统、存储或网络能力。
3.目前,在apaas平台上进行可视化页面配置的方法通常基于固有组件的添加删除和拖拽排序,其组件形式单一、可配置内容较少,且利用现有的编辑器配置较为复杂的页面,需要开发大量的代码编写,导致页面的开发效率低,且维护成本较高。
技术实现要素:4.本发明的目的在于提供一种基于apaas平台的移动端可视化页面配置和渲染方法,用以改善现有技术中利用现有的编辑器配置较为复杂的页面,需要开发大量的代码编写,导致页面的开发效率低、维护成本较高的问题。
5.本发明的实施例是这样实现的:
6.第一方面,本技术实施例提供一种基于apaas平台的移动端可视化页面配置和渲染方法,其包括如下步骤:
7.响应用户操作在页面管理界面新建页面的同时,在后端生成与新建页面对应的唯一id,并初始化新建页面的页面数据;
8.利用可视化页面编辑器对任一页面进行页面配置,可视化页面编辑器用于根据页面id,从后端获取对应的页面数据及可配置使用的组件信息,组件信息包括多个第一组件;
9.基于可配置使用的组件信息,响应用户操作选择任意第一组件进行页面设计,并响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置,多个页面配置至少包括数据配置、样式配置、属性配置、事件配置和交互配置中的一种或多种;
10.将页面配置完成后的配置数据保存至后台;
11.将配置完成后的页面部署至用户侧;
12.响应用户操作在用户侧对该页面的基础框架进行加载,同时从后端获取该页面的配置数据和对应的第一组件,并根据配置数据将第一组件进行组合并渲染得到最终页面,同时根据页面配置执行对应的事件任务。
13.在本发明的一些实施例中,上述多个第一组件包括容器组件和第二组件;
14.上述基于可配置使用的组件信息,响应用户操作选择任意第一组件进行页面设计的步骤包括:
15.响应用户操作选择任一容器组件和多个第二组件,利用该容器组件进行页面布局后,将多个第二组件添加至容器组件中进行组合配置。
16.在本发明的一些实施例中,上述将页面配置完成后的配置数据保存至后台的步骤之前,该方法还包括:
17.根据配置完成后的页面,展示预览页面效果。
18.在本发明的一些实施例中,上述响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置的步骤包括:
19.响应用户操作添加目标赋值对象,并对目标赋值对象进行数据配置。
20.在本发明的一些实施例中,上述响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置的步骤包括:
21.响应用户操作对页面或任一第一组件的宽高数据、背景数据、边距数据、边框数据、阴影数据、文字样式进行可视化配置。
22.在本发明的一些实施例中,上述响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置的步骤包括:
23.响应用户操作对任一第一组件进行属性配置,属性配置至少包括名称、内容、提示、显示属性、图标、排列方式、显示模式和默认值中的一种或多种。
24.在本发明的一些实施例中,上述基于apaas平台的移动端可视化页面配置和渲染方法还包括:
25.在后台与用户侧的信息传输路径上配置信息传输接口,信息传输接口用于传输配置数据。
26.在本发明的一些实施例中,上述根据页面配置执行对应的事件任务的步骤包括:
27.结合第一组件信息和页面数据,实现动态显示或隐藏第一组件。
28.第二方面,本技术实施例提供一种电子设备,其包括存储器,用于存储一个或多个程序;处理器。当一个或多个程序被处理器执行时,实现如上述第一方面中任一项的方法。
29.第三方面,本技术实施例提供一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现如上述第一方面中任一项的方法。
30.相对于现有技术,本发明的实施例至少具有如下优点或有益效果:
31.本发明提供一种基于apaas平台的移动端可视化页面配置和渲染方法,其包括如下步骤:响应用户操作在页面管理界面新建页面的同时,在后端生成与新建页面对应的唯一id,并初始化新建页面的页面数据。然后在利用可视化页面编辑器对页面进行页面配置时,可视化页面编辑器可以从后端调取对应的页面数据和可配置使用的组件信息,用户根据自身需求,选择任意第一组件进行组件内部配置,以对整个页面进行数据配置、样式配置、属性配置、事件配置和交互配置等多个页面配置,从而为用户提供了多种配置形式和配置内容,丰富了用户的页面配置操作,使得页面的配置及使用更加灵活。用户对各个第一组件的配置数据将保存至后台,且配置完成后的页面将部署至用户侧,则当用户在用户侧打开页面时,页面首先加载基础框架,并获取对应的配置数据和第一组件,然后根据页面配置执行预先配置的事件任务,并根据配置数据对第一组件进行组合并遍历,以对页面进行渲染得到最终页面。从而不仅实现了配置多种复杂页面的目的,而且由于用户只需要通过对第一组件进行配置就可以完成页面配置,相较于传统页面开发方法减少了大量的代码编写,极大地提高了页面开发效率,降低了维护成本。且与现有页面配置方案相比,通过本方法进行页面配置具有极强的灵活性和普适性。
附图说明
32.为了更清楚地说明本发明实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,应当理解,以下附图仅示出了本发明的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图。
33.图1为本发明实施例提供的一种基于apaas平台的移动端可视化页面配置和渲染方法的流程图;
34.图2为本发明实施例提供的一种基础框架的使用框图;
35.图3为本发明实施例提供的一种赋值面板的示意图;
36.图4为本发明实施例提供的另一种赋值面板的示意图;
37.图5为本发明实施例提供的一种子项遍历条件的示意图;
38.图6为本发明实施例提供的一种样式配置的示意图;
39.图7为本发明实施例提供的另一种样式配置的示意图;
40.图8为本发明实施例提供的一种电子设备的示意性结构框图;
41.图9为本发明实施例提供的一种事件配置的示意图;
42.图10为本发明实施例提供的一种字段配置的示意图;
43.图11为本发明实施例提供的一种渲染的具体流程图;
44.图12为本发明实施例提供的一种组件组合配置的示意图;
45.图13为本发明实施例提供的另一种组件组合配置的示意图。
46.图标:101-存储器;102-处理器;103-通信接口。
具体实施方式
47.为使本技术实施例的目的、技术方案和优点更加清楚,下面将结合本技术实施例中的附图,对本技术实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本技术一部分实施例,而不是全部的实施例。通常在此处附图中描述和示出的本技术实施例的组件可以以各种不同的配置来布置和设计。
48.因此,以下对在附图中提供的本技术的实施例的详细描述并非旨在限制要求保护的本技术的范围,而是仅仅表示本技术的选定实施例。基于本技术中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本技术保护的范围。
49.应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。同时,在本技术的描述中,若出现术语“第一”、“第二”等仅用于区分描述,而不能理解为指示或暗示相对重要性。
50.需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,若出现术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者
设备所固有的要素。在没有更多限制的情况下,若出现由语句“包括一个
……”
限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
51.在本技术的描述中,需要说明的是,若出现术语“上”、“下”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系,或者是该申请产品使用时惯常摆放的方位或位置关系,仅是为了便于描述本技术和简化描述,而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作,因此不能理解为对本技术的限制。
52.在本技术的描述中,还需要说明的是,除非另有明确的规定和限定,若出现术语“设置”、“连接”应做广义理解,例如,可以是固定连接,也可以是可拆卸连接,或一体地连接;可以是机械连接,也可以是电连接;可以是直接相连,也可以通过中间媒介间接相连,可以是两个元件内部的连通。对于本领域的普通技术人员而言,可以具体情况理解上述术语在本技术中的具体含义。
53.下面结合附图,对本技术的一些实施方式作详细说明。在不冲突的情况下,下述的各个实施例及实施例中的各个特征可以相互组合。
54.实施例
55.请参照图1,图1所示为本发明实施例提供的一种基于apaas平台的移动端可视化页面配置和渲染方法的流程图。本技术实施例提供一种基于apaas平台的移动端可视化页面配置和渲染方法,其包括如下步骤:
56.s110:响应用户操作在页面管理界面新建页面的同时,在后端生成与新建页面对应的唯一id,并初始化新建页面的页面数据;
57.其中,页面数据包括页面名字、页面基本属性(例如页面所属分类、页面使用的端口(pc端或app终端)、页面所属企业等)、页面创建时间、页面id。
58.s120:利用可视化页面编辑器对任一页面进行页面配置,可视化页面编辑器用于根据页面id,从后端获取对应的页面数据及可配置使用的组件信息,组件信息包括多个第一组件;
59.其中,组件信息包括显示组件(文本、图片、按钮、图标、进度条、分隔符等)、容器组件(栅格容器、页头容器、页尾容器、页签容器、分布容器、定位容器等)、录入组件(短文本、长文本、日期、事件、单选、多选、数字、数字范围、开关、表单表格、图片上传等)、高级组件(阶段容器、轮播组件、卡片列表等)、业务组件(投票管理、任务队列、证书配置等)
60.具体的,后端存储了各个企业分别可配置使用的组件信息。即不同企业可使用的组件信息不同,保证了各个企业的保密性和信息安全。用户打开可视化页面编辑器后,可视化页面编辑器可以直接根据用户的企业信息和进行配置的页面id调取后端的页面数据和可配置使用的组件信息,以保证调取的数据的准确性。
61.s130:基于可配置使用的组件信息,响应用户操作选择任意第一组件进行页面设计,并响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置,多个页面配置至少包括数据配置、样式配置、属性配置、事件配置和交互配置中的一种或多种;
62.具体的,用户从可配置使用的组件信息中,对任意第一组件进行拖拽、添加或复制,用户选择的多个第一组件之间可以进行嵌套配置,以进行页面设计。用户点击选择任一第一组件对该第一组件的数据、样式、属性、事件、交互等进行配置,利用所有第一组件的配
置数据可以对整个页面进行对应的页面配置,以支持页面的更多功能。从而不仅实现了支持页面的条件配置的目的,而且丰富了用户的页面配置操作,使得页面的配置及使用更加灵活。
63.请参照图9,图9所示为本发明实施例提供的一种事件配置的示意图。其中,在事件配置中,页面的数据对象包括:参数对象(用于配置页面接收的参数)、组件对象(页面中组件的数据,通常来源于组件绑定的字段,部分复杂组件会在组件内自定义自身的数据结构)、变量对象(页面用到的临时数据)、缓存对象(存储在浏览器缓存中的数据)、系统对象(系统内置数据,如当前用户信息,当前企业信息等)、接口对象(接口的返回数据)、返参对象(页面对外暴露的数据,常用于页面嵌入到另外一个页面内的场景,将当前页面的部分数据暴露给父页面)、事件对象(事件执行过程中产生的数据,如当用户点击页签容器的某个页签时该事件将点击页签的索引名称等信息通过事件对象暴露出来)。页面的事件包括:页面创建后(指页面渲染后立即执行)、页面销毁前(指页面销毁前执行)、页面激活(指页面后重新获得焦点时执行)、下拉刷新(指页面下拉时执行)、自定义事件(指自定义活动,通常用于页面嵌套在其他页面内的时候,该活动会暴露出来,其他页面在需要时可调用执行)。组件的事件包括点击事件(指组件被点击触发)、鼠标移入(指鼠标移入触发)、鼠标移出(指鼠标移出触发)、值变化(指数据发生变化时触发,如输入内容或被赋值)、显示时(指组件显示时触发)、隐藏时(指组件隐藏时触发)、获得焦点(指录入组件获得焦点时触发)、失去焦点(指录入组件失去焦点时触发)、选中事件(如表格内勾选一行数据时触发)、取消选中事件(指取消勾选数据时触发)、步骤切换前(指分步组件切换前触发)、步骤切换后(指分步组件切换后触发)、上传图片后事件(指图片上传组件后触发)、删除图片后事件(指图片组件删除图片后触发)。事件可配置的活动类型包括赋值活动(给组件等页面变量赋值)、视图活动(设置组件状态,例如显示、隐藏等)、页面活动(定义页面级事件操作,例如跳转页面、刷新页面、关闭页面、回传数据等)、全局提示(弹出提示框)、网络接口(绑定接口发起请求)、结束活动(立即终止当前正在执行的活动)、打印日志(将选中的数据打印到控制台显示)、公式计算(调用内置公式进行数据的计算)、发起流程(跳转到流程页面)、提交流程(在表格或页面功能中直接提交流程)。示例性的,在对任一第一组件进行事件配置时,可以对将页面事件配置为“页面创建后”。
64.其中,参数对象的类型包括short_text短文本、long_text长文本、rich_text富文本、integer整数、decimal小数、time时间、date日期、radio单选、check多选、logical逻辑、picture图片、file文件、association关联关系、complex_association复合关联、reference引用字段、statistics统计字段、master_details主子明细、object对象和array数组。
65.请参照图10,图10所示为本发明实施例提供的一种字段配置的示意图。用户可以对字段进行条件设置,以对字段进行逻辑判断。示例性的,条件对字段做逻辑判断and或or,最终输出true或false。其中,在本方法中支持运算符为:等于、不等于、大于、小于、大于等于、小于等于、为空、不为空、包含、不包含、以...开头、以...结尾、介于
…
之间、介于
…
之外、在
…
之中、在
…
之外。
66.s140:将页面配置完成后的配置数据保存至后台;
67.其中,配置数据包括各个第一组件的数据配置、样式配置、属性配置、事件配置和
交互配置等多种配置参数。
68.s150:将配置完成后的页面部署至用户侧;
69.s160:响应用户操作在用户侧对该页面的基础框架进行加载,同时从后端获取该页面的配置数据和对应的第一组件,并根据配置数据将第一组件进行组合并渲染得到最终页面,同时根据页面配置执行对应的事件任务。
70.具体的,在页面配置完成后,将配置数据保存至后台,并将配置好的页面部署至对应企业的用户侧,进一步保证页面不被泄露。当用户打开页面时,页面首先加载基础框架,并获取对应的配置数据和第一组件,以供页面配置使用。然后在页面创建前,根据页面配置执行预先配置的事件任务,并根据配置数据对第一组件进行组合并遍历,对页面进行渲染得到最终页面。
71.上述实现过程中,该方法首先在新建页面时,生成页面对应的唯一id,并初始化页面数据。然后在利用可视化页面编辑器对页面进行页面配置时,可视化页面编辑器可以从后端调取对应的页面数据和可配置使用的组件信息,用户根据自身需求,选择任意第一组件进行组件内部配置,以对整个页面进行数据配置、样式配置、属性配置、事件配置和交互配置等多个页面配置,从而为用户提供了多种配置形式和配置内容,丰富了用户的页面配置操作,使得页面的配置及使用更加灵活。用户对各个第一组件的配置数据将保存至后台,且配置完成后的页面将部署至用户侧,则当用户在用户侧打开页面时,页面首先加载基础框架,并获取对应的配置数据和第一组件,然后根据页面配置执行预先配置的事件任务,并根据配置数据对第一组件进行组合并遍历,以对页面进行渲染得到最终页面。从而不仅实现了配置多种复杂页面的目的,而且由于用户只需要通过对第一组件进行配置就可以完成页面配置,相较于传统页面开发方法减少了大量的代码编写,极大提高了页面开发效率,降低了维护成本。且与现有页面配置方案相比,通过本方法进行页面配置具有极强的灵活性和普适性。
72.请参照图2,图2所示为本发明实施例提供的一种基础框架的使用框图。首先,在用户打开页面时,可视化页面编辑器可根据页面id获取配置可用的组件信息来渲染组件列表,以供页面配置使用。可视化页面编辑器会获取页面配置信息即配置数据,根据页面配置信息遍历渲染组件。将渲染组件拖拽到合适的位置,并点击某个组件,以对该组件进行详细配置。其中,当选中某个组件时,页面将展示该组件的配置信息,未选中组件时,页面将展示当前页面的配置信息。当修改配置信息时,将配置数据保存到组件/页面配置数据中。
73.请参照图11,图11为本发明实施例提供的一种渲染的具体流程图。首先,在用户侧打开配置好的页面时,将获取页面配置数据和对应的事先配置好的组件信息,为用户侧的页面渲染做准备。然后获取页面参数,放置到页面的参数对象中,获取系统信息放置到页面的系统对象中,根据页面配置执行页面创建前的活动,并遍历配置数据,依次执行渲染组件,以完成页面渲染。
74.在本实施例的一些实施方式中,上述多个第一组件包括容器组件和第二组件;
75.示例性的,容器组件包括栅格容器、页头容器、页尾容器、页签容器、分布容器、定位容器等。第二组件包括显示组件、录入组件、高级组件和业务组件。其中,显示组件包括文本、图片、按钮、图标、进度条、分隔符等,录入组件包括短文本、长文本、日期、事件、单选、多选、数字、数字范围、开关、表单表格、图片上传等,高级组件包括阶段容器、轮播组件、卡片
列表等。业务组件包括投票管理、任务队列、证书配置等。
76.上述基于可配置使用的组件信息,响应用户操作选择任意第一组件进行页面设计的步骤包括:
77.响应用户操作选择任一容器组件和多个第二组件,利用该容器组件进行页面布局后,将多个第二组件添加至容器组件中进行组合配置。从而实现了容器组件和多个第二组件嵌套配置的目的。
78.请参照图12,图12所示为本发明实施例提供的一种组件组合配置的示意图。对组件进行拖拽的步骤如下:用户从可视化页面编辑器左侧的组件列表点击并拖拽某个组件到中间的页面设计器,设计区会根据鼠标移动的位置坐标在对应的区域插入一个临时的方块表示组件将会被放到这个临时方块中,通过鼠标的上下左右移动来调整组件放置的位置,调整合适后松开鼠标,页面设计器会在当前位置渲染拖拽的组件。
79.请参照图13,图13所示为本发明实施例提供的另一种组件组合配置的示意图。在布局容器中添加组件的具体步骤如下:首先将布局容器拖拽到页面设计器中,布局容器会有一个初始的空间用于检测鼠标位置,当组件被拖入到布局容器内部的区域时,布局容器会进行检测,并在内部区域中展示一个方块表示组件将会被放置在这个方块中,松开鼠标后组件的数据会被添加到布局容器的内部,同时布局容器会将添加的组件渲染出来。
80.在本实施例的一些实施方式中,上述将页面配置完成后的配置数据保存至后台的步骤之前,该方法还包括:
81.根据配置完成后的页面,展示预览页面效果。
82.具体的,当页面配置完成后,用户可以选择观看预览页面效果,进而判断是否还需要进行页面配置,从而进一步满足用户配置需求。
83.请参照图3至图5,图3所示为本发明实施例提供的一种赋值面板的示意图,图4所示为本发明实施例提供的另一种赋值面板的示意图,图5所示为本发明实施例提供的一种子项遍历条件的示意图。在本实施例的一些实施方式中,上述响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置的步骤包括:
84.响应用户操作添加目标赋值对象,并对目标赋值对象进行数据配置。
85.示例性的,数据配置的具体步骤可以如下:打开赋值面板,首先添加被赋值对象即目标赋值对象,选中的数据会展示在赋值面板下方,然后对每一项数据配置赋值类型。其中,数据赋值类型为:固定赋值(在后面配置赋值的内容,例如:可输入文本数字作为赋值内容)、动态赋值(在后面选择赋值的数据来源)或赋空值,请参照图3。
86.请参照图6和图7,图6所示为本发明实施例提供的一种样式配置的示意图,图7所示为本发明实施例提供的另一种样式配置的示意图。在本实施例的一些实施方式中,上述响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置的步骤包括:
87.响应用户操作对页面或任一第一组件的宽高数据、背景数据、边距数据、边框数据、阴影数据、文字样式进行可视化配置。从而使得用户可以在界面上直观看到任一第一组件的配置过程。
88.在本实施例的一些实施方式中,上述响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置的步骤包括:
89.响应用户操作对任一第一组件进行属性配置,属性配置至少包括名称、内容、提示、显示属性、图标、排列方式、显示模式和默认值中的一种或多种。
90.在本实施例的一些实施方式中,上述基于apaas平台的移动端可视化页面配置和渲染方法还包括:
91.在后台与用户侧的信息传输路径上配置信息传输接口,信息传输接口用于传输配置数据。
92.具体的,通过信息传输接口可以方便与后台交互,以存取数据。
93.在本实施例的一些实施方式中,上述根据页面配置执行对应的事件任务的步骤包括:
94.结合第一组件信息和页面数据,实现动态显示或隐藏第一组件。进一步使得页面的配置及使用更加灵活。
95.请参照图8,图8为本技术实施例提供的电子设备的一种示意性结构框图。电子设备包括存储器101、处理器102和通信接口103,该存储器101、处理器102和通信接口103相互之间直接或间接地电性连接,以实现数据的传输或交互。例如,这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。存储器101可用于存储软件程序及模块,处理器102通过执行存储在存储器101内的软件程序及模块,从而执行各种功能应用以及数据处理。该通信接口103可用于与其他节点设备进行信令或数据的通信。
96.其中,存储器101可以是但不限于,随机存取存储器(random access memory,ram),只读存储器(read only memory,rom),可编程只读存储器(programmable read-only memory,prom),可擦除只读存储器(erasable programmable read-only memory,eprom),电可擦除只读存储器(electric erasable programmable read-only memory,eeprom)等。
97.处理器102可以是一种集成电路芯片,具有信号处理能力。该处理器102可以是通用处理器,包括中央处理器(central processing unit,cpu)、网络处理器(network processor,np)等;还可以是数字信号处理器(digital signal processing,dsp)、专用集成电路(application specific integrated circuit,asic)、现场可编程门阵列(field-programmable gate array,fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
98.可以理解,图8所示的结构仅为示意,电子设备还可包括比图8中所示更多或者更少的组件,或者具有与图8所示不同的配置。图8中所示的各组件可以采用硬件、软件或其组合实现。
99.在本技术所提供的实施例中,应该理解到,所揭露的装置和方法,也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的,例如,附图中的流程图和框图显示了根据本技术的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分,所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现方式中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个连续的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或动作的专用的基于
硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
100.另外,在本技术各个实施例中的各功能模块可以集成在一起形成一个独立的部分,也可以是各个模块单独存在,也可以两个或两个以上模块集成形成一个独立的部分。
101.所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:u盘、移动硬盘、只读存储器(rom,read-only memory)、随机存取存储器(ram,random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
102.以上所述仅为本技术的优选实施例而已,并不用于限制本技术,对于本领域的技术人员来说,本技术可以有各种更改和变化。凡在本技术的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本技术的保护范围之内。
103.对于本领域技术人员而言,显然本技术不限于上述示范性实施例的细节,而且在不背离本技术的精神或基本特征的情况下,能够以其它的具体形式实现本技术。因此,无论从哪一点来看,均应将实施例看作是示范性的,而且是非限制性的,本技术的范围由所附权利要求而不是上述说明限定,因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本技术内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。
技术特征:1.一种基于apaas平台的移动端可视化页面配置和渲染方法,其特征在于,包括如下步骤:响应用户操作在页面管理界面新建页面的同时,在后端生成与所述新建页面对应的唯一id,并初始化所述新建页面的页面数据;利用可视化页面编辑器对任一页面进行页面配置,所述可视化页面编辑器用于根据页面id,从后端获取对应的页面数据及可配置使用的组件信息,所述组件信息包括多个第一组件;基于可配置使用的组件信息,响应用户操作选择任意第一组件进行页面设计,并响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置,所述多个页面配置至少包括数据配置、样式配置、属性配置、事件配置和交互配置中的一种或多种;将页面配置完成后的配置数据保存至后台;将配置完成后的页面部署至用户侧;响应用户操作在所述用户侧对该页面的基础框架进行加载,同时从后端获取该页面的配置数据和对应的第一组件,并根据所述配置数据将所述第一组件进行组合并渲染得到最终页面,同时根据所述页面配置执行对应的事件任务。2.根据权利要求1所述的基于apaas平台的移动端可视化页面配置和渲染方法,其特征在于,所述多个第一组件包括容器组件和第二组件;所述基于可配置使用的组件信息,响应用户操作选择任意第一组件进行页面设计的步骤包括:响应用户操作选择任一容器组件和多个第二组件,利用该容器组件进行页面布局后,将所述多个第二组件添加至所述容器组件中进行组合配置。3.根据权利要求1所述的基于apaas平台的移动端可视化页面配置和渲染方法,其特征在于,所述将页面配置完成后的配置数据保存至后台的步骤之前,还包括:根据配置完成后的页面,展示预览页面效果。4.根据权利要求1所述的基于apaas平台的移动端可视化页面配置和渲染方法,其特征在于,所述响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置的步骤包括:响应用户操作添加目标赋值对象,并对所述目标赋值对象进行数据配置。5.根据权利要求1所述的基于apaas平台的移动端可视化页面配置和渲染方法,其特征在于,所述响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置的步骤包括:响应用户操作对页面或任一第一组件的宽高数据、背景数据、边距数据、边框数据、阴影数据、文字样式进行可视化配置。6.根据权利要求1所述的基于apaas平台的移动端可视化页面配置和渲染方法,其特征在于,所述响应用户点击操作选择任一第一组件进行组件内部配置,以对整个页面进行多个页面配置的步骤包括:响应用户操作对任一第一组件进行属性配置,所述属性配置至少包括名称、内容、提示、显示属性、图标、排列方式、显示模式和默认值中的一种或多种。
7.根据权利要求1所述的基于apaas平台的移动端可视化页面配置和渲染方法,其特征在于,还包括:在所述后台与所述用户侧的信息传输路径上配置信息传输接口,所述信息传输接口用于传输配置数据。8.根据权利要求1所述的基于apaas平台的移动端可视化页面配置和渲染方法,其特征在于,根据所述页面配置执行对应的事件任务的步骤包括:结合第一组件信息和页面数据,实现动态显示或隐藏所述第一组件。9.一种电子设备,其特征在于,包括:存储器,用于存储一个或多个程序;处理器;当所述一个或多个程序被所述处理器执行时,实现如权利要求1-8中任一项所述的方法。10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该计算机程序被处理器执行时实现如权利要求1-8中任一项所述的方法。
技术总结本发明提出了一种基于aPaaS平台的移动端可视化页面配置和渲染方法,涉及计算机应用技术领域。该方法包括:在新建页面时,生成页面对应的唯一ID。利用可视化页面编辑器从后端调取页面数据和可配置使用的组件信息,用户选择任意第一组件进行组件内部配置,以进行页面配置。用户对各个第一组件的配置数据将保存至后台,且配置完成后的页面将部署至用户侧,则在用户侧打开页面时,页面首先加载基础框架,然后根据页面配置执行预先配置的事件任务,并根据配置数据对第一组件进行组合并渲染得到最终页面。不仅实现了配置多种复杂页面的目的,而且相较于传统页面开发方法减少了大量的代码编写,提高了页面开发效率,且具有极强灵活性和普适性。性和普适性。性和普适性。
技术研发人员:陈世文 黄克云 魏传博
受保护的技术使用者:知学云(北京)科技股份有限公司
技术研发日:2022.06.09
技术公布日:2022/11/1