CN112540763A - 前端页面生成方法、装置、平台设备及存储介质 - Google Patents
前端页面生成方法、装置、平台设备及存储介质 Download PDFInfo
- Publication number
- CN112540763A CN112540763A CN202011547321.5A CN202011547321A CN112540763A CN 112540763 A CN112540763 A CN 112540763A CN 202011547321 A CN202011547321 A CN 202011547321A CN 112540763 A CN112540763 A CN 112540763A
- Authority
- CN
- China
- Prior art keywords
- component
- page
- window
- dsl
- description file
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 46
- 230000000007 visual effect Effects 0.000 claims abstract description 53
- 238000012800 visualization Methods 0.000 claims abstract description 19
- 238000009877 rendering Methods 0.000 claims abstract description 17
- 238000010276 construction Methods 0.000 claims description 9
- 238000004590 computer program Methods 0.000 claims description 5
- 238000011161 development Methods 0.000 abstract description 20
- 230000033764 rhythmic process Effects 0.000 abstract description 5
- 238000010586 diagram Methods 0.000 description 9
- 230000006870 function Effects 0.000 description 8
- 230000003287 optical effect Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 239000000463 material Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 1
- 230000008602 contraction Effects 0.000 description 1
- 238000002474 experimental method Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明实施例公开了一种前端页面生成方法、装置、平台设备及存储介质。所述方法包括:显示包括至少两个候选原子组件的组件窗口和页面编辑窗口;依据对所述组件窗口中候选原子组件的拖拽操作,在所述页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面;将所述可视化组件页面转换成预定义格式的DSL布局描述文件,并将所述DSL布局描述文件发送到前端设备,用以基于所述DSL布局描述文件进行页面渲染。采用本申请方案,在进行客户端页面开发时,可通过在平台设备上可视化搭建方式来生成客户端界面,减少移动端界面开发的人力和技术成本和提高开发简易性,提高页面开发节奏。
Description
技术领域
本发明实施例涉及计算机技术领域,尤其涉及一种前端页面生成方法、装置、平台设备及存储介质。
背景技术
通过开发移动端APP能承载服务端所提供的各种页面服务,前端开发人员通常会基于移动端的开发平台对前端页面进行开发,开发人员不仅要处理复杂的业务逻辑、设计多样的界面以及降低页面的开发成本,同时还要保证页面代码的高可用性、易读性、低出错率以及提高开发效率。因此,如何快速简单地开发生成前端页面变得尤为重要。
发明内容
本发明实施例中提供了一种前端页面生成方法、装置、平台设备及存储介质,以减少移前端页面开发人力和成本,提高前端页面开发简易性。
第一方面,本发明实施例中提供了一种前端页面生成方法,由平台设备执行,所述方法包括:
显示包括至少两个候选原子组件的组件窗口和页面编辑窗口;
依据对所述组件窗口中候选原子组件的拖拽操作,在所述页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面;
将所述可视化组件页面转换成预定义格式的DSL布局描述文件,并将所述DSL布局描述文件发送到前端设备,用以基于所述DSL布局描述文件进行页面渲染。
第二方面,本发明实施例中还提供了一种前端页面生成装置,配置于平台设备,所述装置包括:
组件编辑显示模块,用于显示包括至少两个候选原子组件的组件窗口和页面编辑窗口;
组件页面构建模块,用于依据对所述组件窗口中候选原子组件的拖拽操作,在所述页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面;
组件页面生成模块,用于将所述可视化组件页面转换成预定义格式的DSL布局描述文件,并将所述DSL布局描述文件发送到前端设备,用以基于所述DSL布局描述文件进行页面渲染。
第三方面,本发明实施例中还提供了一种平台设备,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序;
所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现本发明任意实施例中提供的前端页面生成方法。
第四方面,本发明实施例中还提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现本发明任意实施例中提供的前端页面生成方法。
本发明实施例中提供了一种前端页面生成方法,在平台设备上可显示包括至少两个候选原子组件的组件窗口和页面编辑窗口,用户可以对组件窗口包括的候选原子组件进行拖拽,在页面编辑窗口基于拖拽的目标原子组件构建并显示一个包括拖拽的至少两个目标原子组件的可视化组件页面;在此基础上,可以将可视化组件页面转换成预定义格式的DSL布局描述文件,并将DSL布局描述文件发送到前端设备,这样前端设备就可以直接使用DSL布局描述文件来动态渲染在平台设备搭建的可视化组件页面。
采用本申请方案,在进行客户端页面开发时,可通过在平台设备上可视化搭建方式来生成客户端界面,减少移动端界面开发的人力和技术成本和提高开发简易性;同时平台设备可以将搭建的可视化组件页面转换成前端设备能够解析的DSL布局描述文件,快速推送给前端设备供前端设备进行动态化显示搭建的可视化组件页面,提高页面开发节奏。
上述发明内容仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,而可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式。
附图说明
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述,本发明的其它特征、目的和优点将会变得更明显。附图仅用于示出优选实施方式的目的,而并不认为是对本发明的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1是本发明实施例中提供的一种前端页面生成方法的流程图;
图2是本发明实施例中提供的一种在平台设备生成前端页面的示意图;
图3是本发明实施例中提供的一种在前端设备对可视化组件页面的页面渲染示意图;
图4是本发明实施例中提供的一种前端页面生成的流程时序图;
图5是本发明实施例中提供的一种前端页面生成装置的结构框图;
图6是本发明实施例中提供的一种平台设备的结构框图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本发明,而非对本发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本发明相关的部分而非全部结构。
在更加详细地讨论示例性实施例之前应当提到的是,一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作(或步骤)描述成顺序的处理,但是其中的许多操作可以被并行地、并发地或者同时实施。此外,各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止,但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。
图1是本发明实施例中提供的一种前端页面生成方法的流程图。本发明实施例可适用于在平台设备对客户端页面进行快速开发的情况。该方法可由前端页面生成装置来执行,该装置可以采用软件和/或硬件的方式来实现,该装置可以配置于具有网络通信功能的平台设备中。如图1所示,本发明实施例中提供的前端页面生成方法,可包括以下步骤:
S110、显示包括至少两个候选原子组件的组件窗口和页面编辑窗口。
在本实施例中,图2是本发明实施例中提供的一种在平台设备生成前端页面的示意图。参见图2,在平台设备上可显示包括至少两个候选原子组件的组件窗口210和页面编辑窗口220,组件窗口中包含用于生成可视化组件页面的一个或多个原子组件,可供用户拖拽使用;而,页面编辑窗口220可以承载从组件窗口拖拽出的目标原子组件,并基于拖拽位置搭建起一个可视化的组件页面。其中,组件窗口210中候选原子组件可包括组件容器、文本组件、图片组件、列表控件以及滑动组件等多个类型的组件。可选地,组件窗口210中设置各个原子组件按照组件类型呈树形结构分类显示。
S120、依据对组件窗口中候选原子组件的拖拽操作,在页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面。
在本实施例中,当需要生成前端设备的客户端页面时,可对组件窗口中候选原子组件进行拖拽,将从组件窗口中候选原子组件选取的目标原子组件拖拽到页面编辑窗口中,页面编辑窗口则承载拖拽的目标原子接口。随着不断向页面编辑窗口中拖拽目标原子组件,可在页面编辑窗口中可视化搭建出一个由至少两个目标原子组件组成的组件页面。
在本实施例的一种可选方案中,可以与上述一个或者多个实施例中各个可选方案结合。依据对组件窗口中候选原子组件的拖拽操作,在页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面,可包括步骤A1-A2:
步骤A1、确定从组件窗口拖拽到页面编辑窗口的目标原子组件的拖拽位置信息;拖拽位置信息用于指示目标原子组件在页面编辑窗口的设置层级和位置。
步骤A2、基于各个目标原子组件在页面编辑窗口中的拖拽位置信息,在页面编辑窗口中搭建并显示包括至少两个原子组件的可视化组件页面。
在本实施例中,在对组件窗口中候选原子组件执行拖拽操作时,确定拖拽的目标原子组件被拖拽出组件窗口到达页面编辑窗口时的拖拽位置信息,通过拖拽位置信息可以确定需要将目标原子组件拖拽到页面编辑窗口的哪一个页面层级和哪一个页面位置进行页面搭建。例如,不同组件可被拖拽到页面编辑窗口的同一页面层级的不同页面位置处进行搭建;不同组件也可被拖拽到页面编辑窗口的不同页面层级的不同页面位置处进行搭建;当然,不同组件也可被拖拽到页面编辑窗口的不同页面层级的同一页面位置处进行重叠搭建。
在本实施例中,可选地,确定从组件窗口拖拽到页面编辑窗口的目标原子组件的拖拽位置信息,可包括:确定从组件窗口拖拽向页面编辑窗口的目标原子组件;依据对目标原子组件在页面编辑窗口的拖拽事件,记录目标原子组件在页面编辑窗口的拖拽位置信息。
在本实施例中,在确定目标原子组件的拖拽位置信息后,页面编辑窗口会获取拖拽位置信息指示的目标原子组件在页面编辑窗口的设置层级和位置,通过各个目标原子组件在页面编辑窗口的设置层级和位置,就可通过组件拖拽放置的方式在平台设备的页面编辑窗口上搭建并显示包括至少两个原子组件的可视化组件页面。
采用上述方案,设计了一套可视化平台,方便快速新页面落地上线,可视化平台通过抽象出自定义的原子组件类型,通过图形化方式表达出来,作为一个组件库,并把一些通用的由原子组件组合形成的样式形成组件,也图形化显示出来,让开发着拖拽这些图形来堆积形成一个完整界面。这样,客户端页面开发可通过平台可视化搭建方式来生成客户端界面,通过类似搭积木方式就能快速简单的开发新界面,减少移动端界面开发的人力和技术成本和提高开发简易性,提高了前端的发版节奏,实现业务功能快速上线推广给用户使用。
S130、将构建的可视化组件页面转换成预定义格式的DSL布局描述文件,并将DSL布局描述文件发送到前端设备,用以基于DSL布局描述文件进行页面渲染。
在本实施例中,DSL布局考虑到组件描述、组件属性描述、父子组件间关系描述三个关键描述,所以布局结构对应起来由描述控件名称,描述控件属性以及描述父子包含关系组成;父控件我们抽象统一定义为Container。基于上述情况可将构建的可视化组件页面转换成预定义格式的DSL布局描述文件。DSL布局描述文件用于指示目标原子组件在可视化页面中的组件描述、组件属性描述以及组件间关系描述;组件间关系描述包括组件间依赖关系和关联组合关系。
在本实施例中,图3是本发明实施例中提供的一种在前端设备对可视化组件页面的页面渲染示意图。参见图3,在将将DSL布局描述文件发送到前端设备之后,前端设备可以对DSL布局描述文件进行解析,依据其中包括的指示目标原子组件在可视化页面中的组件描述、组件属性描述以及组件间关系描述进行页面渲染,显示一个与在平台设备上搭建的可视化组件页面相同页面。
采用上述方式,前端只需动态解析DSL布局描述文件并转换到对应的系统UI组件,就可在前端控制渲染流程和更新,保证双端UI页面一致性,实现跨端页面开发;以及,提高了前端页面发版节奏,实现业务功能快速上线推广给用户使用,同时解决前端开发动态化的能力。
在本实施例的一种可选方案中,可以与上述一个或者多个实施例中各个可选方案结合。将构建的可视化组件页面转换成预定义格式的DSL布局描述文件,可包括步骤B1-B2:
步骤B1、依据对可视化页面中目标原子组件的组件属性调整触发操作,在可视化页面一侧显示已选中目标原子组件的组件属性调整窗口,用以获取对已选中目标原子组件的组件属性调整信息。
步骤B2、在对可视化组件页面中目标原子组件的组件属性调整后,按照预定义格式的DSL布局描述协议将可视化组件页面转换成预定义格式的DSL布局描述文件。
在本实施例中,参见图2,在触发对可视化页面中目标原子组件的组件属性进行调整时,可在可视化页面一侧显示已选中目标原子组件的组件属性调整窗口230,用户可在组件属性调整窗口230对目标原子组件的组件标识ID、组件宽高尺寸、组件收缩比和拉伸比、组件对齐状态等属性信息进行调整。预先自定义一套DSL布局描述协议,按照预定义的DSL布局描述协议指示的页面样式服务将可视化组件页面转换成预定义格式的DSL布局描述文件,并下发到前端,前端加载样式进行生效展示页面,通过自定义一套DSL布局描述协议的样式服务能做到精准控制用户维度、版本维度以及AB实验对比等。
采用上述方案,通过一套自定义的界面描述语言来设计一套用于构建移动页面样式的DSL布局描述协议,这套协议前期细化定义各个系统UI开发组件以及定义了页面渲染所需的各个组件及其属性,以及设计组件的依赖和组合的描述关键词,能够自由组合这些组件来描述一套完整的界面样式,这样才能描述页面渲染任何复杂界面所需的定义,从而实现界面渲染动态化。
在本实施例中,图4是本发明实施例中提供的一种前端页面生成的流程时序图。可选地,参见图4,在将可视化组件页面转换成预定义格式的DSL布局描述文件之前,具体还可以包括:通过GraphQl服务向可视化组件页面的API接口,赋予API接口所需业务字段的字段取值地址,这样当前端设备按照预定义格式的DSL布局描述文件进行页面渲染时,通过API接口所需业务字段的字段取值地址为页面请求获取实际的业务数据。这样,前端的业务数据不需要单独后端开发逻辑来提供Api满足业务数据的需要,通过GraphQl就可以实现后端免开发逻辑接口,直接通过该服务来聚合各个业务系统服务,及定义逻辑来实现业务数据的组装和转换。
根据本发明实施例中提供的前端页面生成方法,在前端页面开发时,可通过在平台设备上可视化搭建方式来生成客户端界面,减少移动端界面开发的人力和技术成本和提高开发简易性;同时平台设备可以将搭建的可视化组件页面转换成前端设备能够解析的DSL布局描述文件,快速推送给前端设备供前端设备进行动态化显示搭建的可视化组件页面,提高页面开发节奏。通过设计一套可视化拖拽平台,并生成对应的DSL布局描述协议,这套协议前期细化定义各个系统UI开发组件,同时能够自由组合这些组件描述一套完整的界面样式,进而让客户端动态解析这套协议并转换到对应的系统UI组件,并管理控制渲染流程和更新。
图5是本发明实施例中提供的一种前端页面生成装置的结构框图。本发明实施例可适用于在平台设备对客户端页面进行快速开发的情况。该装置可以采用软件和/或硬件的方式来实现,该装置可以配置于具有网络通信功能的平台设备中。如图5所示,本发明实施例中提供的前端页面生成装置,可包括:组件编辑显示模块510、组件页面构建模块520和组件页面生成模块530。其中:
组件编辑显示模块510,用于显示包括至少两个候选原子组件的组件窗口和页面编辑窗口;
组件页面构建模块520,用于依据对所述组件窗口中候选原子组件的拖拽操作,在所述页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面;
组件页面生成模块530,用于将所述可视化组件页面转换成预定义格式的DSL布局描述文件,并将所述DSL布局描述文件发送到前端设备,用以基于所述DSL布局描述文件进行页面渲染。
在上述实施例的基础上,可选地,所述组件窗口中候选原子组件包括组件容器、文本组件、图片组件、列表控件以及滑动组件。
在上述实施例的基础上,可选地,组件页面构建模块520包括:
确定从组件窗口拖拽到页面编辑窗口的目标原子组件的拖拽位置信息;其中所述拖拽位置信息用于指示目标原子组件在页面编辑窗口的设置层级和位置;
基于各个目标原子组件在页面编辑窗口中的拖拽位置信息,在页面编辑窗口中搭建并显示包括至少两个原子组件的可视化组件页面。
在上述实施例的基础上,可选地,确定从组件窗口拖拽到页面编辑窗口的目标原子组件的拖拽位置信息,包括:
确定从组件窗口拖拽向页面编辑窗口的目标原子组件;
依据对所述目标原子组件在页面编辑窗口的拖拽事件,记录所述目标原子组件在页面编辑窗口的拖拽位置信息。
在上述实施例的基础上,可选地,组件页面生成模块530包括:
依据对所述可视化页面中目标原子组件的组件属性调整触发操作,在所述可视化页面一侧显示已选中目标原子组件的组件属性调整窗口,用以获取对已选中目标原子组件的组件属性调整信息;
在对所述可视化组件页面中目标原子组件的组件属性调整后,按照预定义格式的DSL布局描述协议将所述可视化组件页面转换成预定义格式的DSL布局描述文件。
在上述实施例的基础上,可选地,所述DSL布局描述文件用于指示目标原子组件在可视化页面中的组件描述、组件属性描述以及组件间关系描述;所述组件间关系描述包括组件间依赖关系和关联组合关系。
在上述实施例的基础上,可选地,在将所述可视化组件页面转换成预定义格式的DSL布局描述文件之前,还包括:
通过GraphQl服务向所述可视化组件页面的API接口,赋予所述API接口所需业务字段的字段取值地址。
本发明实施例中所提供的前端页面生成装置可执行上述本发明任意实施例中所提供的前端页面生成方法,具备执行前端页面生成方法相应的功能和有益效果,未在上述实施例中详尽描述的技术细节,可参见本申请任意实施例中所提供的前端页面生成方法。
图6是本发明实施例中提供的一种平台设备的结构框图。如图6所示结构,本发明实施例中提供的平台设备包括:一个或多个处理器610和存储装置620;该平台设备中的处理器610可以是一个或多个,图6中以一个处理器610为例;存储装置620用于存储一个或多个程序;所述一个或多个程序被所述一个或多个处理器610执行,使得所述一个或多个处理器610实现如本发明实施例中任一项所述的前端页面生成方法。
该平台设备还可以包括:输入装置630和输出装置640。
该平台设备中的处理器610、存储装置620、输入装置630和输出装置640可以通过总线或其他方式连接,图6中以通过总线连接为例。
该平台设备中的存储装置620作为一种计算机可读存储介质,可用于存储一个或多个程序,所述程序可以是软件程序、计算机可执行程序以及模块,如本发明实施例中所提供的前端页面生成方法对应的程序指令/模块。处理器610通过运行存储在存储装置620中的软件程序、指令以及模块,从而执行平台设备的各种功能应用以及数据处理,即实现上述方法实施例中前端页面生成方法。
存储装置6620可包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序;存储数据区可存储根据平台设备的使用所创建的数据等。此外,存储装置620可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中,存储装置620可进一步包括相对于处理器610远程设置的存储器,这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
输入装置630可用于接收输入的数字或字符信息,以及产生与平台设备的用户设置以及功能控制有关的键信号输入。输出装置640可包括显示屏等显示设备。
并且,当上述平台设备所包括一个或者多个程序被所述一个或者多个处理器610执行时,程序进行如下操作:
显示包括至少两个候选原子组件的组件窗口和页面编辑窗口;
依据对所述组件窗口中候选原子组件的拖拽操作,在所述页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面;
将所述可视化组件页面转换成预定义格式的DSL布局描述文件,并将所述DSL布局描述文件发送到前端设备,用以基于所述DSL布局描述文件进行页面渲染。
当然,本领域技术人员可以理解,当上述平台设备所包括一个或者多个程序被所述一个或者多个处理器610执行时,程序还可以进行本发明任意实施例中所提供的前端页面生成方法中的相关操作。
本发明实施例中提供了一种计算机可读介质,其上存储有计算机程序,该程序被处理器执行时用于执行前端页面生成方法,该方法包括:
显示包括至少两个候选原子组件的组件窗口和页面编辑窗口;
依据对所述组件窗口中候选原子组件的拖拽操作,在所述页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面;
将所述可视化组件页面转换成预定义格式的DSL布局描述文件,并将所述DSL布局描述文件发送到前端设备,用以基于所述DSL布局描述文件进行页面渲染。
可选的,该程序被处理器执行时还可以用于执行本发明任意实施例中所提供的前端页面生成方法。
本发明实施例的计算机存储介质,可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(Random AccessMemory,RAM)、只读存储器(Read Only Memory,ROM)、可擦式可编程只读存储器(ErasableProgrammable Read Only Memory,EPROM)、闪存、光纤、便携式CD-ROM、光存储器件、磁存储器件、或者上述的任意合适的组合。计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于:电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:无线、电线、光缆、无线电频率(RadioFrequency,RF)等等,或者上述的任意合适的组合。
可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码,所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)——连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
在本说明书的描述中,参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不一定指的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。
Claims (10)
1.一种前端页面生成方法,其特征在于,由平台设备执行,所述方法包括:
显示包括至少两个候选原子组件的组件窗口和页面编辑窗口;
依据对所述组件窗口中候选原子组件的拖拽操作,在所述页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面;
将所述可视化组件页面转换成预定义格式的DSL布局描述文件,并将所述DSL布局描述文件发送到前端设备,用以基于所述DSL布局描述文件进行页面渲染。
2.根据权利要求1所述的方法,其特征在于,所述组件窗口中候选原子组件包括组件容器、文本组件、图片组件、列表控件以及滑动组件。
3.根据权利要求1所述的方法,其特征在于,依据对所述组件窗口中候选原子组件的拖拽操作,在所述页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面,包括:
确定从组件窗口拖拽到页面编辑窗口的目标原子组件的拖拽位置信息;其中所述拖拽位置信息用于指示目标原子组件在页面编辑窗口的设置层级和位置;
基于各个目标原子组件在页面编辑窗口中的拖拽位置信息,在页面编辑窗口中搭建并显示包括至少两个原子组件的可视化组件页面。
4.根据权利要求3所述的方法,其特征在于,确定从组件窗口拖拽到页面编辑窗口的目标原子组件的拖拽位置信息,包括:
确定从组件窗口拖拽向页面编辑窗口的目标原子组件;
依据对所述目标原子组件在页面编辑窗口的拖拽事件,记录所述目标原子组件在页面编辑窗口的拖拽位置信息。
5.根据权利要求1所述的方法,其特征在于,将所述可视化组件页面转换成预定义格式的DSL布局描述文件,包括:
依据对所述可视化页面中目标原子组件的组件属性调整触发操作,在所述可视化页面一侧显示已选中目标原子组件的组件属性调整窗口,用以获取对已选中目标原子组件的组件属性调整信息;
在对所述可视化组件页面中目标原子组件的组件属性调整后,按照预定义格式的DSL布局描述协议将所述可视化组件页面转换成预定义格式的DSL布局描述文件。
6.根据权利要求1或5所述的方法,其特征在于,所述DSL布局描述文件用于指示目标原子组件在可视化页面中的组件描述、组件属性描述以及组件间关系描述;所述组件间关系描述包括组件间依赖关系和关联组合关系。
7.根据权利要求1或5所述的方法,其特征在于,在将所述可视化组件页面转换成预定义格式的DSL布局描述文件之前,还包括:
通过GraphQl服务向所述可视化组件页面的API接口,赋予所述API接口所需业务字段的字段取值地址。
8.一种前端页面生成装置,其特征在于,配置于平台设备,所述装置包括:
组件编辑显示模块,用于显示包括至少两个候选原子组件的组件窗口和页面编辑窗口;
组件页面构建模块,用于依据对所述组件窗口中候选原子组件的拖拽操作,在所述页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面;
组件页面生成模块,用于将所述可视化组件页面转换成预定义格式的DSL布局描述文件,并将所述DSL布局描述文件发送到前端设备,用以基于所述DSL布局描述文件进行页面渲染。
9.一种平台设备,其特征在于,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现权利要求1-7中任一所述的前端页面生成方法。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现权利要求1-7中任一所述的前端页面生成方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011547321.5A CN112540763A (zh) | 2020-12-24 | 2020-12-24 | 前端页面生成方法、装置、平台设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011547321.5A CN112540763A (zh) | 2020-12-24 | 2020-12-24 | 前端页面生成方法、装置、平台设备及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN112540763A true CN112540763A (zh) | 2021-03-23 |
Family
ID=75018139
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011547321.5A Pending CN112540763A (zh) | 2020-12-24 | 2020-12-24 | 前端页面生成方法、装置、平台设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112540763A (zh) |
Cited By (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113138760A (zh) * | 2021-04-29 | 2021-07-20 | 北京百度网讯科技有限公司 | 一种页面生成方法、装置、电子设备和介质 |
CN113535164A (zh) * | 2021-06-11 | 2021-10-22 | 中电金信软件有限公司 | 一种前端界面的生成方法、装置、电子设备及存储介质 |
CN114064040A (zh) * | 2021-11-30 | 2022-02-18 | 上海汇付数据服务有限公司 | 一种基于可视化界面的终端代码自动生成方法和平台 |
CN114489623A (zh) * | 2022-02-18 | 2022-05-13 | 北京立达政通科技集团有限公司 | 基于拖拽式生成前端页面的方法、装置、设备和存储介质 |
CN114625365A (zh) * | 2022-03-11 | 2022-06-14 | 北京金堤科技有限公司 | 网页编辑界面、网页编辑方法、电子设备和存储介质 |
CN115964589A (zh) * | 2022-12-27 | 2023-04-14 | 北京津发科技股份有限公司 | 基于数据交换协议的界面生成方法、装置、设备及介质 |
CN116204184A (zh) * | 2023-04-28 | 2023-06-02 | 深圳华龙讯达信息技术股份有限公司 | 一种提高页面风格适配的ui编辑方法、系统及存储介质 |
CN116301761A (zh) * | 2023-05-25 | 2023-06-23 | 广州数说故事信息科技有限公司 | 一种低代码的组件构建方法、设备及存储介质 |
CN116916051A (zh) * | 2023-06-09 | 2023-10-20 | 北京医百科技有限公司 | 在云导播台客户端中更新布局场景的方法和装置 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20050114764A1 (en) * | 2003-11-25 | 2005-05-26 | Gudenkauf John C. | Producing a page of information based on a dynamic edit form and one or more transforms |
CN110554894A (zh) * | 2018-05-31 | 2019-12-10 | 阿里巴巴集团控股有限公司 | 界面描述文件、应用程序的处理方法、装置及电子设备 |
CN111443911A (zh) * | 2020-03-24 | 2020-07-24 | 五八有限公司 | 一种页面开发方法、装置、电子设备及计算机存储介质 |
CN112051994A (zh) * | 2019-06-06 | 2020-12-08 | 阿里巴巴集团控股有限公司 | 可视化组件信息处理、页面可视化设计方法及装置 |
-
2020
- 2020-12-24 CN CN202011547321.5A patent/CN112540763A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20050114764A1 (en) * | 2003-11-25 | 2005-05-26 | Gudenkauf John C. | Producing a page of information based on a dynamic edit form and one or more transforms |
CN110554894A (zh) * | 2018-05-31 | 2019-12-10 | 阿里巴巴集团控股有限公司 | 界面描述文件、应用程序的处理方法、装置及电子设备 |
CN112051994A (zh) * | 2019-06-06 | 2020-12-08 | 阿里巴巴集团控股有限公司 | 可视化组件信息处理、页面可视化设计方法及装置 |
CN111443911A (zh) * | 2020-03-24 | 2020-07-24 | 五八有限公司 | 一种页面开发方法、装置、电子设备及计算机存储介质 |
Cited By (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113138760A (zh) * | 2021-04-29 | 2021-07-20 | 北京百度网讯科技有限公司 | 一种页面生成方法、装置、电子设备和介质 |
CN113138760B (zh) * | 2021-04-29 | 2024-03-12 | 北京百度网讯科技有限公司 | 一种页面生成方法、装置、电子设备和介质 |
CN113535164A (zh) * | 2021-06-11 | 2021-10-22 | 中电金信软件有限公司 | 一种前端界面的生成方法、装置、电子设备及存储介质 |
CN114064040A (zh) * | 2021-11-30 | 2022-02-18 | 上海汇付数据服务有限公司 | 一种基于可视化界面的终端代码自动生成方法和平台 |
CN114489623A (zh) * | 2022-02-18 | 2022-05-13 | 北京立达政通科技集团有限公司 | 基于拖拽式生成前端页面的方法、装置、设备和存储介质 |
CN114489623B (zh) * | 2022-02-18 | 2022-11-04 | 北京立达政通科技集团有限公司 | 基于拖拽式生成前端页面的方法、装置、设备和存储介质 |
CN114625365B (zh) * | 2022-03-11 | 2024-01-19 | 北京金堤科技有限公司 | 网页编辑系统、网页编辑方法、电子设备和存储介质 |
CN114625365A (zh) * | 2022-03-11 | 2022-06-14 | 北京金堤科技有限公司 | 网页编辑界面、网页编辑方法、电子设备和存储介质 |
CN115964589A (zh) * | 2022-12-27 | 2023-04-14 | 北京津发科技股份有限公司 | 基于数据交换协议的界面生成方法、装置、设备及介质 |
CN116204184A (zh) * | 2023-04-28 | 2023-06-02 | 深圳华龙讯达信息技术股份有限公司 | 一种提高页面风格适配的ui编辑方法、系统及存储介质 |
CN116301761A (zh) * | 2023-05-25 | 2023-06-23 | 广州数说故事信息科技有限公司 | 一种低代码的组件构建方法、设备及存储介质 |
CN116916051A (zh) * | 2023-06-09 | 2023-10-20 | 北京医百科技有限公司 | 在云导播台客户端中更新布局场景的方法和装置 |
CN116916051B (zh) * | 2023-06-09 | 2024-04-16 | 北京医百科技有限公司 | 在云导播台客户端中更新布局场景的方法和装置 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112540763A (zh) | 前端页面生成方法、装置、平台设备及存储介质 | |
US10956128B2 (en) | Application with embedded workflow designer | |
US20210055918A1 (en) | Generating data mappings for user interface screens and screen components for an application | |
CN108292206B (zh) | 具有易于使用特征的工作流开发系统 | |
US20210034336A1 (en) | Executing a process-based software application in a first computing environment and a second computing environment | |
US9575950B2 (en) | Systems and methods for managing spreadsheet models | |
CN112558970B (zh) | 前端页面的渲染生成方法、装置、前端设备及存储介质 | |
US10592082B2 (en) | Parallel front end application and workflow development | |
US11327926B2 (en) | Effective deployment of spreadsheets in browser environments | |
US8495485B2 (en) | System, method, and apparatus for location identification of content | |
CN111045653B (zh) | 系统生成方法、装置、计算机可读介质及电子设备 | |
US8230357B2 (en) | Visually processing instance data | |
US11645229B2 (en) | Mapping tests of spreadsheets in server-browser environments | |
US20230334723A1 (en) | Post-processing special effect production system and method, and ar special effect rendering method and apparatus | |
US10489167B2 (en) | Dynamically binding data in an application | |
US20100077325A1 (en) | In Situ Editing of GUI Features | |
CN113419711A (zh) | 页面引导方法、装置、电子设备及存储介质 | |
CN109814778B (zh) | 小程序选项卡的实现方法、装置、电子设备及介质 | |
CN115469849B (zh) | 一种业务处理系统、方法、电子设备和存储介质 | |
CN108021317B (zh) | 用于屏幕编辑的方法及装置 | |
CN110780970A (zh) | 数据筛选方法、装置、设备及计算机可读存储介质 | |
US8775936B2 (en) | Displaying dynamic and shareable help data for images a distance from a pointed-to location | |
CN113760248A (zh) | 一种生成应用程序的方法和装置 | |
CN110908647A (zh) | 一种积木式编程的对象变量呈现方法、装置、终端及存储介质 | |
CN113282285B (zh) | 代码编写方法、装置、电子设备及存储介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |