CN115048172A - Page adaptation method and device, electronic equipment and storage medium - Google Patents
Page adaptation method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN115048172A CN115048172A CN202210690526.1A CN202210690526A CN115048172A CN 115048172 A CN115048172 A CN 115048172A CN 202210690526 A CN202210690526 A CN 202210690526A CN 115048172 A CN115048172 A CN 115048172A
- Authority
- CN
- China
- Prior art keywords
- page
- target
- adaptation data
- window
- adaptation
- 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
- 230000006978 adaptation Effects 0.000 title claims abstract description 230
- 238000000034 method Methods 0.000 title claims abstract description 78
- 238000009877 rendering Methods 0.000 claims abstract description 34
- 230000008569 process Effects 0.000 claims abstract description 26
- 238000004891 communication Methods 0.000 claims description 19
- 238000001514 detection method Methods 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 13
- 230000003044 adaptive effect Effects 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 11
- 238000012423 maintenance Methods 0.000 abstract description 11
- 230000008859 change Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000012512 characterization method Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 230000001960 triggered 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Digital Computer Display Output (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the invention provides a page adaptation method, a page adaptation device, electronic equipment and a storage medium, and relates to the technical field of computers. The method comprises the following steps: when the adaptation of a target page to be performed is detected, determining the current size of a display window of a client; searching a window state corresponding to the current size of the display window from a plurality of window states as a target window state; searching page layout information and/or page style information corresponding to the target window state from the designated adaptation data as information to be utilized; and rendering the target page based on the information to be utilized and the element data to be displayed of the target page. By the scheme, the aim of reducing the development and maintenance complexity in the adaptation process can be fulfilled.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a page adaptation method and apparatus, an electronic device, and a storage medium.
Background
With the screen size of the terminal equipment becoming richer and more popular, the Application (APP) page or the webpage page needs to be adapted to display windows of different sizes; the terminal equipment comprises equipment capable of displaying pages, such as a mobile phone, a notebook computer, a tablet personal computer, a vehicle-mounted computer and the like.
In the related art, in the page adaptation process, after the current size of the display window is determined, the page is rendered by using the code content which is preset for the page of the current size and in which information such as layout, style and the like is embedded, so that the page is adapted to the display window.
However, in order to implement page adaptation in the related art, separate code content needs to be set for each window size for the same page, resulting in high development and maintenance complexity.
Disclosure of Invention
The embodiment of the invention aims to provide a page adaptation method, a page adaptation device, electronic equipment and a storage medium, which are used for reducing the complexity of page adaptation. The specific technical scheme is as follows:
in a first aspect, an embodiment of the present invention provides a page adaptation method, which is applied to a client, and the method includes:
when the adaptation of a target page to be performed is detected, determining the current size of a display window of a client;
searching a window state corresponding to the current size of the display window from a plurality of window states as a target window state; wherein each window state corresponds to a size range of the display window;
searching page layout information and/or page style information corresponding to the target window state from the designated adaptation data as information to be utilized; the designated adaptation data comprises page layout information and/or page style information corresponding to each window state aiming at a target page, wherein the page layout information corresponding to any window state represents the card layout information of the target page in the window state, and the page style information corresponding to any window state represents the style information of a view component in the card of the target page in the window state;
and rendering the target page based on the information to be utilized and the element data to be displayed of the target page.
Optionally, the detection method to be adapted for the target page includes:
detecting that the display mode of a display window of a client changes in the display process of the target page; wherein the display mode comprises a landscape mode or a portrait mode.
Optionally, the detection method to be adapted for the target page includes:
and detecting that the display size of the display window of the client is reduced or enlarged in the display process of the target page.
Optionally, the specified adaptation data is data stored locally by the client;
the method further comprises the following steps:
identifying whether the specified adaptation data is the same as target adaptation data stored in a server and aiming at the target page or not; the target adaptation data is page layout information and/or page style information corresponding to each window state;
if the target page is different from the target page in the server, acquiring target adaptation data of the target page in the server, and updating the specified adaptation data by using the acquired target adaptation data.
Optionally, the identifying whether the target adaptation data in the specified adaptation data is the same as the target adaptation data stored in the server for the target page includes:
when a specified instruction is received, identifying whether target adaptation data in the specified adaptation data is the same as target adaptation data stored in a server and aiming at the target page or not; the specified instruction is an instruction for displaying the target page at a client.
Optionally, the identifying whether target adaptation data in the specified adaptation data is the same as target adaptation data stored in a server for the target page includes:
acquiring a target version number of target adaptation data aiming at a target page in a server;
identifying whether the target version number is the same as a historical version number; wherein the historical version number is the version number of target adaptation data in the specified adaptation data;
if the target adaptation data is different from the target adaptation data stored in the server and aiming at the target page, judging that the target adaptation data in the specified adaptation data is different from the target adaptation data stored in the server and aiming at the target page.
Optionally, the rendering the target page based on the information to be utilized and the element data to be displayed of the target page includes:
laying out the cards in the target page by using page layout information in the information to be utilized;
rendering the view components of the cards in the target page by using the page style information in the information to be utilized and the element data to be displayed of the target page.
In a second aspect, an embodiment of the present invention provides a page adaptation apparatus, which is applied to a client, where the apparatus includes:
the determining module is used for determining the current size of a display window of the client when the adaptation of the target page to be performed is detected;
the first searching module is used for searching a window state corresponding to the current size of the display window from a plurality of window states as a target window state; wherein each window state corresponds to a size range of the display window;
the second searching module is used for searching page layout information and/or page style information corresponding to the target window state from the designated adaptive data as information to be utilized; the specified adaptation data comprise page layout information and/or page style information corresponding to each window state aiming at a target page, the page layout information corresponding to any window state represents the card layout information of the target page in the window state, and the page style information corresponding to any window state represents the style information of a view component of the target page in the card in the window state;
and the rendering module is used for rendering the target page based on the information to be utilized and the element data to be displayed of the target page.
Optionally, the detection method to be adapted for the target page includes:
detecting that the display mode of a display window of a client changes in the display process of the target page; wherein the display mode comprises a landscape mode or a portrait mode.
Optionally, the detection method to be adapted for the target page includes:
and detecting that the display size of the display window of the client is reduced or enlarged in the display process of the target page.
Optionally, the specified adaptation data is data stored locally by the client;
the device further comprises:
the identification module is used for identifying whether the specified adaptation data is the same as the target adaptation data which is stored in the server and aims at the target page or not; the target adaptation data is page layout information and/or page style information corresponding to each window state;
and the updating module is used for acquiring the target adaptation data of the target page in the server if the target adaptation data is different from the target adaptation data of the target page in the server, and updating the specified adaptation data by using the acquired target adaptation data. Optionally, the identification module comprises:
the first identification submodule is used for identifying whether target adaptation data in the specified adaptation data are the same as target adaptation data which are stored in a server and aim at the target page or not when a specified instruction is received; the specified instruction is an instruction for displaying the target page at a client.
Optionally, the identification module comprises:
the second identification submodule is used for acquiring a target version number of target adaptation data aiming at a target page in the server; identifying whether the target version number is the same as a historical version number; the historical version number is the version number of target adaptation data in the specified adaptation data; if the target adaptation data is different from the target adaptation data stored in the server and aiming at the target page, judging that the target adaptation data in the specified adaptation data is different from the target adaptation data stored in the server and aiming at the target page.
Optionally, the rendering module is specifically configured to:
laying out the cards in the target page by using page layout information in the information to be utilized;
and rendering the view component of the card in the target page by using the page style information in the information to be utilized and the element data to be displayed of the target page.
In a third aspect, an embodiment of the present invention provides an electronic device, including a processor, a communication interface, a memory, and a communication bus, where the processor and the communication interface complete communication between the memory and the processor through the communication bus;
a memory for storing a computer program;
and the processor is used for realizing any page adaptation method when executing the program stored in the memory.
In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, in which a computer program is stored, and the computer program, when executed by a processor, implements method steps for page adaptation.
In a fifth aspect, an embodiment of the present invention further provides a computer program product including instructions, which when run on a computer, cause the computer to perform any one of the above-mentioned page adaptation methods.
The embodiment of the invention has the following beneficial effects:
the embodiment of the invention provides a scheme, when a target page is to be adapted, the current size of a display window of a client can be determined, and a window state corresponding to the current size is searched from a plurality of window states and is used as a target window state; and then, directly searching page layout information and/or page style information corresponding to the target window state from the specified adaptation data, and rendering the page by using the searched information. Compared with the prior art, the method and the device have the advantages that code content does not need to be set for page layout and/or styles of each window size, element data of the page is separated from page layout information and/or page style information, various sizes of the display window are abstracted into various window states, and corresponding page layout information and/or page style information is set for each window state, so that a large number of codes and layout complexity are greatly reduced, and the purpose of reducing development and maintenance complexity is achieved.
Of course, not all of the advantages described above need to be achieved at the same time in the practice of any one product or method of the invention.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below.
Fig. 1 is a flowchart of a page adaptation method according to an embodiment of the present invention;
FIG. 2 is a diagram illustrating various window states provided by an embodiment of the present invention;
FIG. 3 is a schematic diagram of a page provided by an embodiment of the present invention;
fig. 4 is a flowchart of a page adaptation method according to an embodiment of the present invention;
fig. 5 is a schematic structural diagram of a page adaptation apparatus according to an embodiment of the present invention;
fig. 6 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be described below with reference to the drawings in the embodiments of the present invention.
When the size of the display window of the client changes, the page needs to be adapted to the display window, that is, the page with the size matching the size is displayed in the current display window. In the related art, in order to implement page adaptation, a separate code content is set for each size of a display window, and information such as a page layout and a style which are adapted to the size of the window is embedded in the code content; thus, after the current size of the display window is determined, page rendering can be performed by using the code content preset for the current size, so that adaptation is completed, and thus the adaptation is completed.
However, the adoption of the related art will undoubtedly result in that for the same page, separate code content needs to be set for each window size, and thus, a large amount of code needs to be set, resulting in complicated development and maintenance. Particularly, the problem of complex development and maintenance is more obvious when only a small amount of page display content is changed.
Based on this, the embodiment of the invention provides a page adaptation method, a page adaptation device, an electronic device and a storage medium, so as to achieve the purpose of reducing the complexity of development and maintenance during page adaptation.
First, a page adaptation method provided by an embodiment of the present invention is described below.
The page adaptation method provided by the embodiment of the invention can be applied to the client, wherein the client is functional software running in the electronic equipment. In specific application, the electronic device may be a terminal device such as a smart phone or a tablet computer. Moreover, the client may be any client with a page adaptation requirement, for example: the client can be a video service type client, a news type client, an instant messaging type client, and the like.
The page adaptation method provided by the embodiment of the invention can comprise the following steps:
when the target page is to be adapted, determining the current size of a display window of a client;
searching a window state corresponding to the current size of the display window from a plurality of window states as a target window state; wherein each window state corresponds to a size range of the display window;
searching page layout information and/or page style information corresponding to the target window state from the designated adaptation data as information to be utilized; the designated adaptation data comprises page layout information and/or page style information corresponding to each window state aiming at a target page, wherein the page layout information corresponding to any window state represents the card layout information of the target page in the window state, and the page style information corresponding to any window state represents the style information of a view component in the card of the target page in the window state;
and rendering the target page based on the information to be utilized and the element data to be displayed of the target page.
The embodiment of the invention provides a scheme, when a target page is to be adapted, the current size of a display window of a client can be determined, and a window state corresponding to the current size is searched from a plurality of window states and is used as a target window state; and then, directly searching page layout information and/or page style information corresponding to the target window state from the specified adaptation data, and performing page rendering by using the searched information. Compared with the prior art, the method and the device have the advantages that code content does not need to be set for page layout and/or styles of each window size, element data of the page is separated from page layout information and/or page style information, various sizes of the display window are abstracted into various window states, and corresponding page layout information and/or page style information is set for each window state, so that a large number of codes and layout complexity are greatly reduced, and the purpose of reducing development and maintenance complexity is achieved. In addition, the scheme has better expandability on the window state; the configuration of the page layout information and the page style information can be flexibly and controllably realized, and the requirements of cloud control, operation adjustment and the like are met.
A page adaptation method provided in an embodiment of the present invention is specifically described below with reference to the accompanying drawings.
Fig. 1 is a schematic flowchart of a page adaptation method according to an embodiment of the present invention, and as shown in fig. 1, the method may include the following steps S101 to S104:
s101: when the target page is to be adapted, determining the current size of a display window of a client;
because the size of the display window of the client can be changed according to the user requirement or the screen mode (horizontal screen or vertical screen), the page of the client needs to be adapted. Specifically, when the target page is to be adapted, the current size of the client display window may be determined, so that a corresponding operation is performed with respect to the current size. That is, the current size of the display window of the current client needs to be determined first, so that the subsequent adaptation operation is performed on the page according to the current size. For example, the characterization of the window size may be: a pixel value of a window width, a height or width of a window, an area of a window, and the like.
In addition, the current size of the display window of the client is the current size of the changed target page in the display window of the client. For example, rotating, zooming, split-screen or full-screen operations on a page in a display window of a client all cause a page size in the display window of the client to change. Therefore, when the adaptation of the target page is to be performed, the current size of the display window of the client can be determined, and the display page of the client is adapted by using the current size.
Various detection modes for the target page to be adapted exist.
Illustratively, in an implementation manner, a detection manner to be adapted for a target page is as follows: detecting that the display mode of a display window of a client changes in the display process of the target page; wherein the display mode comprises a landscape mode or a portrait mode. For this implementation, in the process of displaying the target page, the target page may be in any one of a landscape mode and a portrait mode, and the user may rotate the terminal device to which the client belongs, so that the display mode of the target page is changed, for example: the display mode is changed from a horizontal screen mode to a vertical screen mode, or the display mode is changed from the vertical screen mode to the horizontal screen mode; correspondingly, in the process of displaying the target page, whether the display mode of the display window changes or not can be monitored, for example: a change between the landscape display mode and the portrait display mode. If the target page is changed, the target page to be adapted can be detected.
Illustratively, in another implementation manner, a detection manner to be adapted for a target page is as follows: and detecting that the display size of the display window of the client is reduced or enlarged in the display process of the target page. For such an implementation manner, in the display process of the target page, the user may adjust the size of the display window of the target page, for example: and (3) performing operations such as enlarging, reducing, splitting and full-screen on the display window of the target page, wherein the user can click the display scale of the display window of the target page or perform page zooming operation through the edge frame of the display window of the target page. In addition, the client may also receive a zoom instruction, and then perform zoom adjustment on the size of the display window of the target page, where the zoom instruction is an instruction to reduce or enlarge the target page displayed by the client. Correspondingly, the client can monitor whether the display size of the display window is changed in a zooming mode, and if the display size of the display window is changed in a zooming mode, the target page can be detected to be adapted.
In addition, in a scene of displaying a page of the client display window for the first time, the client display window is displayed for the first time, and the size of the displayed page can be directly determined as the current size of the client display window. In a scenario where a terminal device to which a client display window page belongs changes, for example: the page of a client display window on the mobile phone is projected to the television; in such a scenario, the terminal device where the display window is located changes, and the page of the client display window also changes, so that the current size of the display window of the client of the changed terminal device can be determined. Further, the operation of page adaptation can be performed using the current size.
The above description of the detection method to be adapted for the target page is only an example, and should not be construed as limiting the embodiment of the present invention.
S102: searching a window state corresponding to the current size of the display window from the plurality of window states as a target window state;
since there may be multiple sizes of display windows, in order to simplify layout complexity, in this embodiment, various sizes of display windows are abstracted into multiple window states, where each window state corresponds to a size range of the display window. Thus, after the current size of the display window is determined, the window state corresponding to the current size of the display window can be searched from the window states to serve as the target window state.
The specific number of window states may be set according to the available size of the display window, which is not limited in the embodiment of the present invention. Moreover, for different types of devices, the specific number of window states and the corresponding size range of the client may also be different, because the display window of the client may have different window sizes. Illustratively, as shown in fig. 2, the window states may be divided into a large state, a medium state and a small state, but are not limited thereto. Wherein top banner is the top banner, i.e. the title; block is a view component, and one Block can be a poster image common to one page.
In addition, it should be noted that by abstracting each size of the display window into a controllable plurality of window states, the complexity of the layout can be reduced, and at the same time, better extensibility can be maintained on the framework to expand more window states.
S103: searching page layout information and/or page style information corresponding to the target window state from the specified adaptive data as information to be utilized;
in this embodiment, the element data of the target page is separated from the page layout information and the page style information, and designated adaptation data is established, where the designated adaptation data includes page layout information and/or page style information corresponding to each window state for the target page. Thus, after the target window state is determined, the layout information and/or the page style information corresponding to the target window state can be searched from the designated adaptation data, so that the subsequent page adaptation step is completed. The page layout information corresponding to any window state represents the card layout information of the target page in the window state, and the page style information corresponding to any window state represents the style information of the view assembly in the card of the target page in the window state.
It is understood that the storage form of the specific adaptation data can be set according to actual situations, and the following examples are given: the specified adaptation data may be stored in a data table, for example: the data table may be a map table, wherein the map table may be a data table about Key-vlaue, Key represents window status, and value represents page layout information and/or page style information, but is not limited thereto. In addition, the specified adaptation data may be locally stored by the client, and the locally stored specified adaptation data may be obtained from the server in advance, and the specific obtaining time may include, but is not limited to: when the client is installed, or the client receives a display instruction aiming at a target page for the first time; of course, the specified adaptation data may also be stored in the server, so that the client may request the specified adaptation data from the server in the video process of the target page.
It should be noted that a Card, i.e. a Card, is a component of a page, and a page may be composed of a plurality of cards from top to bottom; page Layout information, i.e., Layout; view components, namely blocks, one of which can be a poster view common to a page; page Style information, namely CSS (Cascading Style Sheets). Through the configuration of the Layout and the CSS, the flexibility and the controllability can be realized, and the requirements of operation control, operation adjustment and the like can be met.
To facilitate understanding of the relationship of the page, card, view components, the following is described in conjunction with FIG. 3:
illustratively, as shown in FIG. 3, a Page contains Page, Card, Block. Wherein:
page: i.e. pages, typically complete pages presented on a screen, such as a tv show channel page;
and (2) Card: namely, cards, are components of pages, and a page is composed of a plurality of cards from top to bottom; one card may contain a top banner and a plurality of blocks.
Block: namely a view component, and a common poster image of a page is a Block; illustratively, one Block may contain an Image, Meta, Button, and the like.
S104: and rendering the target page based on the information to be utilized and the element data to be displayed of the target page.
In this embodiment, rendering the target page based on the information to be utilized and the element data to be displayed of the target page may specifically include: the method comprises the steps that the page layout information in the target window state in the information to be utilized, which is searched from the specified adaptive data, is utilized to lay out the cards in the target page; and rendering the view component of the card in the target page by using the page style information in the target window state in the information to be utilized and the element data to be displayed of the target page, which are searched from the specified adaptation data. When the cards are laid out, the contents of the cards do not need to be displayed, and only the positions of the cards are laid out, so that the layout does not need to be performed by using the element data to be displayed; when rendering the view component of the card in the target page, the detailed information of the view component needs to be displayed, for example: pictures, buttons, etc., and thus the target page needs to be rendered based on the element data to be presented on the target page.
The element data to be displayed in the target page may include, but is not limited to: pictures to be displayed, words to be displayed, buttons to be displayed, links to be displayed, and the like. In addition, the element data to be displayed in the target page is acquired by the client before the target page is rendered, for example: if the detection mode of the adaptation of the target page to be performed is as follows: receiving a specified instruction, wherein the specified instruction is an instruction for displaying the target page at a client; then, the element data of the target page may be obtained from the server after receiving the specified instruction; if the detection mode of the adaptation of the target page to be performed is as follows: the display mode of a display window of a client changes in the display process of a target page; or, the display size of the display window of the client is changed in a scaling manner; then, the element data of the target page may be the cached element data in the presentation process of the target page.
The embodiment of the invention provides a scheme, when a target page is to be adapted, the current size of a display window of a client can be determined, and a window state corresponding to the current size is searched from a plurality of window states and is used as a target window state; and then, directly searching page layout information and/or page style information corresponding to the target window state from the specified adaptation data, and performing page rendering by using the searched information. Compared with the prior art, the method and the device have the advantages that code content does not need to be set for page layout and/or styles of each window size, element data of the page is separated from page layout information and/or page style information, various sizes of the display window are abstracted into various window states, and corresponding page layout information and/or page style information is set for each window state, so that a large number of codes and layout complexity are greatly reduced, and the purpose of reducing development and maintenance complexity is achieved.
Based on the foregoing embodiment, if the adaptation data is specified as data stored locally by the client, in another embodiment of the present invention, a page adaptation method may further include the following steps a 1-A3:
step A1: identifying whether the designated adaptation data is the same as target adaptation data stored in the server and aiming at a target page or not;
the target adaptation data is page layout information and/or page style information corresponding to each window state.
Considering that the target adaptation data for the target page stored in the server may be changed according to design requirements, therefore, in order to ensure that the specified adaptation data locally stored by the client can be consistent with the server, step a 1-step a2 may be performed. For example, the identification process of step a1 may be triggered at a specific time, in this case, step a1 may be executed in no strict sequence with the steps in the foregoing embodiment, that is, for the page adaptation process, the update process of the designated adaptation data may be processed in parallel with S101-S104 in the foregoing embodiment. For example: when a display instruction for a target page is received, identifying whether target adaptation data in designated adaptation data is the same as target adaptation data stored in a server for the target page or not; or, when entering a preset updating period, identifying whether the target adaptation data in the designated adaptation data is the same as the target adaptation data stored in the server and aiming at the target page. Of course, it is also reasonable that step a1 can be performed after S101 and before S103 in the above embodiment.
Optionally, in an implementation manner, identifying whether target adaptation data in the designated adaptation data is the same as target adaptation data stored in the server for the target page may include the following steps:
acquiring a target version number of target adaptation data aiming at a target page in a server;
identifying whether the target version number is the same as a historical version number; wherein the historical version number is the version number of target adaptation data in the specified adaptation data;
if the target adaptation data is different from the target adaptation data stored in the server and aiming at the target page, judging that the target adaptation data in the specified adaptation data is different from the target adaptation data stored in the server and aiming at the target page.
For this implementation, if the target adaptation data has a version number, and if the information content of the target adaptation data changes, the version number of the target adaptation data will change, so that it is possible to detect whether the target adaptation data in the designated adaptation data is the same as the target adaptation data stored in the server for the target page by identifying whether the version number is the same.
It can be understood that the client may request to obtain the page data by using an HTTP (Hyper Text Transfer Protocol) interface, where the data returned based on the interface includes, but is not limited to, a target version number of target adaptation data for a target page, page element data, and the like, so as to obtain a target version number of the target adaptation data in the server.
The specific implementation manner of whether the target adaptation data in the identification specification adaptation data is the same as the target adaptation data for the target page stored in the server is merely an example, and should not be construed as a limitation to the embodiment of the present invention.
Step A2: and if the difference is different, acquiring target adaptation data of a target page in the server, and updating the specified adaptation data by using the acquired target adaptation data.
The obtaining of the target adaptation data of the target page in the server specifically may include: and acquiring a download address of the target adaptation data aiming at the target page, and acquiring the target adaptation data in the server from the download address.
Illustratively, in one implementation, the download address to the target adaptation data may be requested using an HTTP interface. And the client can synchronously request the download address when requesting the target version number; of course, the client may also perform step a1, and request the download address of the target adaptation data using the HTTP interface when it is recognized that the difference is not the same.
Updating the designated adaptation data by using the acquired target adaptation data, specifically, adding new adaptation data, for example: newly adding page layout information corresponding to any window state, namely card layout information of a newly added target page in the window state, or newly adding page style information corresponding to any window state, namely style information of a view component in a card of the newly added target page in the window state; or modifying adaptation data, such as: and modifying page layout information corresponding to any window state, namely modifying card layout information of the target page in the window state, or modifying page style information corresponding to any window state, namely modifying style information of a view assembly in the card of the target page in the window state.
In addition, in some cases, target adaptation data in the specified adaptation data is the same as the target adaptation data stored in the server for the target page; at this time, the designated adaptation data does not need to be updated.
The embodiment of the invention provides a scheme, when a target page is to be adapted, the current size of a display window of a client can be determined, and a window state corresponding to the current size is searched from a plurality of window states and is used as a target window state; and then, directly searching page layout information and/or page style information corresponding to the target window state from the specified adaptation data, and performing page rendering by using the searched information. Compared with the prior art, the method and the device have the advantages that code content does not need to be set for page layout and/or styles of each window size, element data of the page is separated from page layout information and/or page style information, various sizes of the display window are abstracted into various window states, and corresponding page layout information and/or page style information is set for each window state, so that a large number of codes and layout complexity are greatly reduced, and the purpose of reducing development and maintenance complexity is achieved. And the target adaptation data which is locally stored by the client and aims at the target page is kept consistent with the server.
For convenience of understanding, the page adaptation method provided by the embodiment of the present invention is described below with reference to a specific embodiment.
As shown in fig. 4, the scheme provided by this embodiment includes: a request preparation phase, wherein the processing procedure involved in the request preparation phase is as follows:
s4011: requesting page data of a target page;
when the client receives the specified instruction, the target page is used as a page to be adapted, and then the client can request page data of the target page. The client may obtain the page data of the target page by using the HTTP request, and the page data returned through the interface includes, but is not limited to, the Layout number and the CSS version number (for the above-mentioned Layout number of the target adaptation data), the download address of the Layout and the CSS (corresponding to the above-mentioned download address of the target adaptation data), the element data of the page, and the like.
The Layout information of the card is represented by the Layout; the CSS is used to represent style information of a view component.
S4012: judging whether the Layout number of the Layout and the CSS is the same as the local version number;
comparing the Layout and CSS version number acquired in the step S4011 with the local Layout and CSS version number, and judging whether the Layout and CSS version number are matched; the local Layout and CSS version numbers are version numbers of designated adaptation data locally stored by the client, and the designated adaptation data are stored in a map table;
if the determination result is yes, step S4014 is executed, and if the determination result is no, step S4013 is executed.
If the judgment result is negative, the fact that modified or newly added information exists in the Layout and CSS data is shown.
And whether the corresponding identification appointed adaptation data is the same as the target adaptation data which is stored in the server and aims at the target page or not.
S4013: updating the Layout and CSS data;
and updating the Layout and CSS data in the local map table by using the Layout and CSS download addresses issued by the interface of the step S4011.
And updating the specified adaptation data by using the acquired target adaptation data corresponding to the target adaptation data of the target page in the acquired server.
S4014: analyzing the page data;
analyzing the page data of the target page, which may be: extracting the content of each Card and Block to be displayed from the page data, that is, the element data, for example: pictures, buttons, shift keys, etc.
The scheme provided by the embodiment may further include: a page rendering stage, wherein a processing process related to the page rendering stage is specifically as follows:
s4021: acquiring the size of a display window;
and after the request preparation stage is completed, the client acquires the current size of the display window. For example, the obtaining of the display window size may specifically include: pixel values of the width of the display window are acquired. And correspondingly determining the current size of the display window of the client when the target page is to be adapted.
S4022: searching a window state corresponding to the size of the display window;
based on the width pixel value of the display window acquired in step S4021, the client may search for a corresponding window state. And searching the window state corresponding to the current size of the display window from the plurality of window states as a target window state.
S4023: acquiring corresponding Layout data;
in this embodiment, the designated adaptation data may be present in a map table, and the map table includes corresponding Layout data in each window state.
S4024: acquiring corresponding CSS data;
in this embodiment, the designated adaptation data may exist in a map table, and the map table includes corresponding CSS data in each window state.
Step S4023 and step S4024 correspond to the above-mentioned designated adaptation data, and search for page layout information and/or page style information corresponding to the target window state as information to be utilized.
S4025: rendering the page;
the Layout of the cards in the target page is carried out by utilizing the Layout data searched in the map table;
and rendering the view component of the card in the target page by using the searched CSS data in the map table and the page element data obtained by analyzing the page data.
And rendering the target page corresponding to the information to be utilized and the element data to be displayed of the target page.
In addition, S4031: monitoring screen changes;
when the screen changes, the operation of the page rendering stage is performed again.
The manner of screen change determination may be various, for example: the screen is switched between horizontal and vertical screens, or the pixel value of the width of the display window is changed.
The embodiment of the invention provides a scheme, when a target page is to be adapted, the current size of a display window of a client can be determined, and a window state corresponding to the current size is searched from a plurality of window states and is used as a target window state; and then, directly searching page layout information and/or page style information corresponding to the target window state from the specified adaptation data, and performing page rendering by using the searched information. Compared with the prior art, the method and the device have the advantages that code content does not need to be set for page layout and/or styles of each window size, element data of the page is separated from page layout information and/or page style information, various sizes of the display window are abstracted into various window states, and corresponding page layout information and/or page style information is set for each window state, so that a large number of codes and layout complexity are greatly reduced, and the purpose of reducing development and maintenance complexity is achieved.
With respect to the embodiment of the foregoing method, as shown in fig. 5, an embodiment of the present invention provides a page adaptation apparatus, where the apparatus includes:
a determining module 501, configured to determine a current size of a display window of a client when a target page of the client is to be displayed;
a first searching module 502, configured to search, from multiple window states, a window state corresponding to the current size of the display window as a target window state; wherein each window state corresponds to a size range of the display window;
a second searching module 503, configured to search page layout information and/or page style information corresponding to the target window state from the designated adaptation data, as information to be utilized; the designated adaptation data comprises page layout information and/or page style information corresponding to each window state aiming at a target page, wherein the page layout information corresponding to any window state represents the card layout information of the target page in the window state, and the page style information corresponding to any window state represents the style information of a view component in the card of the target page in the window state;
a rendering module 504, configured to render the target page based on the information to be utilized and the element data to be displayed of the target page.
The embodiment of the invention provides a scheme, when a target page is to be adapted, the current size of a display window of a client can be determined, and a window state corresponding to the current size is searched from a plurality of window states and is used as a target window state; and then, directly searching page layout information and/or page style information corresponding to the target window state from the specified adaptation data, and rendering the page by using the searched information. Compared with the prior art, the method and the device have the advantages that code content does not need to be set for page layout and/or styles of each window size, element data of the page is separated from page layout information and/or page style information, various sizes of the display window are abstracted into various window states, and corresponding page layout information and/or page style information is set for each window state, so that a large number of codes and layout complexity are greatly reduced, and the purpose of reducing development and maintenance complexity is achieved.
Optionally, the detection method for the target page to be adapted includes:
detecting that the display mode of a display window of a client changes in the display process of the target page; wherein the display mode comprises a landscape mode or a portrait mode.
Optionally, the detection method for the target page to be adapted includes:
and detecting that the display size of the display window of the client is reduced or enlarged in the display process of the target page.
Optionally, the method further includes assigning the adaptation data to be locally stored data of the client, and the apparatus further includes:
the identification module is used for identifying whether the target adaptation data in the specified adaptation data is the same as the target adaptation data which is stored in the server and aims at the target page or not; the target adaptation data is page layout information and/or page style information corresponding to each window state;
and the updating module is used for acquiring the target adaptation data of the target page in the server if the target adaptation data is different from the target adaptation data of the target page in the server, and updating the specified adaptation data by using the acquired target adaptation data.
Optionally, the identification determination module includes:
the first identification and determination submodule is used for identifying whether target adaptation data in the specified adaptation data are the same as target adaptation data which are stored in a server and aim at the target page or not when a specified instruction is received; the specified instruction is an instruction for displaying the target page at a client.
Optionally, the identification determination module includes:
the second identification determination submodule is used for acquiring a target version number of target adaptation data aiming at a target page in the server; identifying whether the target version number is the same as a historical version number; wherein the historical version number is the version number of target adaptation data in the specified adaptation data; if the target adaptation data is different, the target adaptation data in the specified adaptation data is judged to be different from the target adaptation data which is stored in the server and aims at the target page.
Optionally, the rendering module is further configured to:
laying out the cards in the target page by using page layout information in the information to be utilized;
and rendering the view component of the card in the target page by using the page style information in the information to be utilized and the element data to be displayed of the target page.
An embodiment of the present invention further provides an electronic device, as shown in fig. 6, including a processor 601, a communication interface 602, a memory 603, and a communication bus 604, where the processor 601, the communication interface 602, and the memory 603 complete mutual communication through the communication bus 604,
a memory 603 for storing a computer program;
the processor 601 is configured to implement the steps of any page adaptation method when executing the program stored in the memory 603.
The communication bus mentioned in the electronic device may be a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (EISA) bus, or the like. The communication bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one thick line is shown, but this does not mean that there is only one bus or one type of bus.
The communication interface is used for communication between the electronic equipment and other equipment.
The Memory may include a Random Access Memory (RAM) or a non-volatile Memory (non-volatile Memory), such as at least one disk Memory. Optionally, the memory may also be at least one memory device located remotely from the processor.
The Processor may be a general-purpose Processor, including a Central Processing Unit (CPU), a Network Processor (NP), and the like; the device can also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other Programmable logic device, a discrete Gate or transistor logic device, or a discrete hardware component.
In another embodiment of the present invention, a computer-readable storage medium is further provided, in which a computer program is stored, and the computer program, when executed by a processor, implements the page adaptation method described in any of the above embodiments.
In yet another embodiment provided by the present invention, there is also provided a computer program product containing instructions which, when run on a computer, cause the computer to perform the page adaptation method described in any of the above embodiments.
In the above embodiments, the implementation may be wholly or partially realized by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When loaded and executed on a computer, cause the processes or functions described in accordance with the embodiments of the invention to occur, in whole or in part. The computer may be a general purpose computer, a special purpose computer, a network of computers, or other programmable device. The computer instructions may be stored in a computer readable storage medium or transmitted from one computer readable storage medium to another, for example, from one website site, computer, server, or data center to another website site, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, Digital Subscriber Line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device, such as a server, a data center, etc., that incorporates one or more of the available media. The usable medium may be a magnetic medium (e.g., floppy Disk, hard Disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., Solid State Disk (SSD)), among others.
It is noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in the process, method, article, or apparatus that comprises the element.
All the embodiments in the present specification are described in a related manner, and the same and similar parts among the embodiments may be referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, as for the device, the electronic apparatus, and the storage medium embodiments, since they are substantially similar to the method embodiments, the description is relatively simple, and for the relevant points, reference may be made to the partial description of the method embodiments.
The above description is only for the preferred embodiment of the present invention, and is not intended to limit the scope of the present invention. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention shall fall within the protection scope of the present invention.
Claims (10)
1. A page adaptation method is applied to a client, and comprises the following steps:
when the adaptation of a target page to be performed is detected, determining the current size of a display window of a client;
searching a window state corresponding to the current size of the display window from a plurality of window states as a target window state; wherein each window state corresponds to a size range of the display window;
searching page layout information and/or page style information corresponding to the target window state from the designated adaptation data as information to be utilized; the designated adaptation data comprises page layout information and/or page style information corresponding to each window state aiming at a target page, wherein the page layout information corresponding to any window state represents the card layout information of the target page in the window state, and the page style information corresponding to any window state represents the style information of a view component in the card of the target page in the window state;
and rendering the target page based on the information to be utilized and the element data to be displayed of the target page.
2. The method according to claim 1, wherein the detection mode to be adapted for the target page comprises:
detecting that the display mode of a display window of a client changes in the display process of the target page; wherein the display mode comprises a landscape mode or a portrait mode.
3. The method according to claim 1, wherein the detection mode of the target page to be adapted comprises:
and detecting that the display size of the display window of the client is reduced or enlarged in the display process of the target page.
4. The method according to any of claims 1-3, wherein the specified adaptation data is data stored locally at the client;
the method further comprises the following steps:
identifying whether the specified adaptation data is the same as target adaptation data stored in a server and aiming at the target page or not; the target adaptation data is page layout information and/or page style information corresponding to each window state;
if the difference is different, target adaptation data of the target page in the server side is obtained, and the appointed adaptation data is updated by using the obtained target adaptation data.
5. The method of claim 4, wherein the identifying whether the target adaptation data in the designated adaptation data is the same as the target adaptation data stored in the server for the target page comprises:
when a specified instruction is received, identifying whether target adaptation data in the specified adaptation data is the same as target adaptation data stored in a server and aiming at the target page or not; the specified instruction is an instruction for displaying the target page at a client.
6. The method of claim 4, wherein the identifying whether the target adaptation data in the designated adaptation data is the same as the target adaptation data stored in the server for the target page comprises:
acquiring a target version number of target adaptation data aiming at a target page in a server;
identifying whether the target version number is the same as a historical version number; wherein the historical version number is the version number of target adaptation data in the specified adaptation data;
if the target adaptation data is different from the target adaptation data stored in the server and aiming at the target page, judging that the target adaptation data in the specified adaptation data is different from the target adaptation data stored in the server and aiming at the target page.
7. The method according to any one of claims 1-3, wherein the rendering the target page based on the element data to be presented of the target page to be utilized information comprises:
laying out the cards in the target page by using page layout information in the information to be utilized;
and rendering the view component of the card in the target page by using the page style information in the information to be utilized and the element data to be displayed of the target page.
8. A page adaptation apparatus, applied to a client, the apparatus comprising:
the determining module is used for determining the current size of a display window of the client when the adaptation of the target page to be performed is detected;
the first searching module is used for searching a window state corresponding to the current size of the display window from a plurality of window states as a target window state; wherein each window state corresponds to a size range of the display window;
the second searching module is used for searching page layout information and/or page style information corresponding to the target window state from the specified adaptive data as information to be utilized; the designated adaptation data comprises page layout information and/or page style information corresponding to each window state aiming at a target page, wherein the page layout information corresponding to any window state represents the card layout information of the target page in the window state, and the page style information corresponding to any window state represents the style information of a view component in the card of the target page in the window state;
and the rendering module is used for rendering the target page based on the information to be utilized and the element data to be displayed of the target page.
9. An electronic device is characterized by comprising a processor, a communication interface, a memory and a communication bus, wherein the processor and the communication interface are used for realizing mutual communication by the memory through the communication bus;
a memory for storing a computer program;
a processor for implementing the method steps of any of claims 1 to 7 when executing a program stored in the memory.
10. A computer-readable storage medium, characterized in that a computer program is stored in the computer-readable storage medium, which computer program, when being executed by a processor, carries out the method steps of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210690526.1A CN115048172A (en) | 2022-06-17 | 2022-06-17 | Page adaptation method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210690526.1A CN115048172A (en) | 2022-06-17 | 2022-06-17 | Page adaptation method and device, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115048172A true CN115048172A (en) | 2022-09-13 |
Family
ID=83163449
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210690526.1A Pending CN115048172A (en) | 2022-06-17 | 2022-06-17 | Page adaptation method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115048172A (en) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102520928A (en) * | 2011-07-18 | 2012-06-27 | 百度在线网络技术（北京）有限公司 | Method and device for displaying status of page window |
| CN103164197A (en) * | 2011-12-14 | 2013-06-19 | 中兴通讯股份有限公司 | User interface (UI) distribution self-adaption method, mobile device and distribution generating device |
| CN103488403A (en) * | 2013-08-30 | 2014-01-01 | 小米科技有限责任公司 | Switching method and device for interface layout and mobile terminal |
| CN106649369A (en) * | 2015-10-30 | 2017-05-10 | 北京国双科技有限公司 | Adjustment method and device for window display |
| CN108399072A (en) * | 2017-02-06 | 2018-08-14 | 腾讯科技（深圳）有限公司 | Five application page update method and device |
| CN108427546A (en) * | 2018-05-03 | 2018-08-21 | 深圳Tcl新技术有限公司 | Full screen adaptation method, display device and the storage medium of display device |
| CN109918165A (en) * | 2019-03-12 | 2019-06-21 | 北京小米移动软件有限公司 | Interface display method, device and storage medium |
| CN110308906A (en) * | 2019-07-04 | 2019-10-08 | 北京奇艺世纪科技有限公司 | A kind of display interface method and device |
-
2022
- 2022-06-17 CN CN202210690526.1A patent/CN115048172A/en active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102520928A (en) * | 2011-07-18 | 2012-06-27 | 百度在线网络技术（北京）有限公司 | Method and device for displaying status of page window |
| CN103164197A (en) * | 2011-12-14 | 2013-06-19 | 中兴通讯股份有限公司 | User interface (UI) distribution self-adaption method, mobile device and distribution generating device |
| CN103488403A (en) * | 2013-08-30 | 2014-01-01 | 小米科技有限责任公司 | Switching method and device for interface layout and mobile terminal |
| CN106649369A (en) * | 2015-10-30 | 2017-05-10 | 北京国双科技有限公司 | Adjustment method and device for window display |
| CN108399072A (en) * | 2017-02-06 | 2018-08-14 | 腾讯科技（深圳）有限公司 | Five application page update method and device |
| CN108427546A (en) * | 2018-05-03 | 2018-08-21 | 深圳Tcl新技术有限公司 | Full screen adaptation method, display device and the storage medium of display device |
| CN109918165A (en) * | 2019-03-12 | 2019-06-21 | 北京小米移动软件有限公司 | Interface display method, device and storage medium |
| CN110308906A (en) * | 2019-07-04 | 2019-10-08 | 北京奇艺世纪科技有限公司 | A kind of display interface method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP6684881B2 (en) | System and method for managing content items having multiple resolutions | |
| US11630861B2 (en) | Method and apparatus for video searching, terminal and storage medium | |
| US8966373B2 (en) | Method and system for presenting network resources | |
| EP3623942A1 (en) | Message processing method and apparatus, storage medium, and computer device | |
| US10423527B2 (en) | Memory management and image display for mobile devices | |
| US10878044B2 (en) | System and method for providing content recommendation service | |
| CN109976620B (en) | Method, device, equipment and storage medium for determining list item display attribute information | |
| US20110202828A1 (en) | Method and system for presenting web page resources | |
| CN111510760A (en) | Video information display method and device, storage medium and electronic equipment | |
| KR20150071252A (en) | Method and apparatus for controlling a composition of a picture in electronic device | |
| JP7104242B2 (en) | Methods for sharing personal information, devices, terminal equipment and storage media | |
| US10496696B2 (en) | Search method and apparatus | |
| CN111339418B (en) | Page display method, page display device, electronic equipment and computer readable medium | |
| CN113238706B (en) | View display method, device, equipment and medium | |
| EP3989589A1 (en) | Video update push method and terminal | |
| EP3057006A1 (en) | Method and device of filtering address | |
| CN112399010B (en) | Page display method and device and electronic equipment | |
| JP5303534B2 (en) | Appearance information processing apparatus and method | |
| CN110569097B (en) | Information display method and device | |
| CN111367606A (en) | Application page display method, device, terminal and medium | |
| CN111581554A (en) | Information recommendation method and device | |
| CN111061532A (en) | Wallpaper display method and terminal equipment | |
| CN111310086A (en) | Page jump method and device and electronic equipment | |
| CN113805997B (en) | Information display method, information display device, electronic equipment and storage medium | |
| CN115048172A (en) | Page adaptation method and device, electronic equipment and storage medium |
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 |