CN113076165A - Page checking method and device - Google Patents
Page checking method and device Download PDFInfo
- Publication number
- CN113076165A CN113076165A CN202110412803.8A CN202110412803A CN113076165A CN 113076165 A CN113076165 A CN 113076165A CN 202110412803 A CN202110412803 A CN 202110412803A CN 113076165 A CN113076165 A CN 113076165A
- Authority
- CN
- China
- Prior art keywords
- page
- website
- design
- design draft
- target
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 71
- 238000013461 design Methods 0.000 claims abstract description 163
- 230000006870 function Effects 0.000 claims description 46
- 238000012795 verification Methods 0.000 claims description 29
- 238000012790 confirmation Methods 0.000 claims description 27
- 230000000007 visual effect Effects 0.000 claims description 17
- 238000004590 computer program Methods 0.000 claims description 9
- 238000009877 rendering Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 16
- 238000010586 diagram Methods 0.000 description 13
- 230000008569 process Effects 0.000 description 8
- 238000004891 communication Methods 0.000 description 7
- 238000012545 processing Methods 0.000 description 5
- 230000006978 adaptation Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 238000005096 rolling process Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000004913 activation Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000011282 treatment 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
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3684—Test management for test design, e.g. generating new test cases
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3688—Test management for test execution, e.g. scheduling of test suites
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a page checking method and device, and relates to the technical field of computers. One embodiment of the method comprises: the method comprises the steps of loading a design draft page corresponding to a target page through a browser control added on the target page, determining that the background color of the design draft page is transparent, comparing the target page with the design draft page with the background color being transparent, checking the consistency of the target page and the design draft page, enabling people to visually see the difference between the APP page and the design draft page, and conveniently finding out the inconsistency of the matched page and the design draft page in details by adjusting the page widths of the target page and the design draft page to be consistent, so that the fineness and the accuracy of page checking are improved, and the development efficiency is improved.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a page checking method and device.
Background
UI (User Interface) visual drafts are visual specifications provided by UI designers, typically presented via an HTML web page, and clicking on any element on the web page reveals its visual attributes: color, font size, width, etc. Each page developed by the mobile terminal APP (application program) is actually implemented with code to realize all UI elements on the UI visual script. After the development of the mobile terminal APP is completed, a UI designer can go to conduct UI visual walkthrough, namely, the designer checks whether relevant elements are consistent (word size, color, space, width and the like) according to the previously provided UI visual draft compared with pages on the APP.
In the APP development engineering, a development engineer usually can only observe through eyes, roughly compares whether a developed page UI is consistent with a design draft, and is difficult to achieve accuracy, so that small problems often occur to influence the development efficiency. In addition, UI design is usually provided only for one resolution of a mobile device (e.g., a mobile phone), and a development engineer needs to adapt to a variety of models with different resolutions in an actual development process, which involves conversion adaptation of width, height, space, and the like, and may cause the converted adaptation to be inconsistent with the UI design, which details are difficult to be found by the development engineer.
In the process of implementing the invention, the inventor finds that at least the following problems exist in the prior art:
the precision and accuracy of page verification are low through a rough observation mode, and the inconsistency between the adapted page and the design draft page is difficult to find, so that the development efficiency is influenced.
Disclosure of Invention
In view of this, embodiments of the present invention provide a page checking method and apparatus, which enable a person to visually see a difference between an APP page and a design document page, facilitate finding details of the adapted page and the design document page, improve the precision and accuracy of page checking, and contribute to improving development efficiency.
To achieve the above object, according to an aspect of an embodiment of the present invention, a page checking method is provided.
A page checking method comprises the following steps: loading a design draft page corresponding to a target page through a browser control added on the target page; and determining that the background color of the design draft page is transparent, and comparing the target page with the design draft page with the background color being transparent to check the consistency of the target page and the design draft page.
Optionally, before loading the design draft page corresponding to the target page through the browser control added on the target page, the method includes: and responding to a verification function starting instruction of a user, displaying a website input frame on the target page, and receiving the website of the design draft page input by the user or displaying the stored website of the design draft page through the website input frame, wherein the website is used for the browser control to load the design draft page.
Optionally, the verification function starting instruction is received through a user interface comparison control displayed on the target page, and the user interface comparison control is further configured to receive a verification function closing instruction of the user.
Optionally, the user interface comparison control is set in a root page view of an application program to which the target page belongs, and when the target page is opened, the user interface comparison control is automatically displayed on the target page.
Optionally, the receiving, by the website input box, the website of the design draft page input by the user or displaying an existing website of the design draft page includes: searching a stored website of the design draft page; if the existing website is found, displaying the existing website in the website input frame; and if the stored website is not found, receiving the website input by the user through the website input box.
Optionally, after receiving the website of the design draft page input by the user through the website input box or displaying an existing website of the design draft page, and before loading the design draft page corresponding to the target page, the method includes: receiving a confirmation instruction of the user to the website in the website input box through a confirmation control corresponding to the website input box; and removing the website input box and the confirmation control, and adding the browser control on the target page.
Optionally, after the browser control is added to the target page and before the design draft page corresponding to the target page is loaded, the method includes: and modifying the background color of the browser control added on the target page into a transparent color.
Optionally, before determining that the background color of the design draft page is a transparent color, the method includes: and judging whether the background color of the page of the design draft is transparent or not, and if not, modifying the background color of the page of the design draft into the transparent color.
Optionally, the background color of the design draft page is modified into a transparent color through a preset scripting language by using a rendering method provided by the browser control.
Optionally, before comparing the target page with the design manuscript page with a transparent background color, the method includes: and adjusting the scroll distance and the zoom scale of the browser control so as to enable the page widths of the target page and the page of the design manuscript to be consistent.
Optionally, the browser control is a web page view control, and the target page is a user interface visual draft web page.
According to another aspect of the embodiments of the present invention, there is provided a page checking apparatus.
A page checking apparatus, comprising: the page loading module is used for loading a design draft page corresponding to a target page through a browser control added on the target page; and the page comparison module is used for determining that the background color of the design draft page is transparent, and comparing the target page with the design draft page with the background color being transparent so as to check the consistency of the target page and the design draft page.
Optionally, the system further comprises a website display module, configured to: and responding to a verification function starting instruction of a user, displaying a website input frame on the target page, and receiving the website of the design draft page input by the user or displaying the stored website of the design draft page through the website input frame, wherein the website is used for the browser control to load the design draft page.
Optionally, the verification function starting instruction is received through a user interface comparison control displayed on the target page, and the user interface comparison control is further configured to receive a verification function closing instruction of the user.
Optionally, the system further comprises a control setting module, configured to set the user interface comparison control in a root page view of an application to which the target page belongs, and when the target page is opened, the user interface comparison control is automatically displayed on the target page.
Optionally, the website display module is further configured to: searching a stored website of the design draft page; if the existing website is found, displaying the existing website in the website input frame; and if the stored website is not found, receiving the website input by the user through the website input box.
Optionally, the system further comprises a confirmation module and a control management module, wherein: the confirmation module is used for receiving a confirmation instruction of the user to the website in the website input box through a confirmation control corresponding to the website input box; and the control management module is used for removing the website input box and the confirmation control and adding the browser control on the target page.
Optionally, the control management module is further configured to: and modifying the background color of the browser control added on the target page into a transparent color.
Optionally, the page comparison module includes a page setting sub-module, configured to: and judging whether the background color of the page of the design draft is transparent or not, and if not, modifying the background color of the page of the design draft into the transparent color.
Optionally, the page setting sub-module modifies the background color of the design draft page into a transparent color through a preset scripting language by using a rendering method provided by the browser control.
Optionally, the system further comprises a page adjusting module, configured to: and adjusting the scroll distance and the zoom scale of the browser control so as to enable the page widths of the target page and the page of the design manuscript to be consistent.
Optionally, the browser control is a web page view control, and the target page is a user interface visual draft web page.
According to yet another aspect of an embodiment of the present invention, an electronic device is provided.
An electronic device, comprising: one or more processors; a memory for storing one or more programs, which when executed by the one or more processors, cause the one or more processors to implement the page checking method provided by the embodiments of the present invention.
According to yet another aspect of an embodiment of the present invention, a computer-readable medium is provided.
A computer-readable medium, on which a computer program is stored, which, when executed by a processor, implements the page checking method provided by an embodiment of the present invention.
One embodiment of the above invention has the following advantages or benefits: the method comprises the steps of loading a design draft page corresponding to a target page through a browser control added on the target page, determining that the background color of the design draft page is transparent, comparing the target page with the design draft page with the background color being transparent, checking the consistency of the target page and the design draft page, enabling people to visually see the difference between the APP page and the design draft page, and conveniently finding out the inconsistency of the matched page and the design draft page in details by adjusting the page widths of the target page and the design draft page to be consistent, so that the fineness and the accuracy of page checking are improved, and the development efficiency is improved.
Further effects of the above-mentioned non-conventional alternatives will be described below in connection with the embodiments.
Drawings
The drawings are included to provide a better understanding of the invention and are not to be construed as unduly limiting the invention. Wherein:
FIG. 1 is a schematic diagram of the main steps of a page checking method according to an embodiment of the present invention;
FIG. 2 is a schematic diagram of a page checking process according to one embodiment of the invention;
FIG. 3 is a schematic diagram of the main modules of a page checking apparatus according to an embodiment of the present invention;
FIG. 4 is an exemplary system architecture diagram in which embodiments of the present invention may be employed;
fig. 5 is a schematic block diagram of a computer system suitable for use in implementing a terminal device or server of an embodiment of the invention.
Detailed Description
Exemplary embodiments of the present invention are described below with reference to the accompanying drawings, in which various details of embodiments of the invention are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the invention. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
Fig. 1 is a schematic diagram of main steps of a page checking method according to an embodiment of the present invention.
As shown in fig. 1, the page checking method according to one or more embodiments of the present invention mainly includes the following steps S101 to S102.
Step S101: loading a design draft page corresponding to a target page through a browser control added on the target page;
step S102: and determining that the background color of the design draft page is transparent, and comparing the target page with the design draft page with the background color being transparent to check the consistency of the target page and the design draft page.
In one embodiment, the browser control is a web view (WebView) control, and the target page is a User Interface (UI) visual draft web page, specifically, a UI visual draft web page to be verified, which is referred to as a page to be verified or a page to be compared for short. And the design draft page corresponding to the target page is a design draft of the designer on the UI visual draft webpage.
Before loading a design draft page corresponding to a target page through a browser control added on the target page, responding to a verification function starting instruction of a user, displaying a website input frame on the target page, receiving a website of the design draft page input by the user through the website input frame or displaying a stored website of the design draft page, wherein the website in the website input frame is used for the browser control to load the design draft page.
And receiving a verification function starting instruction of a user through the user interface comparison control displayed on the target page, wherein the verification function starting instruction is used for starting the page verification function.
And the page checking function is used for checking the consistency of the target page and the design draft page.
The user interface comparison control is further used for receiving a verification function closing instruction of the user, and the verification function closing instruction is used for closing the started page verification function.
In one embodiment, the user interface contrast control is an activation button for the UI contrast function. When the user triggers (e.g., clicks) the button, the device (e.g., a terminal or a server) executing the page verification method according to the embodiment of the present invention receives an instruction from the user, recognizes the instruction as a verification function start instruction, and starts a page verification function, where the button is an entry that enables quick access to a UI comparison function (i.e., a page verification function). After the page checking function is started, if the user triggers (for example, clicks) the button again, the device in the embodiment of the present invention receives the instruction of the user again, and recognizes the received instruction as a checking function closing instruction, and closes the started page checking function.
In one embodiment, the user interface comparison control may be set in a root page view of an application to which the target page belongs, and when the target page is opened, the user interface comparison control is automatically displayed on the target page.
Because the user interface comparison control is arranged in the root page view of the application program to which the target page belongs, the user interface comparison control can be displayed no matter which page the APP (application program) enters.
Receiving a website of a design draft page input by a user through a website input box or displaying a stored website of the design draft page, which may include: searching stored websites of the design draft page; if the existing website of the design draft page is found, displaying the existing website to a website input box; and if the stored website is not found, receiving the website input by the user through the website input box.
After receiving the website of the design draft page input by the user through the website input frame or displaying the stored website of the design draft page, and before loading the design draft page corresponding to the target page, receiving a confirmation instruction of the user to the website in the website input frame through a confirmation control corresponding to the website input frame, then removing the website input frame and the confirmation control, and adding a browser control on the target page, wherein the browser control is specifically added on the top layer of the view of the target page.
The confirmation control may specifically be a confirmation button, and when the confirmation button is triggered (e.g., clicked), a confirmation instruction of the user to the website in the website input box is received.
When the page checking function is started for the first time, the existing website of the design draft page does not exist usually, the control is confirmed to be in the non-clickable state at the moment, a user (usually a developer) is required to manually input the website of the design draft page, then the control is confirmed to be in the clickable state, and after the user clicks the confirmation control to confirm, the website is stored in the APP database. If the website of the design draft page is input before, and the existing website of the design draft page exists in the APP database, the user does not need to input the website of the design draft page, but the existing website is taken out from the APP database and displayed in the website input box, and at the moment, the confirmation control is in a clickable state, so that the user can confirm the website.
After the browser control is added to the target page and before the design draft page corresponding to the target page is loaded, the background color of the browser control added to the target page can be modified into a transparent color.
The background color of the browser control can be modified into the transparent color through a system method, and the system method refers to a method for modifying the background color of the control, which is provided by a corresponding operating system when APP of each operating system is developed. Specifically, taking the iOS operating system as an example, the background color of the WebView control can be modified to be transparent by the following method:
webView.backgroundColor＝[UIColor clearColor]；
the method is a common method for setting the WebView background color in iOS development, and other operating systems are not exemplified one by one.
Before determining that the background color of the page of the design draft is the transparent color, judging whether the background color of the page of the design draft is the transparent color, and if not, modifying the background color of the page of the design draft into the transparent color.
The background color of the design draft page can be modified into the transparent color through a preset script language by utilizing a rendering method provided by the browser control.
The preset scripting language may be javascript (js).
For example, the background color of the design page may be modified to a transparent color by: acquiring related elements (getElementById/getElementsByName) of the webpage through JS, and then modifying the background color of the CSS (cascading style sheet) style of the webpage into a transparent color through JS (specifically, there can be many methods, such as element
Before comparing the target page with the design manuscript page with the transparent background color, the rolling distance and the scaling of the browser control can be adjusted to enable the page widths of the target page and the design manuscript page to be consistent, and the aim is to simulate and complete adaptation of different resolutions.
When the width of the design draft page is consistent with that of the target page, the WebView can be rolled up and down in a small range to visually see the comparison condition of the content of the design draft page and the content of the target page of the APP, so that the difference can be found and timely modified.
FIG. 2 is a schematic diagram of a page checking process according to an embodiment of the present invention.
As shown in fig. 2, the page checking process according to an embodiment of the present invention is as follows:
after the APP is started, the page verification apparatus (which may be located in a terminal or a server and is used to execute the page verification method of the embodiment of the present invention, which will be described in detail below) of the embodiment of the present invention adds a start button (i.e., a user interface comparison control) with a UI comparison function on a root page view of the APP, and the start button can be displayed no matter which page the APP enters, so as to add an entry that can quickly enter the UI comparison function (or called page verification function).
After the APP enters a certain page (namely, a UI visual draft webpage), if the page is to be compared with the UI design draft page to determine whether the page is consistent with the UI design draft page, the user can start the UI comparison function by clicking a start button of the UI comparison function, and the UI comparison function is used for comparing whether the UI visual draft webpage is consistent with the UI design draft page. The page (UI visual draft webpage) entered by the APP is a target page of the embodiment of the present invention, or called a to-be-verified page or a to-be-compared page, and the UI design draft page is a design draft page corresponding to the target page.
When the UI comparison function is activated, a website input box and a determination button are popped up first, and the website input box and the determination button may be displayed in a pop-up window. And the confirmation button is a confirmation control corresponding to the website input box. And if the UI comparison function is started for the first time, the content of the website input box is empty, and the button is determined to be in a non-clickable state. After a user (particularly, a developer) manually inputs the website of a UI design draft page, the determining button is in a clickable state, and after the user clicks the determining button to confirm the website, the website is stored in an APP database and then the next step is carried out; if the user inputs the website of the UI design draft page before, the page checking device can take out the stored website of the design draft page from the APP database and display the stored website in the input box, the button is determined to be in a clickable state at the moment, and the next step is carried out after the user clicks the determination button to confirm the website.
After the previous step is completed, the page checking device removes the website input frame and the determination button, and adds a WebView system control (a specific example of a browser control, the WebView system control is also called as a web page view control) on the top layer of the view of the current page (i.e., the target page) of the APP, the background color of the WebView is modified into a transparent color by a system method, a specific method for modifying the background color of the browser control into the transparent color by the system method has been introduced, and details are not repeated here. WebView is a basic UI control commonly used in APP development, and can display a webpage by loading a website link, in the display process, a mobile phone system provides a corresponding method for a developer to monitor and control the display flow of the whole webpage, and the developer can control elements of the whole webpage through JavaScript and can add, edit and delete attributes (size, distance, color, background color, font format and the like) of any element (a button, a text box, a picture and the like).
After the background color of the WebView is changed into the transparent color through the system method, the page checking device loads a UI design draft page according to the website by using the WebView, and the loading logic is as follows: if the loading is successful, the next step is carried out; if the loading fails, outputting prompt information to prompt the user that the loading fails, and then returning to the step of popping up the website input box and determining the button, so that the user can check whether the website is correct or not to reload the UI design draft page.
After the UI design draft page is loaded, according to the display degree of the current UI design draft page, different treatments are carried out: if the relevant background color of the UI draft page is already a transparent color, the next step can be taken directly (this case is not shown in fig. 2); if the relevant background color of the UI design manuscript page is not transparent, a rendering method of a WebView system control is needed, the background color of the relevant webpage elements of the UI design manuscript page is firstly modified into a transparent color through JavaScript (namely a preset scripting language), namely: and modifying the background color of the design draft page into a transparent color. The method for modifying the background color of the design page into the transparent color is described above, and will not be described herein.
After the relevant background of the UI design page and the WebView background color are transparent, a user (specifically, a developer) can see the UI design page and the page of the APP (i.e., the target page) through eyes at the same time. At this time, a developer is required to manually adjust the scrolling distance and the zooming degree of the WebView, and for the page checking device, the scrolling distance and the zooming scale of the WebView are adjusted in response to the manual adjustment operation of the user, so that the width of the design draft of the WebView is consistent with the width of the page of the APP, and the aim of simulating and completing the adaptation of different resolutions is achieved.
When the width of the design draft page of the WebView is consistent with the width of the page of the APP, a user can visually see the comparison condition of content styles and the like of the design draft page and the page of the APP by rolling the WebView in an upper and lower small range, find the difference and modify the difference in time, namely, compare whether the page of the APP is consistent with the page of the design draft.
When the user clicks the start button of the UI comparison function again, the UI comparison function is closed, that is, the page verification function is closed. At this time, the page checking device removes the WebView control and the corresponding view.
The embodiment of the invention can load the UI design draft page through the WebView system control provided by different APP platforms (iOS, Android and the like), modify the WebView background color into the transparent color through the method provided by the operating system, modify the background color of the relevant elements of the design draft page into the transparent color through JavaScript, and then realize the same width of the UI design draft page as the width of the APP page through zooming and rolling the WebView so as to achieve the purpose of comparing whether the UI is adapted and displayed consistently.
The embodiment of the invention can display the UI visual draft webpage on any page of the APP, and check whether the adapted page is consistent with the UI design draft or not by zooming and adjusting the webpage width. And the webpage background color and the background color of the related elements can be changed into transparent by editing the attribute of the webpage elements, so that a development engineer can visually see the difference between the APP page and the design draft, the defect that details are difficult to find is overcome, the fineness and the accuracy of page verification are improved, and the development efficiency is improved.
Fig. 3 is a schematic diagram of main modules of a page checking apparatus according to an embodiment of the present invention.
As shown in fig. 3, a page checking apparatus 300 according to an embodiment of the present invention mainly includes: a page loading module 301 and a page comparison module 302.
A page loading module 301, configured to load a design draft page corresponding to a target page through a browser control added to the target page;
the page comparison module 302 is configured to determine that the background color of the design draft page is a transparent color, and compare the target page with the design draft page with the background color being the transparent color to check consistency between the target page and the design draft page.
The page checking apparatus 300 may further include a website display module for: and responding to a verification function starting instruction of a user, displaying a website input box on the target page, receiving the website of the design draft page input by the user or displaying the stored website of the design draft page through the website input box, wherein the website in the website input box is used for the browser control to load the design draft page.
The verification function starting instruction can be received through the user interface comparison control displayed on the target page, and the user interface comparison control is also used for receiving a verification function closing instruction of a user.
The page checking apparatus 300 further includes a control setting module, configured to set the user interface comparison control in a root page view of an application to which the target page belongs, and when the target page is opened, the user interface comparison control is automatically displayed on the target page.
The website display module may be specifically configured to: searching stored websites of the design draft page; if the stored website is found, displaying the stored website to a website input frame; and if the stored website is not found, receiving the website input by the user through the website input box.
The page checking apparatus 300 may further include a confirmation module and a control management module, wherein: the confirmation module is used for receiving a confirmation instruction of the user to the website in the website input box through the confirmation control corresponding to the website input box; and the control management module is used for removing the website input box and the confirmation control and adding a browser control on the target page.
The control management module may be further to: and modifying the background color of the browser control added on the target page into a transparent color.
The page setting sub-module can modify the background color of the design draft page into a transparent color through a preset scripting language by using a rendering method provided by the browser control.
The page checking apparatus 300 may further include a page adjusting module, configured to: and adjusting the scrolling distance and the scaling of the browser control to enable the page widths of the target page and the design manuscript page to be consistent.
The browser control may specifically be a web page view control, and the target page may specifically be a user interface visual draft web page.
In addition, the specific implementation contents of the page checking device in the embodiment of the present invention have been described in detail in the above page checking method, so that repeated contents are not described again.
Fig. 4 shows an exemplary system architecture 400 to which the page checking method or the page checking apparatus of the embodiments of the present invention may be applied.
As shown in fig. 4, the system architecture 400 may include terminal devices 401, 402, 403, a network 404, and a server 405. The network 404 serves as a medium for providing communication links between the terminal devices 401, 402, 403 and the server 405. Network 404 may include various types of connections, such as wire, wireless communication links, or fiber optic cables, to name a few.
A user may use terminal devices 401, 402, 403 to interact with a server 405 over a network 404 to receive or send messages or the like. The terminal devices 401, 402, 403 may have installed thereon various communication client applications, such as shopping-like applications, web browser applications, search-like applications, instant messaging tools, mailbox clients, social platform software, etc. (by way of example only).
The terminal devices 401, 402, 403 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like.
The server 405 may be a server providing various services, such as a background management server (for example only) providing support for shopping websites browsed by users using the terminal devices 401, 402, 403. The backend management server may analyze and perform other processing on the received data such as the product information query request, and feed back a processing result (for example, target push information, product information — just an example) to the terminal device.
It should be noted that the page checking method provided by the embodiment of the present invention is generally executed by the server 405, and accordingly, the page checking apparatus is generally disposed in the server 405.
It should be understood that the number of terminal devices, networks, and servers in fig. 4 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
Referring now to FIG. 5, a block diagram of a computer system 500 suitable for use in implementing a terminal device or server of an embodiment of the present application is shown. The terminal device or the server shown in fig. 5 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present application.
As shown in fig. 5, the computer system 500 includes a Central Processing Unit (CPU)501 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM)502 or a program loaded from a storage section 508 into a Random Access Memory (RAM) 503. In the RAM 503, various programs and data necessary for the operation of the system 500 are also stored. The CPU 501, ROM 502, and RAM 503 are connected to each other via a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.
The following components are connected to the I/O interface 505: an input portion 506 including a keyboard, a mouse, and the like; an output portion 507 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage portion 508 including a hard disk and the like; and a communication section 509 including a network interface card such as a LAN card, a modem, or the like. The communication section 509 performs communication processing via a network such as the internet. The driver 510 is also connected to the I/O interface 505 as necessary. A removable medium 511 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 510 as necessary, so that a computer program read out therefrom is mounted into the storage section 508 as necessary.
In particular, according to the embodiments of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 509, and/or installed from the removable medium 511. The above-described functions defined in the system of the present application are executed when the computer program is executed by the Central Processing Unit (CPU) 501.
It should be noted that the computer readable medium shown in the present invention can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present application, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In this application, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules described in the embodiments of the present invention may be implemented by software or hardware. The described modules may also be provided in a processor, which may be described as: a processor comprises a page loading module and a page comparison module. The names of these modules do not constitute a limitation to the modules themselves in some cases, and for example, the page loading module may also be described as a "module for loading a design page corresponding to a target page by a browser control added on the target page".
As another aspect, the present invention also provides a computer-readable medium that may be contained in the apparatus described in the above embodiments; or may be separate and not incorporated into the device. The computer readable medium carries one or more programs which, when executed by a device, cause the device to comprise: loading a design draft page corresponding to a target page through a browser control added on the target page; and determining that the background color of the design draft page is transparent, and comparing the target page with the design draft page with the background color being transparent to check the consistency of the target page and the design draft page.
According to the technical scheme of the embodiment of the invention, the browser control added on the target page is used for loading the design draft page corresponding to the target page, determining that the background color of the design draft page is transparent, and comparing the target page with the design draft page with the background color of transparent to check the consistency of the target page and the design draft page, so that people can visually see the difference between the APP page and the design draft page, and by adjusting the page widths of the target page and the design draft page to be consistent, the inconsistency of the adapted page and the design draft page in details is conveniently found, the fineness and the accuracy of page checking are improved, and the development efficiency is improved.
The above-described embodiments should not be construed as limiting the scope of the invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions can occur, depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
Claims (14)
1. A page checking method is characterized by comprising the following steps:
loading a design draft page corresponding to a target page through a browser control added on the target page;
and determining that the background color of the design draft page is transparent, and comparing the target page with the design draft page with the background color being transparent to check the consistency of the target page and the design draft page.
2. The method of claim 1, wherein before loading the design page corresponding to the target page by adding the browser control on the target page, the method comprises:
and responding to a verification function starting instruction of a user, displaying a website input frame on the target page, and receiving the website of the design draft page input by the user or displaying the stored website of the design draft page through the website input frame, wherein the website is used for the browser control to load the design draft page.
3. The method of claim 2, wherein the verification function start instruction is received through a user interface comparison control displayed on the target page, and the user interface comparison control is further configured to receive a verification function close instruction of the user.
4. The method according to claim 3, wherein the UI comparison control is disposed in a root page view of an application to which the target page belongs, and when the target page is opened, the UI comparison control is automatically displayed on the target page.
5. The method according to claim 2, wherein the receiving the website of the design page input by the user through the website input box or displaying an existing website of the design page comprises:
searching a stored website of the design draft page;
if the existing website is found, displaying the existing website in the website input frame;
and if the stored website is not found, receiving the website input by the user through the website input box.
6. The method according to claim 2 or 5, wherein after receiving the website of the design page input by the user through the website input box or displaying an existing website of the design page, and before loading the design page corresponding to the target page, the method comprises:
receiving a confirmation instruction of the user to the website in the website input box through a confirmation control corresponding to the website input box;
and removing the website input box and the confirmation control, and adding the browser control on the target page.
7. The method of claim 6, after adding the browser control on the target page and before loading a design page corresponding to the target page, comprising:
and modifying the background color of the browser control added on the target page into a transparent color.
8. The method of claim 1, wherein prior to determining that the background color of the design page is a transparent color, comprising:
and judging whether the background color of the page of the design draft is transparent or not, and if not, modifying the background color of the page of the design draft into the transparent color.
9. The method according to claim 8, wherein the background color of the manuscript design page is modified to be transparent through a preset script language by using a rendering method provided by the browser control.
10. The method according to claim 1, wherein before comparing the target page with the design manuscript page with the background color of transparent color, the method comprises:
and adjusting the scroll distance and the zoom scale of the browser control so as to enable the page widths of the target page and the page of the design manuscript to be consistent.
11. The method of claim 1, wherein the browser control is a web page view control and the target page is a user interface visual draft web page.
12. A page checking apparatus, comprising:
the page loading module is used for loading a design draft page corresponding to a target page through a browser control added on the target page;
and the page comparison module is used for determining that the background color of the design draft page is transparent, and comparing the target page with the design draft page with the background color being transparent so as to check the consistency of the target page and the design draft page.
13. An electronic device, comprising:
one or more processors;
a memory for storing one or more programs,
the one or more programs, when executed by the one or more processors, cause the one or more processors to implement the method of any of claims 1-11.
14. A computer-readable medium, on which a computer program is stored which, when being executed by a processor, carries out the method according to any one of claims 1-11.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110412803.8A CN113076165A (en) | 2021-04-16 | 2021-04-16 | Page checking method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110412803.8A CN113076165A (en) | 2021-04-16 | 2021-04-16 | Page checking method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113076165A true CN113076165A (en) | 2021-07-06 |
Family
ID=76617799
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110412803.8A Pending CN113076165A (en) | 2021-04-16 | 2021-04-16 | Page checking method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113076165A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113742021A (en) * | 2021-09-06 | 2021-12-03 | 北京字节跳动网络技术有限公司 | Data verification method and device, electronic equipment and storage medium |
| CN117952817A (en) * | 2024-03-26 | 2024-04-30 | 腾讯科技（深圳）有限公司 | Image comparison display method and related device |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105740364A (en) * | 2016-01-26 | 2016-07-06 | 腾讯科技（深圳）有限公司 | Page processing method and related apparatus |
| CN109960772A (en) * | 2019-03-13 | 2019-07-02 | 北京三快在线科技有限公司 | A kind of method and device identifying front end page design mistake |
| CN110473249A (en) * | 2019-07-12 | 2019-11-19 | 平安普惠企业管理有限公司 | A kind of control methods, device and the terminal device of web user interface and design original text |
| CN112035772A (en) * | 2020-07-27 | 2020-12-04 | 长沙市到家悠享网络科技有限公司 | Page evaluation method, device and equipment |
-
2021
- 2021-04-16 CN CN202110412803.8A patent/CN113076165A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105740364A (en) * | 2016-01-26 | 2016-07-06 | 腾讯科技（深圳）有限公司 | Page processing method and related apparatus |
| CN109960772A (en) * | 2019-03-13 | 2019-07-02 | 北京三快在线科技有限公司 | A kind of method and device identifying front end page design mistake |
| CN110473249A (en) * | 2019-07-12 | 2019-11-19 | 平安普惠企业管理有限公司 | A kind of control methods, device and the terminal device of web user interface and design original text |
| CN112035772A (en) * | 2020-07-27 | 2020-12-04 | 长沙市到家悠享网络科技有限公司 | Page evaluation method, device and equipment |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113742021A (en) * | 2021-09-06 | 2021-12-03 | 北京字节跳动网络技术有限公司 | Data verification method and device, electronic equipment and storage medium |
| CN117952817A (en) * | 2024-03-26 | 2024-04-30 | 腾讯科技（深圳）有限公司 | Image comparison display method and related device |
| CN117952817B (en) * | 2024-03-26 | 2024-06-11 | 腾讯科技（深圳）有限公司 | Image comparison display method and related device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109801347B (en) | Method, device, equipment and medium for generating editable image template | |
| US11030392B2 (en) | Optimization for rendering web pages | |
| CN108038134B (en) | Page display method and device, storage medium and electronic equipment | |
| US20210149842A1 (en) | System and method for display of document comparisons on a remote device | |
| US20150193386A1 (en) | System and Method of Facilitating Font Selection and Manipulation of Fonts | |
| US10210142B1 (en) | Inserting linked text fragments in a document | |
| CN110321177B (en) | Mobile application localized loading method and device and electronic equipment | |
| US20110107204A1 (en) | Automated document assembly with obscuring | |
| US9766860B2 (en) | Dynamic source code formatting | |
| CN113382083B (en) | Webpage screenshot method and device | |
| WO2019080796A1 (en) | Method, apparatus and device for separating foreground and background of web system, and storage medium | |
| CN108647348A (en) | Textual presentation method, apparatus, equipment and storage medium | |
| US10951486B2 (en) | Terminal device, UI expansion method, and UI expansion program | |
| CN113076165A (en) | Page checking method and device | |
| CN106874519A (en) | Webpage representation method and apparatus | |
| CN111294395A (en) | Terminal page transmission method, device, medium and electronic equipment | |
| US20170031882A1 (en) | Web Page Profiler | |
| US20220129123A1 (en) | Accessibility verification and correction for digital content | |
| WO2024011899A1 (en) | Widget loading method and apparatus, device, and storage medium | |
| CN107451163B (en) | Animation display method and device | |
| CN113360106B (en) | Webpage printing method and device | |
| US20210232755A1 (en) | Machine first approach for identifying accessibility, non-compliances, remediation techniques and fixing at run-time | |
| CN108694043B (en) | Page decoration method and system | |
| CN111443978A (en) | User interface adjusting method and device, storage medium and electronic equipment | |
| WO2023236795A1 (en) | Encyclopedia entry processing method and apparatus, and electronic device, medium and program product |
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 |