WO2021218327A1 - 一种页面处理方法和相关装置 - Google Patents

一种页面处理方法和相关装置 Download PDF

Info

Publication number
WO2021218327A1
WO2021218327A1 PCT/CN2021/078000 CN2021078000W WO2021218327A1 WO 2021218327 A1 WO2021218327 A1 WO 2021218327A1 CN 2021078000 W CN2021078000 W CN 2021078000W WO 2021218327 A1 WO2021218327 A1 WO 2021218327A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
target page
skeleton screen
file
view
Prior art date
Application number
PCT/CN2021/078000
Other languages
English (en)
French (fr)
Inventor
孙广东
黄灿辉
海媛
黄佳生
林超
郭志伟
黄思程
薛远升
Original Assignee
腾讯科技（深圳）有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 腾讯科技（深圳）有限公司 filed Critical 腾讯科技（深圳）有限公司
Publication of WO2021218327A1 publication Critical patent/WO2021218327A1/zh
Priority to US17/730,009 priority Critical patent/US20220253588A1/en

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/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/151—Transformation
    • G06F40/154—Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/197—Version control
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Definitions

  • This application relates to the field of computer technology, specifically to application processing.
  • a Loading page is usually displayed during the loading process of the page.
  • the Loading page can be a blank page (for example, as shown on the left side of Figure 1).
  • display a rotating chrysanthemum on the Loading page (such as the one on the right in Figure 1), prompting the user that the page is loading.
  • the embodiment of the present application provides a page processing method and related device, which can quickly generate the view file of the skeleton screen corresponding to the target page based on the page structure of the target page, so that the realization process of the skeleton screen is not only efficient but also flexible.
  • an embodiment of the present application provides a page processing method, which includes:
  • the page structure of the skeleton screen corresponding to the target page is obtained on the basis of the page structure of the target page.
  • the page structure of the skeleton screen is used to identify the layout of the placeholder elements of the skeleton screen in the skeleton screen.
  • the bit element is obtained by processing the page element;
  • the view file of the skeleton screen is generated according to the page structure of the skeleton screen, and the skeleton screen is used for displaying before loading the target page.
  • an embodiment of the present application provides a page processing method, which includes:
  • the preview interface includes the target page previewed in the application; the preview interface also includes trigger controls;
  • the view file of the skeleton screen is generated according to the processing method of the above application;
  • the view file of the target page and the view file of the skeleton screen with the mapping relationship are packaged into the program package of the application program.
  • the generation of the view file of the skeleton screen corresponding to the target page to be previewed can be triggered by the trigger control in the preview interface, and the mapping relationship between the view file of the target page and the view file of the skeleton screen is established; Package the view file of the target page with the mapping relationship and the view file of the skeleton screen into the package of the application.
  • an application package containing the view file of the target page and the view file of the skeleton screen is generated.
  • the skeleton screen implementation scheme is introduced in the application startup process, thereby The startup process of the application and the loading process of the target page are optimized, which is conducive to improving the user experience of the application.
  • an embodiment of the present application provides a page processing method, which includes:
  • the view file of the target page and the view file of the skeleton screen have a mapping relationship; the view file of the skeleton screen is generated according to the processing method of the aforementioned application;
  • the target page is rendered and displayed to replace the skeleton screen with the target page.
  • the file based on the skeleton screen that has a mapping relationship with the target page in the application package can first render and display the target page After the content of the target page is loaded, replace the skeleton screen with the target page. This process can effectively reduce the anxiety of users waiting, and enhance the competitiveness of applications and user experience.
  • an embodiment of the present application provides a page processing device, which includes:
  • Preview unit used to preview the target page in the application
  • the processing unit is configured to obtain the page structure of the target page to be previewed, where the page structure of the target page is used to identify the layout of the page elements of the target page in the target page; based on the page structure of the target page Obtain the page structure of the skeleton screen corresponding to the target page.
  • the page structure of the skeleton screen is used to identify the layout of the placeholder element of the skeleton screen in the skeleton screen.
  • the processing is obtained; the view file of the skeleton screen is generated according to the page structure of the skeleton screen, and the skeleton screen is used for displaying before loading the target page.
  • an embodiment of the present application provides a page processing device, which includes:
  • the display unit is used to display a preview interface, the preview interface includes the target page being previewed in the application; the preview interface also includes a trigger control;
  • the processing unit is used to generate the view file of the skeleton screen according to the processing method of the aforementioned application when the trigger control is selected; and obtain the view file of the target page, and establish a connection between the view file of the target page and the view file of the skeleton screen And packaging the view file of the target page and the view file of the skeleton screen with the mapping relationship into the package of the application program.
  • an embodiment of the present application provides a page processing device, which includes:
  • the reading unit is used to read the view file of the target page and the view file of the skeleton screen from the package of the application program.
  • the view file of the target page and the view file of the skeleton screen have a mapping relationship; the view file of the skeleton screen is in accordance with the aforementioned application
  • the processing method of the program is generated;
  • the processing unit is configured to, if it is determined that the target page is loaded, render and display the skeleton screen according to the view file of the skeleton screen before loading the target page; and load the dynamic resource data in the target page; according to the view file of the target page And the dynamic resource data in the loaded target page, render and display the target page, so as to replace the skeleton screen with the target page.
  • an embodiment of the present application provides a page processing device, which includes:
  • the computer-readable storage medium stores one or more instructions, and the one or more instructions are suitable for being loaded by a processor and executed by the processing method of the above-mentioned application program.
  • an embodiment of the present application provides a computer-readable storage medium, and the computer-readable storage medium stores one or more instructions, and the one or more instructions are suitable for being loaded by a processor and executing the above-mentioned page processing method.
  • embodiments of the present application provide a computer program product including instructions, which when run on a computer, cause the computer to execute the above-mentioned page processing method.
  • the page structure of the previewed target page is obtained, and the page elements are directly processed on the basis of the page structure of the target page to obtain the target page corresponding The page structure of the skeleton screen; and then generate the view file of the skeleton screen according to the page structure of the skeleton screen, and the skeleton screen is used to display before the target page is loaded.
  • This process is to directly generate the view file of the corresponding skeleton screen directly by obtaining the page structure of the target page.
  • the realization process of files and skeleton screens is not only efficient, but also flexible.
  • Figure 1 shows a schematic diagram of a Loading page in the related art
  • Fig. 2 shows a schematic diagram of an application startup process provided by an exemplary embodiment of the present application
  • Fig. 3 shows a schematic diagram of a skeleton screen provided by an exemplary embodiment of the present application
  • Fig. 4 shows a schematic structural diagram of a page processing system provided by an exemplary embodiment of the present application
  • Fig. 5 shows a schematic flowchart of a page processing method provided by an exemplary embodiment of the present application
  • Fig. 6 shows a schematic diagram of a document object model tree provided by an exemplary embodiment of the present application
  • FIG. 7 shows a schematic diagram of replacing a key element with a placeholder element provided by an exemplary embodiment of the present application
  • FIG. 8 shows a schematic flowchart of processing different types of page elements provided by an exemplary embodiment of the present application
  • Fig. 9a shows a schematic diagram of replacing a text element with a placeholder element according to an exemplary embodiment of the present application
  • FIG. 9b shows a schematic diagram of replacing a picture element with a placeholder element according to an exemplary embodiment of the present application.
  • Fig. 9c shows a schematic diagram of replacing a button element with a placeholder element according to an exemplary embodiment of the present application
  • FIG. 9d shows a schematic diagram of replacing a form element with a placeholder element according to an exemplary embodiment of the present application.
  • FIG. 9e shows a schematic diagram of replacing a pseudo-type element with a placeholder element according to an exemplary embodiment of the present application.
  • FIG. 9f shows a schematic diagram of replacing a native component with a placeholder element according to an exemplary embodiment of the present application.
  • Fig. 10 shows a flowchart of another page processing method provided by an exemplary embodiment of the present application.
  • FIG. 11 shows a schematic diagram of a preview interface provided by an exemplary embodiment of the present application.
  • Fig. 12 shows a flowchart of another page processing method provided by an exemplary embodiment of the present application.
  • FIG. 13 shows a schematic structural diagram of a page processing apparatus provided by an exemplary embodiment of the present application.
  • FIG. 14 shows a schematic structural diagram of another page processing apparatus provided by an exemplary embodiment of the present application.
  • FIG. 15 shows a schematic structural diagram of yet another page processing apparatus provided by an exemplary embodiment of the present application.
  • Fig. 16 shows a schematic structural diagram of a page processing device provided by an exemplary embodiment of the present application.
  • the application programs involved in the embodiments of the present application may include various programs that run in the terminal, such as APP, installation-free application programs (small programs), and so on.
  • the application program is mainly an application program that does not require installation, that is, an application program that can be used without downloading and installing, as an example for description.
  • This type of application is also commonly known as a small program. It usually runs as a subprogram in the client. At this time, the client has a parent-child relationship with the application. The client is the parent of the application, and the application is the client. Subroutine at the end.
  • a client also called an application client or an APP client refers to a program that is downloaded and installed in the terminal and runs in the terminal.
  • the terminal may include various clients, including but not limited to: IM (Instant Messaging) clients (such as WeChat clients, QQ clients, etc.), SNS (Social Networking Services, social network services) clients (such as Weibo client, map client with social functions, etc.), content service client (such as news client), image processing client, search client, etc.
  • IM Intelligent Messaging
  • SNS Social Networking Services
  • social network services such as Weibo client, map client with social functions, etc.
  • content service client such as news client
  • search client search client
  • the application programs mentioned in the subsequent embodiments of the present application are all described by taking the application programs (ie, applets) running in various clients of the terminal as examples.
  • the application (small program) is a dual-threaded bottom architecture.
  • the operating environment is divided into a logic layer and a view layer.
  • the logic layer includes logic files, which can refer to JS files; the logic layer uses JsCore threads to run JS files. That is, the tasks of the logic layer are executed in the logic thread (ie, the JsCore thread).
  • the view layer includes view files, which include view code files (such as wxml files) and view style files (such as wxss files).
  • the logic layer uses Webview to render the page according to the view file of the page. There are multiple pages in one application. Therefore, there are multiple Webview threads in the view layer, that is, the tasks of the view layer are all executed in the rendering thread (ie, the Webview thread).
  • Figure 2 shows a schematic diagram of an application startup process provided by an exemplary embodiment of the present application; as shown in Figure 2, the application startup process includes a preloading process and a display process; wherein the preloading process can be divided into It is the preloading of the view layer and the preloading of the logic layer; the preloading process of the view layer may include Webview initialization and public library injection, and the preloading of the logic layer may include JS engine (ie JsCore) initialization and public library injection.
  • the display process includes a resource preparation phase (such as basic UI (User Interface) creation, code package download), business code injection phase, and first screen rendering phase. Every necessary step in the application startup process takes a certain amount of time to complete, and the user needs to wait during this time.
  • UI User Interface
  • FMP First Meaningful Paint
  • this embodiment of the application proposes a skeleton screen solution.
  • the specific solution is: in the process of loading and rendering the first screen content of the target page, display the corresponding target page Skeleton Screen.
  • the skeleton screen can display a skeleton page depicting the general structure of each page element in the target page before the data of the target page is loaded.
  • the so-called skeleton screen refers to a page used to depict the general structure of each page element in the target page before the data in the target page of the application program has been loaded.
  • the basic principle of the skeleton screen is to follow the page structure of the target page in the application, and use placeholder elements to style over each page element in the target page, so that each page element is displayed as a gray block.
  • the target page here may refer to any page in the application program.
  • the target page may refer to the first service page to be displayed in the application program.
  • the page elements in the target page may refer to text, pictures, buttons, etc. in the target page.
  • the placeholder element can be a color block including various colors and stripes, such as a gray block.
  • the position and style of the placeholder element in the skeleton screen correspond to the position and style of the page element in the target page.
  • the page in the target page Elements can be found in the corresponding placeholder elements in the skeleton screen.
  • the skeleton screen is rendered before the target page of the application is loaded.
  • the data of the page element of the target page is used to replace the placeholder elements in the skeleton screen.
  • the skeleton screen can display the position and style of each page element in the target page, which can optimize the loading experience.
  • FIG. 3 shows a schematic diagram of a skeleton screen provided by an exemplary embodiment of the present application; the structure of the target page 30 and its corresponding skeleton screen 31 is shown in FIG. 3.
  • the target page 30 refers to any page in any application, for example, it may be the main service page in the application (that is, the first page that needs to be rendered and displayed after the application is started).
  • the target page 30 contains multiple page elements, such as a button element 301, a picture element 302, and a text element 303.
  • the skeleton screen 31 contains multiple placeholder elements, such as placeholder elements 304-306, and the placeholder elements are usually represented as gray blocks.
  • the page structure of the target page 30 and the skeleton screen 31 are roughly the same, and the page elements in the target page 30 are replaced with gray placeholder elements in the skeleton screen 31, for example, the button element 301 is replaced with a placeholder.
  • Elements 304, picture elements 302 are replaced with placeholder elements 305, and text elements 303 are replaced with placeholder elements 306.
  • the position of the page element in the target page 30 is consistent with the position of the corresponding placeholder element in the skeleton screen 31.
  • the display effects of the placeholder elements corresponding to different types of page elements are also different.
  • the placeholder element corresponding to the file element 303 is in a gray stripe shape; while the placeholder element 305 corresponding to the picture element 302 is a gray rectangle.
  • Block; the placeholder element 304 corresponding to the key element 301 presents a gray block with the same shape as the key element.
  • the application includes a logic layer and a view layer, and the display of the skeleton screen corresponding to the target page is executed in the Webview thread by establishing a rendering task in the view layer. Therefore, it is first necessary to generate the view file of the skeleton screen corresponding to the target page, and then the view layer renders and displays the skeleton screen according to the view file of the skeleton screen.
  • the view layer renders and displays the skeleton screen according to the view file of the skeleton screen.
  • the method is inefficient, and there is a serious problem of business coupling, that is, once the page structure of the target page changes, the code needs to be rewritten, so this method is not suitable for the implementation of the skeleton screen of the applet page.
  • the other is to customize the skeleton screen using web-side plug-ins. This method is only suitable for the single-threaded architecture of the web-side.
  • the skeleton screen corresponding to the target page of the application is a page, it is a page implemented on the basis of the framework of the applet, and the applet is an application that is free of installation and runs on the client. It has a dual-thread mode of the underlying architecture, which has a completely different underlying architecture from the web side, so this method is also not suitable for the implementation of the skeleton screen for the applet page.
  • an embodiment of the present application proposes a page processing solution, which can generate a skeleton screen for the target page in an application with a dual-thread mode architecture (ie, a small program) that is free of installation, and can be more convenient Generate view files for the skeleton screen of the target page in the applet, thereby optimizing the startup process of the application and optimizing the loading experience of the target page; the solution of the skeleton screen in this application has the advantages of no code intrusion, low cost of use, and flexible configuration .
  • a dual-thread mode architecture ie, a small program
  • Fig. 4 shows a schematic structural diagram of a page processing system provided by an exemplary embodiment of the present application.
  • the page processing system may include a terminal 401, a terminal 402, and a server 403.
  • terminal 401 or terminal 402 can be: PC (Personal Computer), PDA (tablet computer), mobile phone, wearable smart device, etc.
  • server 403 can be a separate server, cluster server, cloud server, etc.
  • the terminal 401 may refer to a terminal used by a developer of an application program.
  • the terminal 402 may refer to a terminal corresponding to a user of an application program.
  • At least one client can be installed and run in the terminal 402, and the client supports the running of an application program.
  • the application program may be an application program (ie, an applet) that runs on the client without installation.
  • a WeChat client is installed in the terminal 402, and news applets, shopping applets, game applets, etc. can be run on the WeChat client.
  • the developer of the application program can use the terminal 401 to develop and debug the application program.
  • the development and debugging function provided by the developer tool in the terminal 401 can be used to realize the development and debugging of the application program. debugging.
  • the terminal 401 can provide a preview function. The developer can use the preview function to preview each page in the application. Then, the terminal 401 can be based on the page structure of the previewed target page , To generate the view file of the skeleton screen corresponding to the target page; in this way, the original style layout of the target page is reused to automatically generate the view file of the skeleton screen, and the skeleton screen is realized in a convenient and code-free way.
  • the terminal 401 after the terminal 401 generates the skeleton screen file corresponding to the target page, it also needs to establish the mapping relationship between the target page and the skeleton screen, and inject the mapping relationship into the program developed by the developer for the application. In this way, after the developer publishes the package of the application, the implementation of the skeleton screen is introduced into the startup process of the application.
  • the user can use the terminal 402 to use the published application.
  • the application-based package and the target The view file of the skeleton screen with the mapping relationship on the page can first render and display the skeleton screen of the target page. After the content of the target page is loaded, the target page is used to replace the skeleton screen.
  • This process can effectively reduce the anxiety of users waiting, and enhance the competitiveness of applications and user experience.
  • the resource data of the application program is stored in the server 403.
  • the page elements in the application page contain static resource data and dynamic resource data.
  • Static resource data refers to data that does not need to be requested during the page loading process, such as some fixed text, pictures, etc., these static resource data will form the application
  • Dynamic resource data refers to data that needs to be obtained from the server 403 in real time, such as user interaction data, changing text images, and so on.
  • terminal 401 and the terminal 402 mentioned above may be the same terminal or different terminals, which is not limited in the embodiment of the present application.
  • Fig. 5 shows a schematic flowchart of a page processing method provided by an exemplary embodiment of the present application; the page processing method can be executed by the terminal 401 in the system shown in Fig. 4, and the method includes but is not limited to steps S501-S504. in:
  • the page implementation of the application needs to include a logic file and a view file.
  • the logic file refers to a file that runs on the logic layer of the application, and can refer to a JS file.
  • the view file refers to a file running in the view layer of the application, including a view code file and a view style factor file.
  • the view code file may be a wxml file
  • the view style file may be a wxss file.
  • the terminal 401 may provide a developer tool, which has functions such as application development, compilation, preview, and debugging, and the developer can use the developer tool to develop and debug the application.
  • the preview function of the developer tool can be called based on the logic file of the target page to preview the target page of the application.
  • the target page needs to be displayed in the application, it can be rendered and displayed according to the view file of the target page.
  • S502 Obtain a page structure of a previewed target page, where the page structure of the target page is used to identify the layout of page elements of the target page in the target page.
  • the target page also includes configuration information, which is a configuration item used to describe the display effect of each page element in the target page; the configuration information of the target page includes the display configuration field of the page element, and the display configuration field is used to indicate that the page element is in the target
  • the page is displayed or hidden.
  • the display configuration field may refer to the hidden configuration field. If the hidden configuration field is configured as a css selector that needs to be hidden, it means it is hidden; otherwise, it means it is displayed.
  • the page structure of the target page is determined by the logical file and configuration information of the target page; in other words, the page structure of the target page can be obtained according to the logical file and configuration information of the target page.
  • the page structure identifies the layout of each page element in the target page in the target page. For example: the logic file of the target page defines the position and style of a certain page element, and the configuration information of the target page indicates that the page element is hidden, then the page element will be presented at the corresponding position in the target page when the target page is displayed Blank, that is, the page element is hidden and will not be displayed on the target page.
  • S503 Obtain the page structure of the skeleton screen corresponding to the target page based on the page structure of the target page.
  • the page structure of the skeleton screen is used to identify the layout of the placeholder elements of the skeleton screen in the skeleton screen, and the placeholder elements are obtained by processing the page elements.
  • the page elements of the target page include key elements and non-key elements.
  • the key element refers to the target page located on the first screen, and the display configuration field is used to indicate the displayed page element, that is, the key element refers to the visible element on the first screen.
  • Non-key elements refer to page elements other than key page elements in the target page, that is, non-key elements include above-the-fold hidden elements and non-first-screen elements.
  • the types of key elements include at least one of the following: text elements, image elements, button elements, form elements, pseudo-type elements, and native components.
  • the key elements and non-key elements are processed differently to determine the placeholder elements, and thus the page structure of the skeleton screen corresponding to the target page is obtained;
  • the solution of obtaining the page structure of the skeleton screen is convenient, and can reduce the redundancy of the code of the skeleton screen, making the generation process of the skeleton screen file more efficient.
  • S504 Generate a view file of the skeleton screen according to the page structure of the skeleton screen.
  • the view file of the skeleton screen includes the view code file of the skeleton screen and the view style file of the skeleton screen; in one embodiment, the view code file of the skeleton screen may be a wxml file, which is used to describe the template of the skeleton screen, including the skeleton screen. The layout position of each placeholder element in the skeleton screen.
  • the view style file of the skeleton screen can be a wxss file, which is used to describe the style of each placeholder element in the skeleton screen.
  • the skeleton screen is used for displaying before loading the target page, so as to reduce the waiting anxiety of the user.
  • the page structure of the previewed target page is obtained, and the page elements are directly processed on the basis of the page structure of the target page to obtain the target page corresponding
  • the page structure of the skeleton screen; the view file of the skeleton screen is generated according to the page structure of the skeleton screen.
  • This process is to directly generate the view file of the corresponding skeleton screen directly by obtaining the page structure of the target page. There is no need to write separate code for the skeleton screen to avoid code intrusion.
  • the corresponding skeleton screen can be quickly generated by previewing.
  • the realization process of view files and skeleton screens is not only efficient, but also flexible.
  • step S503 The processing procedure involved in step S503 will be described in detail below.
  • the process of processing the page elements to obtain the page structure of the skeleton screen corresponding to the target page includes: (1) Deleting non-key elements in the page elements, which involves The processing of non-critical elements; this processing can be achieved by the following means:
  • the DOM tree includes multiple nodes, and each node corresponds to a page element in the target page.
  • Fig. 6 shows a schematic diagram of a document object model tree provided by an exemplary embodiment of the present application.
  • the document object model tree is a tree structure representing logical files.
  • the logic file is an html code file
  • the corresponding DOM tree is shown in Figure 6.
  • Each box 601 in Figure 6 represents a node.
  • the DOM tree includes multiple nodes, and each node is associated with a page described in the logic file.
  • the elements correspond; for example, the text element in the logic file corresponds to the text node in the DOM tree, and the attribute element in the logic file corresponds to the attribute node in the DOM tree.
  • Each node in the DOM tree carries the attributes of its corresponding page element, including position attributes and style attributes; position attributes are used to describe the layout position of the page element in the target page (such as width and height, distance from the top of the page, distance from the page) The distance from the left end), the style attribute is used to describe the display effect of the page element in the target page (such as font color, background color, foreground color, etc.).
  • the DOM tree is clipped according to the attributes of each node to remove nodes corresponding to non-key elements, and only nodes corresponding to elements visible on the first screen are retained. This can reduce the redundancy of the skeleton screen code, and the specific tailoring method can be carried out by the following procedure:
  • the cropped DOM tree may only contain nodes corresponding to the key elements in the target page; in one embodiment, the key elements in the target page are replaced with placeholder elements to obtain the page structure of the skeleton screen. It includes the following steps:
  • the attributes include position attributes and style attributes.
  • the attribute processing includes determining the position attribute of each node as the position attribute of the placeholder element, and replacing the style attribute of each node with the placeholder element Style attributes.
  • FIG. 7 shows a schematic diagram of replacing a key element with a placeholder element provided by an exemplary embodiment of the present application; a certain key element in the target page 70 is a text element 701, which corresponds to a corresponding node in the DOM tree, and its position
  • the attributes may include: the distance T of the text element 701 from the top of the target page, the distance L from the left side of the target page, the width W and the height H of the text element 701.
  • the position attribute of the text element 701 is directly assigned to the corresponding placeholder element 702, that is, the position attribute of the placeholder element 702 in the skeleton screen 71 includes: the distance T between the placeholder element 702 and the top of the skeleton screen, The distance L from the left side of the target page, the width W and the height H of the placeholder element 702; it can be seen from the figure that the text element 701 and the corresponding placeholder element 702 have the same layout position.
  • the style attribute of the placeholder element 702 corresponding to the text element 701 is a gray stripe
  • the style attribute of the text element 701 can be modified to the style attribute corresponding to the gray stripe at the same time.
  • the page of the applet can be understood as being composed of a component tree.
  • the components in the component tree can be the official built-in components of the client where the applet is located, or they can be customized components by the developer.
  • the logic file of the target page is used.
  • the logic file is an html code file corresponding to the DOM tree; the content of each page element is stored in the form of html tags.
  • the view file of the target page is used.
  • the content of each page element is stored in the form of component tags.
  • Fig. 8 shows a schematic diagram of a process for processing different types of page elements provided by an exemplary embodiment of the present application. As shown in Fig. 8, the process of analysis and processing includes but is not limited to:
  • Text elements include text components, view components, cover-view components, etc., and replace them with corresponding placeholder elements, which appear as gray stripes (as shown in Figure 9a).
  • the internal structure of the text component is as follows:
  • the original text node refers to the node on the DOM tree.
  • the text content of the text element in the target page of the preview is stored by two ⁇ text> tags.
  • the text content of this text element will eventually be written into the component tag in the view file of the target page, specifically by writing To the span node whose id is raw and main in the component tree. Therefore, when replacing the text element with a placeholder, it needs to be parsed.
  • One way is to record each text node in the DOM tree, and obtain its text content, and perform the mapping between the DOM tree and the component tree. , And backfill the text content when generating wxml code.
  • this method requires knowing the implementation details of each component, which is time-consuming and labor-intensive and inefficient to process.
  • the image (picture) component in the view file of the applet page is not constructed by the img tag in the logic file, but is implemented by the background image. Therefore, when processing the picture element, the src attribute of the picture element needs to be removed , And add the background color (gray) of the placeholder element for the image component to replace it.
  • the color (color) attribute of the icon component can be set to the color (gray) of the placeholder element to achieve replacement.
  • a corresponding placeholder element which has the same shape as the button shape (as shown in Fig. 9c).
  • native components such as camera, live-player, live-pusher, video, map, canvas, etc.
  • native components have a higher level
  • cover-view components are usually used to replace native components to achieve processing of native components; for example, cover-view components are used to replace camera components, and for example, cover-view components are used to replace live-player and many more.
  • the configuration information of the skeleton screen is used to control the display effect of the skeleton screen; afterwards, the page structure of the skeleton screen can be jointly determined according to the logic file of the skeleton screen and the configuration information of the skeleton screen .
  • Placeholder elements corresponding to picture elements, placeholder elements corresponding to text elements, and placeholder elements corresponding to button elements are important elements that need to be presented in the skeleton screen, while other parts are relatively unimportant or unnecessary Concerned about internal details, so the presentation effect of important elements and non-important elements may also be different.
  • the display effect of the skeleton screen can be optimized through the configuration information of the skeleton screen.
  • the configuration information of the skeleton screen can include multiple configuration items, as shown in Table 1 below:
  • Table 1 List of configuration items of the skeleton screen
  • the configuration item list can be assimilated, and the following sub-items are all clones of the first sub-item.
  • the configuration item list of the application is not declared through the ul/ol tag, so it is marked with the data-* attribute.
  • the configuration item list container there are two declaration methods as follows: direct child nodes of data-skeleton-list will be processed as clones of the first item; elements with the same attribute of data-skeleton-li are considered as
  • the following procedures can be used for the two declaration methods:
  • a script for generating a skeleton screen may be stored in the terminal 401.
  • the script of the skeleton screen may be Skeleton.js, and the terminal 401 executes the script to target the target.
  • the page structure of the page is analyzed and processed to generate the view file of the skeleton screen.
  • the page structure of the previewed target page is obtained, and the page elements are directly processed on the basis of the page structure of the target page to obtain the target page corresponding
  • the page structure of the skeleton screen; the view file of the skeleton screen is generated according to the page structure of the skeleton screen.
  • This process is to directly generate the view file of the corresponding skeleton screen directly by obtaining the page structure of the target page. There is no need to write separate code for the skeleton screen to avoid code intrusion.
  • the corresponding skeleton screen can be quickly generated by previewing.
  • the realization process of view files and skeleton screens is not only efficient, but also flexible.
  • FIG. 10 shows a flowchart of another page processing method provided by an exemplary embodiment of the present application; this page processing method can be executed by the terminal 401 in the system shown in FIG. 4, and the method includes but is not limited to steps S1001-S1004 . in:
  • S1001 Display a preview interface; the preview interface includes the target page to be previewed in the application; the preview interface also includes a trigger control.
  • the terminal may provide a developer tool, the tool has a preview function and can provide a preview interface, and the preview interface includes a trigger control, and the trigger control may be a button or an option entry.
  • FIG. 11 shows a schematic diagram of a preview interface provided by an exemplary embodiment of the present application; FIG. 11 includes a target page 1101 of an application program to be previewed and a trigger control 1102.
  • S1003 Obtain a view file of the target page, and establish a mapping relationship between the view file of the target page and the view file of the skeleton screen.
  • the view file of the target page includes the view code file and the view style file of the target page; the page elements include static resource data and dynamic resource data, and the view file of the target page is generated based on the static resource data of the page elements in the target page.
  • the method for establishing the mapping relationship between the view file of the target page and the view file of the skeleton screen may include: storing the view file of the target page and the view file of the skeleton screen in a directory at the same level; The view code file of the skeleton screen is introduced into the view code file of the target page, and the view style file of the skeleton screen is introduced into the view style file of the target page.
  • the view file of the target page and the view file of the skeleton screen are located under the path directory pages/index/index
  • the view code file of the target page is pages/index/index.wxml
  • the view style file of the target page is pages/index /index.wxss
  • the view code file of the skeleton screen is index.skeleton.wxml
  • the view style file of the skeleton screen is index.skeleton.wxss as an example
  • the import statement (such as include) is used to convert the view code file (index.
  • skeleton.wxml import the view code file (pages/index/index.wxml) of the target page, and use import statements (such as import) to import the view style file of the skeleton screen (index.skeleton.wxss) into the view style file of the target page (pages/index/index.wxss), so that the mapping relationship between the view file of the target page and the view file of the skeleton screen can be established.
  • S1004 Pack the view file of the target page with the mapping relationship and the view file of the skeleton screen into the program package of the application.
  • the application package also includes the application configuration file (such as the configuration file project.config.json); the configuration file includes the configuration information of the target page and the configuration information of the skeleton screen; the configuration information of the skeleton screen (such as the configuration information skeleton -config) is used to control the display effect of the skeleton screen.
  • the application configuration file such as the configuration file project.config.json
  • the configuration file includes the configuration information of the target page and the configuration information of the skeleton screen
  • the configuration information of the skeleton screen (such as the configuration information skeleton -config) is used to control the display effect of the skeleton screen.
  • the generation of the view file of the skeleton screen corresponding to the target page to be previewed can be triggered by the trigger control in the preview interface, and the mapping relationship between the view file of the target page and the view file of the skeleton screen is established; Package the view file of the target page with the mapping relationship and the view file of the skeleton screen into the package of the application.
  • an application package containing the view file of the target page and the view file of the skeleton screen is generated.
  • the skeleton screen implementation scheme is introduced in the application startup process, thereby The startup process of the application and the loading process of the target page are optimized, which is conducive to improving the user experience of the application.
  • FIG. 12 shows a flowchart of another page processing method provided by an exemplary embodiment of the present application; this page processing method can be executed by the terminal 402 in the system shown in FIG. 4, and the method includes but is not limited to steps S1201-S1204 . in:
  • S1201 Read the view file of the target page and the view file of the skeleton screen from the program package of the application.
  • the view file of the target page and the view file of the skeleton screen have a mapping relationship; the view file of the skeleton screen is according to Figure 4-9f Generated by the method of the illustrated embodiment.
  • S1204 Render and display the target page according to the view file of the target page and the dynamic resource data in the loaded target page, so as to replace the skeleton screen with the target page.
  • the application package includes the configuration file of the application.
  • the configuration file includes the configuration information of the skeleton screen.
  • the configuration information of the skeleton screen includes the display configuration field of the placeholder element in the skeleton screen.
  • the display configuration field of the placeholder element is used for Indicates that the placeholder element is displayed or hidden in the skeleton screen.
  • page elements include key elements, and key elements have a corresponding relationship with the placeholder elements in the skeleton screen.
  • the so-called corresponding relationship means that each key element has a corresponding placeholder element. When the key element is replaced, use The placeholder element corresponding to the key element replaces the key element.
  • the method of rendering and displaying the target page according to the view file of the target page and the dynamic resource data in the loaded target page to replace the skeleton screen with the target page may include: according to the key elements in the target page The time sequence of the completion of dynamic resource data loading is based on the dynamic resource data of the key elements that have been loaded and the view file of the target page. Each key element is rendered and displayed in turn, so that each key element in the target page is used to replace the corresponding ones in the skeleton screen in turn. Placeholder element.
  • each key element in the target page can send a request to the server to obtain the dynamic resource data corresponding to each key element; according to the response time of the response request, the dynamic resource data loading time corresponding to each key element has a time sequence; according to The view file of the target page and the dynamic resource data corresponding to each key element render and display each key element in the target page in turn.
  • each key element in the target page sequentially replaces the placeholder elements in the skeleton screen according to the order of the loading completion time of the dynamic resource data, so as to achieve the progressive loading effect of the key elements in the target page. It is understandable that the progressive loading effect can be controlled by the setData in the configuration information of the skeleton screen.
  • the node corresponding to the placeholder element that declares the data-skeleton-show attribute will be replaced with hidden by the actual data of the corresponding page element (Hidden) attributes, so that progressive loading effects can be achieved.
  • Hidden page element
  • the file based on the skeleton screen that has a mapping relationship with the target page in the application package can first render and display the target page After the content of the target page is loaded, replace the skeleton screen with the target page. This process can effectively reduce the anxiety of users waiting, and enhance the competitiveness of applications and user experience.
  • FIG. 13 is a schematic structural diagram of a page processing device provided by an exemplary embodiment of the present application; the page processing device may be a computer program (including program code) used to run in the terminal 401, for example, the page processing device may It is a developer tool in the running terminal 401; the page processing device can be used to execute part or all of the steps in the method embodiments shown in FIG. 5 and FIG. 10.
  • the page processing device includes the following units:
  • the preview unit 1301 is used to preview the target page in the application
  • the processing unit 1302 is configured to obtain the page structure of the target page to be previewed, where the page structure of the target page is used to identify the layout of the page elements of the target page in the target page; on the basis of the page structure of the target page
  • the page structure of the skeleton screen corresponding to the target page is obtained from the above, and the page structure of the skeleton screen is used to identify the layout of the placeholder element of the skeleton screen in the skeleton screen, and the placeholder element is obtained by comparing the page
  • the element is obtained by processing; the view file of the skeleton screen is generated according to the page structure of the skeleton screen, and the skeleton screen is used for displaying before loading the target page.
  • the application is an installation-free application, and the application refers to any application running in the client; when the application is running in the client, the client and the application have a parent-child relationship , The client is the parent program of the application, and the application is a subprogram of the client;
  • the application includes a logic layer and a view layer.
  • the tasks of the logic layer are executed in the logic thread; the tasks of the view layer are executed in the rendering thread;
  • the target page is any page in the application.
  • the page elements include key elements and non-key elements; the processing unit 1302 is specifically configured to:
  • key elements include any one or a combination of the following: text elements, picture elements, button elements, form elements, pseudo-type elements, and native components; placeholder elements can be gray blocks.
  • the target page includes logic files and configuration information, and the page structure of the target page is determined by the logic files and configuration information of the target page;
  • the configuration information of the target page includes the display configuration field of the page element, and the display configuration field of the page element is used to indicate that the page element is displayed or hidden in the target page;
  • the key element refers to the page element that is located in the target page, and the display configuration field is used to indicate the page element to be displayed; the non-key element refers to other page elements except the key page element in the target page.
  • processing unit 1302 is specifically configured to:
  • the document object model tree includes multiple nodes, and each node corresponds to a page element in the target page;
  • the document object model tree is cropped according to the configuration information of the target page, and the nodes corresponding to the non-key elements in the target page are removed from the document object model tree.
  • processing unit 1302 is specifically configured to:
  • the attribute processing includes determining the position attribute of the node as the position attribute of the placeholder element, and replacing the style attribute of the node with the style attribute of the placeholder element ;
  • the configuration information of the skeleton screen is used to control the display effect of the skeleton screen;
  • the page structure of the skeleton screen is jointly determined according to the logic file of the skeleton screen and the configuration information of the skeleton screen.
  • the view file includes a view code file and a view style file; the view code file of the skeleton screen is used to describe the layout position of the placeholder element of the skeleton screen in the skeleton screen, and the skeleton screen
  • the view style file of the screen is used to describe the style of the placeholder element of the skeleton screen.
  • the units in the page processing apparatus shown in FIG. 13 can be combined separately or all into one or several other units to form, or some unit(s) of them can also be split. It is composed of multiple units with smaller functions, which can achieve the same operation without affecting the realization of the technical effects of the embodiments of the present application.
  • the above-mentioned units are divided based on logical functions.
  • the function of one unit may also be realized by multiple units, or the functions of multiple units may be realized by one unit.
  • the page processing apparatus may also include other units. In practical applications, these functions may also be implemented with the assistance of other units, and may be implemented by multiple units in cooperation.
  • a general-purpose computing device such as a computer including a central processing unit (CPU), a random access storage medium (RAM), a read-only storage medium (ROM) and other processing elements and storage elements can be used Run a computer program (including program code) capable of executing the steps involved in the corresponding method shown in FIG. 5 and FIG. 10 to construct the page processing apparatus shown in FIG. 13 and to implement the page of the embodiment of the present application Approach.
  • the computer program can be recorded on, for example, a computer-readable recording medium, loaded into the above-mentioned computing device via the computer-readable recording medium, and run in it.
  • the page structure of the previewed target page is obtained, and the page elements are directly processed on the basis of the page structure of the target page to obtain the target page corresponding
  • the page structure of the skeleton screen; the view file of the skeleton screen is generated according to the page structure of the skeleton screen.
  • This process is to directly generate the view file of the corresponding skeleton screen directly by obtaining the page structure of the target page. There is no need to write separate code for the skeleton screen to avoid code intrusion.
  • the corresponding skeleton screen can be quickly generated by previewing.
  • the realization process of view files and skeleton screens is not only efficient, but also flexible.
  • the page processing device may be a computer program (including program code) used to run in the terminal 401, for example, the page processing device It may be a developer tool in the running terminal 401; the page processing device may be used to execute part or all of the steps in the method embodiments shown in FIG. 5 and FIG. 10. Please refer to Figure 14.
  • the page processing device includes the following units:
  • the display unit 1401 is configured to display a preview interface, the preview interface includes the target page to be previewed in the application; the preview interface also includes a trigger control;
  • the processing unit 1402 is configured to generate the view file of the skeleton screen corresponding to the target page according to the aforementioned page processing method when the trigger control is selected; obtain the view file of the target page, and establish the view file of the target page and the view file of the skeleton screen The mapping relationship between the mapping relationship; package the view file of the target page with the mapping relationship and the view file of the skeleton screen into the package of the application.
  • the view file includes a view code file and a view style file; the processing unit 902 is specifically configured to:
  • the target page includes page elements, the page elements include static resource data and dynamic resource data, and the view file of the target page is generated based on the static resource data of the page elements in the target page;
  • the application package also includes the configuration file of the application; the configuration file includes the configuration information of the target page and the configuration information of the skeleton screen; the configuration information of the skeleton screen is used to control the display effect of the skeleton screen.
  • the units in the page processing device shown in FIG. 14 can be combined separately or all into one or several other units to form, or some unit(s) of them can also be split. It is composed of multiple units with smaller functions, which can achieve the same operation without affecting the realization of the technical effects of the embodiments of the present application.
  • the above-mentioned units are divided based on logical functions.
  • the function of one unit may also be realized by multiple units, or the functions of multiple units may be realized by one unit.
  • the page processing apparatus may also include other units. In practical applications, these functions may also be implemented with the assistance of other units, and may be implemented by multiple units in cooperation.
  • a general-purpose computing device such as a computer including a central processing unit (CPU), a random access storage medium (RAM), a read-only storage medium (ROM) and other processing elements and storage elements
  • CPU central processing unit
  • RAM random access storage medium
  • ROM read-only storage medium
  • the computer program can be recorded on, for example, a computer-readable recording medium, loaded into the above-mentioned computing device via the computer-readable recording medium, and run in it.
  • the generation of the view file of the skeleton screen corresponding to the target page to be previewed can be triggered by the trigger control in the preview interface, and the mapping relationship between the view file of the target page and the view file of the skeleton screen is established; Package the view file of the target page with the mapping relationship and the view file of the skeleton screen into the package of the application.
  • an application package containing the view file of the target page and the view file of the skeleton screen is generated.
  • the skeleton screen implementation scheme is introduced in the application startup process, thereby The startup process of the application and the loading process of the target page are optimized, which is conducive to improving the user experience of the application.
  • the page processing device may be a computer program (including program code) used to run in the terminal 402; for example: the page processing
  • the device may be a client in the terminal 402 (such as a WeChat client), and the application is an application running in the client.
  • the client has a parent-child relationship with the application, and the client is the parent of the application.
  • the application program is a subprogram of the client; the page processing device can be used to execute part or all of the steps in the method embodiment shown in FIG. 12. Please refer to Figure 15.
  • the page processing device includes the following units:
  • the reading unit 1501 is used to read the view file of the target page and the view file of the skeleton screen from the package of the application program.
  • the view file of the target page and the view file of the skeleton screen have a mapping relationship; the view file of the skeleton screen is as follows The aforementioned page processing method is generated;
  • the processing unit 1502 is configured to, if it is determined that the target page is loaded, before loading the target page, render and display the skeleton screen according to the view file of the skeleton screen; and load the dynamic resource data in the target page; and according to the target page The dynamic resource data in the view file and the loaded target page is rendered and displayed to replace the skeleton screen with the target page.
  • the target page includes page elements, and the page elements include static resource data and dynamic resource data.
  • the view file of the target page is generated based on the static resource data of the page elements in the target page; the dynamic resource data in the target page Refers to the dynamic resource data of each page element in the target page;
  • the application package also includes the configuration file of the application; the configuration file includes the configuration information of the skeleton screen; the configuration information of the skeleton screen includes the display configuration field of the placeholder element in the skeleton screen, and the display configuration field of the placeholder element is used To indicate that the placeholder elements are displayed or hidden in the skeleton screen; the target page includes key elements, and the key elements have a corresponding relationship with the placeholder elements in the skeleton screen; the processing unit 1502 is specifically used for:
  • each key element is rendered in sequence according to the time sequence in which the dynamic resource data of each key element is loaded, so that each key element in the target page replaces each corresponding placeholder element in the skeleton screen in turn. In this way, the progressive loading effect of the page elements in the target page can be realized.
  • the units in the page processing apparatus shown in FIG. 15 can be combined separately or all into one or several other units to form, or some unit(s) of them can also be split. It is composed of multiple units with smaller functions, which can achieve the same operation without affecting the realization of the technical effects of the embodiments of the present application.
  • the above-mentioned units are divided based on logical functions.
  • the function of one unit may also be realized by multiple units, or the functions of multiple units may be realized by one unit.
  • the page processing apparatus may also include other units. In practical applications, these functions may also be implemented with the assistance of other units, and may be implemented by multiple units in cooperation.
  • a general-purpose computing device such as a computer including a central processing unit (CPU), a random access storage medium (RAM), a read-only storage medium (ROM) and other processing elements and storage elements
  • CPU central processing unit
  • RAM random access storage medium
  • ROM read-only storage medium
  • a computer program capable of executing each step involved in the corresponding method shown in FIG. 12 is run to construct the page processing apparatus shown in FIG. 15 and to implement the page processing method of the embodiment of the present application.
  • the computer program can be recorded on, for example, a computer-readable recording medium, loaded into the above-mentioned computing device via the computer-readable recording medium, and run in it.
  • the file based on the skeleton screen that has a mapping relationship with the target page in the application package can first render and display the target page After the content of the target page is loaded, replace the skeleton screen with the target page. This process can effectively reduce the anxiety of users waiting, and enhance the competitiveness of applications and user experience.
  • Fig. 16 shows a schematic structural diagram of a page processing device provided by an exemplary embodiment of the present application.
  • the page processing device includes a processor 1601, a communication interface 1602, and a computer-readable storage medium 1603.
  • the processor 1601, the communication interface 1602, and the computer-readable storage medium 1603 may be connected by a bus or in other ways.
  • the communication interface 1602 is used to receive and send data.
  • the computer-readable storage medium 1603 may be stored in the memory of the page processing device.
  • the computer-readable storage medium 1603 is used to store a computer program.
  • the computer program includes program instructions.
  • the processor 1601 is used to execute the program instructions stored in the computer-readable storage medium 1603. .
  • the processor 1601 (or CPU (Central Processing Unit, central processing unit)) is the computing core and control core of the page processing device. It is suitable for implementing one or more instructions, and is specifically suitable for loading and executing one or more instructions. Realize the corresponding method flow or corresponding function.
  • the embodiments of the present application also provide a computer-readable storage medium (Memory).
  • the computer-readable storage medium is a memory device in a page processing device for storing programs and data. It can be understood that the computer-readable storage medium herein may include a built-in storage medium in the page processing device, and of course, may also include an extended storage medium supported by the page processing device.
  • the computer-readable storage medium provides storage space, and the storage space stores the processing system of the page processing device.
  • one or more instructions suitable for being loaded and executed by the processor 1601 are stored in the storage space, and these instructions may be one or more computer programs (including program codes).
  • the computer-readable storage medium here may be a high-speed RAM memory, or a non-volatile memory (non-volatile memory), such as at least one disk memory; optionally, it may also be at least one located far away from the foregoing
  • the processor is a computer-readable storage medium.
  • the page processing device may be the terminal 401 shown in FIG. 4; the computer-readable storage medium stores one or more first instructions; the processor 1601 loads and executes the first instructions in the computer-readable storage medium Stored one or more first instructions to implement the corresponding steps in the above embodiment of the page processing method; in specific implementation, one or more first instructions in the computer-readable storage medium are loaded by the processor 1601 and execute the following steps :
  • the page structure of the skeleton screen corresponding to the target page is obtained on the basis of the page structure of the target page.
  • the page structure of the skeleton screen is used to identify the layout of the placeholder elements of the skeleton screen in the skeleton screen.
  • the bit element is obtained by processing the page element;
  • the view file of the skeleton screen is generated according to the page structure of the skeleton screen, and the skeleton screen is used for displaying before loading the target page.
  • the application is a free installation application, and the application refers to any application running in the client; when the application is running in the client, the client and the application have a parent-child relationship, The client is the parent program of the application, and the application is a subprogram of the client;
  • the application includes a logic layer and a view layer.
  • the tasks of the logic layer are executed in the logic thread; the tasks of the view layer are executed in the rendering thread;
  • the target page is any page in the application.
  • the page elements include key elements and non-key elements; one or more first instructions in the computer-readable storage medium are loaded by the processor 1601 and executed on the basis of the page structure of the target page.
  • the page elements are processed to obtain the page structure of the skeleton screen corresponding to the target page, the following steps are specifically performed:
  • key elements include any one or a combination of the following: text elements, picture elements, button elements, form elements, pseudo-type elements, and native components.
  • the target page includes logic files and configuration information, and the page structure of the target page is determined by the logic files and configuration information of the target page;
  • the configuration information of the target page includes the display configuration field of the page element, and the display configuration field of the page element is used to indicate that the page element is displayed or hidden in the target page;
  • the key element refers to the page element that is located in the target page, and the display configuration field is used to indicate the page element to be displayed; the non-key element refers to the other page elements in the target page except the key page element.
  • one or more first instructions in the computer-readable storage medium are loaded by the processor 1601, and when the non-critical elements in the target page are deleted, the following steps are specifically executed:
  • the document object model tree includes multiple nodes, and each node corresponds to a page element in the target page;
  • the document object model tree is cropped according to the configuration information of the target page, and the nodes corresponding to the non-key elements in the target page are removed from the document object model tree.
  • the cropped document object model tree only contains nodes corresponding to key elements in the target page
  • One or more first instructions in the computer-readable storage medium are loaded by the processor 1601 and executed to replace the key elements in the target page with placeholder elements to obtain the page structure of the skeleton screen, the following steps are specifically executed:
  • the attribute processing includes determining the position attribute of each node as the position attribute of the placeholder element, and replacing the style attribute of each node with the position attribute of the placeholder element.
  • the configuration information of the skeleton screen is used to control the display effect of the skeleton screen;
  • the page structure of the skeleton screen is jointly determined according to the logic file of the skeleton screen and the configuration information of the skeleton screen.
  • the view file includes a view code file and a view style file.
  • the view code file of the skeleton screen is used to describe the layout position of the placeholder element of the skeleton screen in the skeleton screen.
  • the view style file of the screen is used to describe the style of the placeholder elements of the skeleton screen;
  • the page structure of the previewed target page is obtained, and the page elements are directly processed on the basis of the page structure of the target page to obtain the target page corresponding
  • the page structure of the skeleton screen; the view file of the skeleton screen is generated according to the page structure of the skeleton screen.
  • This process is to directly generate the view file of the corresponding skeleton screen directly by obtaining the page structure of the target page. There is no need to write separate code for the skeleton screen to avoid code intrusion.
  • the corresponding skeleton screen can be quickly generated by previewing.
  • the realization process of view files and skeleton screens is not only efficient, but also flexible.
  • the page processing device may be the terminal 401 shown in FIG. 4; the computer-readable storage medium stores one or more second instructions; the processor 1601 loads and executes the computer-readable storage medium One or more second instructions stored in the computer to implement the corresponding steps in the above embodiment of the page processing method; in specific implementation, one or more second instructions in the computer-readable storage medium are loaded by the processor 1601 and executed as follows step:
  • the preview interface includes the target page previewed in the application; the preview interface also includes trigger controls;
  • the aforementioned page processing method When the trigger control is selected, the aforementioned page processing method generates the view file of the skeleton screen corresponding to the target page;
  • the view file includes a view code file and a view style file
  • One or more second instructions in the computer-readable storage medium are loaded by the processor 1601 and executed to establish the mapping relationship between the view file of the target page and the view file of the skeleton screen, specifically performing the following steps:
  • the target page includes page elements, the page elements include static resource data and dynamic resource data, and the view file of the target page is generated based on the static resource data of the page elements in the target page;
  • the application package also includes the configuration file of the application; the configuration file includes the configuration information of the target page and the configuration information of the skeleton screen; the configuration information of the skeleton screen is used to control the display effect of the skeleton screen.
  • the generation of the view file of the skeleton screen corresponding to the target page to be previewed can be triggered by the trigger control in the preview interface, and the mapping relationship between the view file of the target page and the view file of the skeleton screen is established; Package the view file of the target page with the mapping relationship and the view file of the skeleton screen into the package of the application.
  • an application package containing the view file of the target page and the view file of the skeleton screen is generated.
  • the skeleton screen implementation scheme is introduced in the application startup process, thereby The startup process of the application and the loading process of the target page are optimized, which is conducive to improving the user experience of the application.
  • the page processing device may be the terminal 402 shown in FIG. 4; the computer-readable storage medium stores one or more third instructions; the processor 1601 loads and executes the computer-readable storage medium One or more third instructions stored in the computer to implement the corresponding steps in the above embodiment of the page processing method; in specific implementation, one or more third instructions in the computer-readable storage medium are loaded and executed by the processor 1601 as follows step:
  • the view file of the target page and the view file of the skeleton screen have a mapping relationship; the view file of the skeleton screen is generated according to the aforementioned page processing method;
  • the target page is rendered and displayed to replace the skeleton screen with the target page.
  • the target page includes page elements, and the page elements include static resource data and dynamic resource data.
  • the view file of the target page is generated based on the static resource data of the page elements in the target page; the dynamic resource data in the target page Refers to the dynamic resource data of each page element in the target page;
  • the application package also includes the configuration file of the application; the configuration file includes the configuration information of the skeleton screen; the configuration information of the skeleton screen includes the display configuration field of the placeholder element in the skeleton screen, and the display configuration field of the placeholder element is used for To indicate that the placeholder elements are displayed or hidden in the skeleton screen; the target page includes key elements, and the key elements have a corresponding relationship with the placeholder elements in the skeleton screen;
  • One or more third instructions in the computer-readable storage medium are loaded by the processor 1601 and executed according to the view file of the target page and the dynamic resource data in the loaded target page to render and display the target page to replace it with the target page
  • the embodiments of the present application also provide a computer program product including instructions, which when run on a computer, cause the computer to execute the method provided in the above-mentioned embodiments.
  • the file based on the skeleton screen that has a mapping relationship with the target page in the application package can first render and display the target page After the content of the target page is loaded, replace the skeleton screen with the target page. This process can effectively reduce the anxiety of users waiting, and enhance the competitiveness of applications and user experience.
  • the above embodiments it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof.
  • software it can be implemented in the form of a computer program product in whole or in part.
  • the computer program product includes one or more computer instructions.
  • the computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices.
  • the computer instructions can be stored in a computer-readable storage medium or transmitted through a computer-readable storage medium.
  • Computer instructions can be sent from one website site, computer, server or data center to another website site via wired (for example, coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (for example, infrared, wireless, microwave, etc.) , Computer, server or data center for transmission.
  • the computer-readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server or a data center integrated with one or more available media.
  • the usable medium may be a magnetic medium (for example, a floppy disk, a hard disk, and a magnetic tape), an optical medium (for example, a DVD), or a semiconductor medium (for example, a solid state disk (SSD)).

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Debugging And Monitoring (AREA)
  • Memory System Of A Hierarchy Structure (AREA)

Abstract

本申请实施例提供一种页面处理方法和相关装置。其中：获取应用程序中被预览的目标页面的页面结构，该页面结构用于标识页面元素在目标页面中的布局；在目标页面的页面结构的基础上得到目标页面对应的骨架屏的页面结构，该页面结构用于标识占位元素在骨架屏中的布局，占位元素是通过对页面元素进行处理得到的；根据骨架屏的页面结构生成骨架屏的视图文件，骨架屏用于在未完成加载目标页面前进行展示。由此能够直接通过获得目标页面的页面结构自动生成相应骨架屏的视图文件，无需为骨架屏单独编写代码，避免代码入侵，且当目标页面无论如何变化，通过预览即可快速生成相应骨架屏的视图文件，骨架屏的实现过程不仅高效，而且灵活。

Description

一种页面处理方法和相关装置
本申请要求于2020年04月27日提交中国专利局、申请号为202010343611.1、申请名称为“一种应用程序的处理方法、装置及设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及计算机技术领域，具体涉及应用程序处理。
背景技术
页面(例如网页或某个应用程序中的服务页面)在进行加载并显示的过程中，需要耗费一定的时间，这段时间内用户需要等待。目前，为了减轻用户等待过程的焦灼感，通常会在页面的加载过程中展示一个Loading(加载)页，如图1所示，Loading页可以是一个空白页面(例如图1左侧图示)，或者在Loading页中展示一个转动的菊花(例如图1右侧图示)，提示用户页面正在加载中。
发明内容
本申请实施例提供了一种页面处理方法和相关装置，能够基于目标页面的页面结构快速生成目标页面对应的骨架屏的视图文件，使得骨架屏的实现过程不仅高效，而且灵活。
一方面，本申请实施例提供一种页面处理方法，该方法包括：
对应用程序中的目标页面进行预览；
获取被预览的目标页面的页面结构，所述目标页面的页面结构用于标识所述目标页面的页面元素在所述目标页面中的布局；
在目标页面的页面结构的基础上得到目标页面对应的骨架屏的页面结构，所述骨架屏的页面结构用于标识所述骨架屏的占位元素在所述骨架屏中的布局，所述占位元素是通过对所述页面元素进行处理得到的；
根据骨架屏的页面结构生成骨架屏的视图文件，所述骨架屏用于在未完成加载所述目标页面前进行展示。
另一方面，本申请实施例提供一种页面处理方法，该方法包括：
显示预览界面，预览界面中包括应用程序中被预览的目标页面；预览界面中还包括触发控件；
当触发控件被选定时，按照上述的应用程序的处理方法生成骨架屏的视图文件；
获取目标页面的视图文件，并建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；
将具备所述映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。
本申请实施例中，通过预览界面中的触发控件即可触发生成被预览的目标页面的对应的骨架屏的视图文件，建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；再 将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。这样就生成了包含目标页面的视图文件和骨架屏的视图文件的应用程序的程序包，开发者对应用程序的程序包进行发布之后，应用程序的启动流程中就引入了骨架屏实现方案，从而优化了应用程序的启动流程和目标页面的加载流程，有利于提升用户对应用程序的使用体验。
另一方面，本申请实施例提供一种页面处理方法，该方法包括：
从应用程序的程序包中读取目标页面的视图文件及骨架屏的视图文件，目标页面的视图文件与骨架屏的视图文件具备映射关系；骨架屏的视图文件按照前述应用程序的处理方法生成；
若确定加载所述目标页面，在未完成加载所述目标页面前，根据骨架屏的视图文件渲染显示骨架屏；
加载目标页面中的动态资源数据；
根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以通过目标页面替换骨架屏。
本申请实施例中，在启动应用程序的过程中，当加载应用程序中的目标页面时，基于应用程序的程序包中与目标页面具备映射关系的骨架屏的文件，能够首先渲染并显示目标页面的骨架屏，待目标页面的内容被加载完成后，再采用目标页面来替换骨架屏。这个过程能够有效降低用户等待的焦灼感，提升应用程序的竞争力和用户使用体验。
另一方面，本申请实施例提供一种页面处理装置，该装置包括：
预览单元，用于对应用程序中的目标页面进行预览；
处理单元，用于获取被预览的目标页面的页面结构，所述目标页面的页面结构用于标识所述目标页面的页面元素在所述目标页面中的布局；在目标页面的页面结构的基础上得到目标页面对应的骨架屏的页面结构，所述骨架屏的页面结构用于标识所述骨架屏的占位元素在所述骨架屏中的布局，所述占位元素是通过对所述页面元素进行处理得到；根据骨架屏的页面结构生成骨架屏的视图文件，所述骨架屏用于在未完成加载所述目标页面前进行展示。
另一方面，本申请实施例提供一种页面处理装置，该装置包括：
显示单元，用于显示预览界面，预览界面中包括应用程序中被预览的目标页面；预览界面中还包括触发控件；
处理单元，用于当触发控件被选定时，按照前述应用程序的处理方法生成骨架屏的视图文件；以及获取目标页面的视图文件，并建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；以及将具备所述映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。
另一方面，本申请实施例提供一种页面处理装置，该装置包括：
读取单元，用于从应用程序的程序包中读取目标页面的视图文件及骨架屏的视图文件，目标页面的视图文件与骨架屏的视图文件具备映射关系；骨架屏的视图文件按照前述应用程序的处理方法生成；
处理单元，用于若确定加载所述目标页面，在未完成加载所述目标页面前，根据骨架屏的视图文件渲染显示骨架屏；以及加载目标页面中的动态资源数据；根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以通过目标页面替换骨架屏。
另一方面，本申请实施例提供一种页面处理设备，该设备包括：
处理器，适于实现一条或多条指令；以及，
计算机可读存储介质，存储有一条或多条指令，一条或多条指令适于由处理器加载并执行上述的应用程序的处理方法。
另一方面，本申请实施例提供计算机可读存储介质，该计算机可读存储介质存储有一条或多条指令，一条或多条指令适于由处理器加载并执行上述的页面处理方法。
又一方面，本申请实施例提供了一种包括指令的计算机程序产品，当其在计算机上运行时，使得所述计算机执行上述的页面处理方法。
本申请实施例中，在对应用程序的目标页面进行预览的过程中，获取被预览的目标页面的页面结构，并在该目标页面的页面结构的基础上直接对页面元素进行处理得到目标页面对应的骨架屏的页面结构；再根据骨架屏的页面结构生成骨架屏的视图文件，该骨架屏用于在未完成加载目标页面前进行展示。这个过程是直接通过获得目标页面的页面结构自动生成相应骨架屏的视图文件，无需为骨架屏单独编写代码，避免代码入侵，且无论目标页面如何变化，通过预览即可快速生成相应骨架屏的视图文件，骨架屏的实现过程不仅高效，而且灵活。
附图说明
为了更清楚地说明本申请实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1示出了相关技术中的Loading页的示意图；
图2示出了本申请一个示例性实施例提供的一种应用程序的启动流程的示意图；
图3示出了本申请一个示例性实施例提供的一种骨架屏的示意图；
图4示出了本申请一个示例性实施例提供的一种页面处理系统的结构示意图；
图5示出了本申请一个示例性实施例提供的一种页面处理方法的流程示意图；
图6示出了本申请一个示例性实施例提供的一种文档对象模型树的示意图；
图7示出了本申请一个示例性实施例提供的一种关键元素替换为占位元素的示意图；
图8示出了本申请一个示例性实施例提供的一种针对不同类型的页面元素进行处理的流程示意图；
图9a示出了本申请一个示例性实施例提供的一种文本元素替换为占位元素的示意图；
图9b示出了本申请一个示例性实施例提供的一种图片元素替换为占位元素的示意图；
图9c示出了本申请一个示例性实施例提供的一种按钮元素替换为占位元素的示意图；
图9d示出了本申请一个示例性实施例提供的一种表单元素替换为占位元素的示意图；
图9e示出了本申请一个示例性实施例提供的一种伪类元素替换为占位元素的示意图；
图9f示出了本申请一个示例性实施例提供的一种原生组件替换为占位元素的示意图；
图10示出了本申请一个示例性实施例提供的另一种页面处理方法的流程图；
图11示出了本申请一个示例性实施例提供的一种预览界面的示意图；
图12示出了本申请一个示例性实施例提供的另一种页面处理方法的流程图；
图13示出了本申请一个示例性实施例提供的一种页面处理装置的结构示意图；
图14示出了本申请一个示例性实施例提供的另一种页面处理装置的结构示意图；
图15示出了本申请一个示例性实施例提供的又一种页面处理装置的结构示意图；
图16示出了本申请一个示例性实施例提供的一种页面处理设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本申请实施例涉及应用程序可以包括各类在终端中运行的程序，例如APP、免安装的应用程序(小程序)等。
为了便于描述，之后的实施例中主要以应用程序为免安装的应用程序，即无需下载安装即可使用的应用程序为例进行说明。这类应用程序又俗称小程序，它通常作为子程序运行于客户端中，此时客户端与该应用程序具备父子关系，该客户端作为该应用程序的父程序，而该应用程序作为该客户端的子程序。客户端(又可称为应用客户端、APP客户端)是指下载并安装在终端中，并在终端中运行的程序。终端中可以包括各类客户端，包括但不限于：IM(Instant Messaging，即时通讯)客户端(例如微信客户端、QQ客户端等)、SNS(Social Networking Services，社交网络服务)客户端(例如微博客户端、具备社交功能的地图客户端等)、内容服务客户端(例如新闻客户端)、图像处理客户端、搜索客户端等等。除特别说明外，本申请后续实施例中所提及的应用程序，均以运行于终端的各类客户端中的应用程序(即小程序)为例进行说明。
应用程序(小程序)是一种双线程模式的底层架构，运行环境分为逻辑层和视图层，逻辑层包括逻辑文件，该逻辑文件可以是指JS文件；逻辑层采用JsCore线程运行JS文件，即逻辑层的任务均在逻辑线程(即JsCore线程)中被执行。视图层包括视图文件，视图文件包括视图代码文件(如wxml文件)和视图样式文件(如wxss文件)，逻辑层根据页面的视图文件使用Webview来对页面进行渲染，一个应用程序存在多个页面，所以视图层存在多个Webview线程，也就是说，视图层的任务均在渲染线程(即Webview线程)中被执行。
图2示出了本申请一个示例性实施例提供的一种应用程序的启动流程的示意图；如图2所示，应用程序的启动流程包括预加载过程和显示过程；其中，预加载过程可分为视图层的预加载和逻辑层的预加载；其中，视图层的预加载过程可包括Webview初始化和公共库注入，逻辑层的预加载可包括JS引擎(即JsCore)初始化和公共库注入。显示过程包括资源准备阶段(如基础UI(User Interface，用户界面)创建、代码包下载)、业务代码注入阶段和首屏渲染阶段。应用程序启动流程中每一个必要步骤都需要经历一定的时间来完成，而 在此时间内用户需要等待。可以采用首次有效绘制(First Meaningful Paint，FMP)来衡量用户等待时间，FMP是指从应用程序被触发启动的时间点开始，至应用程序的首屏页面被显示的时间点为止，这两个时间点之间持续的时长。即FMP用于反映加载并渲染应用程序的首屏页面所需的时间。FMP值越大，表示用户从触发启动应用程序到完整看到应用程序的首屏页面中的完整内容所需要等待的时间越长，该应用程序的启动性能越差；反之，FMP值越小，表示用户从触发启动应用程序到完整看到应用程序的首屏页面中的完整内容所需要等待的时间越短，该应用程序的启动性能越优。
针对具备双线程模式的底层架构的应用程序(小程序)，本申请实施例提出骨架屏方案，该方案具体是：在目标页面的首屏内容进行加载并渲染的过程中，显示该目标页面对应的骨架屏(Skeleton Screen)。骨架屏能够在目标页面的数据还未加载完成前，展示一个描绘了目标页面中的各页面元素的大致结构的骨架页面。用户在等待目标页面进行加载的过程中，可以从骨架屏中感知目标页面的页面结构，目标页面包含什么类型的页面元素，以及各页面元素在目标页面中的位置；从而将用户的关注焦点转移至对页面结构的关注上，降低用户等待的焦灼感，提升应用程序的竞争力和用户使用体验。所谓骨架屏是指在应用程序的目标页面中的数据尚未加载完成之前，用于描绘目标页面中的各页面元素的大致结构的一个页面。骨架屏的基本原理是沿用应用程序中目标页面的页面结构，并采用占位元素将该目标页面中的各个页面元素进行样式覆盖，使各个页面元素展现为灰色块的过程。此处的目标页面可以是指应用程序中的任一页面，在一种实施方式中，目标页面可以是指应用程序中的第一个待展示的服务页面。目标页面中的页面元素可以是指目标页面中的文本、图片、按钮等等。占位元素可以为包括各种颜色、条纹的色块，例如是灰色块，占位元素在骨架屏中的位置和样式与页面元素在目标页面中的位置和样式相对应，目标页面中的页面元素可在骨架屏中找到与之对应的占位元素。本申请实施例中，在应用程序的目标页面被加载完成之前先渲染显示骨架屏，等到目标页面的数据加载完成后，用目标页面的页面元素的数据替换骨架屏中的占位元素，这样相比于显示空白的Loading页面或者在Loading页面中显示转动菊花的方案来说，骨架屏可展示目标页面中的各个页面元素的位置和样式，这样可以优化加载体验。
图3示出了本申请一个示例性实施例提供的一种骨架屏的示意图；目标页面30和其对应的骨架屏31的结构如图3所示。目标页面30是指任一个应用程序中的任一页面，例如可以是应用程序中的主服务页面(即应用程序启动后首个需要被渲染展示的页面)。目标页面30中包含多个页面元素，例如按键元素301、图片元素302和文本元素303。骨架屏31中包含多个占位元素，例如占位元素304-306，占位元素通常表示为灰色块。从图3可以看出，目标页面30和骨架屏31的页面结构大致一致，目标页面30中的页面元素在骨架屏31中被替换为灰色的占位元素，例如按键元素301被替换为占位元素304，图片元素302被替换为占位元素305，文本元素303被替换为占位元素306。但是，页面元素在目标页面30中的位置与对应的占位元素在骨架屏31中的位置保持一致。进一步如图3所示，不同类型的页面元素对应的占位元素的展示效果也不同，例如文件元素303对应的占位元素呈灰色条纹状；而图片元素302对应的占位元素305呈灰色矩形块状；按键元素301对应的占位元素304则呈现与该按键元素 的形状相同的灰色块。
如前述，应用程序包含逻辑层和视图层，目标页面对应的骨架屏的展示是通过在视图层建立渲染任务，并在Webview线程中来执行的。因此，首先需要生成目标页面对应的骨架屏的视图文件，再由视图层根据骨架屏的视图文件来对骨架屏进行渲染显示。传统的web页面的实现，主要有以下几种方式，一种是编写代码的方式，即由开发人员依据目标页面的页面结构来专门编写骨架屏的代码文件，以此来实现骨架屏；这种方式效率低，并且存在业务耦合严重的问题，即一旦目标页面的页面结构发生变化，需要重新进行代码编写，所以这种方式并不适合针对小程序页面的骨架屏实现。另一种是利用web端的插件来定制骨架屏，这种方式只适用于web端这种单线程模式的架构。而本申请实施例中，应用程序的目标页面对应的骨架屏虽然是一个页面，但是它是在小程序的架构基础上实现的一个页面，而小程序属于免安装且运行于客户端的应用程序、具备双线程模式的底层架构，这与web端存在完全不同的底层架构，因此这种方式同样不适用于针对小程序页面的骨架屏的实现。基于此，本申请实施例提出一种页面处理方案，该方案能够生成针对免安装的、具备双线程模式架构的应用程序(即小程序)中的目标页面的骨架屏的实现，能够较为便捷地生成针对小程序中的目标页面的骨架屏的视图文件，从而优化应用程序的启动流程，优化目标页面的加载体验；本申请实现骨架屏的方案具备无代码入侵、使用成本低、配置灵活的优点。
下面将结合附图对本申请实施例提出的页面处理方案进行详细介绍。
图4示出了本申请一个示例性实施例提供的一种页面处理系统的结构示意图。如图4所示，该页面处理系统可包括终端401、终端402以及服务器403。可以理解的是，该系统中包含的终端的数量和服务器的数量仅为举例，本申请并不对终端和服务器的数量进行限定。其中，终端401或终端402均可以是：PC(Personal Computer，个人计算机)、PDA(平板电脑)、手机、可穿戴智能设备等等；服务器403可以是单独的服务器、集群服务器、云服务器等各种类型。其中：
终端401可以是指应用程序的开发者所使用的终端。终端402可以是指应用程序的使用者对应的终端。终端402中可安装并运行至少一个客户端，该客户端支持应用程序的运行，该应用程序可以是免安装的、运行于该客户端的应用程序(即小程序)。例如：终端402中安装有微信客户端，微信客户端中可运行新闻小程序，购物小程序、游戏小程序等等。
在一种实施方式中，应用程序的开发者可以使用终端401来进行应用程序的开发和调试，例如：可以借助于终端401中的开发者工具提供的开发和调试功能来实现应用程序的开发和调试。在对应用程序进行开发和调试的过程中，终端401可提供预览功能，开发者利用该预览功能能够对应用程序中的各页面进行预览，那么，终端401可以基于被预览的目标页面的页面结构，来生成目标页面对应的骨架屏的视图文件；这样就复用了目标页面原本的样式布局自动生成骨架屏的视图文件，便捷地、无代码入侵方式实现了骨架屏。
在一种实施方式中，终端401生成目标页面对应的骨架屏的文件之后，还需建立目标页面与骨架屏之间的映射关系，并将该映射关系注入至开发者针对应用程序所开发的程序包中，这样，开发者对应用程序的程序包进行发布之后，应用程序的启动流程中就引入了骨 架屏实现方案。
在一种实施方式中，使用者可以使用终端402来对已发布的应用程序进行使用，在启动应用程序的过程中，当加载应用程序中的目标页面时，基于应用程序的程序包中与目标页面具备映射关系的骨架屏的视图文件，能够首先渲染并显示目标页面的骨架屏，待目标页面的内容被加载完成后，再采用目标页面来替换骨架屏。这个过程能够有效降低用户等待的焦灼感，提升应用程序的竞争力和用户使用体验。在此实施方式中，服务器403中存储有应用程序的资源数据。应用程序的页面中页面元素包含静态资源数据和动态资源数据，静态资源数据是指在页面加载过程中无需请求获取的数据，例如一些固定的文字、图片等等，这些静态资源数据会形成应用程序中的页面的视图文件，并被封装至应用程序的程序包中存储在终端402中。动态资源数据是指需要实时从服务器403中所获取的数据，例如用户交互数据、变化的文字图片等。终端进行页面加载的过程中，需要从服务器403中请求并拉取页面元素的动态资源数据，整合终端402中的静态资源数据后再进行渲染，从而显示页面。
可以理解的是，上述提及的终端401和终端402可为同一终端，也可为不同的终端，本申请实施例对此不作限定。
图5示出了本申请一个示例性实施例提供的一种页面处理方法的流程示意图；该页面处理方法可由图4所示系统中的终端401执行，该方法包括但不限于步骤S501-S504。其中：
S501，对应用程序的目标页面进行预览。
按照应用程序的底层架构，应用程序的页面实现需要包括逻辑文件和视图文件，逻辑文件是指运行于应用程序的逻辑层的文件，可以是指JS文件。而视图文件是指运行于应用程序的视图层的文件，包括视图代码文件和视图样式因文件，本实施例中，视图代码文件可以是wxml文件，视图样式文件可以是wxss文件。在一种实施方式中，终端401中可提供开发者工具，该开发者工具具备应用程序的开发、编译、预览、调试等功能，开发者可利用该开发者工具开发并调试应用程序。当对应用程序的目标页面进行编译形成该目标页面的逻辑文件和视图文件之后，可以基于该目标页面的逻辑文件，再调用开发者工具的预览功能，来对应用程序的目标页面进行预览。而当需要在应用程序中显示目标页面时，可根据目标页面的视图文件来进行渲染和显示。
S502，获取被预览的目标页面的页面结构，所述目标页面的页面结构用于标识所述目标页面的页面元素在所述目标页面中的布局。
目标页面还包括配置信息，配置信息是用于描述目标页面中各个页面元素的展示效果的配置项；目标页面的配置信息中包括页面元素的显示配置字段，显示配置字段用于指示页面元素在目标页面中被显示或者被隐藏，例如：显示配置字段可是指hidden(隐藏)配置字段，若该hidden配置字段被配置成需要隐藏的css选择器，表示被隐藏；否则表示被显示。在一种实施方式中，目标页面的页面结构是由目标页面的逻辑文件和配置信息共同确定的；换句话说，根据目标页面的逻辑文件和配置信息可得到目标页面的页面结构，目标页面的页面结构标识了目标页面中各个页面元素在目标页面中的布局。例如：目标页面的逻辑文件中定义了某个页面元素的位置和样式，而目标页面的配置信息指示该页面元素被隐藏，那么目标页面在展示时该页面元素在目标页面中的相应位置会呈现空白，即该页面 元素被隐藏而不会在目标页面中进行显示。
S503，在目标页面的页面结构的基础上得到目标页面对应的骨架屏的页面结构。
所述骨架屏的页面结构用于标识所述骨架屏的占位元素在所述骨架屏中的布局，所述占位元素是通过对所述页面元素进行处理得到的。
目标页面的页面元素包括关键元素和非关键元素，其中，关键元素是指目标页面中位于首屏中，且显示配置字段用于指示被显示的页面元素，即关键元素是指首屏可见元素。非关键元素是指目标页面中除关键页面元素之外的其他页面元素，即非关键元素包括首屏隐藏元素和非首屏元素。关键元素的类型包括以下至少一种：文本元素、图片元素、按钮元素、表单元素、伪类元素和原生组件。本申请实施例中，在目标页面的页面结构的基础上，通过对关键元素和非关键元素进行不同的处理以确定出占位元素，并以此得到目标页面对应的骨架屏的页面结构；这样得到骨架屏的页面结构的方案既便捷，又可减少骨架屏的代码的冗余，使得骨架屏文件的生成过程更为高效。
S504，根据骨架屏的页面结构生成骨架屏的视图文件。
骨架屏的视图文件包括骨架屏的视图代码文件和骨架屏的视图样式文件；在一种实施方式中，骨架屏的视图代码文件可为wxml文件，用于描述骨架屏的模板，包括骨架屏中各占位元素在骨架屏中的布局位置。骨架屏的视图样式文件可为wxss文件，用于描述骨架屏中各占位元素的样式。
所述骨架屏用于在未完成加载所述目标页面前进行展示，以降低用户的等待焦虑。
本申请实施例中，在对应用程序的目标页面进行预览的过程中，获取被预览的目标页面的页面结构，并在该目标页面的页面结构的基础上直接对页面元素进行处理得到目标页面对应的骨架屏的页面结构；再根据骨架屏的页面结构生成骨架屏的视图文件。这个过程是直接通过获得目标页面的页面结构自动生成相应骨架屏的视图文件，无需为骨架屏单独编写代码，避免代码入侵，且当目标页面无论如何变化，通过预览即可快速生成相应骨架屏的视图文件，骨架屏的实现过程不仅高效，而且灵活。
下面将对步骤S503所涉及的处理过程进行详细介绍。
在一种实施方式中，在目标页面的页面结构的基础上，对页面元素进行处理得到目标页面对应的骨架屏的页面结构的流程包括：(1)删除页面元素中的非关键元素，这涉及对非关键元素的处理；这个处理过程可以借助于下述手段来实现：
①解析目标页面的逻辑文件，以将目标页面的逻辑文件转换为文档对象模型(Document Object Model，DOM)树，DOM树包括多个节点，每个节点对应目标页面中的一个页面元素。
图6示出了本申请一个示例性实施例提供的一种文档对象模型树的示意图，文档对象模型树是一种表示逻辑文件的树结构。其中，逻辑文件为html代码文件，其对应的DOM树如图6所示，图6中每一个方框601代表一个节点，DOM树包括多个节点，每个节点与逻辑文件中描述的一个页面元素相对应；比如，逻辑文件中的文本元素对应DOM树中的文本节点，又如，逻辑文件中的属性元素对应DOM树中的属性节点。
②根据目标页面的配置信息对DOM树进行裁剪，去除DOM树中与目标页面中的非关键 元素相对应的节点。
DOM树中的每个节点携带各自对应的页面元素的属性，包括位置属性和样式属性；位置属性用于描述页面元素在目标页面中的布局位置(如宽高、距离页面顶端的距离、距离页面左端的距离)，样式属性用于描述页面元素在目标页面中呈现的显示效果(如字体颜色、背景色、前景色等)。依据各节点的属性来对DOM树进行裁剪，以去除非关键元素相对应的节点，而仅保留首屏可见元素对应的节点。这样可以减少骨架屏代码的冗余，其具体的剪裁方式可采用下述程序进行：
Figure PCTCN2021078000-appb-000001
(2)将关键元素替换为占位元素，得到骨架屏的页面结构；这涉及对关键元素的处理。
裁剪后的DOM树中可以仅包含与目标页面中的关键元素相对应的节点；在一种实施方式中，将目标页面中的关键元素替换为占位元素，得到骨架屏的页面结构的方法可包括以下步骤：
①从裁剪后的DOM树中获取各节点的属性，属性包括位置属性和样式属性。
②对所述裁剪后的文档对象模型树中的节点进行属性处理，所述属性处理包括将各节点的位置属性确定为占位元素的位置属性，并将各节点的样式属性替换为占位元素的样式属性。
图7示出了本申请一个示例性实施例提供的一种关键元素替换为占位元素的示意图；目标页面70中的某关键元素是文本元素701，对应于DOM树中的相应节点，其位置属性可包括：文本元素701距离目标页面顶端的距离T，距离目标页面的左侧的距离L、文本元素701的宽度W和高度H。那么在处理过程中，将文本元素701的位置属性直接赋值给对应的占位元素702，即占位元素702在骨架屏71中的位置属性包括：占位元素702距离骨架屏顶端的距离T，距离目标页面的左侧的距离L、占位元素702的宽度W和高度H；从图可以看出，文本元素701及对应的占位元素702具备相同的布局位置。另外，文本元素701对应的占位元素702的样式属性为灰色条纹，那么可以同时将文本元素701的样式属性修改为灰色条纹对应的样式属性。
需要特别说明的是，不同类型的页面元素对应的占位元素的展示效果也不同。小程序的页面在视图层可以理解为是由组件树构成的，该组件树中的组件可以是小程序所在的客户端的官方内置组件，也可以是开发者自定义组件。在使用开发者工具对编译的目标页面 进行预览时，使用的是目标页面的逻辑文件，该逻辑文件是html代码文件，对应DOM树；各页面元素的内容是以html标签的方式被存储的。但在应用程序中显示目标页面时使用的是目标页面的视图文件，各页面元素的内容是以组件标签的方式被存储的，对应组件树，在应用程序中显示目标页面时组件的内部结构均被展开，每个组件是组件树上的一个节点。这就需要针对不同类型的页面元素进行有针对性的分析处理。图8示出了本申请一个示例性实施例提供的一种针对不同类型的页面元素进行处理的流程示意图，如图8所示，分析处理的过程包括但不限于：
(1)文本元素的处理，文本元素包括text组件、view组件、cover-view组件等等，将其替换为对应的占位元素，该占位元素呈灰色条纹(如图9a所示)。下面以一个text组件实例来剖析具体的替换处理过程：
text组件的内部结构如下：
<！--原text节点-->
<text>文本内容</text>
<！--展开后的text节点-->
<wx-text>
<span id＝"raw"style＝"display:none；">文本内容</span>
<span id＝"main">文本内容</span>
</wx-text>
原text节点是指DOM树上的节点。预览的目标页面中的文本元素的文本内容是由两个<text>标签来存储的，此文本元素的文本内容最终将会写到目标页面的视图文件中的组件标签之内，具体是写入至组件树中id为raw和main的span节点中。因此，在对该文本元素进行占位替换时，需要对其进行解析，一种方式是记录下DOM树中的每个text节点，并获取其文本内容，进行DOM树与组件树之间的映射，在生成wxml代码时将该文本内容进行回填。但这种方式需要知道每个组件的实现细节，处理起来费时费力，效率低。另一种方式是不需要关心组件内部结构，在上述展开组件树中的wx-text节点中，可以删除掉内部节点仅保留文本内容。该文本元素的样式设置在wx-text节点上，这种方式不影响布局，且处理效率高；具体如下：
<！--删除内部结构后的text节点-->
<wx-text>文本内容</wx-text>
然后再将上述处理后的text节点的样式属性替换为占位元素的样式属性，得到骨架屏中的text节点如下：
<！--骨架屏中text节点-->
<text class＝"sk-transparent sk-text-14-2857-62 sk-text"style＝"background-size:100％1.4rem；">文本内容</text>
(2)图片元素的处理，如image组件、icon组件、cover-image组件、open-data组件的头像等等，将其替换为对应的占位元素，该占位元素呈灰色矩形或圆形状(如图9b所示)。
小程序页面的视图文件中的image(图片)组件并不是由逻辑文件中的img标签构造的， 而是采用背景图来实现的，因此，在图片元素处理时，需要将图片元素的src属性去除，并添加为该image组件添加占位元素的背景色(灰色)即可实现替换。另外，对于icon组件，可以设置该icon组件的颜色(color)属性为占位元素的颜色(灰色)来实现替换。
(3)按钮元素的处理，如button组件或属性role＝button的元素，将其替换为对应的占位元素，该占位元素呈与按钮形状相同的形状(如图9c所示)。
(4)表单元素的处理，如radio选择器组件、switch选择器组件、checkbox选择器组件等等，将其替换为对应的占位元素，该占位元素呈灰色矩形状(如图9d所示)。一种方式是为表单元素添加灰色的背景色，但可能与表单元素(如radio组件)的原有样式冲突。另一种方式是将表单元素的颜色属性(color属性)设置为按钮元素配置的颜色属性，并将表单元素的禁用属性(disabled)进行移除。下面以radio选择器组件、switch选择器组件、checkbox选择器组件实例来剖析具体的替换处理过程：
<！--原wxml中选择器-->
<radio checked color＝'#eee'></radio>
<checkbox checked color＝'#eee'><text>文本内容</text></checkbox>
<switch checked type＝'checkbox'></switch>
<！--骨架屏wxml中选择器-->
<radio checked＝"true"color＝"#EFEFEF"></radio>
<checkbox checked＝"true"color＝"#EFEFEF"></checkbox>
<switch checked＝"true"type＝"checkbox"color＝"#EFEFEF"></switch>
(5)伪类元素的处理，如::before或者::after等等，将其替换为对应的占位元素，该占位元素呈灰色矩形状(如图9e所示)。
(6)原生组件的处理，如camera、live-player、live-pusher、video、map、canvas等等，将其替换为对应的占位元素，该占位元素呈灰色块(如图9f所示)。需要注意的是，原生组件层级较高，通常采用cover-view组件替换原生组件实现对原生组件的处理；比如，采用cover-view组件替换camera组件，又如，采用cover-view组件替换live-player等等。
③将属性处理后的DOM树转换为骨架屏的逻辑文件。
④为骨架屏设置配置信息，骨架屏的配置信息用于控制骨架屏的显示效果；之后，可以根据所述骨架屏的逻辑文件和所述骨架屏的配置信息共同确定所述骨架屏的页面结构。
图片元素对应的占位元素、文本元素对应的占位元素和按钮元素对应的占位元素在骨架屏中是需要被呈现的重要元素，而其他的部分则是相对应不重要的，或是无需关心内部细节的，因此重要元素与非重要元素的呈现效果也可能不同。可以通过骨架屏的配置信息来优化骨架屏的显示效果，该骨架屏的配置信息可包括多个配置项，如下表1所示：
表1：骨架屏的配置项列表
Figure PCTCN2021078000-appb-000002
Figure PCTCN2021078000-appb-000003
在处理配置项列表的时候，为了尽可能美观，可对配置项列表进行了同化处理，后面的子项都是第一个子项的克隆。比如，应用程序的配置项列表不是通过ul/ol标签来声明的，因此借助data-*属性进行标示。考虑到配置项列表容器内可能插入其它结构，有如下两种声明方式：data-skeleton-list的直接子节点将被处理成第一项的克隆；data-skeleton-li属性相同的元素被认为是同一列表的子项，两种声明方式可采用下述程序进行：
<！--方式一：列表容器内容均为列表项-->
<view wx:for＝"{{array}}"data-skeleton-list>
<view class＝"list-item">子项内容</view>
</view>
<！--方式二：列表容器中插入了其它元素-->
<view wx:for＝"{{array}}">
<view class＝"other-block">其它</view>
<view class＝"list-item"data-skeleton-li＝"goods">子项内容</view>
<view class＝"list-item"data-skeleton-li＝"goods">子项内容</view>
<view class＝"list-item"data-skeleton-li＝"goods">子项内容</view>
</view>
在一种实施方式中，图4-图9f所示实施例中，可以在终端401中存储生成骨架屏的脚本，该骨架屏的脚本可以为Skeleton.js，终端401通过运行该脚本来对目标页面的页面结构进行分析处理，从而生成骨架屏的视图文件。
本申请实施例中，在对应用程序的目标页面进行预览的过程中，获取被预览的目标页面的页面结构，并在该目标页面的页面结构的基础上直接对页面元素进行处理得到目标页面对应的骨架屏的页面结构；再根据骨架屏的页面结构生成骨架屏的视图文件。这个过程是直接通过获得目标页面的页面结构自动生成相应骨架屏的视图文件，无需为骨架屏单独编写代码，避免代码入侵，且当目标页面无论如何变化，通过预览即可快速生成相应骨架屏的视图文件，骨架屏的实现过程不仅高效，而且灵活。
图10示出了本申请一个示例性实施例提供的另一种页面处理方法的流程图；该页面处理方法可图4所示系统中的终端401执行，该方法包括但不限于步骤S1001-S1004。其中：
S1001，显示预览界面；预览界面包括应用程序中被预览的目标页面；预览界面中还包括触发控件。
终端可提供开发者工具，该工具具备预览功能，能够提供预览界面，且该预览界面中包括触发控件，该触发控件可以是一个按钮，或者是选项入口。举例来说，图11示出了本申请一个示例性实施例提供的一种预览界面的示意图；图11中包括被预览的应用程序的目标页面1101和触发控件1102。
S1002，当触发控件被选定时，会生成目标页面对应的骨架的视图文件。
生成骨架屏的具体流程可参见上述图4-图9f所示实施例的相关描述，在此不赘述。
S1003，获取目标页面的视图文件，并建立目标页面的视图文件与骨架屏的视图文件之间的映射关系。
目标页面的视图文件包括目标页面的视图代码文件和视图样式文件；页面元素包括静态资源数据和动态资源数据，目标页面的视图文件是根据目标页面中页面元素的静态资源数据生成的。在一种实施方式中，建立目标页面的视图文件与骨架屏的视图文件之间的映射关系的方法可以包括：将目标页面的视图文件与骨架屏的视图文件存储至同级路径目录下；在目标页面的视图代码文件中引入骨架屏的视图代码文件，并在目标页面的视图样式文件中引入骨架屏的视图样式文件。例如，目标页面的视图文件和骨架屏的视图文件均位于路径目录pages/index/index下，以目标页面的视图代码文件为pages/index/index.wxml，目标页面的视图样式文件为pages/index/index.wxss，骨架屏的视图代码文件为index.skeleton.wxml以及骨架屏的视图样式文件为index.skeleton.wxss为例，采用导入语句(如include)将骨架屏的视图代码文件(index.skeleton.wxml)引入目标页面的视图代码文件(pages/index/index.wxml)，以及采用导入语句(如import)将骨架屏的视图样式文件(index.skeleton.wxss)引入目标页面的视图样式文件(pages/index/index.wxss)，这样实现建立目标页面的视图文件和骨架屏的视图文件之间的映射关系。
S1004，将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包。
应用程序的程序包中还包括应用程序的配置文件(如配置文件project.config.json)；配置文件中包括目标页面的配置信息和骨架屏的配置信息；骨架屏的配置信息(如配置信息skeleton-config)用于控制骨架屏的显示效果。
本申请实施例中，通过预览界面中的触发控件即可触发生成被预览的目标页面的对应的骨架屏的视图文件，建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；再将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。这样就生成了包含目标页面的视图文件和骨架屏的视图文件的应用程序的程序包，开发者对应用程序的程序包进行发布之后，应用程序的启动流程中就引入了骨架屏实现方案，从而优化了应用程序的启动流程和目标页面的加载流程，有利于提升用户对应用程序的使用体验。
图12示出了本申请一个示例性实施例提供的另一种页面处理方法的流程图；该页面处理方法可图4所示系统中的终端402执行，该方法包括但不限于步骤S1201-S1204。其中：
S1201，从应用程序的程序包中读取目标页面的视图文件及骨架屏的视图文件，目标页面的视图文件与骨架屏的视图文件具备映射关系；骨架屏的视图文件是按照图4-图9f所示实施例的方法生成的。
S1202，若确定加载目标页面，在未完成加载目标页面前，根据骨架屏的视图文件渲染显示骨架屏。
S1203，加载目标页面中的动态资源数据。
S1204，根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以采用目标页面替换骨架屏。
应用程序的程序包中包括应用程序的配置文件，配置文件中包括骨架屏的配置信息，骨架屏的配置信息包括骨架屏中的占位元素的显示配置字段，占位元素的显示配置字段用于指示占位元素在骨架屏中被显示或被隐藏。另外，页面元素包括关键元素，关键元素与骨架屏中的占位元素具有对应的关系，所谓对应关系是指每一个关键元素都有与之对应的占位元素，当关键元素被替换时，采用与关键元素对应的占位元素替换该关键元素。
在一种实施方式中，根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以采用目标页面替换骨架屏的方法可以包括：按照目标页面中各关键元素的动态资源数据加载完成的时间顺序，根据加载完成的关键元素的动态资源数据及目标页面的视图文件依次渲染并显示各关键元素，以采用目标页面中的各关键元素依次替换骨架屏中对应的各占位元素。具体地，目标页面中的各个关键元素可分别向服务器发送请求来获取各个关键元素对应的动态资源数据；根据响应请求的响应时间不同，各个关键元素对应的动态资源数据加载时间有时间顺序；根据目标页面的视图文件和各个关键元素对应的动态资源数据依次渲染和显示目标页面中的各个关键元素。换句话说，目标页面中的各个关键元素根据动态资源数据加载完成时间的顺序依次替换骨架屏中的占位元素，这样实现目标页面中关键元素的渐进式加载效果。可以理解的是，渐进式加载效果是可以通过骨架屏的配置信息中setData来控制，例如：声明data-skeleton-show属性的占位元素对应的节点会被对应的页面元素的真实数据替换为hidden(隐藏)属性，这样就能实现渐进式加载效果。当然，如果未配置渐时式加载效果，则可以等待目标页面被完整加载后，采用目标页面替换骨架屏。
本申请实施例中，在启动应用程序的过程中，当加载应用程序中的目标页面时，基于应用程序的程序包中与目标页面具备映射关系的骨架屏的文件，能够首先渲染并显示目标页面的骨架屏，待目标页面的内容被加载完成后，再采用目标页面来替换骨架屏。这个过程能够有效降低用户等待的焦灼感，提升应用程序的竞争力和用户使用体验。
图13是本申请一个示例性实施例提供的一种页面处理装置的结构示意图；该页面处理装置可以是用于运行于终端401中的一个计算机程序(包括程序代码)，例如该页面处理装置可以是运行终端401中的开发者工具；该页面处理装置可以用于执行图5、图10所示的方法实施例中的部分或全部步骤。请参见图13，该页面处理装置包括如下单元：
预览单元1301，用于对应用程序中的目标页面进行预览；
处理单元1302，用于获取被预览的目标页面的页面结构，所述目标页面的页面结构用 于标识所述目标页面的页面元素在所述目标页面中的布局；在目标页面的页面结构的基础上得到目标页面对应的骨架屏的页面结构，所述骨架屏的页面结构用于标识所述骨架屏的占位元素在所述骨架屏中的布局，所述占位元素是通过对所述页面元素进行处理得到的；根据骨架屏的页面结构生成骨架屏的视图文件，所述骨架屏用于在未完成加载所述目标页面前进行展示。
在一种实施方式中，应用程序是免安装的应用程序，应用程序是指运行于客户端内的任一个应用程序；当应用程序运行于客户端内时，客户端与该应用程序具备父子关系，该客户端为该应用程序的父程序，而该应用程序为客户端的子程序；
应用程序包括逻辑层和视图层，逻辑层的任务在逻辑线程中被执行；视图层的任务在渲染线程中被执行；
目标页面是应用程序中的任一页面。
在一种实施方式中，页面元素包括关键元素和非关键元素；处理单元1302具体用于：
删除页面元素中的非关键元素；以及，
将关键元素替换为占位元素，得到骨架屏的页面结构；
关键元素的类型包括以下任意一种或多种的组合：文本元素、图片元素、按钮元素、表单元素、伪类元素和原生组件；占位元素可以为灰色块。
在一种实施方式中，目标页面包括逻辑文件和配置信息，目标页面的页面结构是由目标页面的逻辑文件和配置信息共同确定的；
目标页面的配置信息包括页面元素的显示配置字段，页面元素的显示配置字段用于指示页面元素在目标页面中被显示或被隐藏；
关键元素是指位于目标页面中，且显示配置字段用于指示被显示的页面元素；非关键元素是指目标页面中除关键页面元素之外的其他页面元素。
在一种实施方式中，处理单元1302具体用于：
解析目标页面的逻辑文件，以将目标页面的逻辑文件转换为文档对象模型树，文档对象模型树包括多个节点，每个节点对应目标页面中的一个页面元素；
根据目标页面的配置信息对文档对象模型树进行裁剪，去除文档对象模型树中与目标页面中的非关键元素相对应的节点。
在一种实施方式中，处理单元1302具体用于：
从裁剪后的文档对象模型树中获取节点的位置属性和样式属性；
对所述裁剪后的文档对象模型树中的节点进行属性处理，所述属性处理包括将节点的位置属性确定为占位元素的位置属性，并将节点的样式属性替换为占位元素的样式属性；
将属性处理后的文档对象模型树转换为骨架屏的逻辑文件；
为骨架屏设置配置信息，骨架屏的配置信息用于控制骨架屏的显示效果；
根据所述骨架屏的逻辑文件和所述骨架屏的配置信息共同确定所述骨架屏的页面结构。
在一种实施方式中，视图文件包括视图代码文件和视图样式文件；所述骨架屏的视图代码文件用于描述所述骨架屏的占位元素在所述骨架屏中的布局位置，所述骨架屏的视图样式文件用于描述所述骨架屏的占位元素的样式。根据本申请的一个实施例，图13所示的 页面处理装置中的各个单元可以分别或全部合并为一个或若干个另外的单元来构成，或者其中的某个(些)单元还可以再拆分为功能上更小的多个单元来构成，这可以实现同样的操作，而不影响本申请的实施例的技术效果的实现。上述单元是基于逻辑功能划分的，在实际应用中，一个单元的功能也可以由多个单元来实现，或者多个单元的功能由一个单元实现。在本申请的其它实施例中，该页面处理装置也可以包括其它单元，在实际应用中，这些功能也可以由其它单元协助实现，并且可以由多个单元协作实现。根据本申请的另一个实施例，可以通过在包括中央处理单元(CPU)、随机存取存储介质(RAM)、只读存储介质(ROM)等处理元件和存储元件的例如计算机的通用计算设备上运行能够执行如图5、图10所示的相应方法所涉及的各步骤的计算机程序(包括程序代码)，来构造如图13中所示的页面处理装置，以及来实现本申请实施例的页面处理方法。计算机程序可以记载于例如计算机可读记录介质上，并通过计算机可读记录介质装载于上述计算设备中，并在其中运行。
本申请实施例中，在对应用程序的目标页面进行预览的过程中，获取被预览的目标页面的页面结构，并在该目标页面的页面结构的基础上直接对页面元素进行处理得到目标页面对应的骨架屏的页面结构；再根据骨架屏的页面结构生成骨架屏的视图文件。这个过程是直接通过获得目标页面的页面结构自动生成相应骨架屏的视图文件，无需为骨架屏单独编写代码，避免代码入侵，且当目标页面无论如何变化，通过预览即可快速生成相应骨架屏的视图文件，骨架屏的实现过程不仅高效，而且灵活。
图14是本申请一个示例性实施例提供的另一种页面处理装置的结构示意图；该页面处理装置可以是用于运行于终端401中的一个计算机程序(包括程序代码)，例如该页面处理装置可以是运行终端401中的开发者工具；该页面处理装置可以用于执行图5、图10所示的方法实施例中的部分或全部步骤。请参见图14，该页面处理装置包括如下单元：
显示单元1401，用于显示预览界面，预览界面中包括应用程序中被预览的目标页面；预览界面中还包括触发控件；
处理单元1402，用于当触发控件被选定时，按照前述页面处理方法生成目标页面对应的骨架屏的视图文件；获取目标页面的视图文件，并建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。
在一种实施方式中，视图文件包括视图代码文件和视图样式文件；处理单元902具体用于：
将目标页面的视图文件与骨架屏的视图文件存储至同级路径目录下；
在目标页面的视图代码文件中引入骨架屏的视图代码文件，并在目标页面的视图样式文件中引入骨架屏的视图样式文件；
其中，目标页面包括页面元素，页面元素包括静态资源数据和动态资源数据，目标页面的视图文件是根据目标页面中页面元素的静态资源数据生成的；
应用程序的程序包中还包括应用程序的配置文件；配置文件中包括目标页面的配置信息和骨架屏的配置信息；骨架屏的配置信息用于控制骨架屏的显示效果。
根据本申请的一个实施例，图14所示的页面处理装置中的各个单元可以分别或全部合并为一个或若干个另外的单元来构成，或者其中的某个(些)单元还可以再拆分为功能上更小的多个单元来构成，这可以实现同样的操作，而不影响本申请的实施例的技术效果的实现。上述单元是基于逻辑功能划分的，在实际应用中，一个单元的功能也可以由多个单元来实现，或者多个单元的功能由一个单元实现。在本申请的其它实施例中，该页面处理装置也可以包括其它单元，在实际应用中，这些功能也可以由其它单元协助实现，并且可以由多个单元协作实现。根据本申请的另一个实施例，可以通过在包括中央处理单元(CPU)、随机存取存储介质(RAM)、只读存储介质(ROM)等处理元件和存储元件的例如计算机的通用计算设备上运行能够执行如图5、图10所示的相应方法所涉及的各步骤的计算机程序(包括程序代码)，来构造如图14中所示的页面处理装置，以及来实现本申请实施例的页面处理方法。计算机程序可以记载于例如计算机可读记录介质上，并通过计算机可读记录介质装载于上述计算设备中，并在其中运行。
本申请实施例中，通过预览界面中的触发控件即可触发生成被预览的目标页面的对应的骨架屏的视图文件，建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；再将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。这样就生成了包含目标页面的视图文件和骨架屏的视图文件的应用程序的程序包，开发者对应用程序的程序包进行发布之后，应用程序的启动流程中就引入了骨架屏实现方案，从而优化了应用程序的启动流程和目标页面的加载流程，有利于提升用户对应用程序的使用体验。
图15是本申请一个示例性实施例提供的又一种页面处理装置的结构示意图；该页面处理装置可以是用于运行于终端402中的一个计算机程序(包括程序代码)；例如：该页面处理装置可以是终端402中的客户端(如微信客户端)，应用程序则是运行于该客户端中的一个应用程序，客户端与该应用程序具备父子关系，该客户端为该应用程序的父程序，而该应用程序为该客户端的子程序；该页面处理装置可以用于执行图12所示的方法实施例中的部分或全部步骤。请参见图15，该页面处理装置包括如下单元：
读取单元1501，用于从应用程序的程序包中读取目标页面的视图文件及骨架屏的视图文件，目标页面的视图文件与骨架屏的视图文件具备映射关系；骨架屏的视图文件按照如前述页面处理方法生成；
处理单元1502，用于若确定加载所述目标页面，在未完成加载所述目标页面前，根据骨架屏的视图文件渲染显示骨架屏；以及加载目标页面中的动态资源数据；以及根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以采用目标页面替换骨架屏。
在一种实施方式中，目标页面包括页面元素，页面元素包括静态资源数据和动态资源数据，目标页面的视图文件是根据目标页面中页面元素的静态资源数据生成的；目标页面中的动态资源数据是指目标页面中的各页面元素的动态资源数据；
应用程序的程序包中还包括应用程序的配置文件；配置文件中包括骨架屏的配置信息；骨架屏的配置信息包括骨架屏中的占位元素的显示配置字段，占位元素的显示配置字段用 于指示占位元素在骨架屏中被显示或被隐藏；目标页面中包括关键元素，关键元素与骨架屏中的占位元素具备对应关系；处理单元1502具体用于：
按照目标页面中各关键元素的动态资源数据加载完成的时间顺序，根据加载完成的关键元素的动态资源数据及目标页面的视图文件依次渲染并显示各关键元素，以采用目标页面中的各关键元素依次替换骨架屏中对应的各占位元素。
在该技术方案中，根据各关键元素的动态资源数据加载完成的时间顺序，依次渲染各个关键元素，以实现目标页面中的各个关键元素依次替换骨架屏中对应的各个占位元素。这样可实现目标页面中的页面元素的渐进式加载效果。
根据本申请的一个实施例，图15所示的页面处理装置中的各个单元可以分别或全部合并为一个或若干个另外的单元来构成，或者其中的某个(些)单元还可以再拆分为功能上更小的多个单元来构成，这可以实现同样的操作，而不影响本申请的实施例的技术效果的实现。上述单元是基于逻辑功能划分的，在实际应用中，一个单元的功能也可以由多个单元来实现，或者多个单元的功能由一个单元实现。在本申请的其它实施例中，该页面处理装置也可以包括其它单元，在实际应用中，这些功能也可以由其它单元协助实现，并且可以由多个单元协作实现。根据本申请的另一个实施例，可以通过在包括中央处理单元(CPU)、随机存取存储介质(RAM)、只读存储介质(ROM)等处理元件和存储元件的例如计算机的通用计算设备上运行能够执行如图12所示的相应方法所涉及的各步骤的计算机程序(包括程序代码)，来构造如图15中所示的页面处理装置，以及来实现本申请实施例的页面处理方法。计算机程序可以记载于例如计算机可读记录介质上，并通过计算机可读记录介质装载于上述计算设备中，并在其中运行。
本申请实施例中，在启动应用程序的过程中，当加载应用程序中的目标页面时，基于应用程序的程序包中与目标页面具备映射关系的骨架屏的文件，能够首先渲染并显示目标页面的骨架屏，待目标页面的内容被加载完成后，再采用目标页面来替换骨架屏。这个过程能够有效降低用户等待的焦灼感，提升应用程序的竞争力和用户使用体验。
图16示出了本申请一个示例性实施例提供的一种页面处理设备的结构示意图。请参见图16，该页面处理设备，包括处理器1601、通信接口1602以及计算机可读存储介质1603。其中，处理器1601、通信接口1602以及计算机可读存储介质1603可通过总线或者其它方式连接。其中，通信接口1602用于接收和发送数据。计算机可读存储介质1603可以存储在页面处理设备的存储器中，计算机可读存储介质1603用于存储计算机程序，计算机程序包括程序指令，处理器1601用于执行计算机可读存储介质1603存储的程序指令。处理器1601(或称CPU(Central Processing Unit，中央处理器))是页面处理设备的计算核心以及控制核心，其适于实现一条或多条指令，具体适于加载并执行一条或多条指令从而实现相应方法流程或相应功能。
本申请实施例还提供了一种计算机可读存储介质(Memory)，计算机可读存储介质是页面处理设备中的记忆设备，用于存放程序和数据。可以理解的是，此处的计算机可读存储介质既可以包括页面处理设备中的内置存储介质，当然也可以包括页面处理设备所支持的扩展存储介质。计算机可读存储介质提供存储空间，该存储空间存储了页面处理设备的 处理系统。并且，在该存储空间中还存放了适于被处理器1601加载并执行的一条或多条的指令，这些指令可以是一个或多个的计算机程序(包括程序代码)。需要说明的是，此处的计算机可读存储介质可以是高速RAM存储器，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器；可选的还可以是至少一个位于远离前述处理器的计算机可读存储介质。
在一个实施例中，该页面处理设备可以是图4所示的终端401；该计算机可读存储介质中存储有一条或多条第一指令；由处理器1601加载并执行计算机可读存储介质中存放的一条或多条第一指令，以实现上述页面处理方法实施例中的相应步骤；具体实现中，计算机可读存储介质中的一条或多条第一指令由处理器1601加载并执行如下步骤：
对应用程序中的目标页面进行预览；
获取被预览的目标页面的页面结构，所述目标页面的页面结构用于标识所述目标页面的页面元素在所述目标页面中的布局；
在目标页面的页面结构的基础上得到目标页面对应的骨架屏的页面结构，所述骨架屏的页面结构用于标识所述骨架屏的占位元素在所述骨架屏中的布局，所述占位元素是通过对所述页面元素进行处理得到的；
根据骨架屏的页面结构生成骨架屏的视图文件，所述骨架屏用于在未完成加载所述目标页面前进行展示。
在一种实施方式中，应用程序是免安装的应用程序，应用程序是指运行于客户端内的任一个应用程序；当应用程序运行于客户端内时，客户端与应用程序具备父子关系，客户端为应用程序的父程序，而应用程序为客户端的子程序；
应用程序包括逻辑层和视图层，逻辑层的任务在逻辑线程中被执行；视图层的任务在渲染线程中被执行；
目标页面是应用程序中的任一页面。
在一种实施方式中，页面元素包括关键元素和非关键元素；计算机可读存储介质中的一条或多条第一指令由处理器1601加载并在执行在目标页面的页面结构的基础上，对页面元素进行处理得到目标页面对应的骨架屏的页面结构时，具体执行如下步骤：
删除页面元素中的非关键元素；以及，
将关键元素替换为占位元素，得到骨架屏的页面结构；
关键元素的类型包括以下任意一种或多种的组合：文本元素、图片元素、按钮元素、表单元素、伪类元素和原生组件。
在一种实施方式中，目标页面包括逻辑文件和配置信息，目标页面的页面结构是由目标页面的逻辑文件和配置信息共同确定的；
目标页面的配置信息包括页面元素的显示配置字段，页面元素的显示配置字段用于指示页面元素在目标页面中被显示或被隐藏；
关键元素是指位于目标页面中，且显示配置字段用于指示被显示的页面元素；非关键元素是指目标页面中除关键页面元素之外的其他页面元素。
在一种实施方式中，计算机可读存储介质中的一条或多条第一指令由处理器1601加载 并在执行删除目标页面中的非关键元素时，具体执行如下步骤：
解析目标页面的逻辑文件，以将目标页面的逻辑文件转换为文档对象模型树，文档对象模型树包括多个节点，每个节点对应目标页面中的一个页面元素；
根据目标页面的配置信息对文档对象模型树进行裁剪，去除文档对象模型树中与目标页面中的非关键元素相对应的节点。
在一种实施方式中，裁剪后的文档对象模型树中仅包含与目标页面中的关键元素相对应的节点；
计算机可读存储介质中的一条或多条第一指令由处理器1601加载并在执行将目标页面中的关键元素替换为占位元素，得到骨架屏的页面结构时，具体执行如下步骤：
从裁剪后的文档对象模型树中获取各节点的位置属性和样式属性；
对所述裁剪后的文档对象模型树中的节点进行属性处理，所述属性处理包括将各节点的位置属性确定为占位元素的位置属性，并将各节点的样式属性替换为占位元素的样式属性；
将属性处理后的文档对象模型树转换为骨架屏的逻辑文件；
为骨架屏设置配置信息，骨架屏的配置信息用于控制骨架屏的显示效果；
根据所述骨架屏的逻辑文件和所述骨架屏的配置信息共同确定所述骨架屏的页面结构。
在一种实施方式中，视图文件包括视图代码文件和视图样式文件，所述骨架屏的视图代码文件用于描述所述骨架屏的占位元素在所述骨架屏中的布局位置，所述骨架屏的视图样式文件用于描述所述骨架屏的占位元素的样式；
本申请实施例中，在对应用程序的目标页面进行预览的过程中，获取被预览的目标页面的页面结构，并在该目标页面的页面结构的基础上直接对页面元素进行处理得到目标页面对应的骨架屏的页面结构；再根据骨架屏的页面结构生成骨架屏的视图文件。这个过程是直接通过获得目标页面的页面结构自动生成相应骨架屏的视图文件，无需为骨架屏单独编写代码，避免代码入侵，且当目标页面无论如何变化，通过预览即可快速生成相应骨架屏的视图文件，骨架屏的实现过程不仅高效，而且灵活。
在另一个实施例中，该页面处理设备可以是图4所示的终端401；该计算机可读存储介质中存储有一条或多条第二指令；由处理器1601加载并执行计算机可读存储介质中存放的一条或多条第二指令，以实现上述页面处理方法实施例中的相应步骤；具体实现中，计算机可读存储介质中的一条或多条第二指令由处理器1601加载并执行如下步骤：
显示预览界面，预览界面中包括应用程序中被预览的目标页面；预览界面中还包括触发控件；
当触发控件被选定时，前述页面处理方法生成目标页面对应的骨架屏的视图文件；
获取目标页面的视图文件，并建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；
将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。
在一种实施方式中，视图文件包括视图代码文件和视图样式文件；
计算机可读存储介质中的一条或多条第二指令由处理器1601加载并在执行建立目标页面的视图文件与骨架屏的视图文件之间的映射关系时，具体执行如下步骤：
将目标页面的视图文件与骨架屏的视图文件存储至同级路径目录下；
在目标页面的视图代码文件中引入骨架屏的视图代码文件，并在目标页面的视图样式文件中引入骨架屏的视图样式文件；
其中，目标页面包括页面元素，页面元素包括静态资源数据和动态资源数据，目标页面的视图文件是根据目标页面中页面元素的静态资源数据生成的；
应用程序的程序包中还包括应用程序的配置文件；配置文件中包括目标页面的配置信息和骨架屏的配置信息；骨架屏的配置信息用于控制骨架屏的显示效果。
本申请实施例中，通过预览界面中的触发控件即可触发生成被预览的目标页面的对应的骨架屏的视图文件，建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；再将具备映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。这样就生成了包含目标页面的视图文件和骨架屏的视图文件的应用程序的程序包，开发者对应用程序的程序包进行发布之后，应用程序的启动流程中就引入了骨架屏实现方案，从而优化了应用程序的启动流程和目标页面的加载流程，有利于提升用户对应用程序的使用体验。
在又一个实施例中，该页面处理设备可以是图4所示的终端402；该计算机可读存储介质中存储有一条或多条第三指令；由处理器1601加载并执行计算机可读存储介质中存放的一条或多条第三指令，以实现上述页面处理方法实施例中的相应步骤；具体实现中，计算机可读存储介质中的一条或多条第三指令由处理器1601加载并执行如下步骤：
从应用程序的程序包中读取目标页面的视图文件及骨架屏的视图文件，目标页面的视图文件与骨架屏的视图文件具备映射关系；骨架屏的视图文件按照前述页面处理方法生成；
若确定加载所述目标页面，在未完成加载所述目标页面前，根据骨架屏的视图文件渲染显示骨架屏；
加载目标页面中的动态资源数据；
根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以采用目标页面替换骨架屏。
在一种实施方式中，目标页面包括页面元素，页面元素包括静态资源数据和动态资源数据，目标页面的视图文件是根据目标页面中页面元素的静态资源数据生成的；目标页面中的动态资源数据是指目标页面中的各页面元素的动态资源数据；
应用程序的程序包中还包括应用程序的配置文件；配置文件中包括骨架屏的配置信息；骨架屏的配置信息包括骨架屏中的占位元素的显示配置字段，占位元素的显示配置字段用于指示占位元素在骨架屏中被显示或被隐藏；目标页面中包括关键元素，关键元素与骨架屏中的占位元素具备对应关系；
计算机可读存储介质中的一条或多条第三指令由处理器1601加载并在执行根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以采用目标页面替换骨架屏时，具体执行如下步骤：
本申请实施例还提供了一种包括指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例提供的方法。
按照目标页面中各关键元素的动态资源数据加载完成的时间顺序，根据加载完成的关键元素的动态资源数据及目标页面的视图文件依次渲染并显示各关键元素，以采用目标页面中的各关键元素依次替换骨架屏中对应的各占位元素。
本申请实施例中，在启动应用程序的过程中，当加载应用程序中的目标页面时，基于应用程序的程序包中与目标页面具备映射关系的骨架屏的文件，能够首先渲染并显示目标页面的骨架屏，待目标页面的内容被加载完成后，再采用目标页面来替换骨架屏。这个过程能够有效降低用户等待的焦灼感，提升应用程序的竞争力和用户使用体验。
本领域普通技术人员可以意识到，结合本申请中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用，使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本申请实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程设备。计算机指令可以存储在计算机可读存储介质中，或者通过计算机可读存储介质进行传输。计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如，同轴电缆、光纤、数字用户线(DSL))或无线(例如，红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如，固态硬盘(Solid State Disk，SSD))等。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (17)

  1. 一种页面处理方法，所述方法由终端执行，所述方法包括：
    对应用程序中的目标页面进行预览；
    获取被预览的所述目标页面的页面结构，所述目标页面的页面结构用于标识所述目标页面的页面元素在所述目标页面中的布局；
    在所述目标页面的页面结构的基础上得到所述目标页面对应的骨架屏的页面结构，所述骨架屏的页面结构用于标识所述骨架屏的占位元素在所述骨架屏中的布局，所述占位元素是通过对所述页面元素进行处理得到的；
    根据所述骨架屏的页面结构生成所述骨架屏的视图文件，所述骨架屏用于在未完成加载所述目标页面前进行展示。
  2. 根据权利要求1所述的方法，所述应用程序是免安装的应用程序，所述应用程序是指运行于客户端内的任一个应用程序；当所述应用程序运行于客户端内时，所述客户端与所述应用程序具备父子关系，所述客户端为所述应用程序的父程序，而所述应用程序为所述客户端的子程序；
    所述应用程序包括逻辑层和视图层，所述逻辑层的任务在逻辑线程中被执行；所述视图层的任务在渲染线程中被执行；
    所述目标页面是所述应用程序中的任一页面。
  3. 根据权利要求1所述的方法，所述页面元素包括关键元素和非关键元素；所述在所述目标页面的页面结构的基础上得到所述目标页面对应的骨架屏的页面结构，包括：
    删除所述页面元素中的非关键元素；以及，
    将所述关键元素替换为所述占位元素，得到所述骨架屏的页面结构；
    所述关键元素的类型包括以下任意一种或多种的组合：文本元素、图片元素、按钮元素、表单元素、伪类元素和原生组件。
  4. 根据权利要求3所述的方法，所述目标页面包括逻辑文件和配置信息，所述目标页面的页面结构是由所述目标页面的逻辑文件和配置信息共同确定的；
    所述目标页面的配置信息包括页面元素的显示配置字段，所述页面元素的显示配置字段用于指示页面元素在所述目标页面中被显示或被隐藏；
    所述关键元素包括位于所述目标页面中，且显示配置字段用于指示被显示的页面元素；所述非关键元素包括所述目标页面中除所述关键页面元素之外的其他页面元素。
  5. 根据权利要求4所述的方法，所述删除所述页面元素中的非关键元素，包括：
    解析所述目标页面的逻辑文件，以将所述目标页面的逻辑文件转换为文档对象模型树，所述文档对象模型树包括多个节点，一个节点对应所述目标页面中的一个页面元素；
    根据所述目标页面的配置信息对所述文档对象模型树进行裁剪，去除所述文档对象模型树中与所述非关键元素相对应的节点。
  6. 根据权利要求5所述的方法，所述将所述关键元素替换为所述占位元素，得到所述骨架屏的页面结构，包括：
    从所述裁剪后的文档对象模型树中获取节点的位置属性和样式属性；
    对所述裁剪后的文档对象模型树中的节点进行属性处理，所述属性处理包括将所述节点的位置属性确定为所述占位元素的位置属性，并将所述节点的样式属性替换为所述占位元素的样式属性；
    将属性处理后的文档对象模型树转换为所述骨架屏的逻辑文件；
    为所述骨架屏设置配置信息，所述骨架屏的配置信息用于控制所述骨架屏的显示效果；
    根据所述骨架屏的逻辑文件和所述骨架屏的配置信息共同确定所述骨架屏的页面结构。
  7. 根据权利要求1-6任意一项所述的方法，所述视图文件包括视图代码文件和视图样式文件；所述骨架屏的视图代码文件用于描述所述骨架屏的占位元素在所述骨架屏中的布局位置，所述骨架屏的视图样式文件用于描述所述骨架屏的占位元素的样式。
  8. 一种页面处理方法，所述方法由终端执行，所述方法包括：
    显示预览界面，所述预览界面中包括应用程序中被预览的目标页面；所述预览界面中还包括触发控件；
    当所述触发控件被选定时，按照如权利要求1-7任一项所述的方法生成所述目标页面对应的骨架屏的视图文件；
    获取所述目标页面的视图文件，并建立所述目标页面的视图文件与所述骨架屏的视图文件之间的映射关系；
    将具备所述映射关系的所述目标页面的视图文件和所述骨架屏的视图文件打包至所述应用程序的程序包中。
  9. 根据权利要求8所述的方法，所述视图文件包括视图代码文件和视图样式文件；所述建立所述目标页面的视图文件与所述骨架屏的视图文件之间的映射关系，包括：
    将所述目标页面的视图文件与所述骨架屏的视图文件存储至同级路径目录下；
    在所述目标页面的视图代码文件中引入所述骨架屏的视图代码文件，并在所述目标页面的视图样式文件中引入所述骨架屏的视图样式文件；
    其中，所述目标页面包括页面元素，所述页面元素包括静态资源数据和动态资源数据，所述目标页面的视图文件是根据所述目标页面中页面元素的静态资源数据生成的；
    所述应用程序的程序包中还包括所述应用程序的配置文件；所述配置文件中包括所述目标页面的配置信息和所述骨架屏的配置信息；所述骨架屏的配置信息用于控制所述骨架屏的显示效果。
  10. 一种页面处理方法，所述方法由终端执行，所述方法包括：
    从应用程序的程序包中读取目标页面的视图文件及骨架屏的视图文件，所述目标页面的视图文件与所述骨架屏的视图文件具备映射关系；所述骨架屏的视图文件按照如权利要求1-7任一项所述的方法生成；
    若确定加载所述目标页面，在未完成加载所述目标页面前，根据所述骨架屏的视图文件渲染显示所述骨架屏；
    加载所述目标页面中的动态资源数据；
    根据所述目标页面的视图文件和加载完成的所述目标页面中的动态资源数据，渲染显示所述目标页面，以通过所述目标页面替换所述骨架屏。
  11. 根据权利要求10所述的方法，所述目标页面包括页面元素，所述页面元素包括静态资源数据和动态资源数据，所述目标页面的视图文件是根据所述目标页面中页面元素的静态资源数据生成的；所述目标页面中的动态资源数据是指所述目标页面中的各页面元素的动态资源数据；
    所述应用程序的程序包中还包括所述应用程序的配置文件；所述配置文件中包括所述骨架屏的配置信息；所述骨架屏的配置信息包括所述骨架屏中的占位元素的显示配置字段，所述占位元素的显示配置字段用于指示占位元素在所述骨架屏中被显示或被隐藏；所述目标页面中包括关键元素，所述关键元素与所述骨架屏中的占位元素具备对应关系；
    所述根据所述目标页面的视图文件和加载完成的所述目标页面中的动态资源数据，渲染显示所述目标页面，以通过所述目标页面替换所述骨架屏，包括：
    按照所述目标页面中所述关键元素的动态资源数据加载完成的时间顺序，根据加载完成的所述关键元素的动态资源数据及所述目标页面的视图文件依次渲染并显示所述关键元素，以采用所述目标页面中的所述关键元素依次替换所述骨架屏中对应的所述占位元素。
  12. 一种页面处理装置，包括：
    预览单元，用于对应用程序中的目标页面进行预览；
    处理单元，用于获取被预览的所述目标页面的页面结构，所述目标页面的页面结构用于标识所述目标页面的页面元素在所述目标页面中的布局；在目标页面的页面结构的基础上得到目标页面对应的骨架屏的页面结构，所述骨架屏的页面结构用于标识所述骨架屏的占位元素在所述骨架屏中的布局，所述占位元素是通过对所述页面元素进行处理得到的；根据骨架屏的页面结构生成骨架屏的视图文件，所述骨架屏用于在未完成加载所述目标页面前进行展示。
  13. 一种页面处理装置，包括：
    显示单元，用于显示预览界面，预览界面中包括应用程序中被预览的目标页面；预览界面中还包括触发控件；
    处理单元，用于当触发控件被选定时，按照如权利要求1-7任一项所述的页面处理方法生成骨架屏的视图文件；获取目标页面的视图文件，并建立目标页面的视图文件与骨架屏的视图文件之间的映射关系；以及将具备所述映射关系的目标页面的视图文件和骨架屏的视图文件打包至应用程序的程序包中。
  14. 一种页面处理装置，包括：
    读取单元，用于从应用程序的程序包中读取目标页面的视图文件及骨架屏的视图文件，目标页面的视图文件与骨架屏的视图文件具备映射关系；骨架屏的视图文件按照如权利要求1-7任一项所述的页面处理方法生成；
    处理单元，用于若确定加载所述目标页面，在未完成加载所述目标页面前，根据骨架屏的视图文件渲染显示骨架屏；加载目标页面中的动态资源数据；以及根据目标页面的视图文件和加载完成的目标页面中的动态资源数据，渲染显示目标页面，以通过目标页面替换骨架屏。
  15. 一种页面处理设备，包括：
    处理器，适于实现一条或多条指令；以及，
    计算机可读存储介质，存储有一条或多条第一指令，所述一条或多条第一指令适于由所述处理器加载并执行如权利要求1-7任一项所述的页面处理方法；或者，存储有一条或多条第二指令，所述一条或多条第二指令适于由所述处理器加载并执行如权利要求8或9所述的页面处理方法；或者，存储有一条或多条第三指令，所述一条或多条第三指令适于由所述处理器加载并执行如权利要求10或11所述的页面处理方法。
  16. 一种存储介质，所述存储介质用于存储计算机程序，所述计算机程序用于执行权利要求1-7任意一项所述的页面处理方法，或者用于执行权利要求8或9所述的页面处理方法，或者用于执行权利要求10或11所述的页面处理方法。
  17. 一种包括指令的计算机程序产品，当其在计算机上运行时，使得所述计算机执行权利要求1-7任意一项所述的页面处理方法，或者执行权利要求8或9所述的页面处理方法，或者执行权利要求10或11所述的页面处理方法。
PCT/CN2021/078000 2020-04-27 2021-02-26 一种页面处理方法和相关装置 WO2021218327A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US17/730,009 US20220253588A1 (en) 2020-04-27 2022-04-26 Page processing method and related apparatus

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202010343611.1 2020-04-27
CN202010343611.1A CN111552473B (zh) 2020-04-27 2020-04-27 一种应用程序的处理方法、装置及设备

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US17/730,009 Continuation US20220253588A1 (en) 2020-04-27 2022-04-26 Page processing method and related apparatus

Publications (1)

Publication Number Publication Date
WO2021218327A1 true WO2021218327A1 (zh) 2021-11-04

Family

ID=72003074

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/078000 WO2021218327A1 (zh) 2020-04-27 2021-02-26 一种页面处理方法和相关装置

Country Status (4)

Country Link
US (1) US20220253588A1 (zh)
CN (1) CN111552473B (zh)
TW (1) TWI808393B (zh)
WO (1) WO2021218327A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114035865A (zh) * 2021-11-11 2022-02-11 北京百度网讯科技有限公司 启动小程序的方法、装置、设备以及存储介质
CN114090118A (zh) * 2021-11-11 2022-02-25 北京百度网讯科技有限公司 启动小程序的方法、装置、设备以及存储介质
CN114237755A (zh) * 2021-12-20 2022-03-25 百度在线网络技术（北京）有限公司 应用运行方法、装置、电子设备以及存储介质

Families Citing this family (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111552473B (zh) * 2020-04-27 2024-02-09 腾讯科技（深圳）有限公司 一种应用程序的处理方法、装置及设备
CN112100543B (zh) * 2020-08-31 2023-10-27 东软集团股份有限公司 渲染网页的方法、装置、存储介质及电子设备和服务器
CN113760274B (zh) * 2020-09-04 2023-11-03 北京京东振世信息技术有限公司 一种前端组件逻辑注入方法和装置
CN112286525A (zh) * 2020-09-25 2021-01-29 长沙市到家悠享网络科技有限公司 骨架屏生成方法、装置及设备
CN112052064B (zh) * 2020-09-28 2024-04-09 深圳前海微众银行股份有限公司 小程序页面跳转方法、装置、设备与计算机可读存储介质
CN112199616A (zh) * 2020-10-09 2021-01-08 深圳市欢太科技有限公司 网页性能评估方法、装置、设备及存储介质
CN112307385A (zh) * 2020-10-22 2021-02-02 北京达佳互联信息技术有限公司 网页数据加载和处理方法、装置、电子设备及存储介质
CN112487338A (zh) * 2020-12-11 2021-03-12 杭州安恒信息技术股份有限公司 一种网页页面的fmp的确定方法、装置、设备及介质
CN112506581B (zh) * 2020-12-17 2024-03-22 北京百度网讯科技有限公司 渲染小程序的方法、装置、电子设备和可读存储介质
CN112540806B (zh) * 2020-12-25 2023-06-23 北京百度网讯科技有限公司 一种小程序页面渲染方法、装置、电子设备及存储介质
CN112905922A (zh) * 2021-01-26 2021-06-04 北京达佳互联信息技术有限公司 页面加载方法、装置、电子设备、存储介质及程序产品
CN113076504B (zh) * 2021-06-03 2021-10-01 北京达佳互联信息技术有限公司 骨架屏生成方法、装置、设备、存储介质
CN113691865A (zh) * 2021-08-24 2021-11-23 京东方科技集团股份有限公司 一种多媒体播放方法及系统
CN113849247B (zh) * 2021-09-26 2024-04-30 上海哔哩哔哩科技有限公司 直播间页面元素的显示方法、装置及系统
CN116738087A (zh) * 2022-03-01 2023-09-12 腾讯科技（深圳）有限公司 数据处理方法、装置、程序产品、计算机设备和介质
CN115080027B (zh) * 2022-08-24 2023-01-06 深圳市信润富联数字科技有限公司 web页面自动适配方法、装置、设备及存储介质
CN115756449B (zh) * 2022-12-02 2023-06-06 之江实验室 一种页面复用方法、装置、存储介质及电子设备
CN115809652B (zh) * 2023-01-28 2023-05-23 北京蓝色星际科技股份有限公司 自动合成红头文件的方法及装置
CN116151191B (zh) * 2023-04-18 2023-06-16 武汉精臣智慧标识科技有限公司 一种数据渲染方法、系统、电子设备及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20180121270A1 (en) * 2016-10-27 2018-05-03 Hewlett Packard Enterprise Development Lp Detecting malformed application screens
CN110110263A (zh) * 2019-05-13 2019-08-09 北京三快在线科技有限公司 网页显示方法、装置、终端及存储介质
CN110187878A (zh) * 2019-05-29 2019-08-30 北京三快在线科技有限公司 一种页面生成方法和装置
CN110187913A (zh) * 2019-05-17 2019-08-30 北京百度网讯科技有限公司 小程序的发布、运行方法和装置
CN110377285A (zh) * 2019-07-23 2019-10-25 腾讯科技（深圳）有限公司 一种生成页面骨架屏的方法、装置及计算机设备
CN111552473A (zh) * 2020-04-27 2020-08-18 腾讯科技（深圳）有限公司 一种应用程序的处理方法、装置及设备

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7814423B2 (en) * 2003-02-28 2010-10-12 Bea Systems, Inc. Method for providing a graphical user interface
CN110990014B (zh) * 2019-12-12 2023-10-20 深圳市卡牛科技有限公司 骨架屏页面代码的生成方法、装置、服务器及存储介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20180121270A1 (en) * 2016-10-27 2018-05-03 Hewlett Packard Enterprise Development Lp Detecting malformed application screens
CN110110263A (zh) * 2019-05-13 2019-08-09 北京三快在线科技有限公司 网页显示方法、装置、终端及存储介质
CN110187913A (zh) * 2019-05-17 2019-08-30 北京百度网讯科技有限公司 小程序的发布、运行方法和装置
CN110187878A (zh) * 2019-05-29 2019-08-30 北京三快在线科技有限公司 一种页面生成方法和装置
CN110377285A (zh) * 2019-07-23 2019-10-25 腾讯科技（深圳）有限公司 一种生成页面骨架屏的方法、装置及计算机设备
CN111552473A (zh) * 2020-04-27 2020-08-18 腾讯科技（深圳）有限公司 一种应用程序的处理方法、装置及设备

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114035865A (zh) * 2021-11-11 2022-02-11 北京百度网讯科技有限公司 启动小程序的方法、装置、设备以及存储介质
CN114090118A (zh) * 2021-11-11 2022-02-25 北京百度网讯科技有限公司 启动小程序的方法、装置、设备以及存储介质
CN114090118B (zh) * 2021-11-11 2023-09-15 北京百度网讯科技有限公司 启动小程序的方法、装置、设备以及存储介质
CN114237755A (zh) * 2021-12-20 2022-03-25 百度在线网络技术（北京）有限公司 应用运行方法、装置、电子设备以及存储介质

Also Published As

Publication number Publication date
US20220253588A1 (en) 2022-08-11
CN111552473A (zh) 2020-08-18
TWI808393B (zh) 2023-07-11
CN111552473B (zh) 2024-02-09
TW202141300A (zh) 2021-11-01

Similar Documents

Publication Publication Date Title
WO2021218327A1 (zh) 一种页面处理方法和相关装置
CN111045655B (zh) 一种页面渲染的方法、装置、渲染服务器和存储介质
US20150286739A1 (en) Html5-protocol-based webpage presentation method and device
CN106257418B (zh) 用于通过使用辅助应用来评价应用的技术
CN111596911B (zh) 生成控件的方法、装置、计算机设备和存储介质
CN112306486B (zh) 一种界面生成方法、装置、服务器及存储介质
CN114489647A (zh) 一种小程序的组件化构建方法、装置、设备和介质
CN117093316B (zh) 一种跨平台页面渲染系统、电子设备及存储介质
CN111258434A (zh) 在聊天界面插入图片的方法、装置、设备及存储介质
CN116304442A (zh) 页面代码生成方法、装置、电子设备以及存储介质
CN111857782B (zh) 界面更新方法、装置、计算机设备和存储介质
CN111124386B (zh) 基于Unity的动画事件处理方法、装置、设备和存储介质
CN107402749A (zh) 实现图片加载库的方法及装置
CN116595284B (zh) 网页系统运行方法、装置、设备、存储介质和程序
WO2023125083A1 (zh) 资源文件加载方法、装置、电子设备及存储介质
CN117111941B (zh) 组件库添加方法、装置、设备和存储介质
CN113703893B (zh) 一种页面渲染方法、装置、终端及存储介质
CN111638903B (zh) 不同软件版本的差异信息生成方法及装置
CN118094031A (zh) 子应用页面处理方法、装置、计算机设备和存储介质
CN115730096A (zh) 图元的自定义方法、装置、存储介质及计算机设备
CN116302026A (zh) 应用程序智能刷新方法、装置、计算机设备和存储介质
CN115344252A (zh) 可视化大屏的生成方法、装置及存储介质
CN113918194A (zh) 一种页面组件的显示方法、装置、电子设备及存储介质
CN114237589A (zh) 一种骨架屏生成方法、装置、终端设备及存储介质
CN117111941A (zh) 组件库添加方法、装置、设备和存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21797649

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205 DATED 17/03/2023)

122 Ep: pct application non-entry in european phase

Ref document number: 21797649

Country of ref document: EP

Kind code of ref document: A1