CN113467663B - 界面配置方法、装置、计算机设备及介质 - Google Patents
界面配置方法、装置、计算机设备及介质 Download PDFInfo
- Publication number
- CN113467663B CN113467663B CN202111037666.0A CN202111037666A CN113467663B CN 113467663 B CN113467663 B CN 113467663B CN 202111037666 A CN202111037666 A CN 202111037666A CN 113467663 B CN113467663 B CN 113467663B
- Authority
- CN
- China
- Prior art keywords
- style
- interface
- configuration
- interface element
- page
- 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.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开关于一种界面配置方法、装置、计算机设备及介质,属于互联网技术领域,该方法包括:展示已发布的界面中第一界面元素的样式配置入口,响应于对样式配置入口的触发操作,展示第一界面元素的样式配置页面,基于样式配置页面,对第一界面元素的样式进行配置,得到第二界面元素,向服务器发送界面发布请求,以请求基于第二界面元素发布界面。本公开实施例中,通过界面元素的样式配置入口,能够触发展示样式配置页面,进而基于该样式配置页面就能够对界面元素的样式进行配置,提供了一种对已发布界面中界面元素进行配置的方法,无需重新开发就能够对界面元素进行样式配置,提高了界面配置的效率。
Description
技术领域
本公开涉及互联网技术领域,尤其涉及一种界面配置方法、装置、计算机设备及介质。
背景技术
随着移动互联网和计算机技术的飞速发展,越来越多的移动应用出现在人们的生活中,同时,移动应用上的UI(User Interface,用户界面)设计也越来越成熟,致力于提高用户的交互体验。
通常地,UI上设置有多种类型的界面元素,如导航栏、弹窗、消息框等等。目前,在技术人员想要对UI中的界面元素进行配置时,只能是重新开发一个UI,如此,降低了界面配置的效率。
发明内容
本公开提供一种界面配置方法、装置、计算机设备及介质,提高了界面配置的效率。本公开的技术方案包括以下内容。
根据本公开实施例的第一方面,提供一种界面配置方法,该方法包括:
展示已发布的界面中至少一个第一界面元素的样式配置入口;
响应于对该样式配置入口的触发操作,展示该至少一个第一界面元素的样式配置页面,该样式配置页面用于对该至少一个第一界面元素的样式进行配置;
基于该样式配置页面,对该至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素;
基于该至少一个第二界面元素,向服务器发送界面发布请求,该界面发布请求用于请求基于该至少一个第二界面元素对该界面进行发布。
本公开实施例中,通过界面元素的样式配置入口,能够触发展示样式配置页面,进而基于该样式配置页面就能够对界面元素的样式进行配置,提供了一种对已发布界面中界面元素进行配置的方法,无需重新开发就能够对界面元素进行样式配置,提高了界面配置的效率。
在一些实施例中,响应于对该样式配置入口的触发操作,展示该至少一个第一界面元素的样式配置页面包括:
响应于对该样式配置入口的触发操作,向该服务器发送页面展示请求,该页面展示请求用于请求获取该至少一个第一界面元素的样式配置页面的内容;
接收该服务器基于该页面展示请求返回的该样式配置页面的内容,基于该样式配置页面的内容,展示该至少一个第一界面元素的样式配置页面。
本公开实施例中,通过向服务器发送页面展示请求,以请求服务器获取样式配置页面的内容,以便于后续基于该样式配置页面的内容来进行展示,增加了所展示的信息量。
在一些实施例中,接收该服务器基于该页面展示请求返回的该样式配置页面的内容,基于该样式配置页面的内容,展示该至少一个第一界面元素的样式配置页面包括下述至少一项:
接收该服务器基于该页面展示请求返回的可配置元素,在所展示的样式配置页面中,展示该可配置元素,该可配置元素用于表示该已发布的界面中允许进行样式配置的界面元素;
接收该服务器基于该页面展示请求返回的第一样式描述文件,基于该第一样式描述文件,在所展示的样式配置页面中,展示该至少一个第一界面元素,该第一样式描述文件为用于描述该至少一个第一界面元素的文件。
本公开实施例中,一方面,通过展示界面中的可配置元素,以便基于该可配置元素进行后续样式配置的过程,另一方面,通过展示界面中的至少一个第一界面元素,也就展示出了界面中第一界面元素的初始样式,以便基于该界面中第一界面元素的初始样式进行后续样式配置的过程。
在一些实施例中,基于该样式配置页面,对该至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素包括:
响应于对该至少一个第一界面元素的样式配置操作,基于所配置的样式,在该样式配置页面中展示该至少一个第二界面元素。
本公开实施例中,在对第一界面元素进行样式配置时,能够触发展示本次样式配置后的第二界面元素,如此,使得技术人员能够一边进行样式配置的操作,一边预览本次样式配置后的界面元素的样式,不仅提高了界面配置的效率,还提高了界面配置的准确性。
在一些实施例中,响应于对该至少一个第一界面元素的样式配置操作,基于所配置的样式,在该样式配置页面中展示该至少一个第二界面元素包括:
基于对该至少一个第一界面元素的样式配置操作,向服务器发送样式配置请求,该样式配置请求用于请求获取该至少一个第二界面元素;
接收该服务器基于该样式配置请求返回的第二样式描述文件,基于该第二样式描述文件,在该样式配置页面中展示该至少一个第二界面元素,该第二样式描述文件为用于描述该至少一个第二界面元素的文件。
本公开实施例中,通过向服务器发送样式配置请求,以请求服务器获取样式配置后的第二界面元素,以便于在样式配置页面中展示该样式配置后的第二界面元素,增加了所展示的信息量,达到了实时预览样式配置后的界面元素的效果。
在一些实施例中,样式描述文件由该服务器基于目标应用客户端获取到,该目标应用客户端用于基于对应的配置文件对该界面进行渲染,从渲染得到的界面中获取该界面的样式信息,基于该样式信息生成该样式描述文件,该配置文件为用于指示界面中界面元素的样式的文件,该样式信息用于指示界面中界面元素的样式。
本公开实施例中,利用目标应用客户端,来获取样式描述文件,以便于基于该样式描述文件,来展示对应样式的界面元素,一方面,在展示样式配置页面的初始时刻,展示该界面的初始样式,另一方面,在对界面中的界面元素进行样式配置时,实时展示样式配置后的界面元素的样式,以达到实时预览样式配置后的界面元素的效果。
在一些实施例中,该目标应用客户端还用于基于截图或录屏的方式,获取该界面的样式信息。
本公开实施例中,通过截图或录屏的方式获取界面的样式信息,以确保获取全部的样式信息,从而确保界面的完整显示。
在一些实施例中,基于该样式配置页面,对该至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素包括:
响应于对任一个第一界面元素的触发操作,展示该第一界面元素的至少一个样式设置控件,该至少一个样式设置控件用于对该第一界面元素的样式进行配置;
基于该至少一个样式设置控件,对该第一界面元素的样式进行配置,得到该第一界面元素对应的第二界面元素。
本公开实施例中,通过为界面元素设置样式设置控件,使得技术人员通过该样式设置控件,就能够对界面元素的样式进行配置,提高了人机交互效率。
在一些实施例中,基于该样式配置页面,对该至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素包括下述至少一项:
响应于对该至少一个第一界面元素的标题样式配置操作,基于所配置的标题样式,在该样式配置页面中展示该至少一个第二界面元素;
响应于对该至少一个第一界面元素的图标样式配置操作,基于所配置的图标样式,在该样式配置页面中展示该至少一个第二界面元素;
响应于对该至少一个第一界面元素的控件样式配置操作,基于所配置的控件样式,在该样式配置页面中展示该至少一个第二界面元素。
本公开实施例中,通过对界面元素的标题样式、图标样式或控件样式进行样式配置,丰富了样式配置的类型,提高了样式配置的灵活性。
在一些实施例中,第一界面元素的样式包括该第一界面元素的形状、该第一界面元素的大小、该第一界面元素的颜色、该第一界面元素的边距以及该第一界面元素的文字样式中的至少一项。
本公开实施例中,通过设置多种类型的样式,丰富了样式配置的类型,提高了样式配置的灵活性。
根据本公开实施例的第二方面,提供一种界面配置装置,该装置包括:
入口展示单元,被配置为执行展示已发布的界面中至少一个第一界面元素的样式配置入口;
页面展示单元,被配置为执行响应于对该样式配置入口的触发操作,展示该至少一个第一界面元素的样式配置页面,该样式配置页面用于对该至少一个第一界面元素的样式进行配置;
样式配置单元,被配置为执行基于该样式配置页面,对该至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素;
发送单元,被配置为执行基于该至少一个第二界面元素,向服务器发送界面发布请求,该界面发布请求用于请求基于该至少一个第二界面元素对该界面进行发布。
在一些实施例中,该页面展示单元,包括:
发送子单元,被配置为执行响应于对该样式配置入口的触发操作,向该服务器发送页面展示请求,该页面展示请求用于请求获取该至少一个第一界面元素的样式配置页面的内容;
展示子单元,被配置为执行接收该服务器基于该页面展示请求返回的该样式配置页面的内容,基于该样式配置页面的内容,展示该至少一个第一界面元素的样式配置页面。
在一些实施例中,该展示子单元,被配置为执行下述至少一项:
接收该服务器基于该页面展示请求返回的可配置元素,在所展示的样式配置页面中,展示该可配置元素,该可配置元素用于表示该已发布的界面中允许进行样式配置的界面元素;
接收该服务器基于该页面展示请求返回的第一样式描述文件,基于该第一样式描述文件,在所展示的样式配置页面中,展示该至少一个第一界面元素,该第一样式描述文件为用于描述该至少一个第一界面元素的文件。
在一些实施例中,该样式配置单元,被配置为执行:
响应于对该至少一个第一界面元素的样式配置操作,基于所配置的样式,在该样式配置页面中展示该至少一个第二界面元素。
在一些实施例中,该样式配置单元,被配置为执行:
基于对该至少一个第一界面元素的样式配置操作,向服务器发送样式配置请求,该样式配置请求用于请求获取该至少一个第二界面元素;
接收该服务器基于该样式配置请求返回的第二样式描述文件,基于该第二样式描述文件,在该样式配置页面中展示该至少一个第二界面元素,该第二样式描述文件为用于描述该至少一个第二界面元素的文件。
在一些实施例中,样式描述文件由该服务器基于目标应用客户端获取到,该目标应用客户端用于基于对应的配置文件对该界面进行渲染,从渲染得到的界面中获取该界面的样式信息,基于该样式信息生成该样式描述文件,该配置文件为用于指示界面中界面元素的样式的文件,该样式信息用于指示界面中界面元素的样式。
在一些实施例中,该目标应用客户端还用于基于截图或录屏的方式,获取该界面的样式信息。
在一些实施例中,该样式配置单元,被配置为执行:
响应于对任一个第一界面元素的触发操作,展示该第一界面元素的至少一个样式设置控件,该至少一个样式设置控件用于对该第一界面元素的样式进行配置;
基于该至少一个样式设置控件,对该第一界面元素的样式进行配置,得到该第一界面元素对应的第二界面元素。
在一些实施例中,该样式配置单元,被配置为执行下述至少一项:
响应于对该至少一个第一界面元素的标题样式配置操作,基于所配置的标题样式,在该样式配置页面中展示该至少一个第二界面元素;
响应于对该至少一个第一界面元素的图标样式配置操作,基于所配置的图标样式,在该样式配置页面中展示该至少一个第二界面元素;
响应于对该至少一个第一界面元素的控件样式配置操作,基于所配置的控件样式,在该样式配置页面中展示该至少一个第二界面元素。
在一些实施例中,第一界面元素的样式包括该第一界面元素的形状、该第一界面元素的大小、该第一界面元素的颜色、该第一界面元素的边距以及该第一界面元素的文字样式中的至少一项。
根据本公开实施例的第三方面,提供一种计算机设备,该计算机设备包括:
一个或多个处理器;
用于存储该处理器可执行程序代码的存储器;
其中,该处理器被配置为执行该程序代码,以实现上述的界面配置方法。
根据本公开实施例的第四方面,提供一种计算机可读存储介质,该计算机可读存储介质包括:当该计算机可读存储介质中的程序代码由计算机设备的处理器执行时,使得计算机设备能够执行上述的界面配置方法。
根据本公开实施例的第五方面,提供一种计算机程序产品,包括计算机程序,该计算机程序被处理器执行时实现上述的界面配置方法。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施例,并与说明书一起用于解释本公开的原理,并不构成对本公开的不当限定。
图1是根据一示例性实施例示出的一种界面配置方法的实施环境示意图;
图2是根据一示例性实施例示出的一种界面配置方法的流程图;
图3是根据一示例性实施例示出的一种界面配置方法的流程图;
图4是根据一示例性实施例示出的一种开发阶段的流程示意图;
图5是根据一示例性实施例示出的一种可配置元素的示意图;
图6是根据一示例性实施例示出的一种提取样式描述文件的流程示意图;
图7根据一示例性实施例示出的一种提取HTML文件的流程示意图;
图8是根据一示例性实施例示出的一种提取样式信息的流程示意图;
图9是根据一示例性实施例示出的一种样式配置页面的示意图;
图10是根据一示例性实施例示出的一种样式配置页面的示意图;
图11是根据一示例性实施例示出的一种样式获取函数的流程示意图;
图12是根据一示例性实施例示出的一种界面配置装置的框图;
图13是根据一示例性实施例示出的一种终端的结构框图;
图14是根据一示例性实施例示出的一种服务器的结构框图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案,下面将结合附图,对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是,本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
本公开所涉及的数据或信息可以为经用户授权或者经过各方充分授权的数据或信息。
首先,针对本公开实施例中涉及的应用场景进行描述:本公开实施例涉及的界面配置方法可应用于端上动态化的场景中,端上动态化是指基于模板配置实现终端界面的动态更新,具体是终端界面的结构或布局等的动态更新,也即是基于服务端的模板更新而实时更新终端界面。
需要说明的是,在端上动态化的场景中,模板(也称为动态化模板)可以是界面中的一个界面元素的模板,如控件模板,或者,模板也可以是界面中的一个展示单元(可理解为界面元素的组合)的模板,如消息单元模板,当然,模板还可以是界面(包括所有的界面元素)的模板。在一些实施例中,模板为用于界面渲染的代码文件。相应地,基于模板进行渲染,也即是通过运行模板所包括的代码,能够触发终端在对应界面中展示渲染后的样式。以控件模板为例,基于控件模板进行渲染,能够触发终端在对应界面中展示渲染后的控件;以消息单元模板为例,基于消息单元模板进行渲染,能够触发终端在对应界面中展示渲染后的消息单元;以界面的模板为例,基于界面的模板进行渲染,能够触发终端展示渲染后的界面。
在相关技术中,模板配置通常是重新开发一个模板或者基于已有模板对其所包括的代码进行修改。在一些实施例中,若想要对已发布的界面中的界面元素进行配置,需要由技术人员重新开发、重新测试以及重新发布,也即是由技术人员进行模板配置,在经过测试阶段后,将原有的模板替换为新配置的模板,实现了动态模板替换,进而终端在访问该界面时,能够展示更新后的界面,也就实现了终端界面的动态更新。显然,相关技术中的动态化方案需要重复经历开发、测试及发布的过程,耗费了较长的时间,其无法实现对界面元素随时更改的要求,实时性较差。
本公开实施例中,界面配置是指对已发布的界面中界面元素的样式进行配置,具体是基于已发布的界面对应的模板,对该界面中界面元素的样式参数进行调整。本公开实施例提供了一种基于已发布的界面(对应线上已有模板),对该界面中的界面元素进行样式配置的方案,由于是基于已发布的界面来进行该界面中各类界面元素的样式配置,如此,不仅节省了大量的开发时间,且不需要完整测试,只需部分效果测试即可,节省了大量的测试时间,缩减了各类流程所耗费的时间,从而提高了界面配置的效率。
图1是本公开实施例提供的一种界面配置方法的实施环境示意图,参见图1,该实施环境中包括:终端101和服务器102。
终端101具有通信功能,可以接入有线网络或无线网络。终端101可以泛指多个终端中的一个,本实施例仅以终端101来举例说明。本领域技术人员可以知晓,上述终端的数量可以更多或更少。
在一些实施例中,终端101包括第一终端1011和第二终端1012。
第一终端1011为技术人员所操作的终端。第一终端1011可以为台式电脑、手提电脑、虚拟现实终端、增强现实终端、无线终端和膝上型便携计算机等设备中的至少一种。在一些实施例中,第一终端1011关联有界面管理平台和界面配置平台。在一些实施例中,界面管理平台提供有界面管理功能,具体是界面的发布管理功能和界面的样式管理功能,例如界面发布或撤销发布(也即是界面的上下线)。可选地,界面管理平台为Matrix平台。在一些实施例中,界面配置平台提供有对界面中界面元素的样式配置功能,例如对界面元素的文字、边距、颜色等样式进行配置。
本公开实施例中,第一终端1011用于展示已发布的界面中至少一个第一界面元素的样式配置入口,响应于对样式配置入口的触发操作,展示至少一个第一界面元素的样式配置页面,基于样式配置页面,对至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素,基于至少一个第二界面元素,向服务器102发送界面发布请求,以请求服务器102基于该至少一个第二界面元素对界面进行发布。
第二终端1012为用户所操作的终端。第二终端1012可以为智能手机、智能手表、台式电脑、手提电脑、虚拟现实终端、增强现实终端、无线终端和膝上型便携计算机等设备中的至少一种。在一些实施例中,第二终端1012运行有直播应用程序、社交应用程序、歌曲应用程序等应用程序。
本公开实施例中,第二终端1012用于接收服务器所发送的至少一个第二界面元素,基于该至少一个第二界面元素,对界面进行渲染,以展示经样式配置后的界面。
服务器102可以是独立的物理服务器,也可以是多个物理服务器构成的服务器集群或者分布式文件系统,还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(Content Delivery Network,内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器。服务器102与终端101可以通过有线或无线通信方式进行直接或间接的连接,本公开实施例对此不作限定。可选地,上述服务器102的数量可以更多或更少,本公开实施例对此不加以限定。当然,服务器102还可以包括其他功能服务器,以便提供更全面且多样化的服务。
在一些实施例中,服务器102包括第一服务器1021和第二服务器1022。其中,第一服务器1021为界面管理平台的后台服务器,第二服务器1022为界面配置平台的后台服务器。本公开实施例中,第一服务器1021用于执行界面的发布流程,第二服务器1022用于执行获取样式配置页面的内容以及获取界面的样式描述文件的过程。本公开实施例后续将第一服务器和第二服务器统称为服务器。
图2是根据一示例性实施例示出的一种界面配置方法的流程图,如图2所示,该方法由终端执行,包括以下步骤。
在步骤201中,终端展示已发布的界面中至少一个第一界面元素的样式配置入口。
在步骤202中,终端响应于对该样式配置入口的触发操作,展示该至少一个第一界面元素的样式配置页面,该样式配置页面用于对该至少一个第一界面元素的样式进行配置。
在步骤203中,终端基于该样式配置页面,对该至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素。
在步骤204中,终端基于该至少一个第二界面元素,向服务器发送界面发布请求,该界面发布请求用于请求基于该至少一个第二界面元素对该界面进行发布。
本公开实施例提供的技术方案,通过界面元素的样式配置入口,能够触发展示样式配置页面,进而基于该样式配置页面就能够对界面元素的样式进行配置,提供了一种对已发布界面中界面元素进行配置的方法,无需重新开发就能够对界面元素进行样式配置,提高了界面配置的效率。
在一些实施例中,响应于对该样式配置入口的触发操作,展示该至少一个第一界面元素的样式配置页面包括:
响应于对该样式配置入口的触发操作,向该服务器发送页面展示请求,该页面展示请求用于请求该至少一个第一界面元素的样式配置页面;
接收该服务器基于该页面展示请求返回的该样式配置页面的内容,基于该样式配置页面的内容,展示该至少一个第一界面元素的样式配置页面。
在一些实施例中,接收该服务器基于该页面展示请求返回的该样式配置页面的内容,基于该样式配置页面的内容,展示该至少一个第一界面元素的样式配置页面包括下述至少一项:
接收该服务器基于该页面展示请求返回的可配置元素,在所展示的样式配置页面中,展示该可配置元素,该可配置元素用于表示该已发布的界面中允许进行样式配置的界面元素;
接收该服务器基于该页面展示请求返回的第一样式描述文件,基于该第一样式描述文件,在所展示的样式配置页面中,展示该至少一个第一界面元素,该第一样式描述文件为用于描述该至少一个第一界面元素的文件。
在一些实施例中,基于该样式配置页面,对该至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素包括:
响应于对该至少一个第一界面元素的样式配置操作,基于所配置的样式,在该样式配置页面中展示该至少一个第二界面元素。
在一些实施例中,响应于对该至少一个第一界面元素的样式配置操作,基于所配置的样式,在该样式配置页面中展示该至少一个第二界面元素包括:
基于对该至少一个第一界面元素的样式配置操作,向服务器发送样式配置请求,该样式配置请求用于请求获取该至少一个第二界面元素;
接收该服务器基于该样式配置请求返回的第二样式描述文件,基于该第二样式描述文件,在该样式配置页面中展示该至少一个第二界面元素,该第二样式描述文件为用于描述该至少一个第二界面元素的文件。
在一些实施例中,样式描述文件由该服务器基于目标应用客户端获取到,该目标应用客户端用于基于对应的配置文件对该界面进行渲染,从渲染得到的界面中获取该界面的样式信息,基于该样式信息生成该样式描述文件,该配置文件为用于指示界面中界面元素的样式的文件,该样式信息用于指示界面中界面元素的样式。
在一些实施例中,该目标应用客户端还用于基于截图或录屏的方式,获取该界面的样式信息。
在一些实施例中,基于该样式配置页面,对该至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素包括:
响应于对任一个第一界面元素的触发操作,展示该第一界面元素的至少一个样式设置控件,该至少一个样式设置控件用于对该第一界面元素的样式进行配置;
基于该至少一个样式设置控件,对该第一界面元素的样式进行配置,得到该第一界面元素对应的第二界面元素。
在一些实施例中,基于该样式配置页面,对该至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素包括下述至少一项:
响应于对该至少一个第一界面元素的标题样式配置操作,基于所配置的标题样式,在该样式配置页面中展示该至少一个第二界面元素;
响应于对该至少一个第一界面元素的图标样式配置操作,基于所配置的图标样式,在该样式配置页面中展示该至少一个第二界面元素;
响应于对该至少一个第一界面元素的控件样式配置操作,基于所配置的控件样式,在该样式配置页面中展示该至少一个第二界面元素。
在一些实施例中,第一界面元素的样式包括该第一界面元素的形状、该第一界面元素的大小、该第一界面元素的颜色、该第一界面元素的边距以及该第一界面元素的文字样式中的至少一项。
上述图2所示仅为本公开的基本流程,下面基于一种具体实施方式,来对本公开提供的方案进行进一步阐述,图3是根据一示例性实施例示出的一种界面配置方法的流程图,参见图3,该方法包括以下步骤。
在步骤301中,第一终端在管理页面中,展示已发布的界面中至少一个第一界面元素的样式配置入口,该管理页面用于对已发布的界面进行管理。
本公开实施例中,管理页面为界面管理平台所提供的页面,该界面管理平台提供有界面的发布管理功能和界面的样式管理功能。在一些实施例中,管理页面用于对已发布的界面中界面元素的样式进行管理,相应地,管理页面提供有样式配置入口,该样式配置入口用于触发对已发布的界面中界面元素的样式进行配置,例如,该样式配置入口可以是样式调整控件或样式更新控件。在另一些实施例中,管理页面还用于对界面的发布状态进行管理,相应地,管理页面还提供有发布入口,该发布入口用于触发对界面进行发布,例如,发布入口可以是界面发布控件。
本公开实施例中,采用第一界面元素来表示待进行样式配置的界面元素。在一些实施例中,界面为UI(User Interface,用户界面)。相应地,第一界面元素也即是UI元素。其中,UI元素是指UI(用户界面)中所有的可视元素。例如,控件类元素(输入控件、选择控件)、导航组件类元素(标签栏、导航栏)、信息类元素(图标、消息框和标题)等等。
在一些实施例中,第一界面元素的样式包括该第一界面元素的形状、该第一界面元素的大小、该第一界面元素的颜色、该第一界面元素的边距以及该第一界面元素的文字样式中的至少一项。示例地,图4是根据一示例性实施例示出的一种开发阶段的流程示意图,参见图4,界面可以是图4所示出的视图(view)401,在图4所示出的视图401中,包括3个界面元素,分别是图标元素、标题元素和控件元素。以图4中所示出的界面元素为例,图标元素的样式可以包括图标宽度、图标长度、图标边距;标题元素的样式可以包括标题的文字大小、标题的文字颜色;控件元素的样式可以包括控件的文字大小、控件的文字颜色及控件的背景颜色。通过设置多种类型的样式,丰富了样式配置的类型,提高了样式配置的灵活性。
本公开实施例中,提供了一种基于已发布的界面,来进行界面中界面元素的样式配置的方法,如此,能够实现对线上动态化模板中UI元素的样式调整。例如,技术人员在发布界面后,也即是将该界面应用在用户端后,在用户反馈出现界面渲染出错或界面渲染效果不佳等问题时,技术人员可以对该界面进行样式配置,再将样式配置后的界面下发至用户端,以解决上述界面渲染出错或界面渲染效果不佳的问题。
示例地,图4还示出了界面的开发阶段的流程,应理解地,开发阶段所对应的界面是未发布的界面,也即是待发布的界面。参见图4,下面基于步骤(301A)至步骤(301C)对界面的开发阶段进行说明。
(301A)第一终端获取待发布的界面的配置文件,该待发布的界面的配置文件用于指示该待发布的界面中至少一个界面元素的样式。
其中,待发布的界面的配置文件包含有用于渲染该待发布的界面的代码。需要说明的是,步骤(301A)中的配置文件所指示的是待发布的界面中界面元素的默认样式,具体是在开发该界面时所设置的界面元素的样式参数的默认值。示例地,参见图4,待发布的界面的配置文件可以是图4所示出的第一程序代码402,该第一程序代码402用于指示该待发布的界面的默认样式。以样式参数为控件宽度为例,该样式参数的默认值可以是100%;以样式参数为控件高度为例,该样式参数的默认值可以是30。需要说明的是,本公开实施例中所示出的默认值仅用于示意性说明。
在一些实施例中,技术人员开发完成该待发布的界面(也即是开发完成该待发布的界面的模板)后,通过在第一终端上进行操作,将该模板所包括的程序代码进行打包,生成该待发布的界面的配置文件,将该待发布的界面的配置文件上传至第一终端,则第一终端响应于对该待发布的界面的配置文件的上传操作,获取该待发布的界面的配置文件,将该配置文件所指示的样式确定为待发布的界面的默认样式。
在一种可选的实施例中,第一终端还将该待发布的界面的配置文件发送至服务器,则服务器接收该待发布的界面的配置文件,将该待发布的界面的配置文件存储至配置文件库中,该配置文件库用于存储多个界面标识以及该多个界面标识对应的配置文件。
本公开实施例中,界面标识采用界面ID(Identification,身份标识符号)来表示。例如,界面标识可以是Templateld ID(模板ID)。
(301B)第一终端获取该至少一个界面元素的样式参数的配置值。
本公开实施例中,样式参数的配置值为预先设置的参数值。以样式参数为控件宽度为例,该样式参数的配置值可以是120%。以样式参数为控件高度为例,该样式参数的配置值可以是70。需要说明的是,本公开实施例中所示出的配置值仅用于示意性说明。
在一些实施例中,第一终端获取服务器下发的样式参数的配置值,相应过程为:第一终端向服务器发送配置值获取请求,服务器接收该配置值获取请求,基于该配置值获取请求携带的界面标识,获取该界面标识对应的样式参数的配置值,将获取到的该样式参数的配置值返回至第一终端。
在一种可选的实施例中,服务器关联有界面信息库,该界面信息库用于存储多个界面标识以及该多个界面标识对应的样式参数的配置值,相应地,服务器获取该界面标识对应的样式参数的配置值的过程包括:服务器基于该界面标识,在该界面信息库中进行查询,查询得到该界面标识对应的样式参数的配置值。
(301C)第一终端基于该待发布的界面的配置文件和该至少一个界面元素的样式参数的配置值,在该至少一个界面元素中应用对应的样式。
在一些实施例中,在该待发布的界面的配置文件中调用样式获取函数,通过该样式获取函数基于该待发布的界面的配置文件和该至少一个界面元素的样式参数的配置值,在该至少一个界面元素中应用对应的样式,以便后续对该界面进行发布。
在一种可选的实施例中,样式获取函数为get Style(xxx)。示例地,参见图4,图4所示出的第二程序代码403为基于该样式获取函数,在该至少一个界面元素中应用对应的样式的程序代码。
在一种可选的实施例中,在程序代码的编译过程中,基于lint规则对该程序代码进行检查,以提高程序代码编译的准确度。其中,lint规则是一种程序语言工具,lint规则用于对程序代码进行错误检查和代码分析。
在图4所示出的开发阶段中,基于待发布的界面的配置文件和预先设置的配置值,在该待发布的界面中应用所指示的样式,以实现对界面的一次发布。需要说明的是,上述步骤(301A)至步骤(301C)以第一终端为执行主体,对界面的开发阶段进行说明,在另一些实施例中,上述界面的开发阶段的过程可以由第三终端来执行,该第三终端为开发人员所操作的终端。
本公开实施例中,通过在管理页面中设置样式配置入口,使得技术人员通过该样式配置入口,就能够触发执行后续过程,也即是基于步骤301中所展示的样式配置入口,当技术人员想要对已发布的界面中任一第一界面元素的样式进行配置时,可以对该样式配置入口实施触发操作,则第一终端响应于对该样式配置入口的触发操作,展示该至少一个第一界面元素的样式配置页面。下面基于第一终端和服务器之间的交互流程,对展示该样式配置页面的过程进行说明,参见步骤302至步骤305。
在步骤302中,第一终端响应于对该样式配置入口的触发操作,向服务器发送页面展示请求,该页面展示请求用于请求获取该至少一个第一界面元素的样式配置页面的内容,该样式配置页面用于对该至少一个第一界面元素的样式进行配置。
在一些实施例中,页面展示请求携带该已发布的界面的界面标识。本公开实施例中,样式配置页面为界面配置平台所提供的页面,该界面配置平台提供有对界面中界面元素的样式配置功能。
在上述实施例中,通过向服务器发送页面展示请求,以请求服务器获取样式配置页面的内容,以便于后续基于该样式配置页面的内容来进行展示,增加了所展示的信息量。
在步骤303中,服务器接收该页面展示请求,基于该页面展示请求,获取该样式配置页面的内容。
(303A)在一些实施例中,样式配置页面的内容包括该已发布的界面中的可配置元素,该可配置元素用于表示已发布的界面中允许进行样式配置的界面元素,相应地,服务器获取可配置元素的过程为:服务器基于该页面展示请求携带的已发布的界面的界面标识,在界面信息库中进行查询,获取该界面标识对应的可配置元素,该界面信息库还用于存储多个界面标识以及该多个界面标识对应的可配置元素。
在一种可选的实施例中,界面配置平台提供有录入界面中的可配置元素的功能。例如,在界面的开发阶段,技术人员可以预先录入该界面中的可配置元素,相应过程为:第一终端响应于对界面中的可配置元素的录入操作,获取所录入的可配置元素;或者,第一终端基于该界面的配置文件,自动录入界面中的可配置元素。可选地,在界面的开发阶段,技术人员还可以在界面的配置文件中,为该界面的可配置元素添加元素标识,并为该可配置元素设置样式参数以及该样式参数的默认值。进一步地,第一终端获取到界面中的可配置元素后,还将该界面中的可配置元素发送至服务器,以触发服务器将该界面中的可配置元素存储至界面信息库。
步骤(303A)是在服务器预先存储有已发布的界面中的可配置元素的情况下,自动获取该已发布的界面中的可配置元素的过程。在另一些实施例中,在服务器未预先存储有已发布的界面中的可配置元素的情况下,可以由技术人员在第一终端上进行操作,录入该已发布的界面中的可配置元素。
在一些实施例中,采用JSON(Java Script Object Notation,JS对象简谱)配置信息来描述可配置元素以及可配置元素的配置信息。其中,JSON是一种轻量级的数据交换格式。在一些实施例中,JSON配置信息可以是字符串(String)的形式。示例地,图5是根据一示例性实施例示出的一种可配置元素的示意图,参见图5,可配置元素的配置信息可以参见图5所示出的JSON配置信息。例如,基于图4所示出的视图401,技术人员所录入的可配置元素的配置信息可以包括图标元素(Icon)、标题元素(Title)及控件元素(downloadBtn)。在一些实施例中,可配置元素的配置信息用于指示可配置元素的样式参数,例如,图标元素对应的样式参数可以包括图标宽度、图标长度、图标边距;标题元素对应的样式参数可以包括标题的文字大小、标题的文字颜色;控件元素对应的样式参数可以包括控件的文字大小、控件的文字颜色及控件的背景颜色。在一些实施例中,可配置元素的配置信息还用于指示可配置元素的样式参数的默认值。
(303B)在又一些实施例中,样式配置页面的内容包括该已发布的界面的模板信息,相应地,服务器获取界面的模板信息的过程为:服务器基于该页面展示请求携带的已发布的界面的界面标识,在界面信息库中进行查询,获取该界面标识对应的模板信息,该界面信息库还用于存储多个界面标识以及该多个界面标识对应的模板信息。例如,模板信息可以是模板名称、模板版本等。
步骤(303B)是在服务器预先存储有已发布的界面的模板信息的情况下,自动获取该已发布的界面的模板信息的过程。在另一些实施例中,在服务器未预先存储有已发布的界面的模板信息的情况下,可以由技术人员在第一终端上进行操作,录入该已发布的界面的模板信息。
(303C)在另一些实施例中,样式配置页面的内容包括该至少一个第一界面元素的样式描述文件。本公开实施例中,样式描述文件由该服务器基于目标应用客户端获取到,该目标应用客户端用于基于对应的配置文件对该界面进行渲染,从渲染得到的界面中获取该界面的样式信息,基于该样式信息生成该样式描述文件。其中,样式信息用于指示界面中界面元素的样式。例如,该样式信息包括静态HTML(Hyper Text Markup Language,超文本标记语言)和布局信息,静态HTML用于描述该界面的结构和内容,例如,静态HTML可以包含图片,布局信息用于描述该界面的布局,例如布局信息可以包含界面元素在界面中的位置信息。
图6是根据一示例性实施例示出的一种提取样式描述文件的流程示意图,参见图6,服务器获取该至少一个第一界面元素的样式描述文件的过程包括如下步骤。
(601)服务器基于该页面展示请求携带的已发布的界面的界面标识,获取该已发布的界面的配置文件,该已发布的界面的配置文件用于指示该待发布的界面中至少一个第一界面元素的样式。
其中,已发布的界面的配置文件包含有用于渲染该已发布的界面的代码。
在一些实施例中,服务器基于该已发布的界面的界面标识,在配置文件库中进行查询,查询得到该界面标识对应的配置文件,确定为该已发布的界面的配置文件,该配置文件库用于存储多个界面标识以及该多个界面标识对应的配置文件。
(602)服务器通过目标应用客户端,基于该已发布的界面的配置文件,在该目标应用客户端上对界面进行渲染。
在一些实施例中,目标应用客户端为智能助理应用客户端,例如Agent App。在一些实施例中,在实施本方案之前,基于该目标应用客户端进行应用注册,也即是建立目标应用客户端和服务器之间的通信关系,以便于目标应用客户端和服务器进行通信。在一些实施例中,界面配置平台还提供有应用注册功能,通过该界面配置平台对目标应用客户端进行应用注册,以便后续基于目标应用客户端来实现样式信息的提取功能。
在一些实施例中,服务器将该已发布的界面的配置文件发送至目标应用客户端,则该目标应用客户端接收该已发布的界面的配置文件后,运行该已发布的界面的配置文件,从而在该目标应用客户端上对界面进行渲染,得到渲染后的界面。
(603)服务器通过目标应用客户端,基于渲染后的界面,提取该已发布的界面的第一样式描述文件,该第一样式描述文件为用于描述该至少一个第一界面元素的文件。
其中,第一样式描述文件可以为第一HTML文件。其中,HTML文件是一种制作万维网页面的标准语言文件。
在一些实施例中,目标应用客户端在渲染得到已发布的界面后,从渲染得到的已发布的界面中,提取该已发布的界面的样式信息,基于所提取得到的样式信息,生成该已发布的界面的第一样式描述文件,将所生成的第一样式描述文件上传至服务器。以第一HTML文件为例,目标应用客户端基于所提取得到的样式信息,生成该已发布的界面的第一HTML文件,将所生成的第一HTML文件上传至服务器。
在一种可选的实施例中,目标应用客户端基于关键节点的hook(钩子)操作,提取该已发布的界面的样式信息。
在一种可选的实施例中,该目标应用客户端还用于基于截图或录屏的方式,获取该界面的样式信息。通过截图或录屏的方式获取界面的样式信息,以确保获取全部的样式信息,从而确保界面的完整显示。例如,对于一些不符合显示标准的界面元素,也即是对于一些无法显示或者显示效果不佳的界面元素,通过该目标应用客户端,进行截图或录屏,能够有效实现样式的预览,从而避免因预览信息的缺失而造成展示不完整的问题,提高了界面显示的兼容性。
示例地,图7是根据一示例性实施例示出的一种提取HTML文件的流程示意图,参见图7,提取HTML文件的过程包括:获取模板列表(包括界面中多个界面元素的模板)和配置信息(如多个界面元素的配置值),基于该模板列表和该配置信息,对该模板列表中的多个界面元素的模板进行逐个渲染,并基于渲染后的界面元素的样式获取该多个界面元素的样式信息,进而基于该多个界面元素的样式信息,生成该多个界面元素的HTML文件,也就生成了界面的HTML文件。其中,获取该多个界面元素的样式信息的过程可以参见图7右侧所示出的过程,相应过程包括:基于该模板列表和该配置信息,加载多个界面元素的模板中的程序代码和可配置元素,运行该多个界面元素的模板中的程序代码,以达到渲染多个界面元素的模板的目的,并构建界面元素与程序代码之间的映射关系,以该界面中多个界面元素中的底层界面元素(Root View)为起点,依次遍历该界面中的多个界面元素,分别获取该多个界面元素的样式信息。在一些实施例中,采用HTML文档来描述样式信息。例如,HTML文档可以是HTML DOM(HTML Document Object Model,HTML文档对象模型),HTML DOM用于将界面(如网页)中的各个界面元素看作对象,从而使界面中的界面元素能够被计算机语言(如JavaScript语言)获取或者编辑。
图8是根据一示例性实施例示出的一种提取样式信息的流程示意图,参见图8,对于每个界面元素,创建该界面元素对应的HTML文档,基于该界面元素以及该界面元素与程序代码之间的映射关系,确定当前界面元素对应的程序代码,获取该界面元素对应的程序代码所指示的界面元素的基础信息,基于该界面元素的基础信息确定HTML文档的标签(可称为HTML标签),并在该HTML文档中添加该标签;进而,运行该界面元素对应的程序代码,以渲染该界面元素的模板,将该界面元素的程序代码转换为该界面元素的前端样式,基于该界面元素的前端样式提取该界面元素的样式信息,并在该HTML文档中添加该界面元素的样式信息;接着,在该HTML文档中的对应位置添加该界面元素的类别、内容及属性,如此,生成了多个界面元素的HTML文档,将该多个界面元素的HTML文档写入文件,从而得到了界面的HTML文件。其中,在遍历界面元素的过程中,对于无法显示的界面元素,可以采用截图或录屏的方式,来获取该界面元素的图片,进而利用该图片来描述该界面元素的样式。此外,对于界面中多个界面元素中空白的界面元素,将该多个界面元素中空白的界面元素放置在界面的底部。
在该实施例中,利用目标应用客户端,来获取样式描述文件,以便于在展示样式配置页面的初始时刻,展示该界面的初始样式,还实现了样式信息的自动化提取,极大的降低了界面配置的时间成本。
需要说明的是,步骤303是建立样式配置平台的过程,在首次进入样式配置页面时,通过获取样式配置页面的内容,以便后续基于该样式配置页面的内容来展示样式配置页面,从而实现后续在该样式配置页面上的可视化配置。
在步骤304中,服务器将该样式配置页面的内容返回至第一终端。
在步骤305中,第一终端基于该样式配置页面的内容,展示该至少一个第一界面元素的样式配置页面。
在一些实施例中,第一终端接收该服务器基于该页面展示请求返回的可配置元素,在所展示的样式配置页面中,展示该可配置元素,或者,第一终端响应于对可配置元素的录入操作,获取所录入的可配置元素,在所展示的样式配置页面中,展示该可配置元素。
在一种可选的实施例中,第一终端在样式配置页面的配置区域,展示该已发布的界面中的可配置元素。示例地,图9是根据一示例性实施例示出的一种样式配置页面的示意图,参见图9,配置区域可以是图9右侧所示出的模板信息区域。
在又一些实施例中,第一终端接收该服务器基于该页面展示请求返回的模板信息,在所展示的样式配置页面中,展示该已发布的界面的模板信息,或者,第一终端响应于对模板信息的录入操作,获取所录入的模板信息,在所展示的样式配置页面中,展示该已发布的界面的模板信息。
在一种可选的实施例中,第一终端在样式配置页面的配置区域,展示该已发布的界面的模板信息。示例地,参见图9,模板信息可以是图9所示出的模板版本、模板名称等。
在另一些实施例中,第一终端接收该服务器基于该页面展示请求返回的第一样式描述文件,基于该第一样式描述文件,在所展示的样式配置页面中,展示该至少一个第一界面元素。
在一种可选的实施例中,第一终端接收该服务器基于该页面展示请求返回的第一HTML文件,基于该第一HTML文件,在所展示的样式配置页面中,展示该已发布的界面中的至少一个第一界面元素,也即是展示该已发布的界面中至少一个第一界面元素的原始样式。如此,实现了自动化界面预览,提高了人机交互效率。
在一种可选的实施例中,第一终端在样式配置页面的预览区域,展示该已发布的界面中的至少一个第一界面元素。示例地,参见图9,预览区域可以是图9中间所示出的预览区域。
在上述实施例中,一方面,通过展示界面中的可配置元素,以便基于该可配置元素进行后续样式配置的过程,另一方面,通过展示界面中的至少一个第一界面元素,也就展示出了界面中第一界面元素的初始样式,以便基于该界面中第一界面元素的初始样式进行后续样式配置的过程。
上述步骤302至步骤305是以第一终端和服务器之间的交互流程为例,对方案进行说明。在一些实施例中,服务器包括第一服务器和第二服务器,该第一服务器为界面管理平台的后台服务器,该第二服务器为界面配置平台的后台服务器,第一终端展示样式配置页面的过程由第一终端、第一服务器和第二服务器共同执行,相应过程为:第一终端在界面管理平台所提供的管理页面中,响应于对该已发布的界面的样式配置入口的触发操作,向第一服务器发送页面展示请求,第一服务器接收该页面展示请求,向第二服务器发送该页面展示请求,则第二服务器基于该页面展示请求携带的该已发布的界面的界面标识,获取该界面标识对应的样式配置页面的内容,将所获取的样式配置页面的内容发送至第一终端,则第一终端基于样式配置页面的内容,展示样式配置页面,以便于基于该样式配置页面进行后续样式配置的过程。
步骤301至步骤305介绍了展示样式配置页面的过程,进而,第一终端基于该样式配置页面,对该至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素。相应过程参见步骤306至步骤309。
在步骤306中,第一终端基于对该至少一个第一界面元素的样式配置操作,向服务器发送样式配置请求,该样式配置请求用于请求获取该至少一个第二界面元素。
本公开实施例中,采用第二界面元素来表示经样式配置得到的界面元素。
在一些实施例中,第一终端响应于对任一个第一界面元素的触发操作,展示该第一界面元素的至少一个样式设置控件,该至少一个样式设置控件用于对该第一界面元素的样式进行配置,基于该至少一个样式设置控件,对该第一界面元素的样式进行配置,得到该第一界面元素对应的第二界面元素。
在一种可选的实施例中,在该样式配置页面的配置区域中,第一终端响应于对可配置元素的触发操作,展示对应界面元素的至少一个样式设置控件,再基于该至少一个样式设置控件,对该界面元素的样式进行配置。
在上述实施例中,通过为界面元素设置样式设置控件,使得技术人员通过该样式设置控件,就能够对界面元素的样式进行配置,提高了人机交互效率。
示例地,图10是根据一示例性实施例示出的一种样式配置页面的示意图,参见图10,该至少一个样式设置控件可以为图10所示出的“字体大小”设置控件、“字体颜色”设置控件、“上边框”设置控件、“左边距”设置控件。
在步骤307中,服务器接收该样式配置请求,基于该样式配置请求,获取第二样式描述文件,该第二样式描述文件为用于描述该至少一个第二界面元素的文件。
其中,第二样式描述文件可以为第二HTML文件。在一些实施例中,样式配置请求携带本次样式配置的配置信息,该配置信息用于指示本次样式配置所调整的样式参数以及对应的参数值。在一些实施例中,配置信息可以是JSON配置信息。
在一些实施例中,服务器接收该样式配置请求,通过目标应用客户端,基于本次样式配置的配置信息,对界面进行渲染,基于渲染后的界面,提取本次样式配置的样式信息,基于本次样式配置的样式信息,生成该第二样式描述文件。如此,实现了样式描述文件的动态调整,从而实现界面的在线预览。
在该实施例中,利用目标应用客户端,来获取样式描述文件,以便于在对界面中的界面元素进行样式配置时,实时展示样式配置后的界面元素的样式,以达到实时预览样式配置后的界面元素的效果,还实现了样式信息的自动化提取,极大的降低了界面配置的时间成本。
在上述实施例中,通过向服务器发送样式配置请求,以请求服务器获取样式配置后的第二界面元素,以便于在样式配置页面中展示该样式配置后的第二界面元素,增加了所展示的信息量,达到了实时预览样式配置后的界面元素的效果。
在步骤308中,服务器将该第二样式描述文件返回至第一终端。
在步骤309中,第一终端接收该第二样式描述文件,基于该第二样式描述文件,在该样式配置页面中展示该至少一个第二界面元素。
上述步骤306至步骤309中,在技术人员对第一界面元素进行样式配置的过程中,第一终端实时展示本次样式配置所得到的第二界面元素的样式,以便技术人员基于所展示的样式效果来进行调整,相应过程为:第一终端响应于对该至少一个第一界面元素的样式配置操作,基于所配置的样式,在该样式配置页面中展示该至少一个第二界面元素。
在一些实施例中,第一终端在该样式配置页面中,展示该至少一个第一界面元素以及该至少一个第二界面元素,也即是展示界面中界面元素的原始样式以及界面元素配置后的样式。示例地,参见图10,该至少一个第一界面元素可以是图10所示出的界面元素1001和界面元素1003,该至少一个第二界面元素可以是图10所示出的界面元素1002和界面元素1004。
如此,通过提供可视化界面,以便技术人员对已发布的界面进行一定范围内的界面配置,使得技术人员能够一边进行样式配置的操作,一边预览本次样式配置后的界面元素的样式,不仅提高了界面配置的效率,还提高了界面配置的准确性。
需要说明的是,上述步骤306至步骤309中实时预览的过程为可选步骤。在另一些实施例中,还可以通过调试通道,将样式配置后的界面下发到调试终端上进行实际体验。
下面分别基于标题元素、图标元素、控件元素,对样式配置的过程进行说明。
在一些实施例中,第一终端响应于对该至少一个第一界面元素的标题样式配置操作,基于所配置的标题样式,在该样式配置页面中展示该至少一个第二界面元素。
在一些实施例中,第一终端响应于对该至少一个第一界面元素的图标样式配置操作,基于所配置的图标样式,在该样式配置页面中展示该至少一个第二界面元素。
在一些实施例中,第一终端响应于对该至少一个第一界面元素的控件样式配置操作,基于所配置的控件样式,在该样式配置页面中展示该至少一个第二界面元素。
在上述实施例中,通过对界面元素的标题样式、图标样式或控件样式进行样式配置,丰富了样式配置的类型,提高了样式配置的灵活性。
在步骤310中,第一终端基于该至少一个第二界面元素,向服务器发送界面发布请求,该界面发布请求用于请求基于该至少一个第二界面元素对该界面进行发布。
在一些实施例中,该样式配置页面包括确认控件,在技术人员配置完成后,可以对该确认控件实施触发操作,则第一终端响应于对该确认控件的触发操作,向服务器发送该界面发布请求,以触发服务器基于该样式配置后的至少一个第二界面元素对界面进行发布。
在一种可选的实施例中,第一终端响应于对该确认控件的触发操作,获取本次样式配置的配置信息,将本次样式配置的配置信息发送至服务器,以触发服务器对本次样式配置的配置信息进行存储。
在步骤311中,服务器接收该界面发布请求,基于该至少一个第二界面元素对该界面进行发布。
在一种可选的实施例中,服务器通过AB发布的方式,对该至少一个第二界面元素的模板进行发布;在另一种可选的实施例中,服务器通过灰度发布的方式,对该至少一个第二界面元素的模板进行发布。其中,该至少一个第二界面元素的模板包括本次样式配置的配置信息。通过该两种发布的方式,均能够快速地发布界面,提高了界面发布的效率。
在一些实施例中,服务器对界面进行发布的过程由第一服务器和第二服务器共同执行,相应过程为:第二服务器接收该界面发布请求,将该界面发布请求发送至第一服务器,则第一服务器接收该界面发布请求,基于该界面发布请求携带的该至少一个第二界面元素,对界面进行发布。
通过上述步骤310至步骤311,基于样式配置后的至少一个第二界面元素进行界面的发布,实现了对界面的二次发布。
在步骤312中,第二终端响应于对界面的访问操作,向服务器发送界面访问请求,该界面访问请求用于请求访问该界面。
在步骤313中,服务器接收该界面访问请求,向第二终端发送配置后的界面的配置文件,该配置后的界面的配置文件用于指示该配置后的界面中至少一个第二界面元素的样式。
其中,该配置后的界面的配置文件包含有本次样式配置的配置信息。
在步骤314中,第二终端接收该配置后的界面的配置文件,基于该配置后的界面的配置文件,对该界面进行渲染。
在一些实施例中,第二终端接收到该配置后的界面的配置文件后,运行该配置文件,对界面进行渲染,进而在该界面中展示该至少一个第二界面元素。
在一种可选的实施例中,在配置后的界面的配置文件中,通过调用样式获取函数,来获取该至少一个第二界面元素的样式,进而在该界面中基于所获取的样式展示该至少一个第二界面元素。
示例地,图11是根据一示例性实施例示出的一种样式获取函数的流程示意图,参见图11,样式获取函数的基本原理为:以界面的配置样式为最高优先级,先判断界面是否存在配置样式,若是,则获取该配置样式,若不存在,则获取该界面的默认样式;在获取该界面的默认样式时,会判断该界面是否存在动态样式(也即是预先设置的样式参数的配置值),若存在,则将该默认样式替换为该动态样式,若不存在,则直接获取该界面的默认样式,如此,能够快速获取到界面待显示的样式。可选地,在获取到界面待显示的样式后,还可以基于待显示界面的终端的系统平台,对不必要显示的信息进行删除,以实现信息显示与终端系统的适配。例如,以A系统平台和B系统平台为例,若待显示界面的终端的系统平台为A系统平台,则可以删除B系统平台所需显示的信息,确保该终端上所显示的信息均为A系统平台所需显示的信息。
本公开实施例提供的技术方案,管理页面设置有界面元素的样式配置入口,通过该样式配置入口,能够触发展示样式配置页面,进而基于该样式配置页面就能够对界面元素的样式进行配置,提供了一种对已发布界面中界面元素进行配置的方法,无需重新开发就能够对界面元素进行样式配置,提高了界面配置的效率。
图12是根据一示例性实施例示出的一种界面配置装置的框图。参见图12,该装置包括入口展示单元1201,页面展示单元1202、样式配置单元1203和发送单元1204:
入口展示单元1201,被配置为执行展示已发布的界面中至少一个第一界面元素的样式配置入口;
页面展示单元1202,被配置为执行响应于对该样式配置入口的触发操作,展示该至少一个第一界面元素的样式配置页面,该样式配置页面用于对该至少一个第一界面元素的样式进行配置;
样式配置单元1203,被配置为执行基于该样式配置页面,对该至少一个第一界面元素的样式进行配置,得到至少一个第二界面元素;
发送单元1204,被配置为执行基于该至少一个第二界面元素,向服务器发送界面发布请求,该界面发布请求用于请求基于该至少一个第二界面元素对该界面进行发布。
本公开实施例提供的技术方案,通过界面元素的样式配置入口,能够触发展示样式配置页面,进而基于该样式配置页面就能够对界面元素的样式进行配置,提供了一种对已发布界面中界面元素进行配置的方法,无需重新开发就能够对界面元素进行样式配置,提高了界面配置的效率。
在一些实施例中,该页面展示单元1202,包括:
发送子单元,被配置为执行响应于对该样式配置入口的触发操作,向该服务器发送页面展示请求,该页面展示请求用于请求该至少一个第一界面元素的样式配置页面;
展示子单元,被配置为执行接收该服务器基于该页面展示请求返回的该样式配置页面的内容,基于该样式配置页面的内容,展示该至少一个第一界面元素的样式配置页面。
在一些实施例中,该展示子单元,被配置为执行下述至少一项:
接收该服务器基于该页面展示请求返回的可配置元素,在所展示的样式配置页面中,展示该可配置元素,该可配置元素用于表示该已发布的界面中允许进行样式配置的界面元素;
接收该服务器基于该页面展示请求返回的第一样式描述文件,基于该第一样式描述文件,在所展示的样式配置页面中,展示该至少一个第一界面元素,该第一样式描述文件为用于描述该至少一个第一界面元素的文件。
在一些实施例中,该样式配置单元1203,被配置为执行:
响应于对该至少一个第一界面元素的样式配置操作,基于所配置的样式,在该样式配置页面中展示该至少一个第二界面元素。
在一些实施例中,该样式配置单元1203,被配置为执行:
基于对该至少一个第一界面元素的样式配置操作,向服务器发送样式配置请求,该样式配置请求用于请求获取该至少一个第二界面元素;
接收该服务器基于该样式配置请求返回的第二样式描述文件,基于该第二样式描述文件,在该样式配置页面中展示该至少一个第二界面元素,该第二样式描述文件为用于描述该至少一个第二界面元素的文件。
在一些实施例中,样式描述文件由该服务器基于目标应用客户端获取到,该目标应用客户端用于基于对应的配置文件对该界面进行渲染,从渲染得到的界面中获取该界面的样式信息,基于该样式信息生成该样式描述文件,该配置文件为用于指示界面中界面元素的样式的文件,该样式信息用于指示界面中界面元素的样式。
在一些实施例中,该目标应用客户端还用于基于截图或录屏的方式,获取该界面的样式信息。
在一些实施例中,该样式配置单元1203,被配置为执行:
响应于对任一个第一界面元素的触发操作,展示该第一界面元素的至少一个样式设置控件,该至少一个样式设置控件用于对该第一界面元素的样式进行配置;
基于该至少一个样式设置控件,对该第一界面元素的样式进行配置,得到该第一界面元素对应的第二界面元素。
在一些实施例中,该样式配置单元1203,被配置为执行下述至少一项:
响应于对该至少一个第一界面元素的标题样式配置操作,基于所配置的标题样式,在该样式配置页面中展示该至少一个第二界面元素;
响应于对该至少一个第一界面元素的图标样式配置操作,基于所配置的图标样式,在该样式配置页面中展示该至少一个第二界面元素;
响应于对该至少一个第一界面元素的控件样式配置操作,基于所配置的控件样式,在该样式配置页面中展示该至少一个第二界面元素。
在一些实施例中,第一界面元素的样式包括该第一界面元素的形状、该第一界面元素的大小、该第一界面元素的颜色、该第一界面元素的边距以及该第一界面元素的文字样式中的至少一项。
需要说明的是:上述实施例提供的界面配置装置在界面配置时,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将设备的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。另外,上述实施例提供的界面配置装置与界面配置方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。
本公开实施例提供的计算机设备可提供为一种终端。图13示出了本公开一个示例性实施例提供的终端1300的结构框图。该终端1300可以是:智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III,动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV,动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端1300还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。
通常,终端1300包括有:处理器1301和存储器1302。
处理器1301可以包括一个或多个处理核心,比如4核心处理器、8核心处理器等。处理器1301可以采用DSP(Digital Signal Processing,数字信号处理)、FPGA(Field-Programmable Gate Array,现场可编程门阵列)、PLA(Programmable Logic Array,可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1301也可以包括主处理器和协处理器,主处理器是用于对在唤醒状态下的数据进行处理的处理器,也称CPU(Central ProcessingUnit,中央处理器);协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中,处理器1301可以集成有GPU(Graphics Processing Unit,图像处理器),GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中,处理器1301还可以包括AI(Artificial Intelligence,人工智能)处理器,该AI处理器用于处理有关机器学习的计算操作。
存储器1302可以包括一个或多个计算机可读存储介质,该计算机可读存储介质可以是非暂态的。存储器1302还可包括高速随机存取存储器,以及非易失性存储器,比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中,存储器1302中的非暂态的计算机可读存储介质用于存储至少一个程序代码,该至少一个程序代码用于被处理器1301所执行以实现本公开中方法实施例提供的界面配置方法中终端执行的过程。
在一些实施例中,终端1300还可选包括有:外围设备接口1303和至少一个外围设备。处理器1301、存储器1302和外围设备接口1303之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1303相连。具体地,外围设备包括:射频电路1304、显示屏1305、摄像头组件1306、音频电路1307、定位组件1308和电源1309中的至少一种。
外围设备接口1303可被用于将I/O(Input /Output,输入/输出)相关的至少一个外围设备连接到处理器1301和存储器1302。在一些实施例中,处理器1301、存储器1302和外围设备接口1303被集成在同一芯片或电路板上;在一些其他实施例中,处理器1301、存储器1302和外围设备接口1303中的任意一个或两个可以在单独的芯片或电路板上实现,本实施例对此不加以限定。
射频电路1304用于接收和发射RF(Radio Frequency,射频)信号,也称电磁信号。射频电路1304通过电磁信号与通信网络以及其他通信设备进行通信。射频电路1304将电信号转换为电磁信号进行发送,或者,将接收到的电磁信号转换为电信号。可选地,射频电路1304包括:天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路1304可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于:城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity,无线保真)网络。在一些实施例中,射频电路1304还可以包括NFC(Near Field Communication,近距离无线通信)有关的电路,本公开对此不加以限定。
显示屏1305用于显示UI(User Interface,用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏1305是触摸显示屏时,显示屏1305还具有采集在显示屏1305的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器1301进行处理。此时,显示屏1305还可以用于提供虚拟按钮和/或虚拟键盘,也称软按钮和/或软键盘。在一些实施例中,显示屏1305可以为一个,设置在终端1300的前面板;在另一些实施例中,显示屏1305可以为至少两个,分别设置在终端1300的不同表面或呈折叠设计;在另一些实施例中,显示屏1305可以是柔性显示屏,设置在终端1300的弯曲表面上或折叠面上。甚至,显示屏1305还可以设置成非矩形的不规则图形,也即异形屏。显示屏1305可以采用LCD(Liquid Crystal Display,液晶显示屏)、OLED(Organic Light-EmittingDiode,有机发光二极管)等材质制备。
摄像头组件1306用于采集图像或视频。可选地,摄像头组件1306包括前置摄像头和后置摄像头。通常,前置摄像头设置在终端的前面板,后置摄像头设置在终端的背面。在一些实施例中,后置摄像头为至少两个,分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种,以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality,虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中,摄像头组件1306还可以包括闪光灯。闪光灯可以是单色温闪光灯,也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合,可以用于不同色温下的光线补偿。
音频电路1307可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波,并将声波转换为电信号输入至处理器1301进行处理,或者输入至射频电路1304以实现语音通信。出于立体声采集或降噪的目的,麦克风可以为多个,分别设置在终端1300的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器1301或射频电路1304的电信号转换为声波。扬声器可以是传统的薄膜扬声器,也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时,不仅可以将电信号转换为人类可听见的声波,也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中,音频电路1307还可以包括耳机插孔。
定位组件1308用于定位终端1300的当前地理位置,以实现导航或LBS(LocationBased Service,基于位置的服务)。定位组件1308可以是基于美国的GPS(GlobalPositioning System,全球定位系统)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。
电源1309用于为终端1300中的各个组件进行供电。电源1309可以是交流电、直流电、一次性电池或可充电电池。当电源1309包括可充电电池时,该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。
在一些实施例中,终端1300还包括有一个或多个传感器1310。该一个或多个传感器1310包括但不限于:加速度传感器1311、陀螺仪传感器1313、压力传感器1313、指纹传感器1314、光学传感器1315以及接近传感器1316。
加速度传感器1311可以检测以终端1300建立的坐标系的三个坐标轴上的加速度大小。比如,加速度传感器1311可以用于检测重力加速度在三个坐标轴上的分量。处理器1301可以根据加速度传感器1311采集的重力加速度信号,控制显示屏1305以横向视图或纵向视图进行用户界面的显示。加速度传感器1311还可以用于游戏或者用户的运动数据的采集。
陀螺仪传感器1312可以检测终端1300的机体方向及转动角度,陀螺仪传感器1312可以与加速度传感器1311协同采集用户对终端1300的3D动作。处理器1301根据陀螺仪传感器1312采集的数据,可以实现如下功能:动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。
压力传感器1313可以设置在终端1300的侧边框和/或显示屏1305的下层。当压力传感器1313设置在终端1300的侧边框时,可以检测用户对终端1300的握持信号,由处理器1301根据压力传感器1313采集的握持信号进行左右手识别或快捷操作。当压力传感器1313设置在显示屏1305的下层时,由处理器1301根据用户对显示屏1305的压力操作,实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。
指纹传感器1314用于采集用户的指纹,由处理器1301根据指纹传感器1314采集到的指纹识别用户的身份,或者,由指纹传感器1314根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时,由处理器1301授权该用户执行相关的敏感操作,该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器1314可以被设置在终端1300的正面、背面或侧面。当终端1300上设置有物理按键或厂商Logo时,指纹传感器1314可以与物理按键或厂商Logo集成在一起。
光学传感器1315用于采集环境光强度。在一个实施例中,处理器1301可以根据光学传感器1315采集的环境光强度,控制显示屏1305的显示亮度。具体地,当环境光强度较高时,调高显示屏1305的显示亮度;当环境光强度较低时,调低显示屏1305的显示亮度。在另一个实施例中,处理器1301还可以根据光学传感器1315采集的环境光强度,动态调整摄像头组件1306的拍摄参数。
接近传感器1316,也称距离传感器,通常设置在终端1300的前面板。接近传感器1316用于采集用户与终端1300的正面之间的距离。在一个实施例中,当接近传感器1316检测到用户与终端1300的正面之间的距离逐渐变小时,由处理器1301控制显示屏1305从亮屏状态切换为息屏状态;当接近传感器1316检测到用户与终端1300的正面之间的距离逐渐变大时,由处理器1301控制显示屏1305从息屏状态切换为亮屏状态。
本领域技术人员可以理解,图13中示出的结构并不构成对终端1300的限定,可以包括比图示更多或更少的组件,或者组合某些组件,或者采用不同的组件布置。
本公开实施例提供的计算机设备可提供为一种服务器。图14是根据一示例性实施例示出的一种服务器的框图,该服务器1400可因配置或性能不同而产生比较大的差异,可以包括一个或多个处理器(Central Processing Units,CPU)1401和一个或多个的存储器1402,其中,该一个或多个存储器1402中存储有至少一条程序代码,该至少一条程序代码由该一个或多个处理器1401加载并执行以实现上述各个方法实施例提供的界面配置方法中服务器执行的过程。当然,该服务器1400还可以具有有线或无线网络接口、键盘以及输入输出接口等部件,以便进行输入输出,该服务器1400还可以包括其他用于实现设备功能的部件,在此不做赘述。
在示例性实施例中,还提供了一种包括程序代码的计算机可读存储介质,例如包括程序代码的存储器1302或存储器1402,上述程序代码可由终端1300的处理器1301或服务器1400的处理器1401执行以完成上述界面配置方法。可选地,计算机可读存储介质可以是ROM(Read-Only Memory,只读内存)、RAM(Random Access Memory,随机存取存储器)、CD-ROM(Compact-Disc Read-Only Memory,只读光盘)、磁带、软盘和光数据存储设备等。
在示例性实施例中,还提供了一种计算机程序产品,包括计算机程序,该计算机程序被处理器执行时实现上述的界面配置方法。
在一些实施例中,本公开实施例所涉及的计算机程序可被部署在一个计算机设备上执行,或者在位于一个地点的多个计算机设备上执行,又或者,在分布在多个地点且通过通信网络互连的多个计算机设备上执行,分布在多个地点且通过通信网络互连的多个计算机设备可以组成区块链系统。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本公开的真正范围和精神由下面的权利要求指出。
应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。
Claims (14)
1.一种界面配置方法,其特征在于,所述方法包括:
在管理页面中,展示已发布的界面中至少一个第一界面元素的样式配置入口,所述管理页面用于对已发布的界面进行管理;
响应于对所述样式配置入口的触发操作,展示所述至少一个第一界面元素的样式配置页面,基于服务器所发送的第一样式描述文件,在所述样式配置页面中展示所述至少一个第一界面元素,所述样式配置页面用于对所述至少一个第一界面元素的样式进行配置,所述第一界面元素表示待进行样式配置的界面元素,所述第一样式描述文件用于描述所述至少一个第一界面元素的样式;所述第一界面元素的样式包括所述第一界面元素的形状、所述第一界面元素的大小、所述第一界面元素的颜色、所述第一界面元素的边距以及所述第一界面元素的文字样式中的至少一项;
响应于在所述样式配置页面中对所述至少一个第一界面元素的样式配置操作,向所述服务器发送样式配置请求,所述样式配置请求用于请求获取至少一个第二界面元素,所述样式配置请求携带所述样式配置操作所调整的样式参数以及对应的参数值,所述第二界面元素表示经样式配置得到的界面元素;
接收所述服务器基于所述样式配置请求返回的第二样式描述文件,基于所述第二样式描述文件,在所述样式配置页面中展示所述至少一个第二界面元素,所述第二样式描述文件用于描述所述至少一个第二界面元素的样式;其中,所述第一样式描述文件和所述第二样式描述文件由所述服务器基于目标应用客户端获取到,所述目标应用客户端用于基于对应的配置文件对所述界面进行渲染,从渲染得到的界面中获取所述界面的样式信息,基于所述样式信息生成样式描述文件,所述配置文件为用于指示界面中界面元素的样式的文件,所述样式信息用于指示界面中界面元素的样式;
基于所述至少一个第二界面元素,向服务器发送界面发布请求,所述界面发布请求用于请求基于所述至少一个第二界面元素对所述界面进行发布。
2.根据权利要求1所述的界面配置方法,其特征在于,所述响应于对所述样式配置入口的触发操作,展示所述至少一个第一界面元素的样式配置页面包括:
响应于对所述样式配置入口的触发操作,向所述服务器发送页面展示请求,所述页面展示请求用于请求获取所述至少一个第一界面元素的样式配置页面的内容;
接收所述服务器基于所述页面展示请求返回的所述样式配置页面的内容,基于所述样式配置页面的内容,展示所述至少一个第一界面元素的样式配置页面。
3.根据权利要求1所述的界面配置方法,其特征在于,所述方法还包括:
接收所述服务器所发送的可配置元素,在所展示的样式配置页面中,展示所述可配置元素,所述可配置元素用于表示所述已发布的界面中允许进行样式配置的界面元素。
4.根据权利要求1所述的界面配置方法,其特征在于,所述目标应用客户端还用于基于截图或录屏的方式,获取所述界面的样式信息。
5.根据权利要求1所述的界面配置方法,其特征在于,所述响应于在所述样式配置页面中对所述至少一个第一界面元素的样式配置操作,对所述至少一个第一界面元素的样式进行配置包括:
响应于对任一个第一界面元素的触发操作,展示所述第一界面元素的至少一个样式设置控件,所述至少一个样式设置控件用于对所述第一界面元素的样式进行配置;
基于所述至少一个样式设置控件,对所述第一界面元素的样式进行配置。
6.根据权利要求1所述的界面配置方法,其特征在于,所述响应于在所述样式配置页面中对所述至少一个第一界面元素的样式配置操作,对所述至少一个第一界面元素的样式进行配置包括下述至少一项:
响应于对所述至少一个第一界面元素的标题样式配置操作,基于所配置的标题样式,在所述样式配置页面中展示所述至少一个第二界面元素;
响应于对所述至少一个第一界面元素的图标样式配置操作,基于所配置的图标样式,在所述样式配置页面中展示所述至少一个第二界面元素;
响应于对所述至少一个第一界面元素的控件样式配置操作,基于所配置的控件样式,在所述样式配置页面中展示所述至少一个第二界面元素。
7.一种界面配置装置,其特征在于,所述装置包括:
入口展示单元,被配置为执行在管理页面中,展示已发布的界面中至少一个第一界面元素的样式配置入口,所述管理页面用于对已发布的界面进行管理;
页面展示单元,被配置为执行响应于对所述样式配置入口的触发操作,展示所述至少一个第一界面元素的样式配置页面,基于服务器所发送的第一样式描述文件,在所述样式配置页面中展示所述至少一个第一界面元素,所述样式配置页面用于对所述至少一个第一界面元素的样式进行配置,所述第一界面元素表示待进行样式配置的界面元素,所述第一样式描述文件用于描述所述至少一个第一界面元素的样式;所述第一界面元素的样式包括所述第一界面元素的形状、所述第一界面元素的大小、所述第一界面元素的颜色、所述第一界面元素的边距以及所述第一界面元素的文字样式中的至少一项;
样式配置单元,被配置为执行响应于在所述样式配置页面中对所述至少一个第一界面元素的样式配置操作,向所述服务器发送样式配置请求,所述样式配置请求用于请求获取至少一个第二界面元素,所述样式配置请求携带所述样式配置操作所调整的样式参数以及对应的参数值,所述第二界面元素表示经样式配置得到的界面元素;
接收所述服务器基于所述样式配置请求返回的第二样式描述文件,基于所述第二样式描述文件,在所述样式配置页面中展示所述至少一个第二界面元素,所述第二样式描述文件用于描述所述至少一个第二界面元素的样式;其中,所述第一样式描述文件和所述第二样式描述文件由所述服务器基于目标应用客户端获取到,所述目标应用客户端用于基于对应的配置文件对所述界面进行渲染,从渲染得到的界面中获取所述界面的样式信息,基于所述样式信息生成样式描述文件,所述配置文件为用于指示界面中界面元素的样式的文件,所述样式信息用于指示界面中界面元素的样式;
发送单元,被配置为执行基于所述至少一个第二界面元素,向服务器发送界面发布请求,所述界面发布请求用于请求基于所述至少一个第二界面元素对所述界面进行发布。
8.根据权利要求7所述的界面配置装置,其特征在于,所述页面展示单元,包括:
发送子单元,被配置为执行响应于对所述样式配置入口的触发操作,向所述服务器发送页面展示请求,所述页面展示请求用于请求获取所述至少一个第一界面元素的样式配置页面的内容;
展示子单元,被配置为执行接收所述服务器基于所述页面展示请求返回的所述样式配置页面的内容,基于所述样式配置页面的内容,展示所述至少一个第一界面元素的样式配置页面。
9.根据权利要求7所述的界面配置装置,其特征在于,所述页面展示单元,还被配置为执行:
接收所述服务器所发送的可配置元素,在所展示的样式配置页面中,展示所述可配置元素,所述可配置元素用于表示所述已发布的界面中允许进行样式配置的界面元素。
10.根据权利要求7所述的界面配置装置,其特征在于,所述目标应用客户端还用于基于截图或录屏的方式,获取所述界面的样式信息。
11.根据权利要求7所述的界面配置装置,其特征在于,所述样式配置单元,被配置为执行:
响应于对任一个第一界面元素的触发操作,展示所述第一界面元素的至少一个样式设置控件,所述至少一个样式设置控件用于对所述第一界面元素的样式进行配置;
基于所述至少一个样式设置控件,对所述第一界面元素的样式进行配置。
12.根据权利要求7所述的界面配置装置,其特征在于,所述样式配置单元,被配置为执行下述至少一项:
响应于对所述至少一个第一界面元素的标题样式配置操作,基于所配置的标题样式,在所述样式配置页面中展示所述至少一个第二界面元素;
响应于对所述至少一个第一界面元素的图标样式配置操作,基于所配置的图标样式,在所述样式配置页面中展示所述至少一个第二界面元素;
响应于对所述至少一个第一界面元素的控件样式配置操作,基于所配置的控件样式,在所述样式配置页面中展示所述至少一个第二界面元素。
13.一种计算机设备,其特征在于,所述计算机设备包括:
一个或多个处理器;
用于存储所述处理器可执行程序代码的存储器;
其中,所述处理器被配置为执行所述程序代码,以实现如权利要求1至6中任一项所述的界面配置方法。
14.一种计算机可读存储介质,其特征在于,当所述计算机可读存储介质中的程序代码由计算机设备的处理器执行时,使得计算机设备能够执行如权利要求1至6中任一项所述的界面配置方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111037666.0A CN113467663B (zh) | 2021-09-06 | 2021-09-06 | 界面配置方法、装置、计算机设备及介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111037666.0A CN113467663B (zh) | 2021-09-06 | 2021-09-06 | 界面配置方法、装置、计算机设备及介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113467663A CN113467663A (zh) | 2021-10-01 |
CN113467663B true CN113467663B (zh) | 2023-09-05 |
Family
ID=77864659
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111037666.0A Active CN113467663B (zh) | 2021-09-06 | 2021-09-06 | 界面配置方法、装置、计算机设备及介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113467663B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113992928A (zh) * | 2021-10-25 | 2022-01-28 | 北京达佳互联信息技术有限公司 | 直播间展示方法、装置、电子设备及存储介质 |
Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105808248A (zh) * | 2016-03-03 | 2016-07-27 | 北京旷视科技有限公司 | 生成应用程序的界面的方法及装置 |
US9626080B1 (en) * | 2013-12-19 | 2017-04-18 | EMC IP Holding Company LLC | Style configuration mode |
CN108846087A (zh) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | 一种页面渲染方法、装置、终端及服务器 |
CN110502308A (zh) * | 2019-08-28 | 2019-11-26 | 广州酷狗计算机科技有限公司 | 页面样式切换方法、装置、计算机设备及存储介质 |
CN110841285A (zh) * | 2019-11-12 | 2020-02-28 | 腾讯科技(深圳)有限公司 | 界面元素的显示方法、装置、计算机设备及存储介质 |
CN111814426A (zh) * | 2020-07-20 | 2020-10-23 | 腾讯科技(深圳)有限公司 | 问卷页面配置方法、装置、计算机设备和存储介质 |
CN112000336A (zh) * | 2020-08-05 | 2020-11-27 | 上海连尚网络科技有限公司 | 界面的渲染方法、电子设备及计算机可读存储介质 |
CN112783783A (zh) * | 2021-01-29 | 2021-05-11 | 广州繁星互娱信息科技有限公司 | 网页埋点方法、装置、设备及可读存储介质 |
CN113268693A (zh) * | 2021-05-21 | 2021-08-17 | 北京大米科技有限公司 | 样式配置方法、装置、存储介质及电子设备 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10620797B2 (en) * | 2012-06-29 | 2020-04-14 | Spotify Ab | Systems and methods for multi-context media control and playback |
-
2021
- 2021-09-06 CN CN202111037666.0A patent/CN113467663B/zh active Active
Patent Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US9626080B1 (en) * | 2013-12-19 | 2017-04-18 | EMC IP Holding Company LLC | Style configuration mode |
CN105808248A (zh) * | 2016-03-03 | 2016-07-27 | 北京旷视科技有限公司 | 生成应用程序的界面的方法及装置 |
CN108846087A (zh) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | 一种页面渲染方法、装置、终端及服务器 |
CN110502308A (zh) * | 2019-08-28 | 2019-11-26 | 广州酷狗计算机科技有限公司 | 页面样式切换方法、装置、计算机设备及存储介质 |
CN110841285A (zh) * | 2019-11-12 | 2020-02-28 | 腾讯科技(深圳)有限公司 | 界面元素的显示方法、装置、计算机设备及存储介质 |
CN111814426A (zh) * | 2020-07-20 | 2020-10-23 | 腾讯科技(深圳)有限公司 | 问卷页面配置方法、装置、计算机设备和存储介质 |
CN112000336A (zh) * | 2020-08-05 | 2020-11-27 | 上海连尚网络科技有限公司 | 界面的渲染方法、电子设备及计算机可读存储介质 |
CN112783783A (zh) * | 2021-01-29 | 2021-05-11 | 广州繁星互娱信息科技有限公司 | 网页埋点方法、装置、设备及可读存储介质 |
CN113268693A (zh) * | 2021-05-21 | 2021-08-17 | 北京大米科技有限公司 | 样式配置方法、装置、存储介质及电子设备 |
Also Published As
Publication number | Publication date |
---|---|
CN113467663A (zh) | 2021-10-01 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108415705B (zh) | 网页生成方法、装置、存储介质及设备 | |
CN107885533B (zh) | 管理组件代码的方法及装置 | |
CN109327608B (zh) | 歌曲分享的方法、终端、服务器和系统 | |
CN110262788B (zh) | 页面配置信息确定方法、装置、计算机设备及存储介质 | |
CN108959361B (zh) | 表单管理的方法和装置 | |
CN110321126B (zh) | 生成页面代码的方法和装置 | |
CN112420217B (zh) | 消息推送方法、装置、设备及存储介质 | |
US20220244930A1 (en) | Application porting method and apparatus, device, and medium | |
CN112181576A (zh) | 表单处理方法、装置、终端及存储介质 | |
CN112000331A (zh) | 页面渲染方法、装置、电子设备及存储介质 | |
CN111459466B (zh) | 代码生成方法、装置、设备及存储介质 | |
CN112257006A (zh) | 页面信息的配置方法、装置、设备及计算机可读存储介质 | |
CN112749362A (zh) | 控件创建方法、装置、设备及存储介质 | |
CN111737100A (zh) | 数据获取方法、装置、设备及存储介质 | |
CN113190362A (zh) | 服务调用方法、装置、计算机设备及存储介质 | |
CN111191176A (zh) | 网站内容更新方法、装置、终端及存储介质 | |
CN108038232B (zh) | 网页编辑方法、装置和系统、存储介质 | |
CN113467663B (zh) | 界面配置方法、装置、计算机设备及介质 | |
CN113190307A (zh) | 控件添加方法、装置、设备及存储介质 | |
CN113204302A (zh) | 基于虚拟机器人的操作方法、装置、设备及存储介质 | |
CN112230910A (zh) | 嵌入型程序的页面生成方法、装置、设备及存储介质 | |
CN114911478A (zh) | 页面创建方法、装置、电子设备及存储介质 | |
CN114329292A (zh) | 资源信息的配置方法、装置、电子设备以及存储介质 | |
CN111294320B (zh) | 数据转换的方法和装置 | |
CN110569064B (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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |