WO2022247594A1 - 一种页面呈现方法、装置、电子设备、计算机可读存储介质、及计算机程序产品 - Google Patents

一种页面呈现方法、装置、电子设备、计算机可读存储介质、及计算机程序产品 Download PDF

Info

Publication number
WO2022247594A1
WO2022247594A1 PCT/CN2022/090979 CN2022090979W WO2022247594A1 WO 2022247594 A1 WO2022247594 A1 WO 2022247594A1 CN 2022090979 W CN2022090979 W CN 2022090979W WO 2022247594 A1 WO2022247594 A1 WO 2022247594A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
code
node
compiled
compilation
Prior art date
Application number
PCT/CN2022/090979
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 腾讯科技(深圳)有限公司
Priority to EP22810323.0A priority Critical patent/EP4280048A1/en
Publication of WO2022247594A1 publication Critical patent/WO2022247594A1/zh
Priority to US18/189,194 priority patent/US20230229406A1/en

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • G06F8/43Checking; Contextual analysis
    • G06F8/433Dependency analysis; Data or control flow analysis
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/37Compiler construction; Parser generation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • G06F8/44Encoding
    • G06F8/447Target code generation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/70Software maintenance or management
    • G06F8/71Version control; Configuration management
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs

Definitions

  • the present application relates to information processing technology in the field of computer application, and relates to a page presentation method, device, electronic equipment, computer-readable storage medium and computer program product.
  • the application development tool is a tool for developing and debugging applications; during the development and debugging process, the application development tool compiles the code file, and realizes the development and debugging of the specified page according to the compiled information, thereby improving the development and debugging efficiency.
  • the application development tool when using the above-mentioned application development tool to perform compilation, the application development tool usually compiles all code files in the project where the specified page is located, resulting in low compilation efficiency of code files during page rendering, resulting in low page rendering efficiency.
  • Embodiments of the present application provide a page presentation method, device, electronic device, computer-readable storage medium, and computer program product, which can improve the efficiency of page presentation.
  • An embodiment of the present application provides a method for presenting a page, including:
  • the partial compilation control is used to set page nodes to be partially compiled for the page to be viewed;
  • code dependencies From the code dependencies, obtain the code nodes to be compiled corresponding to the page nodes to be compiled, wherein the code dependencies are constructed based on the dependencies between code files, and the code dependencies represent code files Corresponding to the hierarchical relationship between nodes;
  • the page to be viewed corresponding to the page node to be compiled is presented.
  • An embodiment of the present application provides a page presentation device, including:
  • a control presentation module configured to present a partial compilation control, wherein the partial compilation control is used to set page nodes to be partially compiled for the page to be viewed;
  • a node acquisition module configured to acquire a page node to be compiled in response to a partial compilation operation acting on the partial compilation control
  • the node determination module is configured to obtain the code node to be compiled corresponding to the page node to be compiled from the code dependency relationship, wherein the code dependency relationship is constructed based on the dependency relationship between code files, and the The code dependency represents the hierarchical relationship between the corresponding nodes of the code file;
  • the code compilation module is configured to compile the code file to be compiled corresponding to the code node to be compiled to obtain the compiled code;
  • the page presentation module is configured to present the page to be viewed corresponding to the page node to be compiled based on the compiled code.
  • An embodiment of the present application provides an electronic device for page presentation, including:
  • the processor is configured to implement the page presentation method provided in the embodiment of the present application when executing the executable instructions stored in the memory.
  • the embodiment of the present application provides a computer-readable storage medium, which stores executable instructions, and is used to cause a processor to execute the page presentation method provided in the embodiment of the present application.
  • An embodiment of the present application provides a computer program product, including a computer program or an instruction, wherein when the computer program or instruction is executed by a processor, the page presentation method provided in the embodiment of the present application is implemented.
  • the code dependency relationship is constructed by pre-analyzing the dependency relationship between code files, so that when the page is rendered, the code files involved in the page to be viewed obtained based on the code dependency relationship are compiled (code file to be compiled), the presentation of the page to be viewed can be realized; thereby, compared with all code files, the number of compiled code files is reduced; therefore, the efficiency of information compilation in the page presentation process can be improved, and then, can be Improve page rendering efficiency.
  • Figure 1a is a schematic diagram of an optional architecture of the page presentation system provided by the embodiment of the present application.
  • Fig. 1b is a schematic diagram of another optional architecture of the page presentation system provided by the embodiment of the present application.
  • FIG. 2 is a schematic diagram of the composition and structure of a page presentation device provided by an embodiment of the present application
  • Fig. 3 is a schematic flowchart of an optional page rendering method provided by the embodiment of the present application.
  • Fig. 4 is an exemplary schematic diagram of presenting a page to be viewed provided by an embodiment of the present application
  • FIG. 5 is another optional schematic flowchart of the page presentation method provided by the embodiment of the present application.
  • Fig. 6a is a schematic diagram of an exemplary code file object structure information provided by the embodiment of the present application.
  • Fig. 6b is a schematic flow diagram of obtaining code nodes to be compiled provided by the embodiment of the present application.
  • Fig. 6c is another optional schematic flowchart of the page presentation method provided by the embodiment of the present application.
  • Fig. 6d is a schematic flow diagram of obtaining a page node to be compiled provided by the embodiment of the present application.
  • Fig. 6e is a schematic flow diagram of presenting the page to be viewed provided by the embodiment of the present application.
  • FIG. 7 is a schematic diagram of an exemplary information compilation process provided by the embodiment of the present application.
  • FIG. 8 is a schematic diagram of another exemplary code file directory structure information provided by the embodiment of the present application.
  • FIG. 9 is a schematic diagram of code dependencies corresponding to FIG. 8 provided by the embodiment of the present application.
  • Fig. 10 is a schematic diagram of an exemplary partial compilation setting provided by the embodiment of the present application.
  • FIG. 11 is a schematic diagram of an exemplary page node for determining partial compilation in FIG. 9 provided by an embodiment of the present application.
  • Fig. 12 is an exemplary schematic diagram of determining the code node to be compiled in Fig. 9 provided by the embodiment of the present application;
  • Fig. 13 is a schematic diagram of an exemplary code file to be compiled provided by the embodiment of the present application.
  • Fig. 14 is an exemplary schematic diagram of presenting partial compilation prompt information provided by the embodiment of the present application.
  • FIG. 15 is a schematic diagram of an example of presenting code package size information provided by an embodiment of the present application.
  • first ⁇ second is only used to distinguish similar objects, and does not represent a specific order for objects. It is understandable that “first ⁇ second” can be used interchangeably when permitted. The specific order or sequence is changed so that the embodiments of the application described herein can be practiced in other sequences than those illustrated or described herein.
  • Code file a kind of information that realizes corresponding functions through compilation, such as files in the format of "json”, “wxml”, “wxs”, “wxss” and “js”; code files are usually composed of code, and when compiling, it is Compile the code in the code file, where the code is the source file written by the programmer in the language supported by the development tool, and is a set of clear rule systems that represent information in discrete form by characters, symbols or signal symbols.
  • the project refers to a functional application, for example, a subroutine application ( For example, a small program application), an application program (APP, Application), a website, and so on.
  • a subroutine application For example, a small program application
  • APP application program
  • a website for example, a website, and so on.
  • Mini Program also known as Mini Program application
  • Mini Program application is an application program that can be used without downloading and installing; usually in order to provide users with more diversified business services, developers can Applications (such as instant messaging applications, shopping applications, mail applications, etc.) develop corresponding applets, which can be embedded as sub-applications in terminal functional applications, by running sub-applications (ie corresponding applets) in the application Can provide users with corresponding business services.
  • Controls are triggerable information displayed in the form of buttons, icons, links, texts, selection boxes, input boxes, and tabs; among them, the triggering method can be contact triggering or non-contact Instruction-based triggering, or command-receiving triggering, etc.; in addition, various controls in the embodiments of the present application may be a single control, or may be a general term for multiple controls.
  • Operation which is a way to trigger the device to perform processing, such as click operation, double-click operation, long-press operation, slide operation, gesture operation, and received trigger instructions; in addition, in the embodiment of the application Various operations may be a single operation, or may be a general term for multiple operations; and various operations in the embodiment of the present application may be touch operations or non-touch operations.
  • Response is used to represent the condition or state on which the executed processing depends.
  • one or more operations to be executed may be real-time or have a set delay; Unless otherwise specified, there is no restriction on the order in which the operations are performed.
  • the application development tool in order to realize the compilation of code files, the application development tool usually compiles all the code files in the project where the specified page is located; , the application development tool will load all the code files in the project (that is, the code files corresponding to all pages) for compilation, and the compilation takes a long time.
  • the application development tool will load all the code files in the project (that is, the code files corresponding to all pages) for compilation, and the compilation takes a long time.
  • compiling takes a long time, and the uploaded code package is large in size, and uploading takes a long time.
  • embodiments of the present application provide a page presentation method, device, electronic equipment, computer-readable storage medium, and computer program product, which can improve the efficiency of information compilation, reduce the resource consumption of information compilation, and reduce the upload volume of code packages. Improve the upload efficiency of code packages, thereby improving the efficiency of page rendering.
  • the exemplary application of the electronic device provided by the embodiment of the present application is described below.
  • the electronic device provided by the embodiment of the present application can be implemented as a notebook computer, a tablet computer, a desktop computer, a set-top box, a mobile device (for example, a mobile phone, a portable music player,
  • Various types of terminals such as personal digital assistants, dedicated messaging devices, portable game devices
  • exemplary applications when electronic devices are implemented as terminals and servers will be explained.
  • FIG. 1a is a schematic diagram of an optional architecture of the page rendering system provided by the embodiment of the present application; as shown in FIG. 1a, in order to support a page rendering application, in the page rendering system 100, the terminal 400 is connected through the network
  • the server 200 (the terminal 400 and the server 200 together constitute the electronic device for page presentation in the embodiment of the present application, hereinafter referred to as the page presentation device), and the network 300 may be a wide area network or a local area network, or a combination of both.
  • the page rendering system 100 also includes a database 500 for sending code dependencies and code files to be compiled to the server 200; wherein, the code dependencies are constructed based on the dependencies between code files, and the code dependencies The relationship represents the hierarchical relationship between the corresponding nodes of the code file.
  • the terminal 400 is used to present a partial compilation control, wherein the partial compilation control is used to set the page node to be partially compiled for the page to be viewed; in response to the partial compilation operation acting on the partial compilation control, obtain the page node to be compiled (such as , "pages/index"), and send the page node to be compiled to the server 200 through the network 300; it is also used to receive the page presentation data sent by the server 200 for the page node to be compiled through the network 300, and present the page to be compiled through the page presentation data The page to be viewed corresponding to the page node.
  • the partial compilation control is used to set the page node to be partially compiled for the page to be viewed; in response to the partial compilation operation acting on the partial compilation control, obtain the page node to be compiled (such as , "pages/index"), and send the page node to be compiled to the server 200 through the network 300; it is also used to receive the page presentation data sent by the server 200 for the page node to be
  • the server 200 is used to receive the page node to be compiled from the receiving terminal 400 through the network 300, and obtain the code node to be compiled corresponding to the page node to be compiled from the code dependency; partially compile the code file to be compiled corresponding to the code node to be compiled, and obtain Compile the code; based on the compiled code, send the page presentation data to the terminal 400 through the network 300 .
  • the server 200 can be an independent physical server, or a server cluster or a distributed system composed of multiple physical servers, and can also provide cloud services, cloud databases, cloud computing, cloud functions, cloud storage, Cloud servers for basic cloud computing services such as network services, cloud communications, middleware services, domain name services, security services, content delivery network (Content Delivery Network, CDN), and big data and artificial intelligence platforms.
  • the terminal 400 may be a smart phone, a tablet computer, a notebook computer, a desktop computer, a smart speaker, a smart watch, etc., but is not limited thereto.
  • the terminal and the server may be connected directly or indirectly through wired or wireless communication, which is not limited in this embodiment of the present application.
  • FIG. 1b is a schematic diagram of another optional architecture of the page rendering system provided by the embodiment of the present application; as shown in FIG. 1b, based on FIG. It is used to package the compiled code; thus, in the page rendering system 100, it also includes a server 600 (service device) and a terminal 700, wherein the server 600 obtains the code package sent by the server 200 through the network 300, and sends the code package to the terminal through the network 300 700 sends page presentation data for presenting the page to be viewed, so that terminal 700 presents the page to be viewed.
  • a server 600 service device
  • terminal 700 sends page presentation data for presenting the page to be viewed, so that terminal 700 presents the page to be viewed.
  • FIG. 2 is a schematic diagram of the composition and structure of a page rendering device provided by an embodiment of the present application; the page rendering device 2-1 shown in FIG. 2 includes: at least one processor 410, a memory 450, and at least one network interface 420 and user interface 430 .
  • Various components in the page presentation device 2 - 1 are coupled together through the bus system 440 .
  • the bus system 440 is used to realize connection and communication among these components.
  • the bus system 440 also includes a power bus, a control bus and a status signal bus.
  • the various buses are labeled as bus system 440 in FIG. 2 .
  • Processor 410 can be a kind of integrated circuit chip, has signal processing capability, such as general processor, digital signal processor (DSP, Digital Signal Processor), or other programmable logic device, discrete gate or transistor logic device, discrete hardware Components, etc., wherein the general-purpose processor can be a microprocessor or any conventional processor, etc.
  • DSP digital signal processor
  • DSP Digital Signal Processor
  • User interface 430 includes one or more output devices 431 that enable presentation of media content, including one or more speakers and/or one or more visual displays.
  • the user interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.
  • Memory 450 may be removable, non-removable or a combination thereof.
  • Exemplary hardware devices include solid state memory, hard drives, optical drives, and the like.
  • Memory 450 optionally includes one or more storage devices located physically remote from processor 410 .
  • Memory 450 includes volatile memory or nonvolatile memory, and may include both volatile and nonvolatile memory.
  • the non-volatile memory can be a read-only memory (ROM, Read Only Memory), and the volatile memory can be a random access memory (RAM, Random Access Memory).
  • ROM read-only memory
  • RAM random access memory
  • the memory 450 described in the embodiment of the present application is intended to include any suitable type of memory.
  • memory 450 is capable of storing data to support various operations, examples of which include programs, modules, and data structures, or subsets or supersets thereof, as exemplified below.
  • Operating system 451 including system programs for processing various basic system services and performing hardware-related tasks, such as framework layer, core library layer, driver layer, etc., for implementing various basic services and processing hardware-based tasks;
  • Exemplary network interfaces 420 include: Bluetooth, Wireless Compatibility Authentication (Wi-Fi), and Universal Serial Bus (USB, Universal Serial Bus), etc.;
  • Presentation module 453 for enabling presentation of information via one or more output devices 431 (e.g., display screen, speakers, etc.) associated with user interface 430 (e.g., a user interface for operating peripherals, displaying content and information );
  • output devices 431 e.g., display screen, speakers, etc.
  • user interface 430 e.g., a user interface for operating peripherals, displaying content and information
  • the input processing module 454 is configured to detect one or more user inputs or interactions from one or more of the input devices 432 and translate the detected inputs or interactions.
  • the page rendering device provided by the embodiment of the present application can be realized by software.
  • FIG. 2 shows a page rendering device 455 stored in the memory 450, which can be software in the form of programs and plug-ins, including the following Software modules: control presentation module 4551, node acquisition module 4552, node determination module 4553, code compilation module 4554, page presentation module 4555, relationship construction module 4556 and information prompt module 4557, these modules are logical, so according to the implemented Functions can be combined arbitrarily or further split. The function of each module will be explained below.
  • the program corresponding to the page can be a local (Native) application program (APP, Application), that is, a program that needs to be installed in the operating system to run, such as a video APP, live APP; it can also be a small program , that is, programs that only need to be downloaded into the browser environment to run, such as video applets and live broadcast applets; they can also be video applets or live broadcast applets that can be embedded in any APP. All in all, the program corresponding to the page can be any form of application, module or plug-in.
  • APP Native application program
  • FIG. 3 is a schematic flowchart of an optional page presentation method provided by an embodiment of the present application; it will be described in conjunction with the steps shown in FIG. 3 .
  • the page nodes to be partially compiled are obtained by presenting the partial compilation control; that is, the partial compilation control is used for
  • the page to be viewed sets the page node to be partially compiled; here, a page node is determined for each page, so that the page corresponds to the page node.
  • the partial compilation control can be presented on a page or a pop-up box for setting compilation information, and can also be presented on a page for compiling code files, etc.
  • the form is not limited.
  • the partial compilation control can also have corresponding prompt information, for example, "During local development and preview, only compile the following pages:", or "Please enter the pages that need partial compilation", etc.
  • the partial compilation control may be an input box, a selection box, a selectable page list, etc., and the embodiment of the present application does not limit the form of the partial compilation control.
  • the page rendering device when the user specifies the page to be partially edited through the partial compilation control, the page rendering device also obtains the partial compilation operation acting on the partial compilation control; at this time, the page rendering device responds to the local The compiling operation also can obtain the page node corresponding to the input page to be partially compiled, and the page node corresponding to the page to be partially compiled is the page node to be compiled.
  • the partial compilation operation is an operation that triggers the partial compilation control to determine the page node to be partially compiled, for example, an operation of inputting or selecting a page node through the partial compilation control; thus, the page rendering device responds to the partial compilation
  • the compilation operation can obtain page nodes to be partially compiled, that is, page nodes to be compiled.
  • the page nodes to be compiled include at least one page node, for example, at least one of the page node "pages/index", the page node "pages/logs" and the page node "pages/details".
  • the page rendering device can obtain the code dependency relationship, which is constructed based on the dependency relationship between code files, and the code dependency relationship represents the hierarchical relationship between the corresponding nodes of the code file; thus , after the page rendering device obtains the page node to be compiled, it can determine the node of the code file associated with the page node to be compiled in the code dependency relationship, and the node of the code file associated with the page node to be compiled is the code node to be compiled .
  • a node is determined for each code file, and the code node is obtained, so that the code file corresponds to the code node.
  • code dependencies may include page nodes and code nodes, page nodes are associated with code nodes, and there is a dependency relationship between code nodes; code dependencies may also include application-level The node corresponding to the code file; thus, the code node to be compiled may include the code node associated with the page node to be compiled, the code node on which the code node associated with the page node to be compiled depends, and the application under the functional application to be developed At least one of the nodes corresponding to the level code file, which is not limited in this embodiment of the present application.
  • the code node to be compiled when the page node to be compiled is the page node "pages/index", the code node to be compiled includes nodes “app.js”, “app.json” and “app.wxss” corresponding to application-level code files, The code nodes “index.js”, “index.json”, “index.wxml” and “index.wxss” associated with the page node to be compiled.
  • the page rendering device can obtain at least one code file corresponding to the code node to be compiled, and the code node to be compiled corresponds to At least one code file of is the code file to be compiled.
  • the page rendering device compiles the code file to be compiled, and the obtained compilation result is the compiled code, that is, the compiled code is the compiled code file to be compiled;
  • the module compiles the code file to be compiled.
  • the page presentation device presents the page by executing the instruction corresponding to the compiled code
  • the page presented by executing the instruction corresponding to the compiled code is the page to be viewed corresponding to the page node to be compiled.
  • the page to be viewed may be a page under development in the development stage, a page in the preview stage, or a page in the real machine debugging stage, etc., which is not limited in this embodiment of the present application.
  • FIG. 4 is an exemplary schematic diagram of presenting the page to be viewed provided by the embodiment of the present application; Information 4-12; the partial compilation control 4-21 and the prompt information 4-22 are presented on the page 4-2; the partial compilation control 4-31 and the prompt information 4-32 are presented on the page 4-3.
  • the relevant code file (the code file to be compiled) is determined and compiled, compared with Based on the number of all code files, it can reduce the number of code files in the compilation process, improve the compilation speed, and reduce the compilation time; thus, it can improve the smoothness of the compilation in the page rendering process, and thus improve the page rendering efficiency and function application. Development efficiency.
  • FIG. 5 is another optional schematic flowchart of the page presentation method provided by the embodiment of the present application; as shown in FIG. 5, in the embodiment of the present application, S303 also includes S306 to S310; that is, Before the page rendering device acquires the code node to be compiled corresponding to the page node to be compiled from the code dependencies, the page rendering method further includes S306 to S310, and each step will be described below.
  • the application code files are all code files of the functional application to be developed, including the code files corresponding to the application-level configuration information of the functional application to be developed; where the application-level configuration information of the functional application to be developed corresponds to
  • the code file is the application configuration file, for example, the "app.json" code file.
  • the page rendering device can also obtain the application configuration file based on the code file target structure information; wherein, the code file target structure information refers to the target structure corresponding to the code file of the application to be developed; in the code file target structure information includes the configuration file identifier of the application to be developed, and the corresponding code file is obtained based on the configuration file identifier.
  • the code file corresponding to the obtained configuration file identifier is the application configuration file.
  • FIG. 6a is a schematic diagram of an exemplary code file target structure information provided by the embodiment of the present application
  • the code file directory structure information 6-1 is a page containing two pages (Homepage "index” page and log “logs” page)
  • the directory structure of the code files of the subprogram application, the first-level directory includes the names of the code files corresponding to the non-pages of the subprogram application: "app.js”, “app .json”, “app.wxss”, “project.config.json”, “sitemap.json”, ..., where the code file corresponding to "app.json” (configuration file identifier) is the application configuration file.
  • the application configuration file includes relevant information of the configuration file corresponding to the page of the functional application to be developed; here, the page rendering device reads the relevant information of the configuration file corresponding to the page of the functional application to be developed in the application configuration file , based on the read related information of the configuration file corresponding to the page of the application to be developed, the corresponding code file is obtained, and the page configuration file is also obtained.
  • the name of the application configuration file includes the file name and code type, for example, in “app.json", "app” is the file name, and ".json” is the code type.
  • the page rendering device reads the application code file based on the file name of the application configuration file, determines the code file with the same name as the file name of the application configuration file from the application code file, and uses the determined file name of the application configuration file The code file with the same name is determined as the first code file with the same name; for example, the code files corresponding to “app.js” and “app.wxss” with the same name as “app” in “app.json”.
  • the page rendering device can also obtain the first code file with the same name through the target structure information of the code file; here, the page rendering device obtains the target level of the configuration file identifier from the target structure information of the code file, and obtains the target
  • the code file corresponding to the identification other than the identification of the page-associated code file under the level, the code file corresponding to the identification other than the identification of the page-associated code file under the target level is determined as the first code file with the same name.
  • the application code file corresponds to the object structure information of the code file.
  • the identifiers other than the identifier of the page-associated code file are: “app.js”, “app.json”, “app.wxss”, “project .config.json” and “sitemap.json”.
  • the name of the page configuration file includes the file name and code type; here, the page rendering device reads the application code file based on the file name of the page configuration file, and determines the file name of the page configuration file from the application code file
  • the code file with the same name, and the determined code file with the same name as the file name of the page configuration file is determined as the second code file with the same name; for example, "index.js" with the same name as "index” in "index.json",
  • the page rendering device reads the second code file with the same name, and if the code reference information is obtained, then based on the name of the code file referenced in the code reference information, the referenced code file is determined, and the referenced code file
  • the file is the dependent code file; for example, the code file referenced by the "logs.js" code file (the second code file with the same name) is the code file "util.js" under the path "util”.
  • the page node may be the file name in the name of the page configuration file, or the name of the page configuration file, or a combination of the file name and path in the name of the page configuration file, etc., This embodiment of the present application does not limit this; wherein, the path of the page configuration file may be determined based on the directory structure information of the code file. For example, when the page configuration file is the code file corresponding to "index.json", the corresponding page node can be "pages/index"; for another example, when the page configuration file is the code file corresponding to "logs.json", the corresponding The page node can be "pages/logs”.
  • the node corresponding to the second code file with the same name may be the name of the second code file with the same name
  • the node corresponding to the dependent code file may be a combination of the name and path of the dependent code file, wherein the path of the dependent code file may be based on the code file
  • the directory structure information is determined.
  • both the node corresponding to the second code file with the same name and the node corresponding to the dependent code file are descendant nodes of the page node, wherein the node corresponding to the dependent code file is a descendant node of the node corresponding to the second code file with the same name.
  • S309 Determine the application node based on the name of the application configuration file, and determine the node and the page node corresponding to the first code file with the same name as descendant nodes of the application node to obtain code dependencies.
  • the application node may be the file name in the name of the application configuration file, or the name of the application configuration file, or a combination of the file name and the path in the name of the application configuration file, etc.
  • the path of the application configuration file may be determined based on the directory structure information of the code file. For example, when the application configuration file is a code file corresponding to "app.json", the corresponding application node may be "app".
  • the node corresponding to the first code file with the same name may be the name of the first code file with the same name.
  • the obtained relationship between the page node, the descendant nodes of the page node, the application node and the descendant nodes of the application node is the code dependency relation.
  • the code dependency is the hierarchical relationship between the application node, the node corresponding to the first code file with the same name, the page node, the node corresponding to the second code file with the same name, and the node corresponding to the dependent code file; that is, the The hierarchical relationship is: the node corresponding to the first code file with the same name and the page node are descendant nodes of the application node, the node corresponding to the second code file with the same name is the descendant node of the page node, and the node corresponding to the dependent code file is the second code file with the same name The descendant node of the corresponding node.
  • Fig. 6b is a schematic flow diagram of obtaining code nodes to be compiled provided by the embodiment of the present application; as shown in Fig. 6b, in the embodiment of the present application, S303 can be realized through S3031 to S3034; that is to say, the page rendering device From the code dependencies, the code node to be compiled corresponding to the page node to be compiled is obtained, including S3031 to S3034, and each step is described below.
  • the page rendering device when the page rendering device determines the code node to be compiled from the code dependency relationship based on the page node to be compiled, it first locates the page node corresponding to the page node to be compiled in the code dependency relationship.
  • the page node corresponding to the page node to be compiled is the target page node.
  • descendant nodes of the target page node include nodes of the second code file with the same name corresponding to the target page node, and may also include nodes corresponding to the dependent code files of the second code file with the same name corresponding to the target page node.
  • the page rendering device obtains the descendant nodes of the target page node from the code dependency; on the other hand, the page rendering device also obtains the non-page node referenced by the application node from the code dependency, the The non-page node referenced by the application node is the node corresponding to the first code file with the same name.
  • the code node to be compiled includes the descendant node of the target page node and the node corresponding to the first code file with the same name; wherein, the descendant node of the target page node includes the node corresponding to the second code file with the same name, or the descendant of the target page node
  • the nodes include nodes corresponding to the second code file with the same name and nodes corresponding to the dependent code file.
  • FIG. 6c is another optional flow diagram of the page presentation method provided by the embodiment of the present application; as shown in FIG. 6c, in the embodiment of the present application, S301 can be realized through S3011 and S3012; that is, The page presentation device presents the partial compilation control, including S3011 and S3012, and the steps are described below.
  • the page rendering device when the page rendering device runs the application development tool, it may first present a control for setting the compilation mode of the code file, and the control for setting the compilation mode of the code file is a partial compilation switch control.
  • the local compilation switch control may be a selection box for global compilation and local compilation, or a check box for local compilation, etc.
  • the embodiment of the present application does not limit the form of the partial compilation switch control.
  • the compilation mode includes a local compilation mode and a global compilation mode.
  • the page rendering device when the user activates the partial compilation mode by triggering the partial compilation switch control, the page rendering device also receives the partial compilation start operation acting on the partial compilation switch control; at this time, the page rendering device responds to the The partial compilation start operation presents the partial compilation control used to obtain the page node to be compiled, so as to enter the partial compilation mode.
  • partial compilation control may be presented directly, or may be presented based on the local compilation enabling operation of the partial compilation switch control, etc., which is not limited in this embodiment of the present application.
  • S3013 and S3014 are also included after S3012; that is to say, after the page rendering device responds to the local compilation enable operation acting on the partial compilation switch control, after presenting the partial compilation control, the page
  • the presenting method also includes S3013 and S3014, each step will be described respectively below.
  • the page rendering device when the user closes the local compilation mode or turns on the global compilation mode by triggering the local compilation switch control, the page rendering device also receives the local compilation close operation acting on the local compilation switch control; at this time, the page In response to the local compilation closing operation, the rendering device hides the local compilation control and enters the global compilation mode to compile the application code file.
  • the page rendering method further includes: when the page rendering device fails to obtain the page node based on the rendering of the local compilation control, compile the application code file, and compile the application code file based on the compiled The application code file to render the page to be viewed.
  • the page rendering device did not obtain the page node to be compiled based on the rendered local compilation control, indicating that the acquisition of the page node failed, and global compilation was performed without local compilation; at this time, the page rendering device compiled the application code file and based on The compiled application code file presents the page to be viewed.
  • the page rendering device when presenting the local compilation switch control, can determine whether the compilation mode is the local compilation mode or the global compilation mode based on the local compilation switch control; Whether the local compilation control obtains the page node to be compiled is used to determine whether the compilation mode is local compilation mode or global compilation mode, that is, if the page node to be compiled is obtained, it will enter the local compilation mode, and if the page node to be compiled is not obtained, it will enter the global compilation model.
  • Fig. 6d is a schematic flow diagram of obtaining page nodes to be compiled provided by the embodiment of the present application; as shown in Fig. 6d, in the embodiment of the present application, S302 can be realized through S3021 to S3024; that is to say, the page rendering device In response to the partial compilation operation acting on the partial compilation control, the page node to be compiled is obtained, including S3021 and S3024, and each step is described below.
  • the local compiling control includes the main node input control to be compiled, and the page rendering device obtains the page node corresponding to the page to be presented through the input control of the main node to be compiled, which is called the main page node to be compiled here.
  • the partial compilation control also includes a node addition control
  • the page rendering device presents a control for obtaining the page node corresponding to the page associated with the main page node to be compiled through the node addition control, which is used to obtain the page node to be compiled
  • the control of the page node corresponding to the page associated with the main page node is the input control of the associated node to be compiled.
  • the page associated with the main page node to be compiled for example, is, the redirected page, the returned page, and so on.
  • the page rendering device when the user inputs the page node corresponding to the page associated with the main page node to be compiled by triggering the input control of the associated node to be compiled, the page rendering device also receives the input control acting on the associated node to be compiled.
  • the input operation of the associated node to be compiled refers to the operation of inputting the page node corresponding to the page associated with the main page node to be compiled through the input control of the associated node to be compiled; thus at this time, the page rendering device responds to the Compiling the associated node input operation can obtain the page node corresponding to the page associated with the input main page node to be compiled, and the page node corresponding to the page associated with the main page node to be compiled is the associated page node to be compiled.
  • the partial compilation control includes the input control of the master node to be compiled and the node addition control
  • the partial compilation operation includes the input operation of the master node to be compiled and the node addition operation.
  • page nodes to be compiled include main page nodes to be compiled and associated page nodes to be compiled.
  • the page rendering method further includes: the page rendering device performs compilation based on the page node to be compiled , a partial compilation prompt is displayed.
  • the partial compilation prompt information includes at least one of partial compilation title prompt information and local compilation status prompt information; wherein, the partial compilation title prompt information refers to the prompt information of the partial compilation mode displayed in the form of a title, and the partial compilation mode prompt information
  • the compilation status prompt information refers to the prompt information for the partial compilation mode presented in the presented compilation process.
  • Fig. 6e is a schematic flow diagram of presenting the page to be viewed provided by the embodiment of the present application; as shown in Fig. 6e, in the embodiment of the present application, S305 can pass through S3051 to S3054; that is to say, the page rendering device is based on compiling
  • the code, presenting the page to be viewed corresponding to the page node to be compiled includes S3051 to S3054, and each step is described below.
  • the packaging control is used to trigger the packaging process of the compiled code; for example, the preview control is obtained from the real machine debugging control, wherein the preview control is a control used to trigger preview processing, and the real machine debugging control is used to trigger Controls for real-device debugging.
  • the page rendering device when the user triggers the preview control to preview, or the user triggers the real-device debugging control to perform real-device debugging, the page rendering device also obtains the packaging operation that acts on the packaging control; here, the packaging operation is Refers to the operation of packaging the compiled code by triggering the packaging control for preview or real-device debugging; at this time, the page rendering device performs packaging processing on the compiled code in response to the packaging operation, where the packaged compiled code is the code package .
  • the page rendering device after the page rendering device completes the packaging of the compiled code and obtains the code package, it will present the data length of the code package, which is used to indicate the size information of the code package, for example, "partial compilation is in effect, the code package is 594KB", The number of code files to be compiled will also be displayed; and the page rendering device will also send the code package to the service device, so that the service device will send data to the real device, and realize the preview or preview of the page to be viewed on the real device.
  • Real-device debugging thus, the service device is used for performing at least one of preview and real-device debugging based on the code package.
  • the service device is used to perform target processing based on the code package to obtain page rendering data;
  • the target processing includes at least one of preview and real-device debugging
  • the page rendering device may be a real-device device.
  • the packaged control is a preview control
  • the target processing is a preview
  • the target processing is a real device debugging control
  • the page presentation data is used to present the page to be viewed.
  • the page rendering device presenting the page to be viewed corresponding to the page node to be compiled based on the compiled code includes: the page rendering device parses the compiled code to obtain page rendering data; and presents the page corresponding to the page node to be compiled through the page rendering data. page to be viewed. That is to say, the page presentation device executes the instruction corresponding to the compiled code by itself, so as to present the page to be viewed.
  • the page to be viewed is a subroutine page. Therefore, the application development tool is a development tool for a subroutine application, the application code files are all code files corresponding to the subroutine application, and the functional application to be developed is a subroutine application.
  • the subroutine corresponding to the subroutine page depends on the browser environment of the parent program to run. In this way, it can be run directly after downloading without performing an installation operation.
  • This exemplary application describes the processing of previewing or real-device debugging of a specified page by means of partial compilation in the process of developing an applet application .
  • FIG. 7 is a schematic diagram of an exemplary information compilation process implementation provided by the embodiment of the present application; as shown in FIG. 7, the exemplary information compilation implementation process includes S701 to S708, and the following steps are respectively Be explained.
  • the code file of the project refers to all the code files of the project, including the project configuration file "app.json" (called the application configuration file); first, obtain all the page configuration files from the project configuration file "app.json” ; Then, obtain the code file with the same name corresponding to the page configuration file (called the second code file with the same name); finally, read the code file with the same name to obtain the reference code file (called the dependent code file), and the code file with the same name corresponding to the page configuration file File and reference code file, that is, the code file corresponding to the page.
  • the code file of the project refers to all the code files of the project, including the project configuration file "app.json" (called the application configuration file); first, obtain all the page configuration files from the project configuration file "app.json” ; Then, obtain the code file with the same name corresponding to the page configuration file (called the second code file with the same name); finally, read the code file with the same name to obtain the reference code file (called the dependent code file), and the code
  • the code file with the same name corresponding to the project configuration file (referred to as the first code file with the same name) is obtained. Therefore, based on the code file corresponding to the page and the code file with the same name corresponding to the project configuration file, a code dependency graph is constructed.
  • FIG. 8 is a schematic diagram of another exemplary code file directory structure information provided by the embodiment of the present application; as shown in FIG. 8, the code file directory structure of a small program project containing two pages In Information 8-1, the organizational structure corresponding to the included code files is: “app.js”, “app.json”, “app.wxss”, “index.js” and “index.json” under “pages” ", "index.wxml”, “index.wxss”, “logs.js”, “logs.json”, “logs.wxml” and “logs.wxss”, “project.config.json", “sitemap.json ", and “util.js” under “utils”.
  • Figure 9 is a schematic diagram of code dependencies corresponding to Figure 8 provided by the embodiment of the present application; as shown in Figure 9, based on the target structure shown in Figure 8, the code dependency graph 9
  • the acquisition process of -1 includes: obtaining the project configuration file "app.json", and obtaining the page configuration files "index.json” and “logs.json” from the project configuration file "app.json”, based on the page configuration file "index .json” to build the page node “pages/index”, and obtain the code files "index.js", “index.wxml” and “index.wxss” with the same name as the page configuration file "index.json” (called the second code files), in addition, read the reference codes in the code files "index.js", “index.wxml” and “index.wxss” to determine the code files without references, thus, at this time, the page node "pages/index”
  • the corresponding code nodes below are the code nodes "index.js
  • partial compilation is enabled through partial compilation settings, and a list of pages to be compiled (called page nodes to be compiled) is obtained.
  • a prompt message 10-131 and a page are displayed List input box 10-132 (referred to as local compiling control), and add button 10-133 (referred to as node addition control); here, obtain the page list to be compiled by inputting the page list in the page list input box 10-132; or , by entering the page list 10-1321 ("pages/index”, referred to as the associated page node to be compiled) in the page list input box 10-132, and clicking the Add button 10-133, in the newly presented page list input box 10 Input page list 10-1341 ("pages/detail”, referred to as associated page node to be compiled) in -134, at this time, page list 10-1321 and page list 10-1341 are page lists to be compiled.
  • the local compilation flag is "1" and the page list to be compiled is obtained, it is determined to perform local compilation; otherwise, it is determined to perform global compilation.
  • determining the page node corresponding to the page list to be compiled from the code dependency graph also determines the page node for local compilation.
  • FIG. 11 is an exemplary schematic diagram of determining the page node for partial compilation in FIG. 9 provided by the embodiment of the present application; as shown in FIG. List 10-1321 is used as an example for illustration), in the code dependency graph 9-1, the locally compiled page node 11-1 is determined to be the page node "pages/index".
  • all the descendant nodes of the locally compiled page node and the descendant nodes of the non-page node of the item node correspond to the code node to be compiled in the embodiment of the present application.
  • FIG. 12 is an exemplary schematic diagram of determining the code node to be compiled in FIG. 9 provided by the embodiment of the present application; as shown in FIG. 12, based on the locally compiled page node 11-1 in FIG. 11, in Code dependency diagram 9-1, determine all descendant nodes 12-1 of page node 11-1, which are code nodes "index.js", “index.wxml” and “index.wxss”; and determine application node 12-2 The descendant node 12-3 of the non-page node is the code node "app.js" and "app.wxss".
  • the code files corresponding to all the descendant nodes of the locally compiled page node and the code files corresponding to the descendant nodes of the non-page node of the item node correspond to the code files to be compiled in the embodiment of the present application.
  • FIG. 13 is a schematic diagram of an exemplary code file to be compiled provided by the embodiment of the present application; as shown in FIG. 13, based on the descendant node 12-1 and descendant node 12-3 determined in FIG. File List 13-1 (referred to as the code file to be compiled).
  • Fig. 14 is a schematic diagram of an exemplary presentation of partial compilation prompt information provided by the embodiment of the present application; as shown in Fig. 14, during the partial compilation process, prompt information 14-1 (" [Partial compilation] pages/ --, corresponding to the partial compilation title prompt information in the embodiment of the present application), and the development page (called the page to be viewed) is presented with prompt information 14-2 ("partial compilation", corresponding to Local compilation status prompt information in the embodiment of this application).
  • FIG. 15 is a schematic diagram of an example of presenting code package size information provided by the embodiment of the present application; as shown in FIG.
  • the prompt information 15-11 of the code package size information will be presented on the page 15-1 ("partial compilation takes effect, the code package is 549KB"); on the page 15-1
  • a prompt message 15-12 (“compilation prompt: 173") of the number of uncompiled code files on the page; a QR code 15-13 for previewing and real-machine debugging is also presented on the page 15-1.
  • the embodiment of the present application constructs a code dependency map by analyzing the direct dependencies of code files, and then determines the code files associated with the page to be previewed or debugged on the real machine based on the built code dependency map; Partial compilation of the code files associated with the page can realize the preview of the specified page or debugging on the real machine, which improves the compilation efficiency when the page is rendered; in addition, due to partial compilation, compared with the corresponding compilation results of all code files, it reduces the compilation time.
  • the size of the code so that when the compiled code is transmitted to the background server, the efficiency of data transmission can be improved and the resource consumption of data transmission can be reduced.
  • the software modules stored in the page presentation device 455 of the memory 450 may include :
  • the control presentation module 4551 is configured to present a partial compilation control, wherein the partial compilation control is used to set page nodes to be partially compiled for the page to be viewed;
  • the node acquisition module 4552 is configured to acquire the page node to be compiled in response to the partial compilation operation acting on the partial compilation control;
  • the node determination module 4553 is configured to obtain the code node to be compiled corresponding to the page node to be compiled from the code dependency relationship, wherein the code dependency relationship is constructed based on the dependency relationship between code files, and the The above code dependency represents the hierarchical relationship between the corresponding nodes of the code file;
  • the code compilation module 4554 is configured to compile the to-be-compiled code file corresponding to the to-be-compiled code node, and obtain the compiled code;
  • the page presentation module 4555 is configured to present the page to be viewed corresponding to the page node to be compiled based on the compiled code.
  • the page presentation device 455 also includes a relationship building module 4556 configured to read the application configuration file in the application code file to obtain the page configuration file, wherein the application code file is all the functional applications to be developed Code file; from the application code file, obtain a first code file with the same name as the application configuration file, and obtain a second code file with the same name as the page configuration file, and the second code file with the same name
  • the dependent code file corresponding to the code reference information in the above; determine the page node based on the name of the page configuration file, and determine the node corresponding to the second code file with the same name and the node corresponding to the dependent code file as the The descendant node of the page node; determine the application node based on the name of the application configuration file, and determine the node corresponding to the first code file with the same name and the page node as the descendant node of the application node; combine the page The node, the descendant node of the page node, the application node and the descendant node of
  • the node determination module 4553 is further configured to determine the target page node corresponding to the page node to be compiled from the code dependency; and obtain the A descendant node of the target page node; determining the parent node of the target page node as an application node, and determining the non-page node referenced by the application node as the first code file with the same name from the code dependency relationship
  • Corresponding node determining the descendant node of the target page node and the node corresponding to the first code file with the same name as the code node to be compiled.
  • control presentation module 4551 is further configured to present a partial compilation switch control, wherein the partial compilation switch control is configured to set the compilation mode of the code file; A partial compilation enable operation on the above, presenting the partial compilation control.
  • control presentation module 4551 is further configured to hide the partial compilation control and compile the application code file in response to the partial compilation close operation acting on the partial compilation switch control;
  • the application code file presents the page to be viewed.
  • the code compiling module 4554 is further configured to compile the application code file when the partial compiling control based on the presentation fails to obtain the page node, and based on the compiled application code file, present the pending View page.
  • the node acquisition module 4552 is further configured to respond to the input control of the main node to be compiled
  • the input operation of the main node to be compiled is to obtain the node of the main page to be compiled; in response to the node addition operation acting on the node adding control, the input control of the associated node to be compiled is presented; in response to the action on the input control of the associated node to be compiled To-be-compiled associated node input operation to obtain the to-be-compiled associated page node, wherein the partial compilation operation includes the to-be-compiled main node input operation and the to-be-compiled node addition operation; the to-be-compiled main page node and the to-be-compiled The compilation associated page node is determined as the to-be-compiled page node.
  • the page presentation device 455 further includes an information prompt module 4557 configured to present partial compilation prompt information when compiling based on the page node to be compiled, wherein the partial compilation prompt information includes a partial compilation title At least one of prompt information and partial compilation status prompt information.
  • the page presentation module 4555 is further configured to present a package control, wherein the package control is used to trigger the package processing of the compiled code; in response to the package operation acting on the package control , packaging the compiled code to obtain a code package; sending the code package to the service device, wherein the service device is used to perform target processing based on the code package to obtain page rendering data, and the target process includes preview and true at least one of machine debugging; presenting the page to be viewed based on the page presentation data sent by the server device for the code package.
  • the information prompt module 4557 is further configured to present the number of the code files to be compiled and the data length of the code package.
  • the page presentation module 4555 is further configured to parse the compiled code to obtain page presentation data; and present the page to be viewed corresponding to the page node to be compiled through the page presentation data.
  • the page to be viewed is a subprogram page, and the subprogram corresponding to the subprogram page depends on the browser environment of the parent program to run.
  • An embodiment of the present application provides a computer program product or computer program, where the computer program product or computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium.
  • the processor of the computer device reads the computer instruction from the computer-readable storage medium, and the processor executes the computer instruction, so that the computer device executes the page presentation method described above in the embodiment of the present application.
  • the embodiment of the present application provides a computer-readable storage medium storing executable instructions, wherein the executable instructions are stored, and when the executable instructions are executed by the processor, the processor will be caused to execute the page rendering method provided in the embodiment of the present application , for example, the page rendering method shown in FIG. 3 .
  • the computer-readable storage medium can be memory such as FRAM, ROM, PROM, EPROM, EEPROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; Various equipment.
  • executable instructions may take the form of programs, software, software modules, scripts, or code written in any form of programming language, including compiled or interpreted languages, or declarative or procedural languages, and its Can be deployed in any form, including as a stand-alone program or as a module, component, subroutine or other unit suitable for use in a computing environment.
  • executable instructions may, but do not necessarily correspond to files in a file system, may be stored as part of a file that holds other programs or data, for example, in a Hyper Text Markup Language (HTML) document in one or more scripts, in a single file dedicated to the program in question, or in multiple cooperating files (for example, files that store one or more modules, subroutines, or sections of code).
  • HTML Hyper Text Markup Language
  • executable instructions may be deployed to be executed on one computer device, or on multiple computer devices at one site, or on multiple computer devices distributed across multiple sites and interconnected by a communication network. to execute.
  • the embodiment of the present application constructs the code dependency relationship by pre-analyzing the dependency relationship between the code files, so that when the page is presented, the code files involved in the page to be viewed obtained based on the code dependency relationship are compiled, The presentation of the page to be viewed can be realized; thereby, the number of compiled code files is reduced; therefore, the efficiency of information compilation during the page presentation process can be improved, and the page presentation efficiency can be improved. In addition, it can also reduce the packaged code files and improve the upload efficiency of code packages.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Security & Cryptography (AREA)
  • Stored Programmes (AREA)

Abstract

一种页面呈现方法、装置、电子设备、计算机可读存储介质及计算机程序产品;方法包括:呈现局部编译控件,其中,局部编译控件用于针对待查看页面设置待进行局部编译的页面节点;响应于作用在局部编译控件上的局部编译操作,获取待编译页面节点;从代码依赖关系中,获取与待编译页面节点对应的待编译代码节点,其中,代码依赖关系是基于代码文件之间的依赖关系构建出的,且代码依赖关系表示代码文件对应节点之间的层级关系;编译待编译代码节点对应的待编译代码文件,获得编译代码;基于编译代码,呈现待编译页面节点对应的待查看页面。

Description

一种页面呈现方法、装置、电子设备、计算机可读存储介质、及计算机程序产品
相关申请的交叉引用
本申请基于申请号为202110593334.4、申请日为2021年05月28日的中国专利申请提出,并要求该中国专利申请的优先权,该中国专利申请的全部内容在此引入本申请作为参考。
技术领域
本申请涉及计算机应用领域中的信息处理技术,涉及一种页面呈现方法、装置、电子设备、计算机可读存储介质及计算机程序产品。
背景技术
应用开发工具,是一种用于开发和调试应用程序的工具;在开发和调试过程中,应用开发工具对代码文件进行编译,并根据编译后的信息实现指定页面的开发和调试,进而提升开发和调试效率。然而,上述利用应用开发工具执行编译时,应用开发工具通常会编译指定页面所在项目中的所有代码文件,导致页面呈现过程中代码文件的编译效率较低,从而导致页面呈现的效率较低。
发明内容
本申请实施例提供一种页面呈现方法、装置、电子设备、计算机可读存储介质及计算机程序产品,能够提升页面呈现的效率。
本申请实施例的技术方案是这样实现的:
本申请实施例提供一种页面呈现方法,包括:
呈现局部编译控件,其中,所述局部编译控件用于针对待查看页面设置待进行局部编译的页面节点;
响应于作用在所述局部编译控件上的局部编译操作,获取待编译页面节点;
从代码依赖关系中,获取与所述待编译页面节点对应的待编译代码节点,其中,所述代码依赖关系是基于代码文件之间的依赖关系构建出的,且所述代码依赖关系表示代码文件对应节点之间的层级关系;
编译所述待编译代码节点对应的待编译代码文件,获得编译代码;
基于所述编译代码,呈现所述待编译页面节点对应的所述待查看页面。
本申请实施例提供一种页面呈现装置,包括:
控件呈现模块,配置为呈现局部编译控件,其中,所述局部编译控件用于针对待查看页面设置待进行局部编译的页面节点;
节点获取模块,配置为响应于作用在所述局部编译控件上的局部编译操作,获取待编译页面节点;
节点确定模块,配置为从代码依赖关系中,获取与所述待编译页面节点对应的待编译代码节点,其中,所述代码依赖关系是基于代码文件之间的依赖关系构建出的,且所 述代码依赖关系表示代码文件对应节点之间的层级关系;
代码编译模块,配置为编译所述待编译代码节点对应的待编译代码文件,获得编译代码;
页面呈现模块,配置为基于所述编译代码,呈现所述待编译页面节点对应的所述待查看页面。
本申请实施例提供一种用于页面呈现的电子设备,包括:
存储器,用于存储可执行指令;
处理器,用于执行所述存储器中存储的可执行指令时,实现本申请实施例提供的页面呈现方法。
本申请实施例提供一种计算机可读存储介质,存储有可执行指令,用于引起处理器执行时,实现本申请实施例提供的页面呈现方法。
本申请实施例提供一种计算机程序产品,包括计算机程序或指令,其特征在于,所述计算机程序或指令被处理器执行时,实现本申请实施例提供的页面呈现方法。
本申请实施例至少具有以下有益效果:通过预先分析代码文件之间的依赖关系而构建出代码依赖关系,使得呈现页面时,通过编译基于该代码依赖关系获取到的待查看页面所涉及的代码文件(待编译代码文件),就能实现待查看页面的呈现;从而,相对于全部的代码文件,降低了编译的代码文件的数量;因此,能够提升页面呈现过程中信息编译的效率,进而,能够提升页面呈现效率。
附图说明
图1a是本申请实施例提供的页面呈现系统的一个可选的架构示意图;
图1b是本申请实施例提供的页面呈现系统的另一个可选的架构示意图;
图2是本申请实施例提供的一种页面呈现设备的组成结构示意图;
图3是本申请实施例提供的页面呈现方法的一个可选的流程示意图;
图4是本申请实施例提供的一种示例性的呈现待查看页面的示意图;
图5是本申请实施例提供的页面呈现方法的另一个可选的流程示意图;
图6a是本申请实施例提供的一种示例性的代码文件目标结构信息示意图;
图6b是本申请实施例提供的获取待编译代码节点的流程示意图;
图6c是本申请实施例提供的页面呈现方法的又一个可选的流程示意图;
图6d是本申请实施例提供的获取待编译页面节点的流程示意图;
图6e是本申请实施例提供的呈现待查看页面的流程示意图;
图7是本申请实施例提供的一种示例性的信息编译流程实现示意图;
图8是本申请实施例提供的另一种示例性的代码文件目录结构信息示意图;
图9是本申请实施例提供的一种与图8对应的代码依赖关系示意图;
图10是本申请实施例提供的一种示例性的局部编译设置示意图;
图11是本申请实施例提供的一种示例性的在图9中确定局部编译的页面节点的示意图;
图12是本申请实施例提供的一种示例性的在图9中确定待编译代码节点的示意图;
图13是本申请实施例提供的一种示例性的待编译代码文件的示意图;
图14是本申请实施例提供的一种示例性的呈现局部编译提示信息的示意图;
图15是本申请实施例提供的一种示例的呈现代码包大小信息的示意图。
具体实施方式
为了使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请作进一步地详细描述,所描述的实施例不应视为对本申请的限制,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本申请保护的范围。
在以下的描述中,涉及到“一些实施例”,其描述了所有可能实施例的子集,但是可以理解,“一些实施例”可以是所有可能实施例的相同子集或不同子集,并且可以在不冲突的情况下相互结合。
在以下的描述中,所涉及的术语“第一\第二”仅仅是区别类似的对象,不代表针对对象的特定排序,可以理解地,“第一\第二”在允许的情况下可以互换特定的顺序或先后次序,以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。
除非另有定义,本申请实施例所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本申请实施例中所使用的术语只是为了描述本申请实施例的目的,不是旨在限制本申请。
对本申请实施例进行进一步详细说明之前,对本申请实施例中涉及的名词和术语进行说明,本申请实施例中涉及的名词和术语适用于如下的解释。
1)代码文件,一种通过编译实现对应功能的信息,比如“json”、“wxml”、“wxs”、“wxss”和“js”格式的文件;代码文件通常由代码构成,编译时,是对代码文件中的代码进行编译,其中,代码是程序员用开发工具所支持的语言写出来的源文件,是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。
2)编译,将代码文件中以一种程序设计语言设计的代码翻译为另一种语言(比如,计算机可读语言)的过程。
3)预览,将项目对应的代码文件上传到应用平台(称为服务设备),开发者通过访问应用平台查看项目运行效果的过程;其中,项目是指一个功能应用,比如,一个子程序应用(例如,小程序应用),一个应用程序(APP,Application),一个网站,等等。
4)小程序(Mini Program),又称为小程序应用,一种不需要下载安装即可使用的应用程序;通常为了向用户提供更多样化的业务服务,开发者可为终端中的功能应用(例如即时通信应用、购物应用、邮件应用等)开发相应的小程序,该小程序可作为子应用被嵌入至终端的功能应用中,通过运行应用内的子应用(即对应的小程序)能够为用户提供相应的业务服务。
5)真机调试,在预览的基础上,远程调试应用平台中所运行的项目的过程。
6)控件,是一种通过按钮、图标、链接、文本、选择框、输入框和页签等形式展示的可触发的信息;其中,触发的方式,可以是接触式触发,还可以是无接触式触发,又可以是接收指令式的触发等;另外,本申请实施例中的各种控件可以是单个控件,又可以是多个控件的总称。
7)操作,是一种用于触发设备执行处理的方式,比如,点击操作、双击操作、长按操作、滑动操作、手势操作和接收到的触发指令等;另外,在本申请实施例中的各种操作可以是单个操作,又可以是多个操作的总称;以及在本申请实施例中的各种操作可以是触控操作,又可以是非触控操作。
8)响应于,用于表示所执行的处理所依赖的条件或者状态,当满足所依赖的条件或状态时,所执行的一个或多个操作可以是实时的,也可以具有设定的延迟;在没有特别说明的情况下,所执行的多个操作不存在执行先后顺序的限制。
一般来说,为了实现代码文件的编译,应用开发工具通常会编译指定页面所在项目中的所有代码文件;比如,在子程序应用的开发阶段,开发者针对正在开发的少部分页 面进行效果查看时,应用开发工具会加载项目中所有的代码文件(即全部页面对应的代码文件)进行编译,编译耗时较长。再比如,在子程序应用的预览和真机调试阶段,针对待预览和真机调试的页面,应用开发工具会加载项目中所有的代码文件进行编译和打包,以向子程序应用后台(应用平台)上传,编译耗时较长,并且,上传的代码包的体积较大,上传耗时较长。
基于此,本申请实施例提供一种页面呈现方法、装置、电子设备、计算机可读存储介质及计算机程序产品,能够提升信息编译效率,降低信息编译的资源消耗,以及降低代码包的上传量,提升代码包的上传效率,从而提升页面呈现效率。下面说明本申请实施例提供的电子设备的示例性应用,本申请实施例提供的电子设备可以实施为笔记本电脑,平板电脑,台式计算机,机顶盒,移动设备(例如,移动电话,便携式音乐播放器,个人数字助理,专用消息设备,便携式游戏设备)等各种类型的终端,也可以实施为服务器,还可以实施为终端和服务器。下面,将说明电子设备实施为终端和服务器时的示例性应用。
参见图1a,图1a是本申请实施例提供的页面呈现系统的一个可选的架构示意图;如图1a所示,为支撑一个页面呈现应用,在页面呈现系统100中,终端400通过网络300连接服务器200(终端400和服务器200共同构成本申请实施例中的用于页面呈现的电子设备,以下简称为页面呈现设备),网络300可以是广域网或者局域网,又或者是二者的组合。另外,在页面呈现系统100中,还包括数据库500,用于向服务器200发送代码依赖关系和待编译代码文件;其中,代码依赖关系是基于代码文件之间的依赖关系构建出的,且代码依赖关系表示代码文件对应节点之间的层级关系。
终端400,用于呈现局部编译控件,其中,局部编译控件用于针对待查看页面设置待进行局部编译的页面节点;响应于作用在局部编译控件上的局部编译操作,获取待编译页面节点(比如,“pages/index”),并通过网络300向服务器200发送待编译页面节点;还用于通过网络300接收服务器200针对待编译页面节点所述发送的页面呈现数据,通过页面呈现数据呈现待编译页面节点对应的待查看页面。
服务器200,用于通过网络300接收终端400发送待编译页面节点,从代码依赖关系中,获取与待编译页面节点对应的待编译代码节点;局部编译待编译代码节点对应的待编译代码文件,获得编译代码;基于编译代码,通过网络300向终端400发送页面呈现数据。
在一些实施例中,服务器200可以是独立的物理服务器,也可以是多个物理服务器构成的服务器集群或者分布式系统,还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network,CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。终端400可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等,但并不局限于此。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接,本申请实施例中不作限制。
参见图1b,图1b是本申请实施例提供的页面呈现系统的另一个可选的架构示意图;如图1b所示,基于图1a,在通过终端400进行预览或真机调试时,服务器200还用于对编译代码进行打包;从而,在页面呈现系统100中,还包括服务器600(服务设备)和终端700,其中,服务器600通过网络300获取服务器200发送的代码包,并通过网络300向终端700发送用于呈现待查看页面的页面呈现数据,以使终端700呈现待查看页面。
参见图2,图2是本申请实施例提供的一种页面呈现设备的组成结构示意图;图2所示的页面呈现设备2-1包括:至少一个处理器410、存储器450、至少一个网络接口 420和用户接口430。页面呈现设备2-1中的各个组件通过总线系统440耦合在一起。可理解,总线系统440用于实现这些组件之间的连接通信。总线系统440除包括数据总线之外,还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见,在图2中将各种总线都标为总线系统440。
处理器410可以是一种集成电路芯片,具有信号的处理能力,例如通用处理器、数字信号处理器(DSP,Digital Signal Processor),或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等,其中,通用处理器可以是微处理器或者任何常规的处理器等。
用户接口430包括使得能够呈现媒体内容的一个或多个输出装置431,包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口430还包括一个或多个输入装置432,包括有助于用户输入的用户接口部件,比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。
存储器450可以是可移除的,不可移除的或其组合。示例性的硬件设备包括固态存储器,硬盘驱动器,光盘驱动器等。存储器450可选地包括在物理位置上远离处理器410的一个或多个存储设备。
存储器450包括易失性存储器或非易失性存储器,也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM,Read Only Memory),易失性存储器可以是随机存取存储器(RAM,Random Access Memory)。本申请实施例描述的存储器450旨在包括任意适合类型的存储器。
在一些实施例中,存储器450能够存储数据以支持各种操作,这些数据的示例包括程序、模块和数据结构或者其子集或超集,下面示例性说明。
操作系统451,包括用于处理各种基本系统服务和执行硬件相关任务的系统程序,例如框架层、核心库层、驱动层等,用于实现各种基础业务以及处理基于硬件的任务;
网络通信模块452,用于经由一个或多个(有线或无线)网络接口420到达其他计算机设备,示例性的网络接口420包括:蓝牙、无线相容性认证(Wi-Fi)、和通用串行总线(USB,Universal Serial Bus)等;
呈现模块453,用于经由一个或多个与用户接口430相关联的输出装置431(例如,显示屏、扬声器等)使得能够呈现信息(例如,用于操作外围设备,显示内容和信息的用户接口);
输入处理模块454,用于对一个或多个来自一个或多个输入装置432之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。
在一些实施例中,本申请实施例提供的页面呈现装置可以采用软件方式实现,图2示出了存储在存储器450中的页面呈现装置455,其可以是程序和插件等形式的软件,包括以下软件模块:控件呈现模块4551、节点获取模块4552、节点确定模块4553、代码编译模块4554、页面呈现模块4555、关系构建模块4556和信息提示模块4557,这些模块是逻辑上的,因此根据所实现的功能可以进行任意的组合或进一步拆分。将在下文中说明各个模块的功能。
在一些实施例中,页面所对应的程序,可以是本地(Native)应用程序(APP,Application),即需要在操作系统中安装才能运行的程序,例如视频APP、直播APP;也可以是小程序,即只需要下载到浏览器环境中就可以运行的程序,例如视频小程序、直播小程序;还可以是能够嵌入至任意APP中的视频小程序或直播小程序。总而言之,页面所对应的程序可以是任意形式的应用程序、模块或插件。
下面,将结合本申请实施例提供的示例性应用和实施,说明本申请实施例提供的页面呈现方法。
参见图3,图3是本申请实施例提供的页面呈现方法的一个可选的流程示意图;将结合图3示出的步骤进行说明。
S301、呈现局部编译控件。
在本申请实施例中,当页面呈现设备运行应用开发工具,开启局部编译处理流程时,是通过呈现局部编译控件来获取待进行局部编译的页面节点的;也就是说,局部编译控件用于针对待查看页面设置待进行局部编译的页面节点;这里,为每个页面确定一个页面节点,从而页面与页面节点对应。
需要说明的是,局部编译控件可以呈现在用于进行编译信息设置的页面或弹出框上,还可以呈现在用于编译代码文件的页面上,等等,本申请实施例对局部编译控件的呈现形式不作限定。局部编译控件还可以对应有提示信息,比如,“本地开发和预览时,仅编译以下页面:”,或者“请输入需要局部编译的页面”等等。这里,局部编译控件可以是输入框,选择框,可选择的页面列表等等,本申请实施例对局部编译控件的控件形式不作限定。
S302、响应于作用在局部编译控件上的局部编译操作,获取待编译页面节点。
在本申请实施例中,当用户通过局部编译控件指定待进行局部编辑的页面时,页面呈现设备也就获得了作用在局部编译控件上的局部编译操作;此时,页面呈现设备响应于该局部编译操作,也就能够获得输入的待进行局部编译的页面所对应的页面节点,该待进行局部编译的页面所对应的页面节点即为待编译页面节点。
需要说明的是,局部编译操作为触发局部编译控件以确定待进行局部编译的页面节点的操作,比如,在通过局部编译控件输入或选择页面节点的操作;从而,页面呈现设备通过响应于该局部编译操作能够获得待进行局部编译的页面节点,即待编译页面节点。这里,待编译页面节点包括至少一个页面节点,比如,页面节点“pages/index”、页面节点“pages/logs”和页面节点“pages/details”中的至少一个。
S303、从代码依赖关系中,获取与待编译页面节点对应的待编译代码节点。
在本申请实施例中,页面呈现设备能够获取到代码依赖关系,该代码依赖关系是基于代码文件之间的依赖关系构建出的,且代码依赖关系表示代码文件对应节点之间的层级关系;从而,页面呈现设备获得了待编译页面节点之后,能在代码依赖关系中确定出与待编译页面节点关联的代码文件的节点,该与待编译页面节点关联的代码文件的节点即为待编译代码节点。这里,为每个代码文件确定一个节点,也就得到了代码节点,从而代码文件与代码节点对应。
需要说明的是,代码依赖关系中可以包括页面节点和代码节点,页面节点与代码节点关联,且代码节点之间存在依赖关系;代码依赖关系中还可以包括待开发的功能应用下的应用级别的代码文件对应的节点;从而,待编译代码节点可以包括与待编译页面节点关联的代码节点,还可以包括待编译页面节点关联的代码节点所依赖的代码节点,以及待开发的功能应用下的应用级别的代码文件对应的节点中的至少一种,本申请实施例对此不作限定。
示例性地,当待编译页面节点为页面节点“pages/index”时,待编译代码节点包括应用级别的代码文件对应的节点“app.js”、“app.json”和“app.wxss”,与待编译页面节点关联的代码节点“index.js”、“index.json”、“index.wxml”和“index.wxss”。
S304、编译待编译代码节点对应的待编译代码文件,获得编译代码。
在本申请实施例中,由于待编译代码节点包括至少一个节点,而一个节点与一个代码文件对应;从而,页面呈现设备能够获得待编译代码节点对应的至少一个代码文件,该待编译代码节点对应的至少一个代码文件即为待编译代码文件。这里,页面呈现设备对待编译代码文件进行编译,所获得的编译结果即为编译代码,也就是说,编译代码为 编译后的待编译代码文件;另外,页面呈现设备可以通过应用开发工具中的编译模块编译待编译代码文件。
S305、基于编译代码,呈现待编译页面节点对应的待查看页面。
在本申请实施例中,页面呈现设备通过执行编译代码对应的指令,呈现页面,该通过执行编译代码对应的指令所呈现的页面,即为待编译页面节点对应的待查看页面。其中,待查看页面可以是开发阶段正在开发的页面,还可以是预览阶段的页面,又可以是真机调试阶段的页面,等等,本申请实施例对此不作限定。
示例性地,参见图4,图4是本申请实施例提供的一种示例性的呈现待查看页面的示意图;如图4所示,在页面4-1中呈现局部编译控件4-11和提示信息4-12;在页面4-2中呈现局部编译控件4-21和提示信息4-22;在页面4-3中呈现局部编译控件4-31和提示信息4-32。通过在局部编译控件4-11中选择待编译页面节点“pages/detail”,或者通过在局部编译控件4-21中输入待编译页面节点“pages/detail”,或者通过在局部编译控件4-31上选择待编译页面节点“pages/detail”,就能实现待查看页面4-4的呈现。
可以理解的是,基于代码文件之间的依赖关系的分析结果,以及当前正在开发的页面(对应于待编译页面阶段),确定出相关的代码文件(待编译代码文件)并进行编译,相比于全部代码文件的数量,能够减少编译过程中代码文件的数量,提升了编译的速度,减少编译时间;从而,能够提升页面呈现过程中编译的顺畅程度,进而能够提高页面呈现效率和功能应用的开发效率。
参见图5,图5是本申请实施例提供的页面呈现方法的另一个可选的流程示意图;如图5所示,在本申请实施例中,S303之前还包括S306至S310;也就是说,页面呈现设备从代码依赖关系中,获取与待编译页面节点对应的待编译代码节点之前,该页面呈现方法还包括S306至S310,下面对各步骤分别进行说明。
S306、读取应用代码文件中的应用配置文件,获得页面配置文件。
需要说明的是,应用代码文件为待开发功能应用的全部代码文件,包括待开发功能应用的应用级别的配置信息所对应的代码文件;其中,待开发功能应用的应用级别的配置信息所对应的代码文件,即为应用配置文件,比如,“app.json”代码文件。
在本申请实施例中,页面呈现设备还可以基于代码文件目标结构信息,获得应用配置文件;其中,代码文件目标结构信息指待开发应用的代码文件所对应的目标结构;在代码文件目标结构信息中,包括了待开发应用的配置文件标识,基于该配置文件标识获取对应的代码文件,这里,获得的配置文件标识所对应的代码文件即为应用配置文件。
示例性地,参见图6a,图6a是本申请实施例提供的一种示例性的代码文件目标结构信息示意图;如图6a所示,代码文件目录结构信息6-1,为一个包含两个页面(主页“index”页面和日志“logs”页面)的子程序应用的代码文件的目录结构,第一级目录包括子程序应用的非页面对应的代码文件的名称:“app.js”、“app.json”、“app.wxss”、“project.config.json”、“sitemap.json”、…,其中,“app.json”(配置文件标识)对应的代码文件即应用配置文件。
在本申请实施例中,应用配置文件中包括待开发功能应用的页面对应的配置文件的相关信息;这里,页面呈现设备读取应用配置文件中待开发功能应用的页面对应的配置文件的相关信息,基于读取到的待开发应用的页面对应的配置文件的相关信息,获取对应的代码文件,也就获得了页面配置文件。
S307、从应用代码文件中,获取与应用配置文件同名的第一同名代码文件,并获取与页面配置文件同名的第二同名代码文件、以及第二同名代码文件中的代码引用信息所对应的依赖代码文件。
需要说明的是,应用配置文件的名称包括文件名称和代码类型,比如,“app.json” 中,“app”为文件名称,“.json”为代码类型。这里,页面呈现设备基于应用配置文件的文件名称,读取应用代码文件,从应用代码文件中确定出与应用配置文件的文件名称同名的代码文件,并将确定出的与应用配置文件的文件名称同名的代码文件确定为第一同名代码文件;比如,与“app.json”中的“app”同名的“app.js”和“app.wxss”分别对应的代码文件。
在本申请实施例中,页面呈现设备还可以通过代码文件目标结构信息,获取第一同名代码文件;这里,页面呈现设备从代码文件目标结构信息中,获取配置文件标识所在目标级别,并获取目标级别下除页面关联代码文件的标识之外的标识所对应的代码文件,将目标级别下除页面关联代码文件的标识之外的标识所对应的代码文件,确定为第一同名代码文件。其中,应用代码文件与代码文件目标结构信息对应。
示例性地,继续参见图6a,配置文件标识所在目标级别下,除页面关联代码文件的标识之外的标识为:“app.js”、“app.json”、“app.wxss”、“project.config.json”和“sitemap.json”。
需要说明的是,页面配置文件的名称包括文件名称和代码类型;这里,页面呈现设备基于页面配置文件的文件名称,读取应用代码文件,从应用代码文件中确定出与页面配置文件的文件名称同名的代码文件,并将确定出的与页面配置文件的文件名称同名的代码文件确定为第二同名代码文件;比如,与“index.json”中的“index”同名的“index.js”、“index.wxml”和“index.wxss”分别对应的代码文件;再比如,与“logs.json”中的“logs”同名的“logs.js”、“logs.wxml”和“logs.wxss”分别对应的代码文件。
在本申请实施例中,页面呈现设备读取第二同名代码文件,如果获取到代码引用信息,则基于代码引用信息中所引用的代码文件的名称,确定所引用的代码文件,该引用的代码文件即为依赖代码文件;比如,“logs.js”代码文件(第二同名代码文件)所引用的代码文件为路径“util”下的代码文件“util.js”。
S308、基于页面配置文件的名称确定页面节点,并将第二同名代码文件对应的节点和依赖代码文件对应的节点,确定为页面节点的后代节点。
在本申请实施例中,页面节点可以是页面配置文件的名称中的文件名称,还可以是页面配置文件的名称,也可以是页面配置文件的名称中的文件名称和路径的结合,等等,本申请实施例对此不作限定;其中,页面配置文件的路径可以是基于代码文件目录结构信息确定的。比如,当页面配置文件为“index.json”对应的代码文件时,对应的页面节点可以为“pages/index”;再比如,当页面配置文件为“logs.json”对应的代码文件时,对应的页面节点可以为“pages/logs”。这里,第二同名代码文件对应的节点可以是第二同名代码文件的名称,依赖代码文件对应的节点可以是依赖代码文件的名称和路径的结合,其中,依赖代码文件的路径可以是基于代码文件目录结构信息确定的。
需要说明的是,第二同名代码文件对应的节点和依赖代码文件对应的节点均为页面节点的后代节点,其中,依赖代码文件对应的节点为第二同名代码文件对应的节点的后代节点。
S309、基于应用配置文件的名称确定应用节点,并将第一同名代码文件对应的节点和页面节点,确定为应用节点的后代节点,得到代码依赖关系。
在本申请实施例中,应用节点可以是应用配置文件的名称中的文件名称,还可以是应用配置文件的名称,也可以是应用配置文件的名称中的文件名称和路径的结合,等等,本申请实施例对此不作限定;其中,应用配置文件的路径可以是基于代码文件目录结构信息确定的。比如,当应用配置文件为“app.json”对应的代码文件时,对应的应用节点可以为“app”。这里,第一同名代码文件对应的节点可以是第一同名代码文件的名称。
S310、结合页面节点、页面节点的后代节点、应用节点和应用节点的后代节点,得 到代码依赖关系。
在本申请实施例中,当页面呈现设备完成应用节点的后代节点的确定之后,所获得的页面节点、页面节点的后代节点、应用节点和应用节点的后代节点之间的关系,即为代码依赖关系。
需要说明的是,代码依赖关系为应用节点、第一同名代码文件对应的节点、页面节点、第二同名代码文件对应的节点和依赖代码文件对应的节点之间的层级关系;也就是说,该层级关系为:第一同名代码文件对应的节点和页面节点均为应用节点的后代节点,第二同名代码文件对应的节点为页面节点的后代节点,依赖代码文件对应的节点为第二同名代码文件对应的节点的后代节点。
可以理解的是,通过预先分析代码文件之间的依赖关系,构建代码依赖关系,为代码文件的局部编译提供了数据支持。
参见图6b,图6b是本申请实施例提供的获取待编译代码节点的流程示意图;如图6b所示,在本申请实施例中,S303可通过S3031至S3034实现;也就是说,页面呈现设备从代码依赖关系中,获取与待编译页面节点对应的待编译代码节点,包括S3031至S3034,下面对各步骤分别进行说明。
S3031、从代码依赖关系中,确定与待编译页面节点对应的目标页面节点。
在本申请实施例中,页面呈现设备在基于待编译页面节点从代码依赖关系中确定待编译代码节点时,先在代码依赖关系中,定位出与待编译页面节点对应的页面节点,该定位出的与待编译页面节点对应的页面节点即目标页面节点。
S3032、从代码依赖关系中,获取目标页面节点的后代节点。
需要说明的是,目标页面节点的后代节点包括目标页面节点对应的第二同名代码文件的节点,还可以包括目标页面节点对应的第二同名代码文件的依赖代码文件所对应的节点。
S3033、将目标页面节点的父节点,确定为应用节点,并从代码依赖关系中,将获取应用节点所引用的非页面节点,确定为第一同名代码文件对应的节点。
在本申请实施例中,一方面,页面呈现设备从代码依赖关系中获取目标页面节点的后代节点;另一方面,页面呈现设备还从代码依赖关系中获取应用节点所引用的非页面节点,该应用节点所引用的非页面节点即为第一同名代码文件对应的节点。
S3034、将目标页面节点的后代节点和第一同名代码文件对应的节点,确定为待编译代码节点。
需要说明的是,待编译代码节点包括目标页面节点的后代节点和第一同名代码文件对应的节点;其中,目标页面节点的后代节点包括第二同名代码文件对应的节点,或者目标页面节点的后代节点包括第二同名代码文件对应的节点和依赖代码文件对应的节点。
参见图6c,图6c是本申请实施例提供的页面呈现方法的又一个可选的流程示意图;如图6c所示,在本申请实施例中,S301可通过S3011和S3012实现;也就是说,页面呈现设备呈现局部编译控件,包括S3011和S3012,下面对各步骤进行说明。
S3011、呈现局部编译开关控件。
需要说明的是,页面呈现设备运行应用开发工具,可以先呈现用于设置代码文件的编译模式的控件,该用于设置代码文件的编译模式的控件即为局部编译开关控件。这里,局部编译开关控件可以是全局编译和局部编译的选择框,还可以是局部编译的勾选框,等等,本申请实施例对局部编译开关控件的形式不作限定。其中,编译模式包括局部编译模式和全局编译模式。
S3012、响应于作用在局部编译开关控件上的局部编译开启操作,呈现局部编译控 件。
在本申请实施例中,当用户通过触发局部编译开关控件开启局部编译模式时,页面呈现设备也就接收到了作用在局部编译开关控件上的局部编译开启操作;此时,页面呈现设备响应于该局部编译开启操作,呈现用于获取待编译页面节点的局部编译控件,以进入局部编译模式。
需要说明的是,局部编译控件可以是直接呈现的,也可以是基于对局部编译开关控件的局部编译开启操作呈现的,等等,本申请实施例对此不作限定。
继续参见图6c,在本申请实施例中,S3012之后还包括S3013和S3014;也就是说,页面呈现设备响应于作用在局部编译开关控件上的局部编译开启操作,呈现局部编译控件之后,该页面呈现方法还包括S3013和S3014,下面对各步骤分别进行说明。
S3013、响应于作用在局部编译开关控件上的局部编译关闭操作,隐藏局部编译控件,并编译应用代码文件。
在本申请实施例中,当用户通过触发局部编译开关控件关闭局部编译模式或开启全局编译模式时,页面呈现设备也就接收到了作用在局部编译开关控件上的局部编译关闭操作;此时,页面呈现设备响应于该局部编译关闭操作,隐藏局部编译控件,进入全局编译模式,以编译应用代码文件。
S3014、基于编译后的应用代码文件,呈现待查看页面。
需要说明的是,在全局编译模式下,对所有的代码文件(应用代码文件)进行编译,待查看页面是基于编译后的所有的代码文件(编译后的应用代码文件)进行的呈现。
在本申请实施例中,S301中页面呈现设备呈现局部编译控件之后,该页面呈现方法还包括:页面呈现设备在基于呈现的局部编译控件获取页面节点失败时,编译应用代码文件,并基于编译后的应用代码文件,呈现待查看页面。
需要说明的是,页面呈现设备基于呈现的局部编译控件未获取到待编译页面节点,表明页面节点获取失败,不进行局部编译而进行全局编译;此时,页面呈现设备编译应用代码文件,并基于编译后的应用代码文件,呈现待查看页面。
在本申请实施例中,在呈现局部编译开关控件时,页面呈现设备可以基于局部编译开关控件确定编译的模式是局部编译模式还是全局编译模式;在呈现局部编译控件时,页面呈现设备可以基于呈现的局部编译控件是否获取到待编译页面节点,来确定编译的模式是局部编译模式还是全局编译模式,即获取到了待编译页面节点则进入局部编译模式,未获取到待编译页面节点则进入全局编译模式。
参见图6d,图6d是本申请实施例提供的获取待编译页面节点的流程示意图;如图6d所示,在本申请实施例中,S302可通过S3021至S3024实现;也就是说,页面呈现设备响应于作用在局部编译控件上的局部编译操作,获取待编译页面节点,包括S3021和S3024,下面对各步骤分别进行说明。
S3021、响应于作用在待编译主节点输入控件上的待编译主节点输入操作,获取待编译主页面节点。
在本申请实施例中,局部编译控件包括待编译主节点输入控件,页面呈现设备通过待编译主节点输入控件,获得待呈现的页面对应的页面节点,这里称为待编译主页面节点。
S3022、响应于作用在节点添加控件上的节点添加操作,呈现待编译关联节点输入控件。
在本申请实施例中,局部编译控件还包括节点添加控件,页面呈现设备通过节点添加控件,呈现用于获取待编译主页面节点关联的页面所对应的页面节点的控件,该用于获取待编译主页面节点关联的页面所对应的页面节点的控件,即为待编译关联节点输入 控件。其中,待编译主页面节点关联的页面,比如为,跳转的页面,返回的页面,等等。
S3023、响应于作用在待编译关联节点输入控件上的待编译关联节点输入操作,获得待编译关联页面节点。
在本申请实施例中,当用户通过触发待编译关联节点输入控件输入待编译主页面节点关联的页面所对应的页面节点时,页面呈现设备也就接收到了作用在待编译关联节点输入控件上的待编译关联节点输入操作,待编译关联节点输入操作是指通过待编译关联节点输入控件输入待编译主页面节点关联的页面所对应的页面节点的操作;从而此时,页面呈现设备响应于该待编译关联节点输入操作,能够获得输入的待编译主页面节点关联的页面所对应的页面节点,该待编译主页面节点关联的页面所对应的页面节点,即为待编译关联页面节点。
需要说明的是,局部编译控件包括待编译主节点输入控件和节点添加控件,局部编译操作包括待编译主节点输入操作和节点添加操作。
S3024、将待编译主页面节点和待编译关联页面节点,确定为待编译页面节点。
需要说明的是,待编译页面节点包括待编译主页面节点和待编译关联页面节点。
在本申请实施例中,S302中页面呈现设备响应于作用在局部编译控件上的局部编译操作,获取待编译页面节点之后,该页面呈现方法还包括:页面呈现设备在基于待编译页面节点进行编译时,呈现局部编译提示信息。
需要说明的是,局部编译提示信息包括局部编译标题提示信息和局部编译状态提示信息中的至少一种;其中,局部编译标题提示信息是指通过标题的形式显示的局部编译模式的提示信息,局部编译状态提示信息是指针对呈现的编译过程所呈现的局部编译模式的提示信息。
可以理解的是,通过在编译过程中呈现局部编译提示信息,不仅能够提升页面呈现的信息呈现效果,还能够及时确定编译模式,降低确定编译模式的人机交互,提升信息编译的效率。
参见图6e,图6e是本申请实施例提供的呈现待查看页面的流程示意图;如图6e所示,在本申请实施例中,S305可通过S3051至S3054;也就是说,页面呈现设备基于编译代码,呈现待编译页面节点对应的待查看页面包括S3051至S3054,下面对各步骤分别进行说明。
S3051、呈现打包控件。
需要说明的是,打包控件用于触发所述编译代码的打包处理;比如为预览控件,真机调试控件得到,其中,预览控件为用于触发预览处理的控件,真机调试控件为用于触发真机调试处理的控件。
S3052、响应于作用在打包控件上的打包操作,打包编译代码,获得代码包。
在本申请实施例中,当用户触发预览控件进行预览时,或者用户触发真机调试控件进行真机调试时,页面呈现设备也就获得了作用在打包控件上的打包操作;这里,打包操作是指通过触发打包控件对编译代码进行打包以进行预览或真机调试的操作;此时,页面呈现设备响应于该打包操作,对编译代码执行打包处理,其中,打包后的编译代码即为代码包。
S3053、向服务设备发送代码包。
在本申请实施例中,页面呈现设备完成编译代码的打包获得代码包之后,会呈现代码包的数据长度,用于表示代码包的大小信息,比如,“局部编译生效中,代码包594KB”,还会呈现待编译代码文件的文件数量;并且,页面呈现设备还会将代码包向服务设备发送,以使服务设备向真机设备下发数据,在真机设备上实现待查看页面的预览或真机调试;从而,服务设备用于基于代码包进行预览和真机调试中至少一种。
S3054、基于服务器设备针对代码包所发送的页面呈现数据,呈现待查看页面。
在本申请实施例中,服务设备用于基于代码包进行目标处理来获得页面呈现数据;这里,目标处理包括预览和真机调试中至少一种,页面呈现设备可以为真机设备。需要说明的是,当打包控件为预览控件时,目标处理为预览;当打包控件为真机调控控件时,目标处理为真机调试控件。其中,页面呈现数据用于呈现待查看页面。
可以理解的是,通过信息局部编译控件,对待查看页面所涉及的代码文件进行编译,实现局部编译的同时,还减小了代码包的大小,提升了代码包的上传效率,降低了上传代码包的资源消耗。
在本申请实施例中,页面呈现设备基于编译代码,呈现待编译页面节点对应的待查看页面包括:页面呈现设备解析编译代码,获得页面呈现数据;通过页面呈现数据,呈现待编译页面节点对应的待查看页面。也就是说,页面呈现设备在自身进行编译代码所对应指令的执行,以呈现出待查看页面。
在本申请实施例中,待查看页面为子程序页面。从而,应用开发工具为子程序应用的开发工具,应用代码文件为子程序应用所对应的所有代码文件,待开发功能应用为子程序应用。其中,子程序页面对应的子程序依赖于母程序的浏览器环境运行,如此,下载后可以直接被运行,无需执行安装操作。
下面,将说明本申请实施例在一个实际的应用场景中的示例性应用,该示例性应用描述了开发小程序应用的过程中,通过局部编译的方式对指定页面进行预览或真机调试的处理。
参见图7,图7是本申请实施例提供的一种示例性的信息编译流程实现示意图;如图7所示,在该示例性的信息编译实现流程包括S701至S708,下面对各步骤分别进行说明。
S701、构建代码依赖关系图谱(称为代码依赖关系)。
需要说明的是,通过分析小程序项目(称为子程序应用)的代码文件(称为应用代码文件),构建出代码依赖关系图谱。其中,项目的代码文件是指项目的所有代码文件,包括项目配置文件“app.json”(称为应用配置文件);首先,从项目配置文件“app.json”中,获取全部的页面配置文件;然后,获取页面配置文件对应的同名代码文件(称为第二同名代码文件);最后,读取同名代码文件,获得引用代码文件(称为依赖代码文件),该页面配置文件对应的同名代码文件和引用代码文件,即页面对应的代码文件。同时,获取项目配置文件对应的同名代码文件(称为第一同名代码文件)。从而,基于页面对应的代码文件、项目配置文件对应的同名代码文件,构建出代码依赖关系图谱。
示例性地,参见图8,图8是本申请实施例提供的另一种示例性的代码文件目录结构信息示意图;如图8所示,一个包含两个页面的小程序项目的代码文件目录结构信息8-1中,包括的代码文件所对应的组织结构为:“app.js”,“app.json”,“app.wxss”,“pages”下的“index.js”、“index.json”、“index.wxml”、“index.wxss”、“logs.js”、“logs.json”、“logs.wxml”和“logs.wxss”,“project.config.json”,“sitemap.json”,以及“utils”下的“util.js”。
基于图8,参见图9,图9是本申请实施例提供的一种与图8对应的代码依赖关系示意图;如图9所示,基于图8示出的目标结构,该代码依赖关系图谱9-1的获取过程包括:获取项目配置文件“app.json”,并从项目配置文件“app.json”中获取页面配置文件“index.json”和“logs.json”,基于页面配置文件“index.json”构建页面节点“pages/index”,以及获取与页面配置文件“index.json”同名的代码文件“index.js”、“index.wxml”和“index.wxss”(称为第二同名代码文件),另外,读取代码文件“index.js”、“index.wxml”和“index.wxss”中的引用代码,确定无引用的代码文件,从而,此时页面节点“pages/index” 下对应的代码节点为代码节点“index.js”、“index.wxml”和“index.wxss”;基于页面配置文件“logs.json”构建页面节点“pages/logs”,以及获取与页面配置文件“logs.json”同名的代码文件“logs.js”、“logs.wxml”和“logs.wxss”,读取代码文件“logs.js”、“logs.wxml”和“logs.wxss”中的引用代码,确定代码文件“logs.js”所引用的代码文件“untils”下的“util.js”(依赖代码文件),从而,此时页面节点“pages/logs”下对应的代码节点为代码节点“logs.js”、“logs.wxml”和“logs.wxss”,以及代码节点“logs.js”下对应的代码节点“utils/util.js”。同时获取与项目配置文件“app.json”同名的代码文件“app.js”和“app.wxss”(称为第一同名代码文件),从而,构建项目节点“app”(称为应用节点),且项目节点“app”下对应的节点为:代码节点“app.js”和“app.wxss”、页面节点“pages/logs”、以及页面节点“pages/logs”。
S702、局部编译设置。
这里,通过局部编译设置开启局部编译,获取待编译页面列表(称为待编译页面节点)。
参见图10,图10是本申请实施例提供的一种示例性的局部编译设置示意图;如图10所示,在自定义编译条件页面10-1中,显示标题10-11(自定义编译条件)、其他编译设置项10-12(模式名称“pages/index”、启动页面“pages/index”、启动参数“name=vendor&color=black”、进入场景“默认”和编译设置)和局部编译勾选框10-13(称为局部编译开关控件),还显示有取消按钮10-14和确定按钮10-15。在用户勾选局部编译勾选框10-13时,在自定义编译条件页面10-1中,勾选后的局部编译勾选框10-13的对应位置处,显示提示信息10-131和页面列表输入框10-132(称为局部编译控件)、以及添加按钮10-133(称为节点添加控件);这里,通过在页面列表输入框10-132中输入页面列表获得待编译页面列表;或者,通过在页面列表输入框10-132中输入页面列表10-1321(“pages/index”,称为待编译关联页面节点),并点击添加按钮10-133,在新呈现的页面列表输入框10-134中输入页面列表10-1341(“pages/detail”,称为待编译关联页面节点),此时,页面列表10-1321和页面列表10-1341为待编译页面列表。
S703、判断是否进行局部编译。如果否则执行S704,如果是则执行S705。
这里,如果局部编译的标识为“1”且获取到了待编译页面列表,则确定进行局部编译;否则确定进行全局编译。
S704、编译项目的所有代码文件(称为应用代码文件),并执行S708。
S705、确定局部编译的页面节点(称为目标页面节点)。
需要说明的是,从代码依赖关系图谱中确定与待编译页面列表对应的页面节点,也就确定了确定局部编译的页面节点。
参见图11,图11是本申请实施例提供的一种示例性的在图9中确定局部编译的页面节点的示意图;如图11所示,基于通过图10输入的待编译页面列表(以页面列表10-1321为例进行说明),在代码依赖关系图谱9-1,确定局部编译的页面节点11-1为页面节点“pages/index”。
S706、获取局部编译的页面节点的全部后代节点和项目节点(称为应用节点)的非页面节点的后代节点。
这里,局部编译的页面节点的全部后代节点和项目节点的非页面节点的后代节点,对应于本申请实施例中的待编译代码节点。
参见图12,图12是本申请实施例提供的一种示例性的在图9中确定待编译代码节点的示意图;如图12所示,基于图11中局部编译的页面节点11-1,在代码依赖关系图谱9-1,确定页面节点11-1的全部后代节点12-1,为代码节点“index.js”、“index.wxml”和“index.wxss”;并确定应用节点12-2的非页面节点的后代节点12-3,为代码节点“app.js” 和“app.wxss”。
S707、编译局部编译的页面节点的全部后代节点对应的代码文件、以及项目节点的非页面节点的后代节点对应的代码文件。
这里,局部编译的页面节点的全部后代节点对应的代码文件、以及项目节点的非页面节点的后代节点对应的代码文件,对应于本申请实施例中的待编译代码文件。
参见图13,图13是本申请实施例提供的一种示例性的待编译代码文件的示意图;如图13所示,基于图12确定的后代节点12-1和后代节点12-3,确定代码文件列表13-1(称为待编译代码文件)。
参见图14,图14是本申请实施例提供的一种示例性的呈现局部编译提示信息的示意图;如图14所述,局部编译过程中,页面的标题处呈现有提示信息14-1(“【局部编译】pages/…”,对应于本申请实施例中的局部编译标题提示信息),开发页面(称为待查看页面)处呈现有提示信息14-2(“局部编译中”,对应于本申请实施例中的局部编译状态提示信息)。
接着参见图15,图15是本申请实施例提供的一种示例的呈现代码包大小信息的示意图;如图15所示,当点击图14中的预览按钮14-3(称为打包控件)或真机调试按钮14-4(称为打包控件)时,则在页面15-1上呈现代码包大小信息的提示信息15-11(“局部编译生效,代码包549KB”);在页面15-1上还呈现有未编译代码文件数量的提示信息15-12(“编译提示:173”);在页面15-1上还呈现有用于进行预览和真机调试的二维码15-13。
S708、结束局部编译。
可以理解的是,本申请实施例通过分析代码文件直接的依赖关系,来构建代码依赖关系图谱,进而基于构建代码依赖关系图谱确定与待预览或真机调试的页面关联的代码文件;使得通过对页面关联的代码文件进行局部编译就能实现指定页面的预览或真机调试,提升了页面呈现时的编译效率;另外,由于是局部编译,相比于所有代码文件对应的编译结果,降低了编译代码的大小,从而将编译代码传输至后台服务器时,能够提升数据传输效率,降低数据传输的资源消耗。
下面继续说明本申请实施例提供的页面呈现装置455的实施为软件模块的示例性结构,在一些实施例中,如图2所示,存储在存储器450的页面呈现装置455中的软件模块可以包括:
控件呈现模块4551,配置为呈现局部编译控件,其中,所述局部编译控件用于针对待查看页面设置待进行局部编译的页面节点;
节点获取模块4552,配置为响应于作用在所述局部编译控件上的局部编译操作,获取待编译页面节点;
节点确定模块4553,配置为从代码依赖关系中,获取与所述待编译页面节点对应的待编译代码节点,其中,所述代码依赖关系是基于代码文件之间的依赖关系构建出的,且所述代码依赖关系表示代码文件对应节点之间的层级关系;
代码编译模块4554,配置为编译所述待编译代码节点对应的待编译代码文件,获得编译代码;
页面呈现模块4555,配置为基于所述编译代码,呈现所述待编译页面节点对应的所述待查看页面。
在本申请实施例中,页面呈现装置455还包括关系构建模块4556,配置为读取应用代码文件中的应用配置文件,获得页面配置文件,其中,所述应用代码文件为待开发功能应用的全部代码文件;从所述应用代码文件中,获取与所述应用配置文件同名的第一同名代码文件,并获取与所述页面配置文件同名的第二同名代码文件、以及所述第二同 名代码文件中的代码引用信息所对应的依赖代码文件;基于所述页面配置文件的名称确定页面节点,并将所述第二同名代码文件对应的节点和所述依赖代码文件对应的节点,确定为所述页面节点的后代节点;基于所述应用配置文件的名称确定应用节点,并将所述第一同名代码文件对应的节点和所述页面节点,确定为所述应用节点的后代节点;结合所述页面节点、所述页面节点的后代节点、所述应用节点和所述应用节点的后代节点,确定所述代码依赖关系。
在本申请实施例中,所述节点确定模块4553,还配置为从所述代码依赖关系中,确定与所述待编译页面节点对应的目标页面节点;从所述代码依赖关系中,获取所述目标页面节点的后代节点;将所述目标页面节点的父节点,确定为应用节点,并从所述代码依赖关系中,将所述应用节点所引用的非页面节点,确定为第一同名代码文件对应的节点;将所述目标页面节点的后代节点和所述第一同名代码文件对应的节点,确定为所述待编译代码节点。
在本申请实施例中,所述控件呈现模块4551,还配置为呈现局部编译开关控件,其中,所述局部编译开关控件配置为设置代码文件的编译模式;响应于作用在所述局部编译开关控件上的局部编译开启操作,呈现所述局部编译控件。
在本申请实施例中,所述控件呈现模块4551,还配置为响应于作用在所述局部编译开关控件上的局部编译关闭操作,隐藏所述局部编译控件,并编译应用代码文件;基于编译后的应用代码文件,呈现所述待查看页面。
在本申请实施例中,所述代码编译模块4554,还配置为在基于呈现的所述局部编译控件获取页面节点失败时,编译应用代码文件,并基于编译后的应用代码文件,呈现所述待查看页面。
在本申请实施例中,当所述局部编译控件包括待编译主节点输入控件和节点添加控件时,所述节点获取模块4552,还配置为响应于作用在所述待编译主节点输入控件上的待编译主节点输入操作,获取待编译主页面节点;响应于作用在所述节点添加控件上的节点添加操作,呈现待编译关联节点输入控件;响应于作用在所述待编译关联节点输入控件上的待编译关联节点输入操作,获得待编译关联页面节点,其中,所述局部编译操作包括所述待编译主节点输入操作和所述节点添加操作;将所述待编译主页面节点和所述待编译关联页面节点,确定为所述待编译页面节点。
在本申请实施例中,页面呈现装置455还包括信息提示模块4557,配置为在基于所述待编译页面节点进行编译时,呈现局部编译提示信息,其中,所述局部编译提示信息包括局部编译标题提示信息和局部编译状态提示信息中的至少一种。
在本申请实施例中,所述页面呈现模块4555,还配置为呈现打包控件,其中,所述打包控件用于触发所述编译代码的打包处理;响应于作用在所述打包控件上的打包操作,打包所述编译代码,获得代码包;向服务设备发送所述代码包,其中,所述服务设备用于基于所述代码包进行目标处理来获得页面呈现数据,所述目标处理包括预览和真机调试中至少一种;基于所述服务器设备针对所述代码包所发送的页面呈现数据,呈现所述待查看页面。
在本申请实施例中,所述信息提示模块4557,还配置为呈现所述待编译代码文件的文件数量、以及所述代码包的数据长度。
在本申请实施例中,所述页面呈现模块4555,还配置为解析所述编译代码,获得页面呈现数据;通过所述页面呈现数据,呈现所述待编译页面节点对应的所述待查看页面。
在本申请实施例中,所述待查看页面为子程序页面,所述子程序页面对应的子程序依赖于母程序的浏览器环境运行。
本申请实施例提供了一种计算机程序产品或计算机程序,该计算机程序产品或计算 机程序包括计算机指令,该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令,处理器执行该计算机指令,使得该计算机设备执行本申请实施例上述的页面呈现方法。
本申请实施例提供一种存储有可执行指令的计算机可读存储介质,其中存储有可执行指令,当可执行指令被处理器执行时,将引起处理器执行本申请实施例提供的页面呈现方法,例如,如图3示出的页面呈现方法。
在一些实施例中,计算机可读存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、闪存、磁表面存储器、光盘、或CD-ROM等存储器;也可以是包括上述存储器之一或任意组合的各种设备。
在一些实施例中,可执行指令可以采用程序、软件、软件模块、脚本或代码的形式,按任意形式的编程语言(包括编译或解释语言,或者声明性或过程性语言)来编写,并且其可按任意形式部署,包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。
作为示例,可执行指令可以但不一定对应于文件系统中的文件,可以可被存储在保存其它程序或数据的文件的一部分,例如,存储在超文本标记语言(HTML,Hyper Text Markup Language)文档中的一个或多个脚本中,存储在专用于所讨论的程序的单个文件中,或者,存储在多个协同文件(例如,存储一个或多个模块、子程序或代码部分的文件)中。
作为示例,可执行指令可被部署为在一个计算机设备上执行,或者在位于一个地点的多个计算机设备上执行,又或者,在分布在多个地点且通过通信网络互连的多个计算机设备上执行。
综上所述,本申请实施例通过预先分析代码文件之间的依赖关系而构建出代码依赖关系,使得呈现页面时,通过编译基于该代码依赖关系获取到的待查看页面所涉及的代码文件,就能实现待查看页面的呈现;从而,降低了编译的代码文件的数量;因此,能够提升页面呈现过程中信息编译的效率,进而,能够提升页面呈现效率。另外,还能够减少打包的代码文件,提升代码包的上传效率。
以上所述,仅为本申请的实施例而已,并非用于限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等,均包含在本申请的保护范围之内。

Claims (16)

  1. 一种页面呈现方法,所述方法由电子设备执行,包括:
    呈现局部编译控件,其中,所述局部编译控件用于针对待查看页面设置待进行局部编译的页面节点;
    响应于作用在所述局部编译控件上的局部编译操作,获取待编译页面节点;
    从代码依赖关系中,获取与所述待编译页面节点对应的待编译代码节点,其中,所述代码依赖关系是基于代码文件之间的依赖关系构建出的,且所述代码依赖关系表示代码文件对应节点之间的层级关系;
    编译所述待编译代码节点对应的待编译代码文件,获得编译代码;
    基于所述编译代码,呈现所述待编译页面节点对应的所述待查看页面。
  2. 根据权利要求1所述的方法,其中,所述从代码依赖关系中,获取与所述待编译页面节点对应的待编译代码节点之前,所述方法还包括:
    读取应用代码文件中的应用配置文件,获得页面配置文件,其中,所述应用代码文件为待开发功能应用的全部代码文件;
    从所述应用代码文件中,获取与所述应用配置文件同名的第一同名代码文件,并获取与所述页面配置文件同名的第二同名代码文件、以及所述第二同名代码文件中的代码引用信息所对应的依赖代码文件;
    基于所述页面配置文件的名称确定页面节点,并将所述第二同名代码文件对应的节点和所述依赖代码文件对应的节点,确定为所述页面节点的后代节点;
    基于所述应用配置文件的名称确定应用节点,并将所述第一同名代码文件对应的节点和所述页面节点,确定为所述应用节点的后代节点;
    结合所述页面节点、所述页面节点的后代节点、所述应用节点和所述应用节点的后代节点,确定所述代码依赖关系。
  3. 根据权利要求1或2所述的方法,其中,所述从代码依赖关系中,获取与所述待编译页面节点对应的待编译代码节点,包括:
    从所述代码依赖关系中,确定与所述待编译页面节点对应的目标页面节点;
    从所述代码依赖关系中,获取所述目标页面节点的后代节点;
    将所述目标页面节点的父节点,确定为应用节点,并从所述代码依赖关系中,将所述应用节点所引用的非页面节点,确定为第一同名代码文件对应的节点;
    将所述目标页面节点的后代节点和所述第一同名代码文件对应的节点,确定为所述待编译代码节点。
  4. 根据权利要求1或2所述的方法,其中,所述呈现局部编译控件,包括:
    呈现局部编译开关控件,其中,所述局部编译开关控件用于设置代码文件的编译模式;
    响应于作用在所述局部编译开关控件上的局部编译开启操作,呈现所述局部编译控件。
  5. 根据权利要求4所述的方法,其中,所述响应于作用在所述局部编译开关控件上的局部编译开启操作,呈现所述局部编译控件之后,所述方法还包括:
    响应于作用在所述局部编译开关控件上的局部编译关闭操作,隐藏所述局部编译控件,并编译应用代码文件;
    基于编译后的应用代码文件,呈现所述待查看页面。
  6. 根据权利要求1或2所述的方法,其中,所述呈现局部编译控件之后,所述方法还包括:
    在基于呈现的所述局部编译控件获取页面节点失败时,编译应用代码文件,并基于编译后的应用代码文件,呈现所述待查看页面。
  7. 根据权利要求1或2所述的方法,其中,当所述局部编译控件包括待编译主节点输入控件和节点添加控件时,所述响应于作用在所述局部编译控件上的局部编译操作,获取待编译页面节点,包括:
    响应于作用在所述待编译主节点输入控件上的待编译主节点输入操作,获取待编译主页面节点;
    响应于作用在所述节点添加控件上的节点添加操作,呈现待编译关联节点输入控件;
    响应于作用在所述待编译关联节点输入控件上的待编译关联节点输入操作,获得待编译关联页面节点,其中,所述局部编译操作包括所述待编译主节点输入操作和所述节点添加操作;
    将所述待编译主页面节点和所述待编译关联页面节点,确定为所述待编译页面节点。
  8. 根据权利要求1或2所述的方法,其中,所述响应于作用在所述局部编译控件上的局部编译操作,获取待编译页面节点之后,所述方法还包括:
    在基于所述待编译页面节点进行编译时,呈现局部编译提示信息,其中,所述局部编译提示信息包括局部编译标题提示信息和局部编译状态提示信息中的至少一种。
  9. 根据权利要求1或2所述的方法,其中,所述基于所述编译代码,呈现所述待编译页面节点对应的所述待查看页面,包括:
    呈现打包控件,其中,所述打包控件用于触发所述编译代码的打包处理;
    响应于作用在所述打包控件上的打包操作,打包所述编译代码,获得代码包;
    向服务设备发送所述代码包,其中,所述服务设备用于基于所述代码包进行目标处理来获得页面呈现数据,所述目标处理包括预览和真机调试中至少一种;
    基于所述服务器设备针对所述代码包所发送的页面呈现数据,呈现所述待查看页面。
  10. 根据权利要求9所述的方法,其中,所述响应于作用在所述打包控件上的打包操作,打包所述编译代码,获得代码包之后,所述方法还包括:
    呈现所述待编译代码文件的文件数量、以及所述代码包的数据长度。
  11. 根据权利要求1或2所述的方法,其中,所述基于所述编译代码,呈现所述待编译页面节点对应的所述待查看页面,包括:
    解析所述编译代码,获得页面呈现数据;
    通过所述页面呈现数据,呈现所述待编译页面节点对应的所述待查看页面。
  12. 根据权利要求1或2所述的方法,其中,所述待查看页面为子程序页面,所述子程序页面对应的子程序依赖于母程序的浏览器环境运行。
  13. 一种页面呈现装置,包括:
    控件呈现模块,配置为呈现局部编译控件,其中,所述局部编译控件用于针对待查看页面设置待进行局部编译的页面节点;
    节点获取模块,配置为响应于作用在所述局部编译控件上的局部编译操作,获取待编译页面节点;
    节点确定模块,配置为从代码依赖关系中,获取与所述待编译页面节点对应的待编译代码节点,其中,所述代码依赖关系是基于代码文件之间的依赖关系构建出的,且所述代码依赖关系表示代码文件对应节点之间的层级关系;
    代码编译模块,配置为编译所述待编译代码节点对应的待编译代码文件,获得编译代码;
    页面呈现模块,配置为基于所述编译代码,呈现所述待编译页面节点对应的所述待查看页面。
  14. 一种用于页面呈现的电子设备,包括:
    存储器,用于存储可执行指令;
    处理器,用于执行所述存储器中存储的可执行指令时,实现权利要求1至12任一项所述的页面呈现方法。
  15. 一种计算机可读存储介质,存储有可执行指令,用于被处理器执行时,实现权利要求1至12任一项所述的页面呈现方法。
  16. 一种计算机程序产品,包括计算机程序或指令,所述计算机程序或指令被处理器执行时,实现权利要求1至12任一项所述的页面呈现方法。
PCT/CN2022/090979 2021-05-28 2022-05-05 一种页面呈现方法、装置、电子设备、计算机可读存储介质、及计算机程序产品 WO2022247594A1 (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
EP22810323.0A EP4280048A1 (en) 2021-05-28 2022-05-05 Page rendering method and apparatus, electronic device, computer-readable storage medium, and computer program product
US18/189,194 US20230229406A1 (en) 2021-05-28 2023-03-23 Page rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202110593334.4A CN115407977A (zh) 2021-05-28 2021-05-28 一种信息编译方法、装置、设备及计算机可读存储介质
CN202110593334.4 2021-05-28

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US18/189,194 Continuation US20230229406A1 (en) 2021-05-28 2023-03-23 Page rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product

Publications (1)

Publication Number Publication Date
WO2022247594A1 true WO2022247594A1 (zh) 2022-12-01

Family

ID=84156083

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/090979 WO2022247594A1 (zh) 2021-05-28 2022-05-05 一种页面呈现方法、装置、电子设备、计算机可读存储介质、及计算机程序产品

Country Status (4)

Country Link
US (1) US20230229406A1 (zh)
EP (1) EP4280048A1 (zh)
CN (1) CN115407977A (zh)
WO (1) WO2022247594A1 (zh)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116126348B (zh) * 2023-04-17 2023-07-07 函子科技(杭州)有限公司 一种实时预览的低代码应用程序的文件编译方法
CN116955279A (zh) * 2023-09-19 2023-10-27 腾讯科技(深圳)有限公司 一种文件上传方法、装置、设备及存储介质
CN117130622B (zh) * 2023-10-26 2024-01-12 合肥综合性国家科学中心人工智能研究院(安徽省人工智能实验室) 一种分布式在线代码编译运行方法及系统
CN117234513B (zh) * 2023-11-15 2024-03-08 腾讯科技(深圳)有限公司 页面的数据文件生成方法、装置、电子设备、介质及产品

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100131951A1 (en) * 2008-11-26 2010-05-27 International Business Machines Corporation Dynamic processing of embedded compiled programming language code
CN106843869A (zh) * 2017-01-16 2017-06-13 百融(北京)金融信息服务股份有限公司 一种前端开发工程化系统和方法
CN109358841A (zh) * 2018-08-15 2019-02-19 中国平安人寿保险股份有限公司 网页应用开发编译方法、装置及存储设备、计算机设备
CN109375921A (zh) * 2018-08-15 2019-02-22 中国平安人寿保险股份有限公司 页面文件快速编译方法、装置及存储设备、计算机设备
CN110795353A (zh) * 2019-10-29 2020-02-14 北京小米移动软件有限公司 快应用的调试方法、装置、设备及存储介质
CN111045683A (zh) * 2019-12-13 2020-04-21 深圳前海微众银行股份有限公司 小程序代码编译方法、装置、设备及介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100131951A1 (en) * 2008-11-26 2010-05-27 International Business Machines Corporation Dynamic processing of embedded compiled programming language code
CN106843869A (zh) * 2017-01-16 2017-06-13 百融(北京)金融信息服务股份有限公司 一种前端开发工程化系统和方法
CN109358841A (zh) * 2018-08-15 2019-02-19 中国平安人寿保险股份有限公司 网页应用开发编译方法、装置及存储设备、计算机设备
CN109375921A (zh) * 2018-08-15 2019-02-22 中国平安人寿保险股份有限公司 页面文件快速编译方法、装置及存储设备、计算机设备
CN110795353A (zh) * 2019-10-29 2020-02-14 北京小米移动软件有限公司 快应用的调试方法、装置、设备及存储介质
CN111045683A (zh) * 2019-12-13 2020-04-21 深圳前海微众银行股份有限公司 小程序代码编译方法、装置、设备及介质

Also Published As

Publication number Publication date
CN115407977A (zh) 2022-11-29
EP4280048A1 (en) 2023-11-22
US20230229406A1 (en) 2023-07-20

Similar Documents

Publication Publication Date Title
EP3605324B1 (en) Application development method and tool, and storage medium thereof
WO2022247594A1 (zh) 一种页面呈现方法、装置、电子设备、计算机可读存储介质、及计算机程序产品
CN109885311B (zh) 一种应用程序的生成方法及设备
US20140053063A1 (en) User interface control framework for stamping out controls using a declarative template
Meier et al. Professional Android
CN111198730A (zh) 子应用程序启动的方法、装置、终端及计算机存储介质
CN109800135B (zh) 一种信息处理方法及终端
Gok et al. Building Hybrid Android Apps with Java and JavaScript: Applying Native Device APIs
US9558014B2 (en) System, method and apparatus for transparently enabling software applications with adaptive user interfaces
Murphy et al. Beginning Android 3
CN112114890A (zh) 小程序的处理方法、装置、设备及存储介质
Rozentals Mastering TypeScript
Gassner Flash Builder 4 and Flex 4 Bible
CN110727429A (zh) 一种前端页面的生成方法、装置及设备
Khanna et al. Ionic: Hybrid Mobile App Development
US11449313B2 (en) System and method applied to integrated development environment
Jaygarl et al. Professional Tizen Application Development
US8656293B1 (en) Configuring mobile devices
KR20080027293A (ko) 데이터 언어에서 다수 언어들의 관리
CN113934412A (zh) 程序生成方法、装置、设备及存储介质
Chen Research on Android Architecture and Application Development
Smyth Android Studio 3.4 Development Essentials-Kotlin Edition
Patel Sitecore Cookbook for Developers
CN116974557A (zh) 小程序处理方法、装置、设备及计算机可读存储介质
CN115525305A (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: 22810323

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 2022810323

Country of ref document: EP

Effective date: 20230817

NENP Non-entry into the national phase

Ref country code: DE