CN115079907A - 一种应用程序的显示方法及电子设备 - Google Patents
一种应用程序的显示方法及电子设备 Download PDFInfo
- Publication number
- CN115079907A CN115079907A CN202110262314.9A CN202110262314A CN115079907A CN 115079907 A CN115079907 A CN 115079907A CN 202110262314 A CN202110262314 A CN 202110262314A CN 115079907 A CN115079907 A CN 115079907A
- Authority
- CN
- China
- Prior art keywords
- layout
- electronic device
- message
- interface
- parameter
- 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 78
- 230000015654 memory Effects 0.000 claims description 38
- 238000004590 computer program Methods 0.000 claims description 25
- 238000003860 storage Methods 0.000 claims description 10
- 230000014509 gene expression Effects 0.000 description 34
- 238000004891 communication Methods 0.000 description 26
- 238000013461 design Methods 0.000 description 25
- 238000010586 diagram Methods 0.000 description 19
- 230000006870 function Effects 0.000 description 18
- 238000004364 calculation method Methods 0.000 description 16
- 238000010295 mobile communication Methods 0.000 description 15
- 238000012545 processing Methods 0.000 description 11
- 238000005516 engineering process Methods 0.000 description 10
- 238000011161 development Methods 0.000 description 9
- 238000004458 analytical method Methods 0.000 description 8
- 238000007726 management method Methods 0.000 description 8
- 230000001413 cellular effect Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 6
- 210000000988 bone and bone Anatomy 0.000 description 5
- 230000000694 effects Effects 0.000 description 4
- 229920001621 AMOLED Polymers 0.000 description 3
- 230000001133 acceleration Effects 0.000 description 3
- 238000013500 data storage Methods 0.000 description 3
- 239000000284 extract Substances 0.000 description 3
- 230000003993 interaction Effects 0.000 description 3
- 230000002159 abnormal effect Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 206010044565 Tremor Diseases 0.000 description 1
- 230000003321 amplification Effects 0.000 description 1
- 238000013528 artificial neural network Methods 0.000 description 1
- 230000003416 augmentation Effects 0.000 description 1
- 230000003190 augmentative effect Effects 0.000 description 1
- 230000036772 blood pressure Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 230000005484 gravity Effects 0.000 description 1
- 239000010985 leather Substances 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000001537 neural effect Effects 0.000 description 1
- 238000003199 nucleic acid amplification method Methods 0.000 description 1
- 238000004091 panning Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000010349 pulsation Effects 0.000 description 1
- 239000002096 quantum dot Substances 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 230000002441 reversible effect Effects 0.000 description 1
- 239000004984 smart glass Substances 0.000 description 1
- 230000003238 somatosensory effect Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
- 230000001755 vocal effect Effects 0.000 description 1
Images
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/0483—Interaction with page-structured environments, e.g. book metaphor
-
- 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
-
- 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
-
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
- G06F2203/048—Indexing scheme relating to G06F3/048
- G06F2203/04803—Split screen, i.e. subdividing the display area or the window area into separate subareas
Abstract
一种应用程序的显示方法及电子设备,该方法包括:第一电子设备检测到第一操作;所述第一电子设备根据所述第一操作,向服务器发送第一请求消息,所述第一请求消息中包括第一界面的第一标识,所述第一界面为第一应用程序的界面;所述第一电子设备接收所述服务器发送的与所述第一界面的第一标识相对应的第一布局消息,所述第一布局消息中包括第一参数,所述第一参数与第一电子设备的参数相关;所述第一电子设备根据所述第一布局消息显示所述第一界面。通过本申请的方法,电子设备可以根据自身设备的参数来显示界面,无需按照应用程序中存储的固定尺寸、固定样式的布局来显示界面,从而提高应用程序的显示灵活性,并且提升用户体验。
Description
技术领域
本申请涉及终端技术领域,尤其涉及一种应用程序的显示方法及电子设备。
背景技术
目前,电子设备上的应用程序在下载完成之后,应用程序中可保存布局开发者开发完成的多个布局,比如包括布局1、布局2、布局3…布局N。其中,每一个布局的内容、大小等都是固定的,比如布局1显示可滑动的视频链接,布局2显示5个图标及对应的图标名称,布局3为支持横向滑动的图文列表。
当电子设备向服务器请求布局时,服务器可向客户端下发布局信息,该布局信息中携带对应位置使用的布局的名称。示例性的,电子设备中预先存储开发好的屏幕布局,假设某个屏幕布局中包括布局1、布局2以及布局3。当电子设备向服务器请求该屏幕布局时,服务器向电子设备下发的布局信息可以为如下示例:
{“位置1”:“布局1”,
“位置2”:“布局2”,
“位置3”:“布局3”
}
即布局1、布局2和布局3的位置分别为:位置1放布局1、位置2放布局2、位置3放布局3,例如图1A所示,这样电子设备接收到这三个布局名称之后按照存储的布局将三个布局显示在屏幕的相应位置。
针对目前的这种布局方式,服务器只能在有限的布局集合中选择使用的布局,如果需要新的布局,则需要布局开发者开发一个新的布局,并且需要对应用程序进行更新,这样才能有新的布局。
发明内容
本申请提供一种应用程序的显示方法及电子设备,以提高应用程序的显示灵活性,并且提升用户体验。
第一方面,本申请提供一种应用程序的显示方法,该方法可应用第一电子设备,该方法具体可包括:第一电子设备检测到第一操作;所述第一电子设备根据所述第一操作,向服务器发送第一请求消息,所述第一请求消息中包括第一界面的第一标识,所述第一界面为第一应用程序的界面;所述第一电子设备接收所述服务器发送的与所述第一界面的第一标识相对应的第一布局消息,所述第一布局消息中包括第一参数,所述第一参数与第一电子设备的参数相关;所述第一电子设备根据所述第一布局消息显示所述第一界面。
通过上述技术方案,电子设备可以根据界面的标识向服务器发送请求消息,以使服务器能够基于界面的标识向服务器发送对应的布局消息,并且,布局消息中可以包括与第一电子设备的参数相关的参数,这样电子设备可以根据自身的参数,比如自身屏幕信息来显示界面,无需按照应用程序中存储的固定尺寸、固定样式的布局来显示界面,从而提高应用程序的显示灵活性,并且提升用户体验。
在一种可能的设计中,所述第一参数包括以下参数中的至少一种:控件类型、控件的宽度、控件的高度、控件的边框宽度、页面布局方向、用户界面UI模式、字体缩放比例、控件位置。
通过上述技术方案,电子设备接收到的布局消息中可以包括控件类型(比如,控件为矩形框)、控件样式,例如可包括控件的宽度、高度、边框宽度等,这样电子设备可以根据上述参数来绘制控件。
在一种可能的设计中,所述第一电子设备的参数包括以下参数中的至少一种:屏幕的宽度、屏幕的高度、屏幕的左边距、屏幕的右边距。
通过上述技术方案,电子设备接收到的布局消息中可以包括与电子设备的参数相关的参数,比如电子设备的屏幕宽度、屏幕高度,左右边距等,这样电子设备可以得到与自身设备的屏幕信息相适配的布局消息,从而提升用户体验。
在一种可能的设计中,所述第一电子设备根据所述第一布局消息显示所述第一界面,包括:
所述第一电子设备获取所述第一电子设备的参数;所述第一电子设备根据所述第一布局消息以及所述第一电子设备的参数,得到第二布局消息;所述第一电子设备基于所述第二布局消息显示所述第一界面。
通过上述技术方案,电子设备可以获取与自身设备相关的参数,然后基于获取到的参数对布局消息进行更新,从而得到与自身屏幕信息相匹配的实际布局消息,进而能够基于实际布局消息来显示应用界面。
在一种可能的设计中,所述第一操作为打开第一应用程序的操作或者为对第一应用程序界面中的第一链接的点击操作。
通过上述技术方案,用户可以在打开应用程序时或者在应用程序界面中点击链接,以向服务器发送请求消息,使得服务器下发相应的布局消息。
需要说明的是,第一布局消息的参数中可以包括变量,也可以包括常量(固定数值)。
在一种可能的设计中,所述第一布局消息中还包括第二参数;所述第二参数为变量。所述方法还包括:所述第一电子设备对所述第二参数进行赋值;所述第一电子设备根据所述第二参数得到第二布局消息;所述第一电子设备基于所述第二布局消息显示所述第一界面。
通过上述技术方案,电子设备可以对第二参数进行赋值,然后根据赋值之后的参数来显示用户界面。
在一种可能的设计中,所述第一布局消息中还包括第三参数;所述第三参数为固定数值的参数。所述方法还包括:第二布局消息包括第三参数;所述第一电子设备基于所述第二布局消息显示所述第一界面。
通过上述技术方案,当布局消息中的参数包括固定数值的参数时,电子设备可以根据固定数值来显示用户界面。
第二方面,本申请提供一种应用程序的显示方法,该方法可应用于服务器,该方法具体可包括:服务器接收第一电子设备发送的第一请求消息,所述第一请求消息中包括第一界面的第一标识,所述第一界面为第一应用程序的界面;所述服务器向所述第一电子设备发送与所述第一界面的第一标识相对应的第一布局消息,所述第一布局消息中包括第一参数,所述第一参数与第一电子设备的参数相关。
通过上述技术方案,服务器可以向电子设备下发布局消息,该布局消息中的参数与电子设备的参数相关。这样电子设备在接收到布局消息之后可以根据自身设备的参数得到实际的布局消息,从而根据实际的布局消息进行界面显示。
在一种可能的设计中,所述第一参数包括以下参数中的至少一种:控件类型、控件的宽度、控件的高度、控件的边框宽度、页面布局方向、用户界面UI模式、字体缩放比例、控件位置。
在一种可能的设计中,所述第一电子设备的参数包括以下参数中的至少一种:屏幕的宽度、屏幕的高度、屏幕的左边距、屏幕的右边距。
在一种可能的设计中,所述服务器向所述第一电子设备发送与所述第一界面的第一标识相对应的第一布局消息之前,所述方法还包括:
所述服务器获取所述第一布局消息;所述服务器根据所述第一界面的第一标识将所述第一布局消息预先存储在服务器中。
通过上述技术方案,布局开发者可以预先将开发好的布局上传并保存到服务器中,当电子设备向服务器请求布局时,服务器可以根据界面的标识从保存的布局中获取布局消息,再将布局消息发送给电子设备。
在一种可能的设计中,所述第一布局消息的格式为JavaScript对象简谱JSON格式或者可扩展标记语言XML格式。
通过上述技术方案,布局开发者可以将与设备的屏幕尺寸相关的信息通过表达式或者变量的形式来表示,这样服务器在向不同屏幕类型的电子设备下发布局时,可以向不同屏幕类型的电子设备下发相同的布局,使得不同的电子设备根据自身的屏幕尺寸来动态调整布局,无需针对每一种屏幕类型下发一种布局,这样服务器中无需针对每一种屏幕类型存储布局,能够提高资源利用率。
第三方面,本申请提供一种应用程序的显示方法,该方法可应用于应用程序的显示系统,该方法具体可包括:第一电子设备检测到第一操作;所述第一电子设备根据所述第一操作,向服务器发送第一请求消息,所述第一请求消息中包括第一界面的第一标识,所述第一界面为第一应用程序的界面;服务器接收所述第一电子设备发送的第一请求消息,根据所述第一请求消息生成第一布局消息,所述第一布局消息包括第一布局文本,所述第一布局文本与第一标识相关联;所述服务器向所述第一电子设备发送所述第一布局消息,所述第一布局消息中包括第一参数,所述第一参数与第一电子设备的参数相关;所述第一电子设备接收所述第一布局消息;所述第一电子设备根据所述第一布局消息显示所述第一界面。
在一种可能的设计中,所述第一参数包括以下参数中的至少一种:控件类型、控件的宽度、控件的高度、控件的边框宽度、页面布局方向、用户界面UI模式、字体缩放比例、控件位置。
在一种可能的设计中,所述第一电子设备的参数包括以下参数中的至少一种:屏幕的宽度、屏幕的高度、屏幕的左边距、屏幕的右边距。
在一种可能的设计中,所述服务器向所述第一电子设备发送与所述第一界面的第一标识相对应的第一布局消息之前,所述方法还包括:
所述服务器获取所述第一布局文本;所述服务器根据所述第一标识将所述第一布局文本预先存储在服务器中。
在一种可能的设计中,所述第一布局消息的格式为JavaScript对象简谱JSON格式或者可扩展标记语言XML格式。
在一种可能的设计中,所述方法还包括:
第二电子设备检测到第二操作;所述第二电子设备根据所述第二操作,向服务器发送第三请求消息,所述第三请求消息中包括第二界面的第二标识,第二操作为打开第二电子设备中第一应用程序的操作;服务器接收所述第二电子设备发送的第三请求消息,根据所述第三请求消息生成第三布局消息,所述第三布局消息包括第一布局文本,所述第一布局文本与所述第二标识相关联;所述服务器向所述第二电子设备发送所述第三布局消息,所述第三布局消息中包括第二参数,所述第二参数与第二电子设备的参数相关,所述第二参数与第一参数相同;所述第二电子设备接收所述第三布局消息;所述第二电子设备根据所述第三布局消息显示所述第二界面。
第四方面,本申请还提供一种应用程序的显示系统,该系统可包括:第一电子设备和服务器;
所述第一电子设备,用于检测到第一操作;根据所述第一操作,向服务器发送第一请求消息,所述第一请求消息中包括第一界面的第一标识,所述第一界面为所述第一应用程序的界面;接收所述服务器发送的与所述第一界面的第一标识相对应的第一布局消息,所述第一布局消息中包括第一参数,所述第一参数与第一电子设备的参数相关;根据所述第一布局消息显示所述第一界面;
所述服务器,用于接收所述第一电子设备发送的第一请求消息,并向所述第一电子设备发送与所述第一界面的第一标识相对应的第一布局消息。
在一种可能的设计中,所述系统还包括:第二电子设备;所述第二电子设备,用于检测到第二操作;根据所述第二操作,向服务器发送第三请求消息,所述第三请求消息中包括第二界面的第二标识,第二操作为打开第二电子设备中第一应用程序的操作;接收所述服务器发送的与所述第二界面的第二标识相对应的第三布局消息,所述第三布局消息中包括第二参数,所述第二参数与第二电子设备的参数相关,所述第二参数与第一参数相同;根据所述第三布局消息显示所述第二界面。
第五方面,本申请还提供一种第一电子设备,该第一电子设备包括显示屏;一个或多个处理器;一个或多个存储器;一个或多个传感器;多个应用;以及一个或多个计算机程序;其中所述一个或多个计算机程序被存储在所述一个或多个存储器中,所述一个或多个计算机程序包括指令,当所述指令被所述一个或多个处理器调用执行时,使得所述第一电子设备执行上述第一方面及其第一方面任一可能设计的技术方案。
第六方面,本申请还提供一种第一电子设备,该第一电子设备包括执行第一方面或者第一方面的任意一种可能的设计的方法的模块/单元;这些模块/单元可以通过硬件实现,也可以通过硬件执行相应的软件实现。
第七方面,本申请还提供一种服务器,该服务器包括一个或多个处理器;一个或多个存储器;一个或多个传感器;以及一个或多个计算机程序;其中所述一个或多个计算机程序被存储在所述一个或多个存储器中,所述一个或多个计算机程序包括指令,当所述指令被所述一个或多个处理器调用执行时,使得所述服务器执行上述第二方面及其第二方面任一可能设计的技术方案。
第八方面,本申请还提供一种服务器,该服务器包括执行第二方面或者第二方面的任意一种可能的设计的方法的模块/单元;这些模块/单元可以通过硬件实现,也可以通过硬件执行相应的软件实现。
第九方面,本申请实施例还提供一种芯片,所述芯片与第一电子设备中的存储器耦合,执行本申请实施例第一方面及其第一方面任一可能设计的技术方案;本申请实施例中“耦合”是指两个部件彼此直接或间接地结合。
第十方面,本申请实施例还提供一种芯片,所述芯片与服务器中的存储器耦合,执行本申请实施例第二方面及其第二方面任一可能设计的技术方案;本申请实施例中“耦合”是指两个部件彼此直接或间接地结合。
第十一方面,本申请实施例还提供一种计算机可读存储介质,所述计算机可读存储介质包括计算机程序,当计算机程序在第一电子设备上运行时,使得所述第一电子设备执行本申请实施例第一方面及其第一方面任一可能设计的技术方案。
第十二方面,本申请实施例还提供一种计算机可读存储介质,所述计算机可读存储介质包括计算机程序,当计算机程序在服务器上运行时,使得所述服务器执行本申请实施例第二方面及其第二方面任一可能设计的技术方案。
第十三方面,本申请实施例还提供一种计算机程序产品,当所述计算机程序产品在第一电子设备上运行时,使得所述第一电子设备执行本申请实施例第一方面及其第一方面任一可能设计的技术方案。
第十四方面,本申请实施例还提供一种计算机程序产品,当所述计算机程序产品在服务器上运行时,使得所述服务器执行本申请实施例第二方面及其第二方面任一可能设计的技术方案。
上述第三方面至第十四方面中的各个方面以及各个方面可能达到的技术效果请参照上述针对第一方面、第二方面中的各种可能方案可以达到的技术效果说明,这里不再重复赘述。
附图说明
图1A为本申请实施例提供的一种用户界面示意图;
图1B为本申请实施例提供的一种应用场景示意图;
图1C为本申请实施例提供的一种服务器与客户端的交互示意图;
图2A为本申请实施例提供的一种电子设备的结构示意图;
图2B为本申请实施例的一种基于软件结构的数据流向图;
图3为本申请实施例提供的一种应用程序的显示方法流程图;
图4为本申请实施例提供的一种用户界面示意图;
图5为本申请实施例提供的一种服务器与电子设备的交互示意图;
图6A为本申请实施例提供的另一种应用程序的显示方法流程图;
图6B为本申请实施例提供的又一种应用程序的显示方法流程图;
图7为本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
下面将结合本申请以下实施例中的附图,对本申请实施例中的技术方案进行详尽描述。
目前,电子设备上的应用程序也越来越复杂,如果应用程序出现了新功能,则会提醒用户对应用程序进行更新,当应用程序更新之后才能使用新功能。这种方式可能会出现应用程序下载更新流程过长、业务上线流程缓慢等问题。因此,逐渐出现了动态化技术,该动态化技术在出现新功能时,无需用户更新应用程序,只要重新打开应用程序就可以看到更新后的界面布局。
以下结合应用场景对现有技术中的动态化技术的具体实现方案进行介绍。
如图1B所示,为本申请实施例提供的一种应用场景示意图。在该应用场景中,可包括电子设备(也可以称为:客户端)以及服务器。电子设备可以向服务器请求布局,服务器可以根据电子设备的请求向客户端下发布局。需要说明的是,本申请实施例中的服务器可以为单服务器,也可以指服务器集群,本申请对此不作具体限定。
需要说明的是,在本申请实施例中,电子设备与服务器之间可以基于通信网络进行互联。该通信网络可以是局域网,也可以是通过中继(relay)设备转接的广域网。当该通信网络为局域网时,示例性的,该通信网络可以是无线保真(wireless fidelity,Wi-Fi)热点网络、无线保真点对点(wireless fidelity-peer to peer,Wi-Fi P2P)网络、蓝牙网络、zigbee网络或近距离无线通信技术(near field communication,NFC)网络等近距离通信网络。当该通信网络为广域网时,示例性的,该通信网络可以是第三代移动通信技术(3rd-generation wireless telephone technology,3G)网络、第四代移动通信技术(the 4thgeneration mobile communication technology,4G)网络、第五代移动通信技术(5th-generation mobile communication technology,5G)网络、未来通信技术,如第六代(6thgeneration,6G)网络、未来演进的公共陆地移动网络(public land mobile network,PLMN)或因特网等。
具体的,现有技术的应用程序的显示方法可包括如下方案:布局开发者针对不同屏幕开发不同的布局,然后服务器保存不同屏幕的不同布局。在图1B所示示意图中,电子设备,比如手机上可以安装多个应用程序,当用户在打开应用程序或者在应用程序中打开某个页面时,可以向服务器发送布局请求消息。其中,该布局请求消息中可以携带所述电子设备的屏幕类型。
相应的,当服务器接收到电子设备发送的布局请求消息之后,可以向电子设备下发与所述电子设备的屏幕类型相对应的布局文件。即针对不同的屏幕类型服务器会下发不同的布局文件。示例性的,参阅图1C所示,假设电子设备1的屏幕类型为屏幕1,电子设备2的屏幕类型为屏幕2,电子设备3的屏幕类型为屏幕3,则服务器可以向电子设备1下发与屏幕1相对应的布局文件,比如布局1,然后向电子设备2下发与屏幕2相对应的布局2,向电子设备3下发与屏幕3相对应的布局3。应理解,布局1、布局2、布局3的尺寸大小等都是布局开发者预先配置好的,即尺寸大小都是固定值。
而近年来电子设备的屏幕类型越来越多,例如挖孔屏、折叠屏、曲面屏等,对于不同类型的屏幕需要开发不同的布局以适配不同的屏幕。如果按照上述方案的应用程序的显示方法,则需要针对不同屏幕开发不同的布局,这样开发工作量比较大,同时服务器也会占用比较大的存储空间。
有鉴于此,本申请实施例提供一种新的应用程序的显示方法,在该方法中,服务器可以向不同的电子设备下发相同的布局内容。其中,布局内容中可以包括屏幕上的元素的样式信息,并且样式信息可以用变量的形式来表示。然后当电子设备接收到布局内容之后,可根据自身的屏幕信息对布局内容中的变量进行赋值,这样可以实现通过一个布局适配多种不同屏幕的方案,从而不需要针对每一种屏幕开发一种布局,能够降低开发成本,同时能够提高服务器的空间利用率。
本申请实施例涉及的应用,为能够实现某项或多项特定功能的软件程序。通常,电子设备中可以安装多个应用。比如,相机应用、短信应用、邮箱应用、视频应用、音乐应用等。下文中提到的应用,可以是电子设备出厂时已安装的应用,也可以是用户在使用电子设备的过程中从网络下载或其他电子设备获取的应用。
需要说明的是,本申请实施例提供的应用程序的显示方法,可以适用于具有显示屏的任何电子设备,诸如手机、平板电脑、可穿戴设备(例如,手表、手环、智能眼镜、智能头盔等)、车载设备、增强现实(augmented reality,AR)/虚拟现实(virtual reality,VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer,UMPC)、上网本、个人数字助理(personal digital assistant,PDA)等,本申请实施例不作限定。并且,电子设备的示例性实施例包括但不限于搭载鸿蒙或者其它操作系统的电子设备。
下面以手机为例,对图1A所示应用场景中的电子设备(以下也可以称为:电子设备)的结构进行介绍。
如图2A所示,手机100可以包括处理器110,外部存储器接口120,内部存储器121,通用串行总线(universal serial bus,USB)接口130,充电管理模块140,电源管理模块141,电池142,天线1,天线2,移动通信模块150,无线通信模块160,音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,传感器模块180,按键190,马达191,指示器192,摄像头193,显示屏194,以及用户标识模块(subscriber identification module,SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A,陀螺仪传感器180B,气压传感器180C,磁传感器180D,加速度传感器180E,距离传感器180F,接近光传感器180G,指纹传感器180H,温度传感器180J,触摸传感器180K,环境光传感器180L,骨传导传感器180M等。
处理器110可以包括一个或多个处理单元,例如:处理器110可以包括应用处理器(application processor,AP),调制解调处理器,图形处理器(graphics processingunit,GPU),图像信号处理器(image signal processor,ISP),控制器,存储器,视频编解码器,数字信号处理器(digital signal processor,DSP),基带处理器,和/或神经网络处理器(neural-network processing unit,NPU)等。其中,不同的处理单元可以是独立的器件,也可以集成在一个或多个处理器中。其中,控制器可以是手机100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号,产生操作控制信号,完成取指令和执行指令的控制。处理器110中还可以设置存储器,用于存储指令和数据。在一些实施例中,处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据,可从所述存储器中直接调用。避免了重复存取,减少了处理器110的等待时间,因而提高了系统的效率。
USB接口130是符合USB标准规范的接口,具体可以是Mini USB接口,Micro USB接口,USB Type C接口等。USB接口130可以用于连接充电器为手机100充电,也可以用于手机100与外围设备之间传输数据。充电管理模块140用于从充电器接收充电输入。电源管理模块141用于连接电池142,充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入,为处理器110,内部存储器121,外部存储器,显示屏194,摄像头193,和无线通信模块160等供电。
手机100的无线通信功能可以通过天线1,天线2,移动通信模块150,无线通信模块160,调制解调处理器以及基带处理器等实现。天线1和天线2用于发射和接收电磁波信号。手机100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用,以提高天线的利用率。例如:可以将天线1复用为无线局域网的分集天线。在另外一些实施例中,天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在手机100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器,开关,功率放大器,低噪声放大器(lownoise amplifier,LNA)等。移动通信模块150可以由天线1接收电磁波,并对接收的电磁波进行滤波,放大等处理,传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大,经天线1转为电磁波辐射出去。在一些实施例中,移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中,移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
无线通信模块160可以提供应用在手机100上的包括无线局域网(wireless localarea networks,WLAN)(如Wi-Fi网络),蓝牙(bluetooth,BT),全球导航卫星系统(globalnavigation satellite system,GNSS),调频(frequency modulation,FM),NFC,红外技术(infrared,IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波,将电磁波信号调频以及滤波处理,将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号,对其进行调频,放大,经天线2转为电磁波辐射出去。
在一些实施例中,手机100的天线1和移动通信模块150耦合,天线2和无线通信模块160耦合,使得手机100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications,GSM),通用分组无线服务(general packet radio service,GPRS),码分多址接入(code divisionmultiple access,CDMA),宽带码分多址(wideband code division multiple access,WCDMA),时分码分多址(time-division code division multiple access,TD-SCDMA),长期演进(long term evolution,LTE),5G移动通信系统,未来通信系统,如6G系统等,BT,GNSS,WLAN,NFC,FM和/或IR技术等。所述GNSS可以包括全球卫星定位系统(globalpositioning system,GPS),全球导航卫星系统(global navigation satellite system,GLONASS),北斗卫星导航系统(beidou navigation satellite system,BDS),准天顶卫星系统(quasi-zenith satellite system,QZSS)和/或星基增强系统(satellite basedaugmentation systems,SBAS)。
显示屏194用于显示应用的显示界面等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display,LCD),有机发光二极管(organic light-emitting diode,OLED),有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode的,AMOLED),柔性发光二极管(flex light-emitting diode,FLED),Miniled,MicroLed,Micro-oLed,量子点发光二极管(quantum dotlight emitting diodes,QLED)等。在一些实施例中,手机100可以包括1个或N个显示屏194,N为大于1的正整数。在本申请实施例中,显示屏194可用于显示应用界面。
摄像头193用于捕获静态图像或视频。摄像头193可以包括前置摄像头和后置摄像头。
内部存储器121可以用于存储计算机可执行程序代码,所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令,从而执行手机100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中,存储程序区可存储操作系统,以及至少一个应用程序(例如爱奇艺应用,微信应用等)的软件代码等。存储数据区可存储手机100使用过程中所产生的数据(例如图像、视频等)等。此外,内部存储器121可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件,闪存器件,通用闪存存储器(universal flash storage,UFS)等。
外部存储器接口120可以用于连接外部存储卡,例如Micro SD卡,实现扩展手机100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信,实现数据存储功能。例如将图片,视频等文件保存在外部存储卡中。
手机100可以通过音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,以及应用处理器等实现音频功能。例如音乐播放,录音等。
压力传感器180A用于感受压力信号,可以将压力信号转换成电信号。在一些实施例中,压力传感器180A可以设置于显示屏194。陀螺仪传感器180B可以用于确定手机100的运动姿态。在一些实施例中,可以通过陀螺仪传感器180B确定手机100围绕三个轴(即,x,y和z轴)的角速度。
陀螺仪传感器180B可以用于确定手机100的运动姿态。在一些实施例中,可以通过陀螺仪传感器180B确定手机100围绕三个轴(即,x,y和z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的,当按下快门,陀螺仪传感器180B检测手机100抖动的角度,根据角度计算出镜头模组需要补偿的距离,让镜头通过反向运动抵消手机100的抖动,实现防抖。陀螺仪传感器180B还可以用于导航,体感游戏场景。
气压传感器180C用于测量气压。在一些实施例中,手机100通过气压传感器180C测得的气压值计算海拔高度,辅助定位和导航。磁传感器180D包括霍尔传感器。手机100可以利用磁传感器180D检测翻盖皮套的开合。在一些实施例中,当手机100是翻盖机时,手机100可以根据磁传感器180D检测翻盖的开合。进而根据检测到的皮套的开合状态或翻盖的开合状态,设置翻盖自动解锁等特性。加速度传感器180E可检测手机100在各个方向上(一般为三轴)加速度的大小。当手机100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态,应用于横竖屏切换,计步器等应用。
距离传感器180F,用于测量距离。手机100可以通过红外或激光测量距离。在一些实施例中,拍摄场景,手机100可以利用距离传感器180F测距以实现快速对焦。接近光传感器180G可以包括例如发光二极管(LED)和光检测器,例如光电二极管。发光二极管可以是红外发光二极管。手机100通过发光二极管向外发射红外光。手机100使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时,可以确定手机100附近有物体。当检测到不充分的反射光时,手机100可以确定手机100附近没有物体。手机100可以利用接近光传感器180G检测用户手持手机100贴近耳朵通话,以便自动熄灭屏幕达到省电的目的。接近光传感器180G也可用于皮套模式,口袋模式自动解锁与锁屏。
环境光传感器180L用于感知环境光亮度。手机100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合,检测手机100是否在口袋里,以防误触。指纹传感器180H用于采集指纹。手机100可以利用采集的指纹特性实现指纹解锁,访问应用锁,指纹拍照,指纹接听来电等。
温度传感器180J用于检测温度。在一些实施例中,手机100利用温度传感器180J检测的温度,执行温度处理策略。例如,当温度传感器180J上报的温度超过阈值,手机100执行降低位于温度传感器180J附近的处理器的性能,以便降低功耗实施热保护。在另一些实施例中,当温度低于另一阈值时,手机100对电池142加热,以避免低温导致手机100异常关机。在其他一些实施例中,当温度低于又一阈值时,手机100对电池142的输出电压执行升压,以避免低温导致的异常关机。
触摸传感器180K,也称“触控面板”。触摸传感器180K可以设置于显示屏194,由触摸传感器180K与显示屏194组成触摸屏,也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器,以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中,触摸传感器180K也可以设置于手机100的表面,与显示屏194所处的位置不同。
骨传导传感器180M可以获取振动信号。在一些实施例中,骨传导传感器180M可以获取人体声部振动骨块的振动信号。骨传导传感器180M也可以接触人体脉搏,接收血压跳动信号。
按键190包括开机键,音量键等。按键190可以是机械按键。也可以是触摸式按键。手机100可以接收按键输入,产生与手机100的用户设置以及功能控制有关的键信号输入。马达191可以产生振动提示。马达191可以用于来电振动提示,也可以用于触摸振动反馈。例如,作用于不同应用(例如拍照,音频播放等)的触摸操作,可以对应不同的振动反馈效果。指示器192可以是指示灯,可以用于指示充电状态,电量变化,也可以用于指示消息,未接来电,通知等。SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195,或从SIM卡接口195拔出,实现和手机100的接触和分离。
可以理解的是,图2A所示的部件并不构成对手机的具体限定,手机还可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。以下的实施例中,以图2A所示的手机100为例进行介绍。
上述手机100的软件系统可以采用分层架构,包括事件驱动架构,微核架构,微服务架构,或云架构。本申请实施例以分层架构的Android系统为例,示例性说明手机100的软件结构。
图2B是本申请实施例提供的一种基于软件结构的数据流向图。分层架构将软件分成若干个层,每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中,Android系统从上至下分别为应用程序层,应用程序框架层,安卓运行时(Androidruntime)、系统库、内核层以及硬件层。
以下以应用程序层、应用程序框架层以及内核层为例对本申请实施例中的数据流向过程进行介绍。
其中,应用程序层可以包括一系列应用程序包。如图2B所示,应用程序层内可以安装浏览器,优酷,腾讯视频,地图,爱奇艺,抖音,网易云音乐、第一APP等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface,API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图2B所示,应用程序框架层可以包括布局解析模块、表达式引擎计算模块、屏幕信息获取模块、布局绘制模块。当然,应用程序框架层中还可以包括显示策略服务、电源管理服务(power manager service,PMS)、显示管理服务(display manager service,DMS)、活动管理器、窗口管理器,内容提供器,视图系统,资源管理器,通知管理器等。
其中,布局解析模块,用于对服务器下发的布局文本进行解析,识别布局文本中的表达式。
表达式引擎计算模块,用于对布局文本中的表达式进行赋值并计算结果。该模块可以直接在布局模板中调整界面尺寸,以适配不同的电子设备。
屏幕信息获取模块,用于获取电子设备的设备屏幕信息,比如屏幕类型、屏幕尺寸等。
布局绘制模块,用于根据表达式引擎计算模块计算出的结果对界面进行用户界面(user interface,UI)绘制。
内核层是电子设备的硬件和软件之间的层。内核层至少包含显示驱动,传感器驱动、摄像头驱动,音频驱动等,用于驱动硬件层中的硬件。
在本申请实施例中,应用程序层中的应用(比如,第一APP)可向第一APP对应的服务器请求布局,当服务器接收到电子设备的请求之后,服务器中的布局管理模块可以向电子设备的应用程序框架层下发布局文本,电子设备接收到该布局文本之后,应用程序框架层中的布局解析模块可对服务器下发的布局文本进行解析,识别出布局文本中的表达式,并将表达式传递给表达式引擎计算模块。表达式引擎模块对表达式中的变量和算式进行识别。其中,变量的值可以通过屏幕信息获取模块来获取。然后,表达式引擎计算模块通过屏幕信息模块获取的值对变量进行赋值,计算算式的值,这样可得到布局文本中的参数值,表达式引擎计算模块将算式的值传递给布局绘制模块,以使布局绘制模块根据算式的值绘制UI。最后,应用程序框架层的布局绘制模块将绘制完成的UI通知给内核层的显示驱动,使得显示驱动调用显示屏显示UI。
需要说明的是,布局解析模块、表达式引擎计算模块、布局绘制模块可以位于应用程序框架层,也可以位于应用程序层,即可以为应用程序中的功能模块。也就是说,本申请实施例中的布局方案可以为系统级的能力,也可以为应用程序的能力。
以下实施例以应用在图2A所示的手机100所示的架构中为例进行描述。
此外,下述实施例涉及的至少一个,包括一个或者多个;其中,多个是指大于或者等于两个。另外,需要理解的是,在本申请的描述中,“第一”、“第二”等词汇,仅用于区分描述的目的。
应理解,下文所涉及到的布局请求消息可以理解为前面所述的第一请求消息/第三请求消息,下文所涉及到的布局文本可以理解为前文所述的第一布局消息/第三布局消息,实际布局文本可以理解为前文所述的第二布局消息。
如图3所示,为本申请实施例提供的一种应用程序显示方法流程图,参阅图3所示,该方法可包括如下步骤:
S301:电子设备接收到用户的第一操作,所述第一操作用于触发布局请求。
这里的第一操作可以为用户开启某个应用程序的触发操作,也可以为用户打开某个界面的触发操作。示例性的,该第一操作可以为用户对某个应用图标的点击操作,或者也可以为在某个应用程序的用户界面上对某个操作按钮的点击操作。当然,第一操作还可以为滑动操作、双击操作等,或者也可以为语音触发的操作,本申请对此不作限定。
如图4所示,假设手机上显示图4所示的淘宝应用程序的界面400,该界面400中可包括多种服装的链接,此时用户可以打开某个链接,比如第一操作为用户对链接401的点击操作。
S302:电子设备响应第一操作,向服务器发送布局请求消息。
其中,布局请求消息中可携带所请求的布局名称。举例来说,假设在布局开发阶段,开发者设计的布局layout1为用户打开点击链接401之后的布局,那么在步骤S301中当用户点击链接401时,手机可响应该第一操作,向服务器发送布局请求消息,该布局请求消息中可携带布局名称layout1。
需要说明的是,在本申请实施例中,布局(或布局文本)与布局名称一一对应。其中,布局名称可以由布局开发者在开发布局时进行设定,也可以在布局开发者将布局上传到服务器之后,由服务器对布局名称进行设定,本申请对此不作具体限定。当然,如果布局名称是由服务器设定的,那么在服务器对布局名称进行设定之后,可以将布局名称通知给电子设备,以便电子设备能够通过布局名称来请求相应的布局文本。
S303:电子设备接收服务器发送的与布局名称相对应的布局文本。
相应的,服务器可接收到该布局请求消息,向电子设备反馈与所述布局名称相对应的布局文本。
在本申请实施例中,布局开发者开发的布局并不是固定尺寸的,而是将尺寸大小等以变量的形式来表示,以使电子设备能够根据自身的屏幕信息对变量进行赋值,从而适配电子设备的屏幕。也就是说,在本申请中当多个电子设备同时向服务器请求同一布局时,服务器向不同的电子设备下发的布局文本为相同的布局文本。换句话来说,服务器向电子设备下发的布局文本为布局模板,电子设备可以根据自身屏幕信息对模板中的尺寸大小进行调整。
示例性的,如图5所示,以三个电子设备为例,比如电子设备包括电子设备1、电子设备2以及电子设备3。其中,电子设备1的屏幕类型为屏幕1,电子设备2的屏幕类型为屏幕2,电子设备3的屏幕类型为屏幕3,则当用户在三个不同的电子设备上进行相同的操作,即向服务器请求相同的布局时,服务器可以向电子设备1下发布局文本,比如布局文本4,向电子设备2下发布局文本4,向电子设备3下发布局文本4。
也就是说,通过本申请实施例,服务器在向电子设备下发布局文本时,不需要关注电子设备的屏幕类型,也不需要为多个电子设备开发多套布局,可以节省开发成本。
继续以图4为例,假设服务器向手机下发的布局文本如下:
应理解,上述布局文本仅是部分示例,“…”仅是为了说明中间还会包括更多的文本代码,为了缩短篇幅,仅示意出一部分代码。
以下对上述文本代码进行解释。在文本代码中的“…”之前,定义了一个image元素,表示需要显示一张图片。其中,涉及两个变量screen.height和imageLink;screen.height:代表当前屏幕的高度;imageLink:代表图片的网络地址,比如http://xx/xx.jpg等;border表示边框宽度,上述示例中图片的最终高度是当前屏幕高度乘以0.4,也就是屏幕高度的40%,宽度可以为当前屏幕宽度screen.width。
在文本代码中的“…”之后,先声明了一个圆角矩形,然后里面放置一个文本。文本的内容使用变量textContent,例如textContent可以是“新款修身显瘦长裤S|418105555”。
在本申请实施例中,布局文本中可包括第一参数,该第一参数与电子设备的参数相关。示例性的,在上述布局文本中,第一参数可以包括:控件类型type、控件的宽度width、控件的高度height、控件的边框宽度border;电子设备的参数可以包括:screen.height。
应理解,控件的宽度、高度、边框宽度等都可以理解为控件样式style,另外,控件样式还可以包括背景色等,本申请对此不作限定。
S304:电子设备提取布局文本中固定的字段。
其中,布局文本中固定的字段可以包括布局文本中的变量,比如screen.height、screen.width等。以图4中的布局文本为例。在上述布局文本中,固定的字段可包括screen.height。
S305:电子设备根据固定的字段调用该电子设备的接口,获取对应字段的信息。
示例性的,假设固定的字段为screen.height,则电子设备可调用自身设备的接口,获取screen.height对应的信息,即获取电子设备的屏幕高度对应的数值。
S306:电子设备根据获取到的对应字段的信息,得到实际布局文本。
由于服务器下发的布局文本为能够适用于不同屏幕的布局文本,而不同电子设备的屏幕可能会有所不同,因此,需要将布局文本中的参数对应的数值设置为适配于电子设备屏幕的数值。也就是说,电子设备可以根据自身设备的屏幕信息对参数中包含的变量进行赋值,这样就可以确定出电子设备的实际布局文本,即布局文本中的每一个参数都有对应的数值。
在一种可能的实现方式中,本申请实施例中可以通过表达式的方式来描述参数。在表达式中可能会存在算术运算,例如减法运算,可以在对变量进行赋值之后,将变量的值代入表达式中,这样可以得到含有变量的参数对应的数值。
继续参阅图4,布局文本中图片的高度为屏幕高度的40%,假设S305中获取到的固定的字段screen.height(屏幕高度)的数值为1920,则该图片的显示高度为768像素;假设获取到的固定的字段screen.width(屏幕宽度)的数值为400,则该图片的显示宽度为400像素。另外,布局文本中的文字为圆角矩形框内的文字,该圆角矩形框的边框半径为8像素,边框宽度为2像素,高度为50像素,宽度以手机屏幕的100%显示,即宽度和手机屏幕的宽度相同。然后可以对变量文本内容textcontent赋予文字,文字的大小为20像素。
示例性的,实际布局文本如下:
S307:电子设备根据实际布局文本对用户界面进行绘制。
继续参阅图4,手机在得到实际布局文本之后,可对布局文本进行UI绘制,例如显示的用户界面可以为界面410。其中,界面410可包括布局411、布局412、布局413及布局414。应理解,图4所示的布局文本仅是以布局411中的图片以及布局412中的部分文字为例,对于布局411中的箭头、购物车等图标以及布局412、布局413和布局414中其它文字的布局文本与图4所示示意图中的布局文本类似,此处不作过多说明。
在另一些实施例中,当布局文本中的参数均为变量时,电子设备可以根据自身设备的屏幕信息对变量进行赋值,从而得到实际布局文本。在本申请实施例中对于变量的具体数值不作限定。示例性的,假设布局文本如下:
当电子设备提取出布局文本中的固定字段之后,可根据实际界面的美观程度等方面对字段进行取值,例如对上述布局文本中的X、Y、Z进行赋值,从而得到实际布局文本。
在一些实施例中,如图6A所示,为本申请实施例提供的另一种应用程序的显示方法流程图,参阅图6A所示,该方法可包括如下步骤:
1、布局开发者开发布局;
本申请实施例中可包括布局开发阶段和布局应用阶段。应理解,图3、图4所示实施例为布局应用阶段的应用程序显示方法,以下对布局开发阶段进行介绍。
布局开发阶段为开发者对界面的布局进行设计,然后将界面的布局通过文本的形式表示出来。在本申请实施例中,文本可以为一种结构化的文本,可用于描述屏幕上可视元素的位置、大小等样式信息。
在一种可能的实现中,开发者可以使用文本编辑器或者特定的集成开发环境(integrated development environment,IDE)来开发布局。另外,文本可以是JavaScript对象简谱(javascript object notation,JSON)格式,或者还可以是可扩展标记语言(extensible markup language,XML)格式等,本申请对此不作限定。
以JSON格式为例,对开发者开发出的布局文本进行举例说明。示例性的,布局文本如下:
其中,type表示当前UI控件的类型,div表示矩形,即表示要在屏幕上绘制一个矩形框。style表示当前UI控件的样式,比如宽度、高度、背景颜色等。具体来说,width表示宽度,height表示高度,border表示边框宽度,display.right表示屏幕右边距,n可以为固定数值,比如2等。
在该示例中,第一参数可包括控件类型type、控件的宽度width、控件的高度height、控件的边框宽度border;电子设备的参数可包括:display.right。其中,宽度width为带有变量的参数,变量为:display.right;高度height为带有常量的参数。
应理解,在JSON格式中,$开头的字符串一般为表达式,并且表达式位于括号{}中。
以XML格式为例,上述布局的布局文本可以为如下示例:
<div style=“width:${(display.right-n)}px;height:30px;border:2px”>
</div>
其中,<div>标签说明当前需要绘制的控件为矩形控件,style表示当前div控件的样式,样式信息之间可以使用分号“;”来分割。样式的内容可以用表达式的形式来描述,例如width的样式即为表达式的形式。
上述文本表示的内容可以为:绘制一个矩形框,该矩形框的高度为30像素,边框宽度为2像素,矩形的宽度不定(用表达式来表示)。
需要说明的是,上述文本仅是一种示例性说明,高度、边框宽度也可以通过表达式来表示,本申请对此不作限定。也就是说,在布局文本中,宽度、高度、边框宽度等尺寸信息均可以为变量。
应理解,上述示例中的参数仅是布局中的部分示例,本申请实施例中对于布局的参数不做具体限定,例如布局中的参数还可以包括如下参数:
(1)、页面布局方向:Configuration.layoutDircetion,通常可包括从右到左(LTR)、从左到右(RTL)两种;
(2)、UI模式:Configuration.uiMode,通常可包括深色模式、亮色模式等;
(3)、字体缩放比例:Configuration.fontScale,通常可包括1.0、2.0等;
(4)、屏幕左/右(安全)边距:safedisplay.left/right,可以用在曲面屏;应理解,当应用在曲面屏时,屏幕左边距为显示屏左侧的弯曲宽度,屏幕右边距为显示屏右侧的弯曲宽度。当应用在普通屏幕(或者称为:直面屏幕)时,屏幕左边距为显示屏上的显示区域与电子设备的左边边框之间的距离,屏幕右边距为显示屏上的显示区域与电子设备的右边边框之间的距离,通常可以为设定数值。需要说明的是,曲面屏指的是屏幕的左侧或右侧存在弯曲设计的屏幕。
(5)、控件位置:position,一般用坐标来表示,比如(X,Y)。示例性的,假设控件Wie矩形框,则该控件位置可以为矩形框左上角的点对应的坐标。
2、布局开发者向服务器上传布局;
当开发者对界面布局开发完成之后,可将开发的布局文件上传到服务器,以便电子设备调用。需要说明的是,每一个界面布局可对应一个名称标记,例如可以通过layout1、layout2等来表示每一个界面布局。
3、电子设备中的第一APP向服务器请求布局;
4、第一APP对应的服务器向第一APP下发布局文本;
5、第一APP调用电子设备中的布局解析模块对布局文本中固定的字段进行提取,然后将固定的字段(display.right)以及字段所在的表达式(display.right-n)传递给表达式计算引擎模块;
6、电子设备中的表达式引擎计算模块从屏幕信息获取模块获取对应字段(display.right)的信息;
7、电子设备中的表达式引擎计算模块根据对应字段的信息计算表达式(display.right-n),然后将(display.right-n)的计算结果返回给布局解析模块;
8、电子设备中的布局解析模块根据计算结果得到实际布局文本(即布局的完整样式),将实际布局文本传递给电子设备中的布局绘制模块,由电子设备中的布局绘制模块执行布局绘制。
示例性的,以该实施例中的布局文本为例,宽度width为包含有变量display.right的参数。假设电子设备从屏幕信息获取模块中获取到的字段(变量)display.right的值为29,例如对n取值9,则代入到表达式中计算可以得到矩形框的宽度width=29-9=20,因此,该电子设备上对应的实际布局文本如下:
也就是说,该电子设备上的实际布局为:控件为矩形框,该矩形框的样式包括:宽度为20像素,高度为30像素,边框宽度为2像素。
在另一些实施例中,如图6B所示,为本申请实施例提供的又一种应用程序的显示方法流程图,参阅图6B所示,该方法可包括如下步骤:
1、布局开发者开发布局;
2、布局开发者向第一APP对应的服务器上传布局;
3、电子设备向第一APP对应的服务器请求布局;
4、第一APP对应的服务器向第一APP下发布局文本;
5、第一APP中的布局解析模块提取第一APP对应的服务器下发的布局文本中固定的字段(display.right),然后将固定的字段(display.right)以及字段所在的表达式(display.right-n)传递给第一APP中的表达式计算引擎模块;
6、第一APP中的表达式引擎计算模块从屏幕信息获取模块获取对应字段的信息;
7、第一APP中的表达式引擎计算模块根据对应字段的信息计算表达式(display.right-n),然后将(display.right-n)的计算结果返回给第一APP中的布局解析模块;
8、第一APP中的布局解析模块根据计算结果得到实际布局文本(即布局的完整样式),将实际布局文本传递给第一APP中的布局绘制模块,第一APP中的由布局绘制模块执行布局绘制。
需要说明的是,图6A所示的场景为APP没有做布局,全部由电子设备进行布局,图6B的场景为APP从电子设备获取数据,然后由APP自己布局。
应理解,图6A、图6B所示示意图中的步骤3可对应于图3所示实施例中的S302,步骤4可对应于图3所示实施例中的S303,步骤5可对应于图3所示实施例中的S304,步骤6可对应于图3所示实施例中的S305,步骤7、8可对应于图3所示实施例中的S306。其中各个功能模块的具体实现可参阅图3所示实施例中的介绍,此处不再赘述。
需要说明的是,在一种可能的实现中,当布局开发者向服务器上传完成布局之后,服务器可向布局开发者反馈上传完成的消息;或者在布局绘制模块执行完布局绘制之后,可向布局解析模块反馈绘制完成的消息。
上述本申请提供的实施例中,从客户端以及客户端与服务器交互的角度对本申请实施例提供的方法进行了介绍。为了实现上述本申请实施例提供的方法中的各功能,电子设备可以包括硬件结构和/或软件模块,以硬件结构、软件模块、或硬件结构加软件模块的形式来实现上述各功能。上述各功能中的某个功能以硬件结构、软件模块、还是硬件结构加软件模块的方式来执行,取决于技术方案的特定应用和设计约束条件。
如图7所示,本申请另外一些实施例公开了一种电子设备,该电子设备可以是具有显示屏的电子设备。参阅图7所示,所述电子设备700包括:显示屏701;一个或多个处理器702;一个或多个存储器703;一个或多个传感器704、多个应用705(图中未示出);以及一个或多个计算机程序706(图中未示出),上述各器件可以通过一个或多个通信总线707连接。
其中,显示屏701用于显示电子设备中的应用的显示界面,或者显示提示信息。存储器703中存储有一个或多个计算机程序,所述一个或多个计算机程序包括指令;处理器702调用存储器703中存储的所述指令,使得电子设备700可以上述实施例的应用程序的显示方法。
在本申请实施例中,处理器702可以是通用处理器、数字信号处理器、专用集成电路、现场可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件,可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成,或者用处理器中的硬件及软件模块组合执行完成。软件模块可以位于存储器703中,处理器702读取存储器703中的程序指令,结合其硬件完成上述方法的步骤。
在本申请实施例中,存储器703可以是非易失性存储器,比如硬盘(hard diskdrive,HDD)或固态硬盘(solid-state drive,SSD)等,还可以是易失性存储器(volatilememory),例如RAM。存储器还可以是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质,但不限于此。本申请实施例中的存储器还可以是电路或者其它任意能够实现存储功能的装置,用于存储指令和/或数据。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
基于以上实施例,本申请还提供一种应用程序的显示系统,该系统可包括第一电子设备、服务器。示例性的,第一电子设备可以用于接收所述服务器发送的与第一界面的第一标识相对应的第一布局消息,所述第一布局消息中包括第一参数,所述第一参数与第一电子设备的参数相关;并且可以根据所述第一布局消息显示所述第一界面等等。服务器可以用于向第一电子设备发送与第一界面的第一标识相对应的第一布局消息。
进一步的,所述系统还可以包括第二电子设备,所述第二电子设备可用于接收所述服务器发送的与第二界面的第二标识相对应的第三布局消息,所述第三布局消息中包括第二参数,所述第二参数与第二电子设备的参数相关,所述第二参数与第一参数的相同等。
基于以上实施例,本申请还提供了一种计算机存储介质,所述计算机存储介质中存储有计算机程序,所述计算机程序被计算机执行时,使得所述计算机执行以上实施例提供的应用程序的显示方法。
本申请实施例中还提供一种计算机程序产品,包括指令,当其在计算机上运行时,使得计算机执行以上实施例提供的应用程序的显示方法。
本申请实施例是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
Claims (15)
1.一种应用程序的显示方法,其特征在于,包括:
第一电子设备检测到第一操作;
所述第一电子设备根据所述第一操作,向服务器发送第一请求消息,所述第一请求消息中包括第一界面的第一标识,所述第一界面为第一应用程序的界面;
所述第一电子设备接收所述服务器发送的与所述第一界面的第一标识相对应的第一布局消息,所述第一布局消息中包括第一参数,所述第一参数与第一电子设备的参数相关;
所述第一电子设备根据所述第一布局消息显示所述第一界面。
2.如权利要求1所述的方法,其特征在于,所述第一参数包括以下参数中的至少一种:控件类型、控件的宽度、控件的高度、控件边框宽度、页面布局方向、用户界面显示模式、字体缩放比例、控件位置。
3.如权利要求1所述的方法,其特征在于,所述第一电子设备的参数包括以下参数中的至少一种:屏幕的宽度、屏幕的高度、屏幕的左边距、屏幕的右边距。
4.如权利要求1-3任一项所述的方法,其特征在于,所述第一电子设备根据所述第一布局消息显示所述第一界面,包括:
所述第一电子设备获取所述第一电子设备的参数;
所述第一电子设备根据所述第一布局消息以及所述第一电子设备的参数,得到第二布局消息;
所述第一电子设备基于所述第二布局消息显示所述第一界面。
5.如权利要求1所述的方法,其特征在于,所述第一操作为打开第一应用程序的操作或者为对第一应用程序界面中的第一链接的点击操作。
6.如权利要求1-5任一项所述的方法,其特征在于,所述第一布局消息中还包括第二参数;
所述方法还包括:
所述第一电子设备对所述第二参数进行赋值;
所述第一电子设备根据所述第二参数得到第二布局消息;
所述第一电子设备基于所述第二布局消息显示所述第一界面。
7.如权利要求1-6任一项所述的方法,其特征在于,所述第一布局消息中还包括第三参数;
所述方法还包括:
第二布局消息包括第三参数;
所述第一电子设备基于所述第二布局消息显示所述第一界面。
8.一种应用程序的显示方法,其特征在于,包括:
第一电子设备检测到第一操作;
所述第一电子设备根据所述第一操作,向服务器发送第一请求消息,所述第一请求消息中包括第一界面的第一标识,所述第一界面为第一应用程序的界面;
服务器接收所述第一电子设备发送的第一请求消息,根据所述第一请求消息生成第一布局消息,所述第一布局消息包括第一布局文本,所述第一布局文本与第一标识相关联;
所述服务器向所述第一电子设备发送所述第一布局消息,所述第一布局消息中包括第一参数,所述第一参数与第一电子设备的参数相关;
所述第一电子设备接收所述第一布局消息;
所述第一电子设备根据所述第一布局消息显示所述第一界面。
9.如权利要求8所述的方法,其特征在于,所述第一参数包括以下参数中的至少一种:控件类型、控件的宽度、控件的高度、控件的边框宽度、页面布局方向、用户界面UI模式、字体缩放比例、控件位置。
10.如权利要求8所述的方法,其特征在于,所述第一电子设备的参数包括以下参数中的至少一种:屏幕的宽度、屏幕的高度、屏幕的左边距、屏幕的右边距。
11.如权利要求8-10任一项所述的方法,其特征在于,所述服务器向所述第一电子设备发送与所述第一界面的第一标识相对应的第一布局消息之前,所述方法还包括:
所述服务器获取所述第一布局文本;
所述服务器根据所述第一标识将所述第一布局文本预先存储在服务器中。
12.如权利要求8-11任一项所述的方法,其特征在于,所述第一布局消息的格式为JavaScript对象简谱JSON格式或者可扩展标记语言XML格式。
13.如权利要求8-12任一项所述的方法,其特征在于,所述方法还包括:
第二电子设备检测到第二操作;
所述第二电子设备根据所述第二操作,向服务器发送第三请求消息,所述第三请求消息中包括第二界面的第二标识,第二操作为打开第二电子设备中第一应用程序的操作;
服务器接收所述第二电子设备发送的第三请求消息,根据所述第三请求消息生成第三布局消息,所述第三布局消息包括第一布局文本,所述第一布局文本与所述第二标识相关联;
所述服务器向所述第二电子设备发送所述第三布局消息,所述第三布局消息中包括第二参数,所述第二参数与第二电子设备的参数相关,所述第二参数与第一参数相同;
所述第二电子设备接收所述第三布局消息;
所述第二电子设备根据所述第三布局消息显示所述第二界面。
14.一种第一电子设备,其特征在于,所述第一电子设备包括显示屏;一个或多个处理器;一个或多个存储器;一个或多个传感器;多个应用;以及一个或多个计算机程序;
其中所述一个或多个计算机程序被存储在所述一个或多个存储器中,所述一个或多个计算机程序包括指令,当所述指令被所述一个或多个处理器调用执行时,使得所述电子设备执行如权利要求1至7任一项所述的应用程序的显示方法。
15.一种计算机可读存储介质,所述计算机可读存储介质中存储有指令,其特征在于,当所述指令在电子设备上运行时,使得所述电子设备执行如权利要求1至7任一项所述的应用程序的显示方法。
Priority Applications (3)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110262314.9A CN115079907A (zh) | 2021-03-10 | 2021-03-10 | 一种应用程序的显示方法及电子设备 |
PCT/CN2022/079685 WO2022188766A1 (zh) | 2021-03-10 | 2022-03-08 | 一种应用程序的显示方法及电子设备 |
EP22766289.7A EP4283449A1 (en) | 2021-03-10 | 2022-03-08 | Application display method and electronic device |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110262314.9A CN115079907A (zh) | 2021-03-10 | 2021-03-10 | 一种应用程序的显示方法及电子设备 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN115079907A true CN115079907A (zh) | 2022-09-20 |
Family
ID=83227423
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110262314.9A Pending CN115079907A (zh) | 2021-03-10 | 2021-03-10 | 一种应用程序的显示方法及电子设备 |
Country Status (3)
Country | Link |
---|---|
EP (1) | EP4283449A1 (zh) |
CN (1) | CN115079907A (zh) |
WO (1) | WO2022188766A1 (zh) |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102890632A (zh) * | 2012-09-18 | 2013-01-23 | 深圳市融创天下科技股份有限公司 | 一种屏幕自适应方法、系统和终端设备 |
CN105912318A (zh) * | 2016-04-01 | 2016-08-31 | 北京京东尚科信息技术有限公司 | 一种终端屏幕自适应显示方法、终端、服务器及系统 |
CN110597510A (zh) * | 2019-08-09 | 2019-12-20 | 华为技术有限公司 | 一种界面的动态布局方法及设备 |
WO2022036917A1 (zh) * | 2020-08-21 | 2022-02-24 | 完美世界(重庆)互动科技有限公司 | 界面调整方法、装置、计算机程序及计算机可读介质 |
Family Cites Families (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US9195365B2 (en) * | 2009-03-25 | 2015-11-24 | Honeywell International Inc. | Automatic configurator of display objects |
CN111736740B (zh) * | 2020-03-24 | 2022-06-07 | 北京沃东天骏信息技术有限公司 | 图片热区生成方法、装置、设备和存储介质 |
CN111596996A (zh) * | 2020-05-07 | 2020-08-28 | 湖南金鹰卡通传媒有限公司 | 动态化布局方法以及系统 |
-
2021
- 2021-03-10 CN CN202110262314.9A patent/CN115079907A/zh active Pending
-
2022
- 2022-03-08 EP EP22766289.7A patent/EP4283449A1/en active Pending
- 2022-03-08 WO PCT/CN2022/079685 patent/WO2022188766A1/zh active Application Filing
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102890632A (zh) * | 2012-09-18 | 2013-01-23 | 深圳市融创天下科技股份有限公司 | 一种屏幕自适应方法、系统和终端设备 |
CN105912318A (zh) * | 2016-04-01 | 2016-08-31 | 北京京东尚科信息技术有限公司 | 一种终端屏幕自适应显示方法、终端、服务器及系统 |
CN110597510A (zh) * | 2019-08-09 | 2019-12-20 | 华为技术有限公司 | 一种界面的动态布局方法及设备 |
WO2022036917A1 (zh) * | 2020-08-21 | 2022-02-24 | 完美世界(重庆)互动科技有限公司 | 界面调整方法、装置、计算机程序及计算机可读介质 |
Also Published As
Publication number | Publication date |
---|---|
EP4283449A1 (en) | 2023-11-29 |
WO2022188766A1 (zh) | 2022-09-15 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN114397979B (zh) | 一种应用显示方法及电子设备 | |
US10484589B2 (en) | Electronic device and image capturing method thereof | |
CN110462572B (zh) | 电子装置及其控制方法 | |
CN112130742B (zh) | 一种移动终端的全屏显示方法及设备 | |
WO2020000448A1 (zh) | 一种柔性屏幕的显示方法及终端 | |
CN111935379B (zh) | 电子装置 | |
WO2020134869A1 (zh) | 电子设备的操作方法和电子设备 | |
WO2020253758A1 (zh) | 一种用户界面布局方法及电子设备 | |
WO2021052279A1 (zh) | 一种折叠屏显示方法及电子设备 | |
CN108028891B (zh) | 电子设备和照相方法 | |
WO2020062294A1 (zh) | 系统导航栏的显示控制方法、图形用户界面及电子设备 | |
CN108353152B (zh) | 图像处理设备及其操作方法 | |
WO2021000841A1 (zh) | 一种生成用户头像的方法及电子设备 | |
WO2021013132A1 (zh) | 输入方法及电子设备 | |
CN108427533B (zh) | 电子设备及用于确定电子设备的环境的方法 | |
CN114363462B (zh) | 一种界面显示方法、电子设备及计算机可读介质 | |
CN110727486A (zh) | 一种显示方法及电子设备 | |
CN110751503B (zh) | 广告处理方法和电子设备 | |
WO2021037223A1 (zh) | 一种触控方法与电子设备 | |
CN112749362B (zh) | 控件创建方法、装置、设备及存储介质 | |
CN114237413A (zh) | 处理交互事件的方法和装置 | |
CN110647731A (zh) | 一种显示方法及电子设备 | |
KR20160037019A (ko) | 전자 장치, 그 제어 방법 및 기록 매체 | |
CN115657897A (zh) | 跨设备桌面管理方法、第一电子设备及第二电子设备 | |
CN115022982B (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 |