CN115080027B - Web page automatic adaptation method, device, equipment and storage medium - Google Patents
Web page automatic adaptation method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN115080027B CN115080027B CN202211015971.4A CN202211015971A CN115080027B CN 115080027 B CN115080027 B CN 115080027B CN 202211015971 A CN202211015971 A CN 202211015971A CN 115080027 B CN115080027 B CN 115080027B
- Authority
- CN
- China
- Prior art keywords
- web page
- unit
- syntax tree
- abstract syntax
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a method, a device, equipment and a storage medium for automatically adapting a web page, belonging to the field of information processing and comprising the following steps: analyzing a front-end code file corresponding to the web page design draft to obtain a corresponding abstract syntax tree; traversing the size style attribute in the abstract syntax tree, and taking a unit set in the size style attribute as a target unit; determining a conversion ratio, and converting the target unit into a preset unit based on the conversion ratio; and realizing automatic adaptation of the web page on a terminal screen based on the abstract syntax tree converted by the unit. The method and the device can improve the adaptation efficiency of the web page.
Description
Technical Field
The present application relates to the field of information processing, and in particular, to a method, an apparatus, a device, and a storage medium for automatically adapting a web page.
Background
Due to the fact that screen resolutions of different industrial devices are different, the problem that a web page is compatible with different terminal screens needs to be solved.
The current method for solving the problem is as follows: different sizes of the web page are obtained by querying the screen resolution of the terminal through the media, that is, different web page styles can be set for different screen resolutions through media query, the more the setting is, but the enumeration mode is more complicated, and the corresponding relation between the screen resolution and the web page size needs to be calculated manually.
Therefore, the problem of low web page adaptation efficiency exists in the prior art.
Disclosure of Invention
The application mainly aims to provide a method, a device, equipment and a storage medium for automatically adapting a web page, and aims to solve the technical problem of low adaptation efficiency of the web page.
In order to achieve the above object, the present application provides an automatic web page adaptation method, which includes the following steps:
analyzing a front-end code file corresponding to the web page design draft to obtain a corresponding abstract syntax tree;
traversing the size style attribute in the abstract syntax tree, and taking the unit set in the size style attribute as a target unit;
determining a conversion ratio, and converting the target unit into a preset unit based on the conversion ratio;
and realizing automatic adaptation of the web page on a terminal screen based on the abstract syntax tree subjected to unit conversion.
In a possible embodiment of the present application, the step of determining the conversion ratio includes:
acquiring the resolution of a terminal screen;
and determining the conversion ratio in the preset unit conversion rule based on the resolution of the terminal screen.
In a possible embodiment of the present application, the step of determining a conversion ratio in the preset unit conversion rule based on the terminal screen resolution includes:
equally dividing horizontal pixels and vertical pixels of the resolution of the terminal screen into preset parts respectively;
and respectively taking the horizontal pixel and the vertical pixel corresponding to each copy as the conversion proportion.
In one possible embodiment of the present application, the step of converting the target unit based on the conversion ratio includes:
and acquiring a numerical value corresponding to a target unit set in the dimension style attribute, and calculating the numerical value based on the conversion ratio to obtain the calculated numerical value and a preset unit corresponding to the calculated numerical value.
In a possible embodiment of the present application, after the step of determining a conversion ratio and converting the target unit into a preset unit based on the conversion ratio, the method further includes:
and detecting whether the calculated numerical value and the corresponding preset unit have errors or not, and if so, converting the target unit again.
In a possible embodiment of the present application, the step of implementing automatic adaptation of the web page on the terminal screen based on the abstract syntax tree subjected to unit conversion includes:
and converting the abstract syntax tree subjected to unit conversion to generate a new front end code file, so that the terminal screen calls the new front end code file to realize automatic adaptation when loading the web page.
In a possible embodiment of the present application, after the step of implementing automatic adaptation of the web page on the terminal screen based on the unit-transformed abstract syntax tree, the method further includes:
detecting whether the size of the web page displayed on the terminal screen and the corresponding size in the web page design draft are in equal proportion change or not;
if the size is not equal to the scale change, returning to the step of traversing the size style attribute in the abstract syntax tree and taking the unit set in the size style attribute as a target unit until the corresponding size is equal to the scale change.
The present application further provides an apparatus for automatically adapting a web page, the apparatus comprising:
the analysis module is used for analyzing the front-end code file corresponding to the web page design draft to obtain a corresponding abstract syntax tree;
the determining module is used for traversing the size style attribute in the abstract syntax tree and taking a unit set in the size style attribute as a target unit;
the conversion module is used for determining a conversion ratio and converting the target unit into a preset unit based on the conversion ratio;
and the adaptation module is used for realizing the automatic adaptation of the web page on the terminal screen based on the abstract syntax tree converted by the unit.
The present application further provides a web page automatic adaptation device, the device including: a memory, a processor and a web page auto-adaptation program stored on the memory and executable on the processor, the web page auto-adaptation program being configured to implement the steps of the web page auto-adaptation method as claimed in any one of the above.
The present application further provides a storage medium having stored thereon a web page auto-adaptation program, which when executed by a processor, implements the steps of the web page auto-adaptation method as set forth in any one of the above.
Compared with the low adaptation efficiency of the web page in the prior art, the method for automatically adapting the web page has the advantages that the corresponding abstract syntax tree is obtained by analyzing the front-end code file corresponding to the web page design draft; traversing the size style attribute in the abstract syntax tree, and taking a unit set in the size style attribute as a target unit; determining a conversion ratio, and converting the target unit into a preset unit based on the conversion ratio; and realizing automatic adaptation of the web page on a terminal screen based on the abstract syntax tree converted by the unit. It can be understood that the target unit set in the size style attribute is positioned by traversing the abstract syntax tree, the target unit is converted based on the preset conversion proportion, manual calculation is not needed in the process, and the abstract syntax tree after unit conversion can be adapted to terminal screens with different resolutions. Therefore, the method and the device can improve the adaptation efficiency of the web page.
Drawings
FIG. 1 is a flowchart illustrating a first embodiment of a method for automatically adapting a web page according to the present application;
FIG. 2 is a schematic diagram of a first scenario of a web page automatic adaptation method according to a first embodiment of the present application;
FIG. 3 is a diagram illustrating a second scenario of a web page auto-adaptation method according to a first embodiment of the present application;
FIG. 4 is a schematic structural diagram of a web page automatic adaptation device of a hardware operating environment according to an embodiment of the present application;
the implementation, functional features and advantages of the present invention will be further described with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
An embodiment of the present invention provides an automatic web page adaptation method, and referring to fig. 1, fig. 1 is a schematic flow diagram of a first embodiment of an automatic web page adaptation method according to the present application.
In this embodiment, the method for automatically adapting a web page includes:
step S10: analyzing a front-end code file corresponding to the web page design draft to obtain a corresponding abstract syntax tree;
step S20: traversing the size style attribute in the abstract syntax tree, and taking a unit set in the size style attribute as a target unit;
step S30: determining a conversion ratio, and converting the target unit into a preset unit based on the conversion ratio;
step S40: and realizing automatic adaptation of the web page on a terminal screen based on the abstract syntax tree subjected to unit conversion.
The present embodiment is intended to: and the adaptation efficiency of the web page is improved.
As an example, the web page automatic adaptation method is applied to a web page automatic adaptation system that is subordinate to the web page automatic adaptation device.
As an example, the web page auto-adaptation system may apply the generated web page auto-adaptation program to the terminal device and store the web page auto-adaptation program in the terminal device.
As an example, the terminal device comprises a screen, different terminal screens having different resolutions.
As an example, resolution is a parameter for measuring the amount of data in a bitmap image, and is usually expressed as pixels per inch (ppi), and the more data is contained, the larger the length of the graphic file, and the richer details can be represented, such as only one page of content can be displayed at 640 × 480 resolution, and two pages can be displayed at 1600 × 1280 resolution. However, larger files require more computer resources, more memory, more hard disk space, etc., and if the resolution of the image is lower, it is rather coarse, especially when the image is magnified to a larger size for viewing. So during picture creation we must decide the correct resolution depending on the final use of the image. Not only is the image guaranteed to contain enough data to meet the final output requirement, but also a proper amount of resources of a computer are used for each corresponding horizontal pixel as little as possible.
As an example, the resolution is expressed as the number of pixels in the horizontal and vertical directions, such as 640 × 480, which means 640 pixels in the horizontal direction and 480 pixels in the vertical direction, which has a resolution of 307200 pixels.
As an example, the web development mainly comprises a front end and a back end, wherein the front end refers to a web page which is directly contacted with a user, namely a web page; the back-end refers to the program, database, and server level. The web system development process mainly comprises project proposing, requirement analyzing, designing, developing, system testing and maintaining, wherein the designing comprises interface design and system design, the developing comprises front-end development and background development, specifically, the front-end development is a process of creating front-end interfaces such as web pages and APPs and presenting the front-end interfaces to users, and user interface interaction of internet products is realized through HTML, CSS, javaScript and derived technologies.
As an example, a web page design draft is obtained through interface design in a front-end web development process, where the web page design draft includes content layout, fonts, and the like of a page, and at the same time, it is necessary to ensure customer experience such as beauty, clearness, readability, and the like of the page, and therefore, when designing the web page, it is necessary to determine a size of the web page, a size of each content module, a height of a font line, and the like, and specific limitations are not made.
As an example, after the interface designer designs a web page design draft, the interface designer needs to give the front-end developer to develop a user interface based on the web page design draft.
In this embodiment, the area of the web page window that does not include the address bar and the toolbar is a visible area, and for convenience of description, the entire size of the web page and the size of the content module in the visible area are specifically exemplified in this embodiment.
The method comprises the following specific steps:
step S10: analyzing a front-end code file corresponding to the web page design draft to obtain a corresponding abstract syntax tree;
as an example, in the front-end development process, the size of a web page needs to be adapted to different terminal screens to solve the compatibility problem of resolution, and in the prior art, the resolution of the terminal screen is queried through media to obtain different sizes of the web page, that is, different web page styles can be set for different screen resolutions through media query, and the more the setting is, the more the enumeration manner is complicated, and the corresponding relationship between the screen resolution and the web page size needs to be calculated manually.
In this embodiment, the front-end code file corresponding to the web page design draft is parsed by a compiling tool, and since the web page is finally presented on the terminal screen in the form of a program code file and since the target unit in the web page design draft is to be converted subsequently, before this, the front-end code file corresponding to the web page design draft needs to be converted into an abstract syntax tree.
As an example, the front-end code file corresponding to the web page design draft includes, without limitation, web page frame size information, size information of each content module, size information of font line height, and the like.
In this embodiment, the size information of the web page design written in the front-end code file corresponding to the web page design is consistent with the size information of the actual web page design, and is written in 1:1 in equal proportion.
As an example, the interface design provides units of px (pixels) or ppi, and the like, which are not limited specifically.
As an example, an Abstract Syntax Tree (AST) is an Abstract representation of the Syntax structure of a code file. It represents the syntactic structure of the programming language in the form of a tree, each node on the tree representing a structure in the code file.
As an example, the compiling tool may be webpack, webStorm, and the like, and is not limited specifically, and for convenience of description, the compiling tool is specifically illustrated as the webpack in this embodiment.
Specifically, webpack includes an entry, an exit, a loader (loading tool), and a plug-in, which performs static analysis according to the dependency relationship of modules, and then generates corresponding static resources according to the specified rules for the modules.
As an example, the step of converting the code file into the abstract syntax tree includes performing lexical analysis and syntax analysis on the code file, representing a syntax structure in a tree form to form the abstract syntax tree, where the abstract syntax tree has a plurality of tree nodes and a plurality of layers, each layer has the same structure, and each layer is called a tree node, where the tree nodes may include required attributes, and only the code file that converts the code file into the abstract syntax tree can be recognized by the plug-in webpack.
Step S20: traversing the size style attribute in the abstract syntax tree, and taking a unit set in the size style attribute as a target unit;
in this embodiment, each tree node in the abstract syntax tree is traversed through a plug-in, where each tree node includes a plurality of size style attributes, and a unit set in the size style attributes is used as a target unit, which is equivalent to determining size information in a web page design draft before compilation corresponding to the target unit.
As an example, in the abstract syntax tree, the size information in the web page design is to be set with a size style attribute, for example, a height attribute may set a height of an element, a line-height attribute may set a distance between lines, a max-height attribute may set a maximum height of an element, a max-width attribute may define a maximum width of an element, a width attribute may set a width of an element, and the like, without limitation.
As an example, in the abstract syntax tree, the vertical pixels of the web page design may be represented by a height attribute, and the paragraph height of the web page design may be represented by a line-height attribute; the abstract syntax tree also contains a value with px (pixel) as a unit, so before the plug-in traverses the tree nodes in the abstract syntax tree, the plug-in needs to enter the size information in the web page design draft before compiling, and then the traversal starts.
Step S30: determining a conversion ratio, and converting the target unit into a preset unit based on the conversion ratio;
in this embodiment, after the target unit set in the size style attribute is determined, the conversion ratio is determined, that is, the target unit is converted based on the conversion ratio to obtain the converted target unit, and the target unit set in the size style attribute of the original abstract syntax tree type is replaced with the converted target unit.
In this embodiment, the step of determining the conversion ratio includes:
step A1: acquiring the resolution of a terminal screen;
step A2: and determining the conversion proportion in the preset unit conversion rule based on the resolution of the terminal screen.
As an example, a babel plug-in for pixel unit conversion is installed, and a preset unit conversion rule is written in a transformpx. Config file, for example, inexhaustible reserved decimal numbers, conversion ratios and the like are encountered in conversion, and the specific details are not limited, where an src file is a file for storing a development web page, and main.
In the embodiment, the terminal screen resolution is obtained by reading the configuration information of the terminal.
As an example, the screen resolution must be less than or equal to the terminal display resolution, which describes the number of pixels of the display itself, and is inherently unchangeable.
In this embodiment, the conversion ratio in the preset unit conversion rule is determined based on the terminal screen resolution.
In this embodiment, the step of determining the conversion ratio in the preset unit conversion rule based on the resolution of the terminal screen includes:
step B1: equally dividing horizontal pixels and vertical pixels of the resolution of the terminal screen into preset parts respectively;
in this embodiment, the horizontal pixels and the vertical pixels of the resolution of the terminal screen are equally divided into preset numbers, where the preset numbers may be fixed, manually set, or randomly changed, and are not limited specifically.
As an example, as shown in fig. 2, if the resolution of the terminal screen is 1920px × 969px, the resolution of the terminal screen is 1920px, the resolution of the terminal screen is 969px, the horizontal pixels and the vertical pixels are equally divided into a preset number of parts, and if the preset number of parts is 100, the horizontal pixels corresponding to each part are 19.2px, and the vertical pixels corresponding to each part are 9.69px.
And step B2: and respectively taking the horizontal pixel and the vertical pixel corresponding to each copy as the conversion proportion.
In this embodiment, the horizontal pixel and the vertical pixel corresponding to each slice are respectively used as the scaling ratios.
As an example, the conversion ratio of each set of the pixels is 19.2px, and the conversion ratio of each set of the pixels is 9.69px.
As an example, each of the sets corresponds to a horizontal pixel of 19.2px, and may be expressed as a horizontal pixel of 19.2px corresponding to 1vw or 1nw, and a vertical pixel of 9.69px corresponding to each of 1vh or 1nh, which is not limited in particular.
For convenience of description, the following description will specifically exemplify that each horizontal pixel corresponding to 1vw is 19.2px, and each horizontal pixel corresponding to 1vh is 9.69px.
In this embodiment, the step of scaling the target unit based on the scaling ratio includes:
step C1: and acquiring a numerical value corresponding to a target unit set in the dimension style attribute, and calculating the numerical value based on the conversion ratio to obtain the calculated numerical value and a preset unit corresponding to the calculated numerical value.
In this embodiment, a numerical value corresponding to a target unit set in the size style attribute is obtained, and the numerical value is calculated based on the conversion ratio to obtain a calculated numerical value and a preset unit corresponding to the calculated numerical value.
As an example, if the size of the web page design is 900px 600px, the target unit px is scaled based on the scaling ratio, and the scaling ratio is converted into 1px = (1/19.2) vw and 1px = (1/9.69) vh, so that 900px 600px can be expressed as (900 × 1/19.2) vw (600 × 1/9.69) vh.
Step S30: and realizing automatic adaptation of the web page on a terminal screen based on the abstract syntax tree subjected to unit conversion.
In this embodiment, the unit-converted target unit is stored in the abstract syntax tree in place of the original target unit, and the unit-converted abstract syntax tree is adapted to terminal screens with different resolutions.
In this embodiment, after the step of determining a conversion ratio and converting the target unit into a preset unit based on the conversion ratio, the method further includes:
step D1: and converting the abstract syntax tree subjected to unit conversion to generate a new front-end code file, so that the terminal screen calls the new front-end code file to realize automatic adaptation when loading the web page.
In this embodiment, after the unit-converted abstract syntax tree is converted into a new front-end code file, all units set in the size style attribute in the new code file are converted target units, and therefore, the new front-end code file is adapted to terminal screens with different resolutions.
As an example, as shown in fig. 2 and fig. 3, a web page in the figure includes two content modules, namely a px button and a vw button, the px button exists in the execution code file in px unit, and the vw button exists in the execution code file in vw unit after being converted. If the resolution of the terminal screen is adjusted to 1280px × 697px, the size of the web page is changed accordingly, the size of the vw button in the web page is also changed, but the size of the px button is not changed accordingly, so that the abstract syntax tree after unit conversion is converted into a new code file, and the terminal screen with different resolutions can be adapted after the code file is executed.
In the embodiment, the unit of the size in the web page design draft is directly written into the code file, the unit of the size in the web page design draft is converted based on the preset unit conversion rule and the conversion proportion, calculation is not required to be carried out according to the conversion proportion every time, the unit of the size in the web page design draft is only required to be written into the configuration file, the 1:1 development is carried out according to the effect diagram during front-end development, the resolutions of different displays are not required to be considered, the unit is automatically converted when the code file is compiled and run, manual calculation is not required, the purpose of automatically adapting to terminal screens with different resolutions is achieved, and the web page adaptation efficiency is improved.
Further, based on the first embodiment in the present application, another embodiment of the present application is provided, in this embodiment, after the step of obtaining a numerical value corresponding to a target unit set in the size style attribute, and calculating the numerical value based on the conversion ratio to obtain a calculated numerical value and a preset unit corresponding to the calculated numerical value, the method further includes:
step D1: and detecting whether the calculated numerical value and the corresponding preset unit have errors or not, and if so, converting the target unit again.
In this embodiment, since missing calculation or erroneous calculation may occur in the process of converting the target unit, in this embodiment, a source code file is converted according to the preset unit conversion rule, an error detection mechanism is added to detect whether an error occurs in the conversion result, and if an error occurs, the position of the target unit where the result occurs is located based on an error location mechanism to perform re-conversion on the target unit.
As an example, the error detection mechanism may be based on a preset unit error conversion rule, input each target unit into a preset error detection model, and perform error conversion on each target unit to obtain a conversion error result that may occur, where the preset error detection model is obtained by inputting each target unit with an error conversion result tag into a preset model for iterative training. And when the conversion of each target unit is finished, obtaining a first conversion result, inputting the target unit into the preset error detection model to obtain a second conversion result, comparing the result with the second conversion result, and if the result is consistent with the second conversion result, determining the conversion error of the target unit.
As an example, if the preset error locating mechanism does not locate the target unit with an error, the source of the error may not be in the process of converting the unit, but appear in the process of writing the code file in the target unit, and a monitoring mechanism may be further added to the process of writing the code file in the target unit.
In this embodiment, after the unit-scaled abstract syntax tree is converted into a new code file, the interface finally presented to the user may deviate from the expected screen to be presented, for example, the resolution of a certain block of content module is not changed along with the whole page, or a certain corner of a certain block of content module of the page is skewed, and therefore, the presentation of the unit-scaled new code file needs to be further detected.
In this embodiment, after the step of implementing automatic adaptation of the web page on the terminal screen based on the unit-converted abstract syntax tree, the method further includes:
step E1: detecting whether the size of the web page displayed on the terminal screen and the corresponding size in the web page design draft are changed in equal proportion or not;
step E1: if the size is not equal to the scale change, returning to the step of traversing the size style attribute in the abstract syntax tree and taking the unit set in the size style attribute as a target unit until the corresponding size is equal to the scale change.
In this embodiment, the new code file subjected to unit conversion is run to obtain a web page, and whether the size of the web page and the corresponding size in the web page design draft are changed in equal proportion, where the equal proportion is a conversion proportion in the preset unit conversion rule, where the size of the web page includes a size of a web page frame, a size of a content module, and a size of a paragraph line height.
In this embodiment, if it is detected that the size is not an equal-scale change, the step of traversing the size style attribute in the abstract syntax tree and taking the unit set in the size style attribute as a target unit is returned until the corresponding size is an equal-scale change. To ensure that the interface ultimately presented to the user does not cause visual discomfort.
In the embodiment, the problem of conversion errors which may occur in the unit conversion process is monitored and corrected, and the problem which may occur in the delivery process of the web page after the code file is generated is detected and modified, so that the interface which is finally displayed to the user is the reduced or enlarged version of the interface effect which is desired to be realized by the web design draft in an equal proportion, and more comfortable interface interaction experience is brought to the user.
The present application further provides an apparatus for automatically adapting a web page, the apparatus comprising:
the analysis module is used for analyzing the front-end code file corresponding to the web page design draft to obtain a corresponding abstract syntax tree;
the determining module is used for traversing the size style attribute in the abstract syntax tree and taking a unit set in the size style attribute as a target unit;
the conversion module is used for determining a conversion ratio and converting the target unit into a preset unit based on the conversion ratio;
and the adaptation module is used for realizing the automatic adaptation of the web page on the terminal screen based on the abstract syntax tree converted by the unit.
Optionally, in a possible implementation manner of the present application, the scaling module includes:
the acquisition unit is used for acquiring the resolution of a terminal screen;
the determining unit is used for determining a conversion ratio in the preset unit conversion rule based on the resolution of the terminal screen;
optionally, in a possible implementation manner of the present application, the determining unit is configured to equally divide horizontal pixels and vertical pixels of the resolution of the terminal screen into preset numbers respectively; and the scaling unit is further configured to take the horizontal pixel and the vertical pixel corresponding to each slice as the scaling ratio respectively.
Optionally, in a possible implementation manner of the present application, the scaling module further includes:
and the calculating unit is used for acquiring a numerical value corresponding to the target unit set in the size style attribute, and calculating the numerical value based on the conversion ratio to obtain the calculated numerical value and the corresponding preset unit.
Optionally, in a possible implementation manner of the present application, after the step of obtaining a numerical value corresponding to a target unit set in the size style attribute, and calculating the numerical value based on the conversion ratio to obtain a calculated numerical value and a preset unit corresponding to the calculated numerical value, the apparatus further includes:
and the conversion module is used for detecting whether the calculated numerical value and the corresponding preset unit have errors or not, and if the calculated numerical value and the corresponding preset unit have errors, the target unit is converted again.
Optionally, in a possible implementation manner of the present application, the adaptation module includes:
and the conversion unit is used for converting the abstract syntax tree subjected to unit conversion to generate a new front-end code file so that the terminal screen calls the new front-end code file to realize automatic adaptation when the web page is loaded.
Optionally, in a possible embodiment of the present application, after the step of implementing automatic adaptation of the web page on the terminal screen based on the abstract syntax tree subjected to unit conversion, the apparatus further includes:
the detection module is used for detecting whether the size of the web page displayed on the terminal screen and the corresponding size in the web page design draft are in equal proportion change or not;
and if the size is not equal to the scale change, returning to the step of traversing the size style attribute in the abstract syntax tree and taking the unit set in the size style attribute as a target unit until the corresponding size is equal to the scale change.
The specific implementation of the web page automatic adaptation device of the present application is substantially the same as that of the above-mentioned embodiments of web page automatic adaptation, and is not described herein again.
The embodiment of the present application provides a storage medium, and the storage medium stores one or more programs, and the one or more programs are further executable by one or more processors for implementing the steps of any one of the above described web page automatic adaptation methods.
The specific implementation of the storage medium of the present application is substantially the same as that of each embodiment of the above-mentioned web page automatic adaptation method, and is not described herein again.
Referring to fig. 4, fig. 4 is a schematic device structure diagram of a hardware operating environment according to an embodiment of the present application.
As shown in fig. 4, the web page auto-adaptation apparatus may include: a processor 1001, a memory 1005, and a communication bus 1002. The communication bus 1002 is used to enable connection communication between the processor 1001 and the memory 1005.
Optionally, the web page automatic adaptation device may further include a user interface, a network interface, a camera, an RF (Radio Frequency) circuit, a sensor, a WiFi module, and the like. The user interface may comprise a Display screen (Display), an input sub-module such as a Keyboard (Keyboard), and the optional user interface may also comprise a standard wired interface, a wireless interface. The network interface may include a standard wired interface, a wireless interface (e.g., WI-FI interface).
Those skilled in the art will appreciate that the web page automatic adaptation device structure shown in fig. 4 does not constitute a limitation of the web page automatic adaptation device and may include more or fewer components than those shown, or some components may be combined, or a different arrangement of components.
As shown in fig. 4, a memory 1005, which is a storage medium, may include therein an operating system, a network communication module, and a web page auto-adaptation program. The operating system is a program that manages and controls the hardware and software resources of the web page auto-adaptation device, supporting the operation of the web page auto-adaptation program as well as other software and/or programs. The network communication module is used to implement communication between the components within the memory 1005 and with other hardware and software in the web page auto-adaptation system.
In the web page auto-adaptation device shown in fig. 4, the processor 1001 is configured to execute the web page auto-adaptation program stored in the memory 1005, so as to implement the steps of any one of the web page auto-adaptation methods described above.
The specific implementation of the web page automatic adaptation device of the present application is substantially the same as that of the foregoing web page automatic adaptation method, and details are not described herein again.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or system 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 system. Without further limitation, an element defined by the phrase "comprising a … …" does not exclude the presence of another identical element in a process, method, article, or system that comprises the element.
The above-mentioned serial numbers of the embodiments of the present invention are only for description, and do not represent the advantages and disadvantages of the embodiments.
The method of the above embodiment can be implemented by software plus a necessary general hardware platform, and of course, the method can also be implemented by hardware. Based on such understanding, the technical solution of the present invention essentially or contributing to the prior art can be embodied in the form of a software product, which is stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) as described above and includes instructions for enabling a terminal screen device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device) to execute the method according to the embodiments of the present invention.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (6)
1. A web page automatic adaptation method is characterized by comprising the following steps:
analyzing a front-end code file corresponding to the web page design draft to obtain a corresponding abstract syntax tree;
traversing the size style attribute in the abstract syntax tree, and taking the unit set in the size style attribute as a target unit;
acquiring the resolution of a terminal screen;
equally dividing horizontal pixels and vertical pixels of the resolution of the terminal screen into preset parts respectively;
respectively taking the horizontal pixel and the vertical pixel corresponding to each part as conversion proportions in a preset unit conversion rule;
acquiring a numerical value corresponding to a target unit set in the dimension style attribute, and calculating the numerical value based on the conversion ratio to obtain a calculated numerical value and a preset unit corresponding to the calculated numerical value;
detecting whether the calculated numerical value and the corresponding preset unit have errors or not based on a preset error detection model, and if so, converting the target unit again;
and realizing automatic adaptation of the web page on a terminal screen based on the abstract syntax tree converted by the unit.
2. The method for automatically adapting a web page according to claim 1, wherein the step of automatically adapting a web page on a terminal screen based on an abstract syntax tree converted by units comprises:
and converting the abstract syntax tree subjected to unit conversion to generate a new front end code file, so that a terminal screen calls the new front end code file to realize automatic adaptation when loading a web page.
3. The method for automatically adapting a web page according to claim 1, wherein after the step of implementing the automatic adaptation of the web page on the terminal screen based on the abstract syntax tree converted by units, the method further comprises:
detecting whether the size of a web page displayed on a terminal screen and the corresponding size in the web page design draft are in equal proportion change or not;
if the size is not equal to the scale change, returning to the step of traversing the size style attribute in the abstract syntax tree and taking the unit set in the size style attribute as a target unit until the corresponding size is equal to the scale change.
4. An apparatus for web page auto-adaptation, the apparatus comprising:
the analysis module is used for analyzing the front-end code file corresponding to the web page design draft to obtain a corresponding abstract syntax tree;
a target unit determining module, configured to traverse the size style attribute in the abstract syntax tree, and take a unit set in the size style attribute as a target unit;
the acquisition module is used for acquiring the resolution of a terminal screen;
the pixel equally dividing module is used for equally dividing horizontal pixels and vertical pixels of the resolution of the terminal screen into preset parts respectively;
the conversion ratio determining module is used for respectively taking the horizontal pixel and the vertical pixel corresponding to each part as the conversion ratio in the preset unit conversion rule;
the calculation module is used for acquiring a numerical value corresponding to a target unit set in the dimension style attribute, and calculating the numerical value based on the conversion ratio to obtain a calculated numerical value and a preset unit corresponding to the calculated numerical value;
the error detection module is used for detecting whether the calculated numerical value and the corresponding preset unit have errors or not based on a preset error detection model, and if the calculated numerical value and the corresponding preset unit have errors, the target unit is converted again;
and the adaptation module is used for realizing the automatic adaptation of the web page on the terminal screen based on the abstract syntax tree converted by the unit.
5. An apparatus for web page auto-adaptation, the apparatus comprising: a memory, a processor and a web page auto-adaptation program stored on the memory and executable on the processor, the web page auto-adaptation program being configured to implement the steps of the web page auto-adaptation method of any one of claims 1 to 3.
6. A storage medium, characterized in that the storage medium has stored thereon a web page auto-adaptation program, which when executed by a processor implements the steps of the web page auto-adaptation method according to any one of claims 1 to 3.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211015971.4A CN115080027B (en) | 2022-08-24 | 2022-08-24 | Web page automatic adaptation method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211015971.4A CN115080027B (en) | 2022-08-24 | 2022-08-24 | Web page automatic adaptation method, device, equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115080027A CN115080027A (en) | 2022-09-20 |
| CN115080027B true CN115080027B (en) | 2023-01-06 |
Family
ID=83245090
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211015971.4A Active CN115080027B (en) | 2022-08-24 | 2022-08-24 | Web page automatic adaptation method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115080027B (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10684874B1 (en) * | 2008-09-23 | 2020-06-16 | Open Invention Network Llc | Automated system and method for extracting and adapting system configurations |
| CN112416331A (en) * | 2020-12-07 | 2021-02-26 | 建信金融科技有限责任公司 | Page adaptation method and device, electronic equipment and computer readable storage medium |
| CN112463152A (en) * | 2020-12-09 | 2021-03-09 | 深圳赛安特技术服务有限公司 | Webpage adaptation method and device based on AST |
| CN112506479A (en) * | 2020-11-30 | 2021-03-16 | 北京百度网讯科技有限公司 | Page editing method, device, equipment and storage medium |
| CN112860255A (en) * | 2021-02-08 | 2021-05-28 | 无线生活（杭州）信息科技有限公司 | Page adaptation method and device |
| CN113407878A (en) * | 2021-08-18 | 2021-09-17 | 深圳市明源云客电子商务有限公司 | Page adaptation method, display terminal and readable storage medium |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108427546B (en) * | 2018-05-03 | 2022-03-08 | 深圳Tcl新技术有限公司 | Full screen adaptation method of display device, display device and storage medium |
| US11010536B2 (en) * | 2018-12-20 | 2021-05-18 | AINS, Inc. | Systems and methods for dynamic web user interface generation |
| CN110837617B (en) * | 2019-10-11 | 2024-05-07 | 平安科技（深圳）有限公司 | Webpage self-adaptive layout method, server and computer readable storage medium |
| CN111552473B (en) * | 2020-04-27 | 2024-02-09 | 腾讯科技（深圳）有限公司 | Application processing method, device and equipment |
-
2022
- 2022-08-24 CN CN202211015971.4A patent/CN115080027B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10684874B1 (en) * | 2008-09-23 | 2020-06-16 | Open Invention Network Llc | Automated system and method for extracting and adapting system configurations |
| CN112506479A (en) * | 2020-11-30 | 2021-03-16 | 北京百度网讯科技有限公司 | Page editing method, device, equipment and storage medium |
| CN112416331A (en) * | 2020-12-07 | 2021-02-26 | 建信金融科技有限责任公司 | Page adaptation method and device, electronic equipment and computer readable storage medium |
| CN112463152A (en) * | 2020-12-09 | 2021-03-09 | 深圳赛安特技术服务有限公司 | Webpage adaptation method and device based on AST |
| CN112860255A (en) * | 2021-02-08 | 2021-05-28 | 无线生活（杭州）信息科技有限公司 | Page adaptation method and device |
| CN113407878A (en) * | 2021-08-18 | 2021-09-17 | 深圳市明源云客电子商务有限公司 | Page adaptation method, display terminal and readable storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115080027A (en) | 2022-09-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9043698B2 (en) | Method for users to create and edit web page layouts | |
| US20080301553A1 (en) | Verifying compliance of user interfaces with desired guidelines | |
| EP3557423A1 (en) | System and method for testing electronic visual user interface outputs | |
| CN108664461B (en) | Automatic filling method and device for webpage form | |
| US20100211893A1 (en) | Cross-browser page visualization presentation | |
| US8265905B2 (en) | Automated benchmarking of software performance | |
| US20060265646A1 (en) | System, method, and computer program product for detection of potentially-problematic terminology in documents | |
| CN113741898B (en) | Form generation method, device and equipment | |
| WO2020118485A1 (en) | Method of Detecting User Interface Layout Issues for Web Applications | |
| US20130080879A1 (en) | Methods and apparatus providing document elements formatting | |
| EP1744255A1 (en) | Document processing device and document processing method | |
| CN113139371A (en) | Visual chart construction method, device and system and storage medium | |
| CN115080027B (en) | Web page automatic adaptation method, device, equipment and storage medium | |
| CN115543324B (en) | Method, device, equipment and medium for generating interactive interface | |
| CN116841536A (en) | Component reference relation reconstruction method, device, system and storage medium | |
| CN116795377A (en) | Code data processing method and device | |
| CN115525270A (en) | Method, system, terminal device and storage medium for rendering form page based on dragging | |
| CN115756466A (en) | View checking method and device, electronic equipment and storage medium | |
| JP2004157927A (en) | Creating system for business form input, creating program and creating method | |
| CN114356291A (en) | Method, device, equipment and medium for generating form based on configuration file | |
| CN116009863B (en) | Front-end page rendering method, device and storage medium | |
| JP4755622B2 (en) | Multilingual display device and multilingual display method | |
| CN113220596B (en) | Application testing method, device, equipment, storage medium and program product | |
| CN117056539B (en) | Method and device for generating pptx format file in real time and electronic equipment | |
| CN109240735B (en) | Requirement rollback scheme filling method and device, terminal and readable 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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |