CN114675916A - 屏幕布局生成方法、装置、设备及存储介质 - Google Patents
屏幕布局生成方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN114675916A CN114675916A CN202210201903.0A CN202210201903A CN114675916A CN 114675916 A CN114675916 A CN 114675916A CN 202210201903 A CN202210201903 A CN 202210201903A CN 114675916 A CN114675916 A CN 114675916A
- Authority
- CN
- China
- Prior art keywords
- target page
- screen layout
- elements
- page
- data
- 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 60
- 238000004088 simulation Methods 0.000 claims abstract description 61
- 238000009877 rendering Methods 0.000 claims abstract description 26
- 238000003475 lamination Methods 0.000 claims description 5
- 238000004806 packaging method and process Methods 0.000 claims description 5
- 239000000243 solution Substances 0.000 description 14
- 238000004590 computer program Methods 0.000 description 9
- 238000010586 diagram Methods 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000002347 injection Methods 0.000 description 1
- 239000007924 injection Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
Images
Classifications
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明属于计算机技术领域，具体涉及一种屏幕布局生成方法、装置、设备及存储介质。预先生成用于模拟目标页面待调用的后端接口数据的模拟数据并存储，在生成屏幕布局时，通过向服务器发送目标页面的数据请求，获得服务器返回的目标页面的模拟数据，从而可以使用模拟数据对目标页面进行渲染，使目标页面不再为空白页面，在渲染结束后，采用层叠样式对目标页面中的元素进行覆盖，生成目标页面的屏幕布局，有效解决了不具有本地数据的页面无法实现页面渲染，从而无法生成屏幕布局的问题。
Description
技术领域
本发明属于计算机技术领域，具体涉及一种屏幕布局生成方法、装置、设备及存储介质。
背景技术
屏幕布局指的是，在页面数据尚未加载完成前先向用户展示出页面的大致样式和布局，使用户可以预知页面将要展示文字或图片等内容的位置。在页面数据加载完成后，再使用数据渲染的页面对该屏幕布局进行替换。
目前，常见的应用程序屏幕布局生成方法为，在无界面环境中运行浏览器，并通过浏览器开启应用程序中待生成屏幕布局的目标页面，将应用程序开发时存储在本地的目标页面的数据加载到目标页面中，对目标页面进行渲染，在渲染结束后，采用层叠样式对目标页面中的元素进行覆盖，生成目标页面的屏幕布局。
但是，上述屏幕布局生成方法只可以针对具有本地数据的页面生成屏幕布局，对于不具有本地数据，需要通过应用程序接口调用后端数据的页面则无法适用。因此，如何使应用程序中不具有本地数据的页面生成屏幕布局是亟待解决的问题。
发明内容
为了解决现有技术中的上述问题，即为了解决应用程序中不具有本地数据的页面无法生成屏幕布局的问题，本发明提供了一种屏幕布局生成方法、装置、设备及存储介质。
根据本发明实施例的第一方面，本发明提供了一种屏幕布局生成方法，包括：
运行页面显示器，并通过所述页面显示器开启应用程序中待生成屏幕布局的目标页面；其中，所述目标页面为用于调用后端接口数据进行显示的页面；
向服务器发送所述目标页面的数据请求，以使所述服务器根据所述数据请求，返回所述目标页面的模拟数据；其中，所述模拟数据用于模拟所述目标页面待调用的后端接口数据；
接收所述模拟数据，并将所述目标页面的模拟数据加载到所述目标页面中，对所述目标页面进行渲染；
在渲染结束后，采用层叠样式对所述目标页面中的元素进行覆盖，生成所述目标页面的屏幕布局。
在上述屏幕布局生成方法的优选技术方案中，所述服务器返回的所述目标页面的模拟数据，为所述服务器将接收到的所述目标页面的数据请求转发给数据模拟器后，所述数据模拟器基于所述请求发送给所述服务器的。
在上述屏幕布局生成方法的优选技术方案中，所述采用层叠样式对所述目标页面中的元素进行覆盖，生成所述目标页面的屏幕布局，包括：
获取所述目标页面中的元素的标识，并根据所述标识对所述目标页面中的元素进行分类；
针对所述目标页面中的不同类型的元素，采用不同的层叠样式对所述元素进行覆盖，生成所述目标页面的屏幕布局。
上述屏幕布局生成方法的优选技术方案中，所述目标页面中的元素包括文本类型的元素、图片类型的元素、按钮类型的元素以及图形类型的元素；所述针对所述目标页面中的不同类型的元素，采用不同的层叠样式对所述元素进行覆盖，包括：
针对所述目标页面中的文本类型的元素，采用灰色条纹加透明条纹的层叠样式对所述元素进行覆盖；
针对所述目标页面中的图片类型、按钮类型以及图形类型的元素，采用灰色块的层叠样式对所述元素进行覆盖。
在上述屏幕布局生成方法的优选技术方案中，所述生成所述目标页面的屏幕布局之后，还包括：
获取所述目标页面的屏幕布局的超文本标记语言和层叠样式表，并保存到文件目录中；
将存储在所述文件目录中的所述目标页面的屏幕布局的超文本标记语言和层叠样式表进行打包，并在应用程序运行时作为插件注入到所述目标页面的超文本标记语言中。
在上述屏幕布局生成方法的优选技术方案中，所述获取所述目标页面的屏幕布局的超文本标记语言和层叠样式表之后，还包括：
将所述目标页面的屏幕布局的超文本标记语言和层叠样式表写入内存；
获取所述目标页面的屏幕布局的超文本标记语言和层叠样式表所在的第一内存地址；
根据所述第一内存地址，生成所述目标页面的屏幕布局的预览链接和二维码。
在上述屏幕布局生成方法的优选技术方案中，所述生成所述目标页面的屏幕布局的预览链接和二维码之后，还包括：
对所述目标页面的屏幕布局进行预览；
在预览模式下，对所述目标页面的屏幕布局的超文本标记语言和层叠样式表进行修改；
将修改后的所述目标页面的屏幕布局的超文本标记语言和层叠样式表写入内存；
获取修改后的所述目标页面的屏幕布局的超文本标记语言和层叠样式表所在的第二内存地址；
根据所述第二内存地址，对所述目标页面的屏幕布局的预览链接和二维码进行更新。
根据本发明实施例的第二方面，本发明提供了一种屏幕布局生成装置，包括：
开启模块，用于运行页面显示器，并通过所述页面显示器开启应用程序中待生成屏幕布局的目标页面；其中，所述目标页面为用于调用后端接口数据进行显示的页面；
发送模块，用于向服务器发送所述目标页面的数据请求，以使所述服务器根据所述数据请求，返回所述目标页面的模拟数据；其中，所述模拟数据用于模拟所述目标页面待调用的后端接口数据；
接收模块，用于接收所述模拟数据，并将所述目标页面的模拟数据加载到所述目标页面中，对所述目标页面进行渲染；
生成模块，用于在渲染结束后，采用层叠样式对所述目标页面中的元素进行覆盖，生成所述目标页面的屏幕布局。
根据本发明实施例的第三方面，本发明提供了一种电子设备，包括：处理器，以及与所述处理器通信连接的存储器；
所述存储器存储计算机执行指令；
所述处理器执行所述存储器存储的计算机执行指令，以实现如本发明实施例第一方面任一项所述的屏幕布局生成方法。
根据本发明实施例的第四方面，本发明提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如本发明实施例第一方面任一项所述的屏幕布局生成方法。
本领域技术人员能够理解的是，本发明的屏幕布局生成方法、装置、设备及存储介质，运行页面显示器，并通过页面显示器开启应用程序中待生成屏幕布局的目标页面，向服务器发送目标页面的数据请求，并接收服务器返回的用于模拟目标页面待调用的后端接口数据的模拟数据，将模拟数据加载到目标页面中对目标页面进行渲染，在渲染结束后，采用层叠样式对目标页面中的元素进行覆盖，生成目标页面的屏幕布局。上述方法中预先生成不具有本地数据的目标页面的模拟数据并存储，在生成屏幕布局时，通过向服务器发送目标页面的数据请求，获得服务器返回的目标页面的模拟数据，从而可以使用模拟数据对目标页面进行渲染，使目标页面不再为空白页面，在渲染结束后，采用层叠样式对目标页面中的元素进行覆盖，生成目标页面的屏幕布局，有效解决了不具有本地数据的页面无法实现页面渲染，从而无法生成屏幕布局的问题。
附图说明
下面参照附图来描述本发明的屏幕布局生成方法、装置、设备及存储介质的优选实施方式。附图为：
图1为本发明实施例提供的屏幕布局生成方法的一种应用场景示意图；
图2为本发明实施例提供的一种屏幕布局生成方法的流程示意图；
图3为本发明实施例提供的又一种屏幕布局生成方法的流程示意图；
图4为本发明实施例提供的另一种屏幕布局生成方法的流程示意图；
图5为本发明实施例提供的一种屏幕布局生成装置的结构示意图；
图6是本发明实施例提供的电子设备的示意图。
具体实施方式
首先，本领域技术人员应当理解的是，这些实施方式仅仅用于解释本发明的技术原理，并非旨在限制本发明的保护范围。本领域技术人员可以根据需要对其做出调整，以便适应具体的应用场合。
此外，还需要说明的是，在本发明的描述中，除非另有明确的规定和限定，术语“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个构件内部的连通。对于本领域技术人员而言，可根据具体情况理解上述术语在本发明中的具体含义。
下面对本发明实施例的应用场景进行解释：
图1为本发明实施例提供的屏幕布局生成方法的一种应用场景示意图。目前，常见的应用程序屏幕布局生成方法为，在无界面环境中运行浏览器，并通过浏览器开启应用程序中待生成屏幕布局的目标页面，将应用程序开发时存储在本地的目标页面的数据加载到目标页面中，对目标页面进行渲染，在渲染结束后，采用层叠样式对目标页面中的元素进行覆盖，生成目标页面的屏幕布局。
但是，上述屏幕布局生成方法只可以针对具有本地数据的页面生成屏幕布局，对于不具有本地数据的页面，由于无法实现页面渲染，因此无法生成屏幕布局。因此，如何使应用程序中不具有本地数据的页面生成屏幕布局是亟待解决的问题。如图1所示，图中包括服务器1、服务器2以及数据模拟器3，其中，服务器1中设置有屏幕布局生成装置。
其中，数据模拟器3用于生成目标页面的模拟数据。屏幕布局生成装置可搭载于服务器1中，用于运行页面显示器，并通过页面显示器开启应用程序中待生成屏幕布局的目标页面，向服务器2发送目标页面的数据请求，以使服务器2基于该请求获取数据模拟器3生成的目标页面的模拟数据，并将其返回给屏幕布局生成装置，屏幕布局生成装置，还用于接收服务器2返回的目标页面的模拟数据，并将其加载到目标页面中，对目标页面进行渲染，在渲染结束后，采用层叠样式对目标页面中的元素进行覆盖，生成目标页面的屏幕布局。
下面以具体地实施例对本发明的技术方案以及本发明的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本发明的实施例进行描述。
图2为本发明实施例提供的一种屏幕布局生成方法的流程示意图，如图2所示，本实施例提供的屏幕布局生成方法包括以下几个步骤：
步骤S201、运行页面显示器，并通过所述页面显示器开启应用程序中待生成屏幕布局的目标页面；其中，所述目标页面为用于调用后端接口数据进行显示的页面。
步骤S202、向服务器发送所述目标页面的数据请求，以使所述服务器根据所述数据请求，返回所述目标页面的模拟数据；其中，所述模拟数据用于模拟所述目标页面待调用的后端接口数据。
步骤S203、接收所述模拟数据，并将所述目标页面的模拟数据加载到所述目标页面中，对所述目标页面进行渲染。
步骤S204、在渲染结束后，采用层叠样式对所述目标页面中的元素进行覆盖，生成所述目标页面的屏幕布局。
需要说明的是，本实施例提供的应用于消费端的屏幕布局生成方法的执行主体可以为屏幕布局生成装置。在实际应用中，该屏幕布局生成装置可以通过计算机程序实现，例如应用软件等，也可以通过存储有相关计算机程序的介质实现，例如，U盘、光盘等，或者，还可以通过集成或安装有相关计算机程序的实体装置实现，例如，芯片等。
在本实施例中，为了使应用程序中不具有本地数据的目标页面能够生成屏幕布局，可以采用数据模拟器预先生成目标页面的模拟数据，使用模拟数据对目标页面进行渲染，并在渲染结束后，通过对目标页面中的元素进行覆盖，生成目标页面的屏幕布局。
具体地，屏幕布局生成装置首先可以运行页面显示器，并通过页面显示器开启应用程序中待生成屏幕布局的目标页面。其中，目标页面为用于调用后端接口数据进行显示的页面，也即不具有本地数据的页面。
在实际应用中，屏幕布局生成装置可以通过引擎工具在无界面环境中运行浏览器，并通过命令行或程序语言控制浏览器开启应用程序中待生成屏幕布局的目标页面。
在开启目标页面后，屏幕布局生成装置可以向服务器发送目标页面的数据请求，以使服务器根据数据请求，返回目标页面的模拟数据。其中，该模拟数据用于模拟目标页面待调用的后端接口数据。
需要说明的是，此处的服务器具体可以为代理服务器，与搭载有屏幕布局生成装置的服务器为不同的服务器。
在一种可选的实施方式中，在图2中的步骤S202中，所述服务器返回的所述目标页面的模拟数据，为所述服务器将接收到的所述目标页面的数据请求转发给数据模拟器后，所述数据模拟器基于所述请求发送给所述服务器的。
在实际应用中，用户可以预先将目标页面的数据需求输入数据模拟器中，数据模拟器可以根据数据需求生成相应的目标页面的模拟数据，并存储到相应的文件中。其中，不同的目标页面的模拟数据存储的文件可以具有不同的标识。
此外，由于目标页面所需的数据为接口数据，因此，可以在服务器中预先指定一个文件夹，将其作为应用程序接口数据源。
在一个示例中，屏幕布局生成装置向服务器发送目标页面的数据请求，请求中可以包含有存储目标页面的模拟数据的文件的标识，服务器接收到该模拟数据请求后，可以将该数据请求转发给数据模拟器，以使数据模拟器从相应的文件中获取目标页面的模拟数据，并将其发送到服务器中指定的作为应用程序接口数据源的文件夹中，服务器可以从该文件夹中获取目标页面的模拟数据，并将其返回给屏幕布局生成装置。
在服务器返回目标页面的模拟数据后，屏幕布局生成装置可以接收服务器返回的目标页面的模拟数据，并将目标页面的模拟数据加载到目标页面中，对目标页面进行渲染。
在渲染结束后，屏幕布局生成装置可以采用层叠样式对目标页面中的元素进行覆盖，生成目标页面的屏幕布局。
在一种可选的实施方式中，在图2中的步骤S204中，所述采用层叠样式对所述目标页面中的元素进行覆盖，生成所述目标页面的屏幕布局，包括：获取所述目标页面中的元素的标识，并根据所述标识对所述目标页面中的元素进行分类；针对所述目标页面中的不同类型的元素，采用不同的层叠样式对所述元素进行覆盖，生成所述目标页面的屏幕布局。
在本实施方式中，屏幕布局生成装置首先可以获取目标页面中的元素的标识，并根据标识对目标页面中的元素进行分类。具体地，元素的标识可以包括但不限于text、img、button以及svg等。其中，具有相同标识的元素的类型相同。
在对目标页面中的元素进行分类后，屏幕布局生成装置可以针对目标页面中的不同类型的元素，采用不同的层叠样式对该类型元素进行覆盖，覆盖完成后，即可生成目标页面的屏幕布局。
在一种可选的实施方式中，所述目标页面中的元素包括文本类型的元素、图片类型的元素、按钮类型的元素以及图形类型的元素；所述针对所述目标页面中的不同类型的元素，采用不同的层叠样式对所述元素进行覆盖，包括：针对所述目标页面中的文本类型的元素，采用灰色条纹加透明条纹的层叠样式对所述元素进行覆盖；针对所述目标页面中的图片类型、按钮类型以及图形类型的元素，采用灰色块的层叠样式对所述元素进行覆盖。
在本实施方式中，目标页面中的元素包括文本类型的元素(也即具有text标识的元素)、图片类型的元素(也即具有img标识的元素)、按钮类型的元素(也即具有button标识的元素)以及图形类型的元素(也即具有svg标识的元素)。
相应地，在一个示例中，针对目标页面中的文本类型的元素，屏幕布局生成装置可以采用灰色条纹加透明条纹的层叠样式对该类型的元素进行覆盖。具体地，屏幕布局生成装置可以查找目标页面中具有text标识的元素，并将其对应的层叠样式设置为灰色条纹加透明条纹。
在又一个示例中，针对目标页面中的图片类型、按钮类型以及图形类型的元素，屏幕布局生成装置可以采用灰色块的层叠样式对该类型的元素进行覆盖。具体地，屏幕布局生成装置可以查找目标页面中具有mg、button以及svg标识的元素，并将其对应的层叠样式设置为灰色块。
本实施例提供的屏幕布局生成方法，运行页面显示器，并通过页面显示器开启应用程序中待生成屏幕布局的用于调用后端接口数据进行显示的目标页面，向服务器发送目标页面的数据请求，并接收服务器返回的模拟数据，将模拟数据加载到目标页面中对目标页面进行渲染，在渲染结束后，采用层叠样式对目标页面中的元素进行覆盖，生成目标页面的屏幕布局。上述方法中预先生成不具有本地数据的目标页面的模拟数据并存储，在生成屏幕布局时，通过向服务器发送目标页面的数据请求，获得服务器返回的目标页面的模拟数据，从而可以使用模拟数据对目标页面进行渲染，使目标页面不再为空白页面，在渲染结束后，采用层叠样式对目标页面中的元素进行覆盖，生成目标页面的屏幕布局，有效解决了不具有本地数据的页面无法实现页面渲染，从而无法生成屏幕布局的问题。
图3为本发明实施例提供的又一种屏幕布局生成方法的流程示意图，如图3所示，在生成目标页面的屏幕布局后，所述方法包括以下几个步骤：
步骤S301、获取所述目标页面的屏幕布局的超文本标记语言和层叠样式表，并保存到文件目录中。
步骤S302、将存储在所述文件目录中的所述目标页面的屏幕布局的超文本标记语言和层叠样式表进行打包，并在应用程序运行时作为插件注入到所述目标页面的超文本标记语言中。
在本实施例中，在生成目标页面的屏幕布局后，需要在应用程序运行过程中对该目标页面的屏幕布局进行展示，因此，可以将生成的目标页面的屏幕布局注入到应用程序中。
具体地，屏幕布局生成装置首先可以从目标页面的屏幕布局的代码窗口中，获取目标页面的屏幕布局的超文本标记语言(Hyper Text Markup Language，简称HTML)和层叠样式表(Cascading Style Sheets，简称CSS)，并保存到文件目录(也即shell目录)中。
在将目标页面的屏幕布局的超文本标记语言和层叠样式表保存到文件目录中后，屏幕布局生成装置可以通过打包工具，例如Webpack，将存储在文件目录中的目标页面的屏幕布局的超文本标记语言和层叠样式表进行打包，并在应用程序运行时从目标页面的代码窗口中，获取目标页面的超文本标记语言，将打包好的目标页面的屏幕布局的超文本标记语言和层叠样式表作为插件注入到目标页面的超文本标记语言的相应位置中，具体注入方法本实施例对此不做限定。
通过上述方式，可以将生成的目标页面的屏幕布局注入到应用程序中，从而可以在应用程序运行过程中对目标页面的屏幕布局进行展示。
在一种可选的实施方式中，在图3中的步骤S301中，所述获取所述目标页面的屏幕布局的超文本标记语言和层叠样式表之后，还包括：将所述目标页面的屏幕布局的超文本标记语言和层叠样式表写入内存；获取所述目标页面的屏幕布局的超文本标记语言和层叠样式表所在的第一内存地址；根据所述第一内存地址，生成所述目标页面的屏幕布局的预览链接和二维码。
在本实施方式中，由于生成的目标页面的屏幕布局是以代码的形式呈现的，因此用户无法直观地查看到生成的目标页面的屏幕布局是否符合需求。因此，在将生成的目标页面的屏幕布局注入到应用程序中之前，需要对其进行预览。
具体地，在获取目标页面的屏幕布局的超文本标记语言和层叠样式表后，屏幕布局生成装置可以将目标页面的屏幕布局的超文本标记语言和层叠样式表写入内存，使其可以形成可直观查看的视图文件，并将目标页面的屏幕布局的超文本标记语言和层叠样式表所在的内存地址作为第一内存地址，屏幕布局生成装置可以获取该第一内存地址，并根据该第一内存地址，生成目标页面的屏幕布局的预览链接和二维码，具体生成方法本实施例对此不做限定。
在实际应用中，当用户点击目标页面的屏幕布局的预览链接或是扫描目标页面的屏幕布局的预览二维码时，即可访问其对应的第一内存地址，从而可以对目标页面的屏幕布局进行预览。
图4为本发明实施例提供的另一种屏幕布局生成方法的流程示意图，如图4所示，在生成所述目标页面的屏幕布局的预览链接和二维码之后，所述方法包括以下几个步骤：
步骤S401、对所述目标页面的屏幕布局进行预览。
步骤S402、在预览模式下，对所述目标页面的屏幕布局的超文本标记语言和层叠样式表进行修改。
步骤S403、将修改后的所述目标页面的屏幕布局的超文本标记语言和层叠样式表写入内存。
步骤S404、获取修改后的所述目标页面的屏幕布局的超文本标记语言和层叠样式表所在的第二内存地址。
步骤S405、根据所述第二内存地址，对所述目标页面的屏幕布局的预览链接和二维码进行更新。
在本实施方式中，在生成目标页面的屏幕布局的预览链接和二维码之后，屏幕布局生成装置可以对目标页面的屏幕布局进行预览，并在预览模式下，对目标页面的屏幕布局的超文本标记语言和层叠样式表进行修改。举例来说，可以将目标页面中的文本类型的元素对应的层叠样式修改为灰色块等。
在屏幕布局生成装置对目标页面的屏幕布局的超文本标记语言和层叠样式表进行修改后，可以将修改后的目标页面的屏幕布局的超文本标记语言和层叠样式表写入内存，使其可以形成可直观查看的视图文件，并将修改后的目标页面的屏幕布局的超文本标记语言和层叠样式表所在的内存地址作为第二内存地址，屏幕布局生成装置可以获取该第二内存地址，并根据该第二内存地址，对目标页面的屏幕布局的预览链接和二维码进行更新。
在实际应用中，当用户点击更新后的目标页面的屏幕布局的预览链接或是扫描更新后的目标页面的屏幕布局的预览二维码时，即可访问其对应的第二内存地址，从而可以对修改后的目标页面的屏幕布局进行预览。
本实施例提供的屏幕布局生成方法，通过将目标页面的屏幕布局的超文本标记语言和层叠样式表写入内存，并根据其所在的内存地址生成目标页面的屏幕布局的预览链接和二维码，从而使用户可以直观地查看到生成的目标页面的屏幕布局是否符合需求。
图5为本发明实施例提供的一种屏幕布局生成装置的结构示意图，如图5所示，本实施例提供的屏幕布局生成装置，包括：
开启模块51，用于运行页面显示器，并通过所述页面显示器开启应用程序中待生成屏幕布局的目标页面；其中，所述目标页面为用于调用后端接口数据进行显示的页面。
发送模块52，用于向服务器发送所述目标页面的数据请求，以使所述服务器根据所述数据请求，返回所述目标页面的模拟数据；其中，所述模拟数据用于模拟所述目标页面待调用的后端接口数据。
接收模块53，用于接收所述模拟数据，并将所述目标页面的模拟数据加载到所述目标页面中，对所述目标页面进行渲染。
生成模块54，用于在渲染结束后，采用层叠样式对所述目标页面中的元素进行覆盖，生成所述目标页面的屏幕布局。
在上述应用于消费端的屏幕布局生成装置的优选技术方案中，所述服务器返回的所述目标页面的模拟数据，为所述服务器将接收到的所述目标页面的数据请求转发给所述数据模拟器后，所述数据模拟器基于所述请求发送给所述服务器的。
在上述应用于消费端的屏幕布局生成装置的优选技术方案中，生成模块51还包括分类单元，用于获取所述目标页面中的元素的标识，并根据所述标识对所述目标页面中的元素进行分类。生成模块51还包括覆盖单元，用于针对所述目标页面中的不同类型的元素，采用不同的层叠样式对所述元素进行覆盖，生成所述目标页面的屏幕布局。
在上述应用于消息中间件的屏幕布局生成装置的优选技术方案中，所述目标页面中的元素包括文本类型的元素、图片类型的元素、按钮类型的元素以及图形类型的元素。所述覆盖单元，具体用于针对所述目标页面中的文本类型的元素，采用灰色条纹加透明条纹的层叠样式对所述元素进行覆盖；针对所述目标页面中的图片类型、按钮类型以及图形类型的元素，采用灰色块的层叠样式对所述元素进行覆盖。
在上述应用于消息中间件的屏幕布局生成装置的优选技术方案中，所述装置还包括：获取模块，用于获取所述目标页面的屏幕布局的超文本标记语言和层叠样式表，并保存到文件目录中。打包模块，用于将存储在所述文件目录中的所述目标页面的屏幕布局的超文本标记语言和层叠样式表进行打包，并在应用程序运行时作为插件注入到所述目标页面的超文本标记语言中。
在上述应用于消息中间件的屏幕布局生成装置的优选技术方案中，所述装置还包括：写入模块，用于将所述目标页面的屏幕布局的超文本标记语言和层叠样式表写入内存。所述获取模块，还用于获取所述目标页面的屏幕布局的超文本标记语言和层叠样式表所在的第一内存地址。生成模块51，还用于根据所述第一内存地址，生成所述目标页面的屏幕布局的预览链接和二维码。
在上述应用于消息中间件的屏幕布局生成装置的优选技术方案中，所述装置还包括：预览模块，用于对所述目标页面的屏幕布局进行预览。修改模块，用于在预览模式下，对所述目标页面的屏幕布局的超文本标记语言和层叠样式表进行修改。所述写入模块，还用于将修改后的所述目标页面的屏幕布局的超文本标记语言和层叠样式表写入内存。所述获取模块，还用于获取修改后的所述目标页面的屏幕布局的超文本标记语言和层叠样式表所在的第二内存地址。所述装置还包括：更新模块，用于根据所述第二内存地址，对所述目标页面的屏幕布局的预览链接和二维码进行更新。
需要说明的是，本实施例提供的应用于消息中间件的屏幕布局生成装置执行的技术方案和效果可以参见前述方法实施例的相关内容，在此不再赘述。
图6为本发明一个实施例提供的电子设备的示意图，如图6所示，本实施例提供的电子设备包括：存储器601和处理器602。
存储器601，用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机执行指令。存储器601可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。
处理器602，用于执行存储器601存放的程序。
其中，计算机程序存储在存储器601中，并被配置为由处理器602执行以实现本发明图2-图4所对应的实施例中任一实施例提供的屏幕布局生成方法。相关说明可以对应参见图2-图4中的步骤所对应的相关描述和效果进行理解，此处不做过多赘述。
其中，本实施例中，存储器601和处理器602通过总线连接。所述总线可以是工业标准体系结构(Industry Standard Architecture，简称为ISA)总线、外部设备互连(Peripheral Component Interconnect，简称为PCI)总线或扩展工业标准体系结构(Extended Industry Standard Architecture，简称为EISA)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图6中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
本发明一个实施例提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行以实现本发明图2-图4所对应的实施例中任一实施例提供的屏幕布局生成方法。
其中，计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
本发明提供一个实施例提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行以实现本发明图2-图4所对应的实施例中任一实施例提供的屏幕布局生成方法。
在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。
本领域技术人员在考虑说明书及实践这里公开的申请后，将容易想到本发明的其它实施方案。本发明旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求书指出。
应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求书来限制。
至此，已经结合附图所示的优选实施方式描述了本发明的技术方案，但是，本领域技术人员容易理解的是，本发明的保护范围显然不局限于这些具体实施方式。在不偏离本发明的原理的前提下，本领域技术人员可以对相关技术特征做出等同的更改或替换，这些更改或替换之后的技术方案都将落入本发明的保护范围之内。
Claims (10)
1.一种屏幕布局生成方法，其特征在于，包括：
运行页面显示器，并通过所述页面显示器开启应用程序中待生成屏幕布局的目标页面；其中，所述目标页面为用于调用后端接口数据进行显示的页面；
向服务器发送所述目标页面的数据请求，以使所述服务器根据所述数据请求，返回所述目标页面的模拟数据；其中，所述模拟数据用于模拟所述目标页面待调用的后端接口数据；
接收所述模拟数据，并将所述目标页面的模拟数据加载到所述目标页面中，对所述目标页面进行渲染；
在渲染结束后，采用层叠样式对所述目标页面中的元素进行覆盖，生成所述目标页面的屏幕布局。
2.根据权利要求1所述的屏幕布局生成方法，其特征在于，所述服务器返回的所述目标页面的模拟数据，为所述服务器将接收到的所述目标页面的数据请求转发给数据模拟器后，所述数据模拟器基于所述请求发送给所述服务器的。
3.根据权利要求1所述的屏幕布局生成方法，其特征在于，所述采用层叠样式对所述目标页面中的元素进行覆盖，生成所述目标页面的屏幕布局，包括：
获取所述目标页面中的元素的标识，并根据所述标识对所述目标页面中的元素进行分类；
针对所述目标页面中的不同类型的元素，采用不同的层叠样式对所述元素进行覆盖，生成所述目标页面的屏幕布局。
4.根据权利要求3所述的屏幕布局生成方法，其特征在于，所述目标页面中的元素包括文本类型的元素、图片类型的元素、按钮类型的元素以及图形类型的元素；所述针对所述目标页面中的不同类型的元素，采用不同的层叠样式对所述元素进行覆盖，包括：
针对所述目标页面中的文本类型的元素，采用灰色条纹加透明条纹的层叠样式对所述元素进行覆盖；
针对所述目标页面中的图片类型、按钮类型以及图形类型的元素，采用灰色块的层叠样式对所述元素进行覆盖。
5.根据权利要求1所述的屏幕布局生成方法，其特征在于，所述生成所述目标页面的屏幕布局之后，还包括：
获取所述目标页面的屏幕布局的超文本标记语言和层叠样式表，并保存到文件目录中；
将存储在所述文件目录中的所述目标页面的屏幕布局的超文本标记语言和层叠样式表进行打包，并在应用程序运行时作为插件注入到所述目标页面的超文本标记语言中。
6.根据权利要求5所述的屏幕布局生成方法，其特征在于，所述获取所述目标页面的屏幕布局的超文本标记语言和层叠样式表之后，还包括：
将所述目标页面的屏幕布局的超文本标记语言和层叠样式表写入内存；
获取所述目标页面的屏幕布局的超文本标记语言和层叠样式表所在的第一内存地址；
根据所述第一内存地址，生成所述目标页面的屏幕布局的预览链接和二维码。
7.根据权利要求6所述的屏幕布局生成方法，其特征在于，所述生成所述目标页面的屏幕布局的预览链接和二维码之后，还包括：
对所述目标页面的屏幕布局进行预览；
在预览模式下，对所述目标页面的屏幕布局的超文本标记语言和层叠样式表进行修改；
将修改后的所述目标页面的屏幕布局的超文本标记语言和层叠样式表写入内存；
获取修改后的所述目标页面的屏幕布局的超文本标记语言和层叠样式表所在的第二内存地址；
根据所述第二内存地址，对所述目标页面的屏幕布局的预览链接和二维码进行更新。
8.一种屏幕布局生成装置，其特征在于，包括：
开启模块，用于运行页面显示器，并通过所述页面显示器开启应用程序中待生成屏幕布局的目标页面；其中，所述目标页面为用于调用后端接口数据进行显示的页面；
发送模块，用于向服务器发送所述目标页面的数据请求，以使所述服务器根据所述数据请求，返回所述目标页面的模拟数据；其中，所述模拟数据用于模拟所述目标页面待调用的后端接口数据；
接收模块，用于接收所述模拟数据，并将所述目标页面的模拟数据加载到所述目标页面中，对所述目标页面进行渲染；
生成模块，用于在渲染结束后，采用层叠样式对所述目标页面中的元素进行覆盖，生成所述目标页面的屏幕布局。
9.一种电子设备，其特征在于，包括：处理器，以及与所述处理器通信连接的存储器；
所述存储器存储计算机执行指令；
所述处理器执行所述存储器存储的计算机执行指令，以实现如权利要求1-7中任一项所述的屏幕布局生成方法。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如权利要求1-7中任一项所述的屏幕布局生成方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210201903.0A CN114675916A (zh) | 2022-03-02 | 2022-03-02 | 屏幕布局生成方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210201903.0A CN114675916A (zh) | 2022-03-02 | 2022-03-02 | 屏幕布局生成方法、装置、设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114675916A true CN114675916A (zh) | 2022-06-28 |
Family
ID=82071773
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210201903.0A Pending CN114675916A (zh) | 2022-03-02 | 2022-03-02 | 屏幕布局生成方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114675916A (zh) |
Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102323880A (zh) * | 2011-06-30 | 2012-01-18 | 中兴通讯股份有限公司 | 基于浏览器解析方式的手机应用界面的开发方法和终端 |
| CN103051684A (zh) * | 2012-12-07 | 2013-04-17 | 百度在线网络技术（北京）有限公司 | 将网站转化为Web App进行展示的方法、系统和装置 |
| CN104158836A (zh) * | 2014-06-23 | 2014-11-19 | 浙江大学城市学院 | 一种通过数据渲染移动应用界面的方法 |
| CN104932889A (zh) * | 2015-06-15 | 2015-09-23 | 北京奇虎科技有限公司 | 页面可视化生成方法和装置 |
| CN106991154A (zh) * | 2017-03-29 | 2017-07-28 | 百度在线网络技术（北京）有限公司 | 网页渲染方法、装置、终端及服务器 |
| CN107169007A (zh) * | 2017-03-31 | 2017-09-15 | 北京奇艺世纪科技有限公司 | 一种移动终端的显示界面设置方法及装置 |
| CN111158828A (zh) * | 2019-12-30 | 2020-05-15 | 青岛海尔科技有限公司 | 应用程序app的用户界面确定方法及装置、存储介质 |
| CN111752443A (zh) * | 2019-03-28 | 2020-10-09 | 华为技术有限公司 | 显示设备控制页面的方法、相关装置及系统 |
| CN113010827A (zh) * | 2021-03-16 | 2021-06-22 | 北京百度网讯科技有限公司 | 页面渲染方法、装置、电子设备以及存储介质 |
| CN113867694A (zh) * | 2021-09-27 | 2021-12-31 | 上海汇付数据服务有限公司 | 一种智能生成前端代码的方法和系统 |
| CN113971338A (zh) * | 2021-09-22 | 2022-01-25 | 青岛海尔科技有限公司 | 应用场景的模拟方法和装置、存储介质及电子装置 |
| CN114090002A (zh) * | 2021-11-08 | 2022-02-25 | 青岛海尔科技有限公司 | 前端界面构建方法、装置、电子设备和存储介质 |
-
2022
- 2022-03-02 CN CN202210201903.0A patent/CN114675916A/zh active Pending
Patent Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102323880A (zh) * | 2011-06-30 | 2012-01-18 | 中兴通讯股份有限公司 | 基于浏览器解析方式的手机应用界面的开发方法和终端 |
| CN103051684A (zh) * | 2012-12-07 | 2013-04-17 | 百度在线网络技术（北京）有限公司 | 将网站转化为Web App进行展示的方法、系统和装置 |
| CN104158836A (zh) * | 2014-06-23 | 2014-11-19 | 浙江大学城市学院 | 一种通过数据渲染移动应用界面的方法 |
| CN104932889A (zh) * | 2015-06-15 | 2015-09-23 | 北京奇虎科技有限公司 | 页面可视化生成方法和装置 |
| CN106991154A (zh) * | 2017-03-29 | 2017-07-28 | 百度在线网络技术（北京）有限公司 | 网页渲染方法、装置、终端及服务器 |
| CN107169007A (zh) * | 2017-03-31 | 2017-09-15 | 北京奇艺世纪科技有限公司 | 一种移动终端的显示界面设置方法及装置 |
| CN111752443A (zh) * | 2019-03-28 | 2020-10-09 | 华为技术有限公司 | 显示设备控制页面的方法、相关装置及系统 |
| CN111158828A (zh) * | 2019-12-30 | 2020-05-15 | 青岛海尔科技有限公司 | 应用程序app的用户界面确定方法及装置、存储介质 |
| CN113010827A (zh) * | 2021-03-16 | 2021-06-22 | 北京百度网讯科技有限公司 | 页面渲染方法、装置、电子设备以及存储介质 |
| CN113971338A (zh) * | 2021-09-22 | 2022-01-25 | 青岛海尔科技有限公司 | 应用场景的模拟方法和装置、存储介质及电子装置 |
| CN113867694A (zh) * | 2021-09-27 | 2021-12-31 | 上海汇付数据服务有限公司 | 一种智能生成前端代码的方法和系统 |
| CN114090002A (zh) * | 2021-11-08 | 2022-02-25 | 青岛海尔科技有限公司 | 前端界面构建方法、装置、电子设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109684054B (zh) | 信息处理方法及装置、电子设备及存储器 | |
| CN102855142B (zh) | 一种基于ria的客户端框架结构及其实现方法 | |
| KR20150091132A (ko) | 페이지 렌더링 방법 및 장치 | |
| CN106201893B (zh) | 一种Java字节码调试器及调试方法 | |
| CN103064680B (zh) | 浏览器中插件的播放方法及装置 | |
| CN108304234B (zh) | 一种页面展示方法及装置 | |
| CN109445775B (zh) | 一键活动内嵌代码方法、装置及计算机可读存储介质 | |
| CN111459478A (zh) | 一种生成网页的方法及终端 | |
| CN108762956A (zh) | 获取Native本地数据的方法、服务器、移动终端及存储介质 | |
| CN110321504B (zh) | 一种页面处理方法及装置 | |
| CN113010827A (zh) | 页面渲染方法、装置、电子设备以及存储介质 | |
| CN110851206A (zh) | 一种车型配置文件拓展方法、装置、设备及可读存储介质 | |
| CN102388363B (zh) | 电子器件及执行虚拟机中指令的方法 | |
| CN102819542B (zh) | 展现实例文档的方法及装置 | |
| US20120030557A1 (en) | Method and apparatus of accessing and modifying the content of an electronic data form | |
| CN114675916A (zh) | 屏幕布局生成方法、装置、设备及存储介质 | |
| CN103077047B (zh) | 一种插件播放方法及装置 | |
| CN105989075A (zh) | 一种浏览器显示图像的方法、装置和系统 | |
| CN111507057A (zh) | Pads图纸的输出方法、装置及计算机可读存储介质 | |
| CN115470426B (zh) | 浏览器内核确定方法、装置、计算机设备和存储介质 | |
| CN110457669A (zh) | 方便业务逻辑控制的基于b/s架构的表单处理方法及系统 | |
| EP4033378A1 (en) | Rendering method, electronic device and storage medium | |
| CN115454403A (zh) | 页面搭建方法、装置及存储介质 | |
| US20130145249A1 (en) | Smart annotation anchoring process | |
| CN113656739A (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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20220628 |
|
| RJ01 | Rejection of invention patent application after publication |