Page rendering method and device, equipment and storage medium

Abstract

This application discloses a page rendering method, apparatus, device, and storage medium, belonging to the field of computer technology. Embodiments of this application provide a page rendering method that allows inter-package referencing. The embedded program's package supports dynamic downloading. When a page needs to be rendered, the package containing the program code required to render the page can be obtained, providing a foundation for inter-package referencing. When rendering a page, for components without program code in the current package, a substitute component can be rendered first. After obtaining the package containing the original component, the substitute component is replaced with the original component. This way, the rendering of the current page is not affected by sub-packages, and packages can refer to each other, overcoming the difficulty of obtaining packages and the inclusion of useless code within packages. The overall package size is reduced, and the computational load during rendering is decreased, effectively improving page rendering efficiency.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page rendering method, apparatus, device, and storage medium. Background Technology

[0002] With the development of computer technology, it is possible to embed other programs into some clients to achieve diverse functions. These embedded programs can be called embedded programs, such as mini-programs. When an embedded program is accessed in a client, its program code needs to be obtained, and the relevant pages and components are rendered based on the program code.

[0003] Currently, the code for embedded applications is typically stored in multiple packages, meaning the code is encapsulated within these packages and completely isolated from each other. These packages cannot reference each other. This necessitates precise segmentation when creating packages; otherwise, page rendering will be affected.

[0004] However, considering that multiple pages with different business functions share basic components, business components, and especially plugins, it is difficult to divide them into independent application packages. Furthermore, if the shared code is placed in the main package, the main package size will increase, slowing down startup. If shared code is included in each application package, the total package size will rapidly expand. This increases the amount of data retrieved during code download and injects a lot of useless code each time a page is rendered, impacting page rendering efficiency. Summary of the Invention

[0005] This application provides a page rendering method, apparatus, device, and storage medium, which can reduce computational load and improve page rendering efficiency. The technical solution is as follows: On the one hand, a page rendering method is provided, the method including: In response to a rendering instruction for a target page of any embedded program, a first package containing the target page is obtained, wherein the program code of the embedded program is encapsulated in at least two packages, and the at least two packages respectively include the program code of different pages or different components of the embedded program; In response to the fact that the program code of any component in the target page in the first package is located in the second package, the target page is rendered based on the program code of the target page in the first package, and an alternative component of the component is rendered in the target page; Obtain the second package; Based on the program code of the component in the second package, the alternative component rendered in the target page is replaced with the component.

[0006] On one hand, a page rendering apparatus is provided, the apparatus comprising: The acquisition module is used to acquire the first package containing the target page in response to a rendering instruction for the target page of any embedded program. The program code of the embedded program is encapsulated in at least two packages, and the at least two packages respectively include the program code of different pages or different components of the embedded program. A rendering module is configured to render the target page based on the program code of the target page in the first package, in response to the fact that the program code of any component in the target page in the first package is located in the second package, and to render an alternative component of the component in the target page. The acquisition module is also used to acquire a second program package; The rendering module is further configured to replace the alternative component rendered in the target page with the component based on the program code of the component in the second package.

[0007] In some embodiments, the acquisition module is used to: When the target page and corresponding components have finished rendering but the second package has not yet finished downloading, it is matched with the package of the embedded program; In response to a match of the second package, an asynchronous reference operation object is returned, and the step of downloading the second package containing the program code of the component based on the client embedded in the embedded program is executed; The device further includes: The setting module is used to set the status of the asynchronous reference operation object to "completed" in response to the completion of the download of the second package.

[0008] On one hand, an electronic device is provided, comprising one or more processors and one or more memories, wherein at least one computer program is stored in the one or more memories, and the at least one computer program is loaded and executed by the one or more processors to implement various optional implementations of the above-described page rendering method.

[0009] On the one hand, a computer-readable storage medium is provided, wherein at least one computer program is stored therein, the at least one computer program being loaded and executed by a processor to implement various optional implementations of the above-described page rendering method.

[0010] In one aspect, a computer program product or computer program is provided, the computer program product or computer program comprising one or more lines of program code stored in a computer-readable storage medium. One or more processors of an electronic device are capable of reading the one or more lines of program code from the computer-readable storage medium, and the one or more processors execute the one or more lines of program code, enabling the electronic device to perform a page rendering method according to any of the above possible embodiments.

[0011] This application provides a page rendering method that allows inter-package referencing. In this method, the embedded program's package supports dynamic download. When a page needs to be rendered, the package containing the program code required to render the page can be obtained, and rendering is performed based on the package content. This provides the foundation for inter-package referencing. When rendering a page, the components on that page may not be encapsulated in the same package. If a component is in another package, the page can be rendered first based on the content of the package containing that page. For components without program code in the current package, a substitute component can be rendered first. After obtaining the package containing that component, the substitute component is then replaced with the original component. In this way, the rendering of the current page is not affected by package splitting, and packages can refer to each other, overcoming the difficulties of package splitting and the situation where packages contain useless code. The overall package size is reduced, and the amount of computation during rendering is also reduced, effectively improving page rendering efficiency. Attached Figure Description

[0012] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0013] Figure 1 This is a schematic diagram of the implementation environment of a page rendering method provided in an embodiment of this application; Figure 2 This is a flowchart of a page rendering method provided in an embodiment of this application; Figure 3 This is a flowchart of a page rendering method provided in an embodiment of this application; Figure 4 This is a schematic diagram of a page rendering process provided in an embodiment of this application; Figure 5 This is a schematic diagram of the runtime environment of an embedded program provided in an embodiment of this application; Figure 6This is a schematic diagram illustrating a function call during page rendering, provided in an embodiment of this application. Figure 7 This is a schematic diagram of the structure of a page rendering device provided in an embodiment of this application; Figure 8 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application; Figure 9 This is a structural block diagram of a terminal provided in an embodiment of this application; Figure 10 This is a schematic diagram of the structure of a server provided in an embodiment of this application. Detailed Implementation

[0014] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0015] In this application, the terms "first," "second," etc., are used to distinguish identical or similar items that have substantially the same function and purpose. It should be understood that there is no logical or temporal dependency between "first," "second," and "nth," nor does it limit the quantity or order of execution. It should also be understood that although the following description uses the terms "first," "second," etc., to describe various elements, these elements should not be limited by the terms. These terms are merely used to distinguish one element from another. For example, without departing from the scope of various examples, a first image can be referred to as a second image, and similarly, a second image can be referred to as a first image. Both the first image and the second image can be images, and in some cases, they can be separate and distinct images.

[0016] In this application, the term "at least one" means one or more, and the term "multiple" means two or more. For example, multiple data packets means two or more data packets.

[0017] It should be understood that the terminology used in the description of the various examples herein is for the purpose of describing the particular examples only and is not intended to be limiting. As used in the description of the various examples and the appended claims, the singular forms “a” and “the” are intended to include the plural forms as well, unless the context clearly indicates otherwise.

[0018] It should also be understood that the term "and / or" as used herein refers to and covers any and all possible combinations of one or more of the associated listed items. The term "and / or" describes an association between related objects, indicating that three relationships can exist; for example, A and / or B can represent: A alone, A and B simultaneously, and B alone. Additionally, the character " / " in this application generally indicates that the preceding and following related objects are in an "or" relationship.

[0019] It should also be understood that, in the various embodiments of this application, the sequence number of each process does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0020] It should also be understood that determining B based on A does not mean determining B solely based on A; it is also possible to determine B based on A and / or other information.

[0021] It should also be understood that the term “comprising” (also referred to as “inCludes”, “inCluding”, “Comprises”, and / or “Comprising”) as used in this specification specifies the presence of the stated features, integers, steps, operations, elements, and / or components, but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0022] It should also be understood that the term "if" can be interpreted as meaning "when" or "upon" or "in response to determination" or "in response to detection." Similarly, depending on the context, the phrases "if determination..." or "if detection [the stated condition or event]" can be interpreted as meaning "when determination..." or "in response to determination..." or "when detection [the stated condition or event]" or "in response to detection [the stated condition or event]."

[0023] The implementation environment of this application is described below.

[0024] Figure 1 This is a schematic diagram of the implementation environment of a page rendering method provided in this application embodiment. The implementation environment includes a terminal 101, or it includes a terminal 101 and a page rendering platform 102. The terminal 101 is connected to the page rendering platform 102 via a wireless network or a wired network.

[0025] Terminal 101 can be at least one of a smartphone, game console, desktop computer, tablet computer, e-book reader, MP3 (Moving Picture Experts Group Audio Layer III) player or MP4 (Moving Picture Experts Group Audio Layer IV) player, or laptop computer. Terminal 101 has an application installed and running that supports page rendering; for example, the application can be a system application, instant messaging application, news push application, shopping application, online video application, or social application.

[0026] For example, the terminal 101 can perform this task independently, or it can be provided with data services through the page rendering platform 102. This application embodiment does not limit this.

[0027] The page rendering platform 102 includes at least one of a single server, multiple servers, a cloud computing platform, and a virtualization center. The page rendering platform 102 provides background services for applications supporting page rendering. Optionally, the page rendering platform 102 undertakes the primary processing work, and the terminal 101 undertakes secondary processing work; or, the page rendering platform 102 undertakes secondary processing work, and the terminal 101 undertakes the primary processing work; or, the page rendering platform 102 or the terminal 101 can each independently undertake processing work. Alternatively, the page rendering platform 102 and the terminal 101 can collaborate on computation using a distributed computing architecture.

[0028] Optionally, the page rendering platform 102 includes at least one server 1021 and a database 1022. The database 1022 is used to store data. In this embodiment, the database 1022 can store the program code of the embedded program to provide data services to at least one server 1021.

[0029] Servers can be standalone physical servers, server clusters or distributed systems composed of multiple physical servers, or cloud servers that provide basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. Terminals can be smartphones, tablets, laptops, desktop computers, smart speakers, smartwatches, etc., but are not limited to these.

[0030] Those skilled in the art will understand that the number of terminals 101 and servers 1021 can be more or less. For example, there may be only one terminal 101 or server 1021, or there may be dozens or hundreds of terminals 101 or servers 1021, or even more. The embodiments of this application do not limit the number or type of terminals or servers.

[0031] Figure 2 This is a flowchart illustrating a page rendering method provided in an embodiment of this application. This method can be executed by an electronic device, which may be a terminal or a server. See [link to relevant documentation]. Figure 2 The method includes the following steps.

[0032] 201. In response to a rendering instruction for a target page of any embedded program, the electronic device obtains a first package containing the target page, wherein the program code of the embedded program is encapsulated in at least two packages, and the at least two packages respectively include program code of different pages or different components of the embedded program.

[0033] In this embodiment, the program code of the embedded program is encapsulated in at least two packages. In the page rendering method provided in this application, the packages can reference each other. In some embodiments, the at least two packages can be divided into a main package and sub-packages according to their encapsulated content. The main package may include some pre-launch logic and a skeleton screen. Pages and components can be scattered across numerous sub-packages, with each sub-package containing only a few components or pages. This allows content that can be delayed in being downloaded, injected, and displayed after the mini-program quickly starts and displays its homepage. In other words, the program code of the embedded program can be dynamically downloaded, obtaining the corresponding packages for rendering according to rendering requirements.

[0034] 202. The electronic device responds to the fact that the program code of any component in the target page in the first package is located in the second package, and renders the target page based on the program code of the target page in the first package, and renders an alternative component of the component in the target page.

[0035] When rendering a webpage, the page typically contains several components. When using a package-based approach, these components are usually bundled together with the page itself. However, considering that many pages may sometimes share a component, this shared component can be bundled into a separate package. Subsequent rendering of these pages can then reference this shared component, eliminating the need to bundle the same component across different packages and reducing the overall package size.

[0036] For components whose program code is not encapsulated in the current first package, the program code for that component cannot be obtained from the first package, and therefore cannot be rendered. Thus, a substitute component can be rendered first, and then replaced with the real component later. For example, the program code for this component might be in another package, which we will call the second package to distinguish it from the first package. This substitute component is used to reserve a space for the component, allowing for direct replacement later; therefore, it can be called a placeholder component. This placeholder component is used to reserve a space for components whose program code has not been obtained, and will be replaced later.

[0037] 203. Electronic devices acquire the second package.

[0038] The program code of a component is in a second program package. This component needs to be rendered. To meet this rendering requirement, the electronic device can obtain the program code of the component from the second program package and then render the component.

[0039] 204. The electronic device replaces the alternative component rendered on the target page with the component based on the program code of the component in the second package.

[0040] The electronic device can extract the program code of the component from the second program package. In step 202 above, the component is rendered using a substitute component. After obtaining the program code, the component can be rendered normally. Therefore, the electronic device can render the component and cancel the rendering of the substitute component, thus realizing the process of replacing the substitute component with the component.

[0041] This application provides a page rendering method that allows inter-package referencing. In this method, the embedded program's package supports dynamic download. When a page needs to be rendered, the package containing the program code required to render the page can be obtained, and rendering is performed based on the package content. This provides the foundation for inter-package referencing. When rendering a page, the components on that page may not be encapsulated in the same package. If a component is in another package, the page can be rendered first based on the content of the package containing that page. For components without program code in the current package, a substitute component can be rendered first. After obtaining the package containing that component, the substitute component is then replaced with the original component. In this way, the rendering of the current page is not affected by package splitting, and packages can refer to each other, overcoming the difficulties of package splitting and the situation where packages contain useless code. The overall package size is reduced, and the amount of computation during rendering is also reduced, effectively improving page rendering efficiency.

[0042] Figure 3This is a flowchart of a page rendering method provided in an embodiment of this application. See also... Figure 3 The method includes the following steps.

[0043] 301. An electronic device acquires a package containing the main page program code of an embedded program.

[0044] An embedded application is a program that is embedded in the client and executes independently of the client. For example, an embedded application can be an applet, a virtual machine, or a container. An embedded application may consist of multiple pages, and a page may or may not contain any components.

[0045] In this embodiment, the program code of the embedded program is encapsulated in at least two packages, each package containing the program code for different pages or components of the embedded program. By using a packaged storage method, the program code of the embedded program can be separated, so that when rendering a page within the embedded program, it is not necessary to retrieve the entire program code for rendering.

[0046] In some embodiments, the at least two packages can be divided into a main package and at least two sub-packages. The main package may include the program code for the main page of the embedded program, and may also include some other pre-program code. The main package is also a single program package.

[0047] In some embodiments, the program code of the embedded program can be downloaded asynchronously. The electronic device can download the required program package asynchronously according to the rendering requirements of the embedded program, without having to obtain the entire program package of the embedded program at once. This can improve data download efficiency, avoid downloading unnecessary data, and reduce the amount of data downloaded.

[0048] This asynchronous download method can work in conjunction with the build and packaging workflow. The front-end sub-packaging process can divide and store the program code into sub-packages, and the sub-packaging and storage process can rationalize the sub-packages to avoid downloading a large amount of useless code and improve page rendering efficiency.

[0049] The result of the code splitting can be stored in a split configuration document, which can be obtained after the build process. For example, embedded programs can directly generate a split configuration document from the results of front-end code bundling software such as Webpack. Based on this document, the splitting result of the embedded program can be determined, including which pages and components are included in the main package, and which pages and components are included in each split package. Of course, for plugins, a plugin can also be itself as one or more packages, allowing it to be downloaded, injected, and run wherever needed, achieving asynchronous downloading.

[0050] 302. The electronic device renders the main page and its components based on the program code of the main page in the program package.

[0051] Once the electronic device receives the application package containing the main page's program code, it can render the main page and its components within the embedded application. Depending on the user's subsequent actions, it may need to navigate to other pages. The program code for these other pages can be encapsulated in other application packages, which are then downloaded and rendered in real-time as needed. This approach satisfies the initial rendering requirements within the application package containing the main page, allowing for on-demand downloading and rendering of subsequent pages. This reduces the amount of data downloaded, decreases the size of the main application package and the overall size of all packages, and improves page rendering efficiency.

[0052] 303. In response to a rendering instruction for a target page of any embedded program, the electronic device obtains the first package containing the target page.

[0053] The rendering instruction for the target page of any embedded application can be triggered by a page switching operation, which can be a trigger operation for a component.

[0054] Based on the rendering instruction, the electronic device can first determine which package contains the program code for the target page, and then retrieve that package. Here, we will use the package containing the target page as the first package for explanation.

[0055] The process of determining the package containing the target page by an electronic device can be achieved through the package sub-results (which can be a package configuration document). The electronic device can query the package identifier corresponding to the identifier information from the package sub-results based on the identifier information of the target page, and thus obtain the first package based on the package identifier.

[0056] The process of acquiring the first package can be performed by the client embedded in the embedded program. In some embodiments, the embedded program is embedded in a client and may not be able to interact with the server, so the client is needed to help acquire the data and inject it into the embedded program. Therefore, a target interface can be set between the embedded program and the client to transmit the data required for page rendering of the embedded program. Accordingly, in step 303, the electronic device can send the package identifier of the first package to the client through the target interface, so that the client can download the first package from the server based on the package identifier of the first package.

[0057] 304. The electronic device responds to the fact that the program code of any component in the target page cannot be found in the first program package, but the program code of the alternative component of the target page is found in the first program package, and renders the target page based on the program code of the target page in the first program package, and renders the alternative component of the target page based on the program code of the alternative component.

[0058] After obtaining the first program package, the electronic device can decompress it to obtain its contents. The first program package may include the program code of the target page and the program code of the components within that target page.

[0059] In this embodiment, taking the example that the program code of a component in the target page is encapsulated in another package, referred to here as the second package, as an example, the first package may not contain the program code of the component, but rather the program code of a substitute component. This allows the electronic device to render the portion containing the program code first, and then subsequently retrieve the component not containing the program code from the first package. This component or substitute component can be referred to as a cross-package component.

[0060] In some embodiments, the rendering process of the electronic device can be implemented through a logic layer and a rendering layer, wherein the logic layer is used to prepare the data required for rendering, and the rendering layer is used to render based on the data determined by the logic layer.

[0061] The process of determining whether the first package includes the target page and the program code of its components can be implemented by the logic layer. This logic layer can obtain the program code of the target page, the program code of some components on the target page, and the program code of the replacement component from the first package. This program code may include page or component content and rendering styles. After obtaining this data, the logic layer can send it to the rendering layer, which can then render the content according to the data.

[0062] Step 304 is a process of rendering the target page based on the program code of any component in the target page within the first package, which is located in the second package, and rendering a replacement component for that component within the target page. This process includes two phases: a rendering preparation phase and a rendering phase. Taking an embedded application like a mini-program as an example, when the mini-program logic layer prepares to render, if a component is not found but a placeholder component is found, this placeholder component is the replacement component. Instead of throwing an exception as required by relevant technologies, this is ignored. Then, when the mini-program logic layer collects custom component configurations, it also collects the placeholder settings (the position of the placeholder component) and sends them to the mini-program rendering layer. During rendering, the target page and other components can be rendered according to normal logic. For the component corresponding to the placeholder component, if the component's program code has not yet been injected, it can be determined whether a placeholder component exists. Since the position of the placeholder component has been sent to the rendering layer, the placeholder component can be rendered.

[0063] 305. Electronic devices record the rendering information of the alternative components corresponding to the target page.

[0064] When rendering the alternative component, the electronic device can record the relevant information of the alternative component, so that it can later use this information to obtain the program code of the real component and replace the alternative component.

[0065] 306. The electronic device downloads a second program package containing the program code of the corresponding alternative component based on the rendering information of the alternative component corresponding to the target page.

[0066] After the electronic device records the rendering information of the replacement component, it can know that it is also necessary to download the program code of the corresponding component to replace the replacement component, and thus it can perform the download step.

[0067] The number of the alternative components can be one or more, and this application embodiment does not limit this.

[0068] By recording the rendering information of alternative components, specifically recording the alternative components that need to be replaced, the above-mentioned method can avoid situations where components are lost due to the failure to obtain the second program package to replace the alternative components, and where the target page displays alternative components but the user's operation on the alternative components cannot trigger the corresponding functions of the original components, thus effectively improving the accuracy of page rendering.

[0069] In some embodiments, the embedded application is embedded in a client. If the embedded application may not be able to interact with the server, the client is needed to retrieve the data and inject it into the embedded application. Therefore, a target interface can be established between the embedded application and the client to transmit the data required for page rendering of the embedded application.

[0070] Specifically, in step 306 above, the electronic device can transmit the rendering information of the alternative component corresponding to the target page to the client embedded in the embedded program according to the target interface, and then download the second program package including the program code of the component based on the client embedded in the embedded program.

[0071] Through this target interface, the embedded program can transmit the required data information to the client. Based on this transmitted information, the client can know what data the embedded program needs, and then download the data from the server to inject into the embedded program.

[0072] It should be noted that steps 305 and 306 are the process of obtaining the second program package. The above process is only illustrated by the example of needing to record the rendering information of the alternative component and then downloading the second program package based on the rendering information of the alternative component. In some embodiments, the electronic device may not need to record the rendering information of the alternative component. When rendering the alternative component, it can start querying the second program package and downloading the second program package. This application embodiment does not limit this.

[0073] The electronic device can, in response to the fact that the second package has not yet been downloaded while the target page and corresponding component have finished rendering, match it with the package of the embedded application. Then, in response to the matching of the second package, it returns an asynchronous reference operation object and executes the step of downloading the second package, which includes the program code of the component, based on the client embedded in the embedded application. In response to the fact that the second package has been downloaded, the electronic device sets the status of the asynchronous reference operation object to "completed".

[0074] The program packages are downloaded asynchronously, and references between packages can also be made asynchronously. This asynchronous referencing differs from synchronous referencing; it allows the operation to continue without waiting for the return value of the called function. Since the second program package has not yet finished downloading, its return value is not yet in the function caller's return value. The electronic device can still execute the download process for the second program package, and the result will be called back after the download is complete.

[0075] 307. The electronic device replaces the alternative component rendered on the target page with the component based on the program code of the component in the second package.

[0076] After the electronic device obtains the second program package, it can decompress the second program package and inject the decompressed program code of the component into the embedded program. The embedded program can then render the component according to the program code of the component. Of course, when the electronic device renders the component, it will render the component at the location of the replacement component and cancel the rendering of the replacement component, thus the component replaces the replacement component.

[0077] Steps 304 to 307 above describe the scenario where the program code for a replacement component of the component is found in the first program package. In one embodiment, it is also possible that the program code for any component on the target page and its replacement component cannot be found in the first program package. In this case, the electronic device can render the target page in response to the absence of program code for any component on the target page and its replacement component in the first program package, rendering an empty component at the location of the original component on the target page. The function of this empty component is the same as that of the replacement component described above; the location of the component to be replaced can be determined first, and then replaced subsequently.

[0078] 308. The electronic device returns an error message in response to the inability to match a second package.

[0079] Optionally, if a second package cannot be found, the electronic device can assume that the component's program code is missing and an exception has occurred. It can then return an exception message, which can be used to determine if the component's rendering is faulty. This allows users to avoid operating on the faulty component, preventing unnecessary actions.

[0080] This application provides a page rendering method that allows inter-package referencing. In this method, the embedded program's package supports dynamic download. When a page needs to be rendered, the package containing the program code required to render the page can be obtained, and rendering is performed based on the package content. This provides the foundation for inter-package referencing. When rendering a page, the components on that page may not be encapsulated in the same package. If a component is in another package, the page can be rendered first based on the content of the package containing that page. For components without program code in the current package, a substitute component can be rendered first. After obtaining the package containing that component, the substitute component is then replaced with the original component. In this way, the rendering of the current page is not affected by package splitting, and packages can refer to each other, overcoming the difficulties of package splitting and the situation where packages contain useless code. The overall package size is reduced, and the amount of computation during rendering is also reduced, effectively improving page rendering efficiency.

[0081] The following is through Figures 4 to 6The above method will be explained in detail. In a specific example, such as... Figure 4 As shown, taking a mini-program as an example, during the pre-rendering preparation stage, when the mini-program logic layer is preparing to render, if a component is not found but a placeholder component is found, instead of throwing an exception as before, it is ignored. Then, when the mini-program logic layer collects custom component configurations, it also collects the placeholder settings of the components and sends them to the mini-program rendering layer. Thus, during the rendering phase, if a component is not yet injected, it checks whether a placeholder component exists. If not, it renders an empty component by default according to the old logic. If a placeholder component exists, it renders the placeholder component, records this placement, and continues rendering. In other words, Figure 4 When rendering a page, if subpackage A is found and contains the code for a placeholder component, then the placeholder component can be rendered. If no placeholder component code is found, an empty component can be rendered. After rendering, it checks if any placeholders have been recorded. Using the interface exposed to the mini-program framework via JSAPI (JavaScript Application Programming Interface) technology (i.e., the target interface), the client is notified to download the program package (the second program package) and inject the corresponding code into the mini-program runtime environment. After injection and preparation, both sides synchronize the replacement using the mini-program's unique VDSync (Virtual Document Object Model Synchronization) technology, corresponding to step 307. Figure 4 In other words, it means downloading and injecting subpackage B, which contains the real component X in the placeholder or empty component position. The program code of the real component X is extracted from it and rendered in the placeholder or empty component position.

[0082] like Figure 5 As shown, the runtime environment of a mini-program is divided into a rendering layer and a logic layer. WXML templates and WXSS styles operate in the rendering layer, while JavaScript runs in the logic layer. The rendering and logic layers are managed by two threads: the rendering layer uses WebView (web page view) for rendering; the logic layer uses the JsCore (JS core) thread to run JavaScript. A mini-program may have multiple interfaces, and the rendering layer can have multiple WebView threads. Communication between these two threads is relayed through the client to a third-party server. Figure 5The term "Native" is used to refer to the client, and network requests sent by the logic layer are also forwarded through Native. This Native component can send HTTPS requests to third-party servers, which can then transmit the requested data using WebSockets.

[0083] like Figure 6 As shown, the above-mentioned package reference method can adopt an asynchronous application approach. The modules that the processing modules in the mini-program's basic library depend on originally had synchronous reference (require) methods. In this application, these methods have been modified; instead of synchronous references, asynchronous references (requireAsync) are used. For a component, referred to here as a module, if the module has already been injected, `Promise.resolve(mod)` is returned directly, indicating that the reference is complete, i.e., successful (SUCCESS). `mod` is the reference to the current package. `resolve` means completion. If the module has not been injected, an attempt is made to match a package. If a package is matched, a Promise is returned, and the client is notified to download the package (the second package) using the same method as above, and inject it into the mini-program's runtime environment. `Promise` is an asynchronous reference operation object. After injection, the result is called back, completing the reference. If no match is found, an error (ERROR) is returned according to the original logic, i.e., an exception message is returned. Figure 5 The following explanation uses subpackage X as an example. Downloading subpackage X is done by loadSubpackage(X), and downloading JS file X (loadJsFilesX) means downloading the JS file of subpackage X.

[0084] All of the above-mentioned optional technical solutions can be combined in any way to form optional embodiments of this application, and will not be described in detail here.

[0085] Figure 7 This is a schematic diagram of the structure of a page rendering device provided in an embodiment of this application. See also... Figure 7 The device includes: The acquisition module 701 is used to acquire the first package containing the target page in response to a rendering instruction for the target page of any embedded program. The program code of the embedded program is encapsulated in at least two packages, and the at least two packages respectively include the program code of different pages or different components of the embedded program. The rendering module 702 is configured to render the target page based on the program code of the target page in the first package, in response to the fact that the program code of any component in the target page is located in the second package, and render an alternative component of the component in the target page. The acquisition module 701 is also used to acquire a second program package; The rendering module 702 is also used to replace the alternative component rendered in the target page with the component based on the program code of the component in the second package.

[0086] In some embodiments, the rendering module 702 is configured to, in response to the situation where the program code of any component in the target page cannot be found in the first package, but the program code of a substitute component for any component is found in the first package, render the target page based on the program code of the target page in the first package, and render the substitute component for the component in the target page based on the program code of the substitute component.

[0087] In some embodiments, the rendering module 702 is used for: In response to the fact that the program code of any component in the target page in the first package is located in the second package, and the second package has not yet been downloaded, the program code based on the target page in the first package is executed to render the target page and render the alternative component of the component in the target page. The acquisition module 701 is used for: Record the rendering information of the alternative component corresponding to the target page; Based on the rendering information of the alternative component corresponding to the target page, download a second package containing the program code of that component.

[0088] In some embodiments, the acquisition module 701 is used for: Based on the target interface, the rendering information of the alternative component corresponding to the target page is passed to the client embedded in the embedded application; Based on the client embedded in this embedded program, download a second program package that includes the program code for this component.

[0089] In some embodiments, the device further includes: The return module is used to return an exception message in response to the inability to find the second package.

[0090] In some embodiments, the rendering module 702 is further configured to render the target page in response to the program code of not being found in the first package for any component in the target page and its alternative component, and to render an empty component at the location of the component in the target page.

[0091] In some embodiments, the acquisition module 701 is used for: When the target page and corresponding components have finished rendering but the second package has not yet finished downloading, it is matched with the package of the embedded program. In response to the matching of the second package, an asynchronous reference operation object is returned, and the step of downloading the second package containing the program code of the component is executed based on the client embedded in the embedded program; The device also includes: The configuration module is used to set the status of the asynchronous reference operation object to "completed" in response to the completion of the download of the second package.

[0092] In the apparatus of this application embodiment, there is a method for inter-package referencing. The embedded program's package supports dynamic downloading. When a page needs to be rendered, the package containing the program code required to render the page can be obtained, and rendering is performed based on the package content. This provides the basis for inter-package referencing. When rendering a page, the components in the page may not be encapsulated in the same package. If a component is in another package, the page can be rendered first based on the content of the package containing the page. For components that do not have program code in the current package, a substitute component can be rendered first. After obtaining the package containing the component, the substitute component is replaced with the component. In this way, the rendering of the current page is not affected by package splitting, and packages can refer to each other, thus overcoming the difficulty of package splitting and the situation where the package contains useless code. The overall package size is reduced, and the amount of computation during the rendering process is also reduced, which can effectively improve page rendering efficiency.

[0093] It should be noted that the page rendering apparatus provided in the above embodiments is only illustrated by the division of the above functional modules when rendering a page. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the page rendering apparatus can be divided into different functional modules to complete all or part of the functions described above. In addition, the page rendering apparatus and the page rendering method embodiments provided in the above embodiments belong to the same concept, and their specific implementation process can be found in the method embodiments, which will not be repeated here.

[0094] Figure 8 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. The electronic device 800 can vary significantly due to differences in configuration or performance. It can include one or more Central Processing Units (CPUs) 801 and one or more memories 802. The memory 802 stores at least one computer program, which is loaded and executed by the processor 801 to implement the page rendering methods provided in the various method embodiments described above. The electronic device can also include other components for implementing device functions. For example, the electronic device can also have wired or wireless network interfaces and input / output interfaces for input and output. Further details are not elaborated upon in this embodiment.

[0095] The electronic device in the above method embodiments can be implemented as a terminal. For example, Figure 9 This is a structural block diagram of a terminal provided in an embodiment of this application. The terminal 900 can be a portable mobile terminal, such as a smartphone, tablet computer, MP3 (Moving Picture Experts Group Audio Layer III) player, MP4 (Moving Picture Experts Group Audio Layer IV) player, laptop computer, or desktop computer. The terminal 900 may also be referred to as user equipment, portable terminal, laptop terminal, desktop terminal, or other names.

[0096] Typically, terminal 900 includes a processor 901 and a memory 902.

[0097] Processor 901 may include one or more processing cores, such as a quad-core processor or an octa-core processor. Processor 901 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). Processor 901 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 901 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, processor 901 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

[0098] The memory 902 may include one or more computer-readable storage media, which may be non-transitory. The memory 902 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 902 are used to store at least one instruction, which is executed by the processor 901 to implement the page rendering method provided in the method embodiments of this application.

[0099] In some embodiments, the terminal 900 may also optionally include a peripheral device interface 903 and at least one peripheral device. The processor 901, memory 902, and peripheral device interface 903 can be connected via a bus or signal line. Each peripheral device can be connected to the peripheral device interface 903 via a bus, signal line, or circuit board. Specifically, the peripheral device includes at least one of the following: a radio frequency circuit 904, a display screen 905, a camera assembly 906, an audio circuit 907, and a power supply 909.

[0100] Peripheral device interface 903 can be used to connect at least one I / O (Input / Output) related peripheral device to processor 901 and memory 902. In some embodiments, processor 901, memory 902 and peripheral device interface 903 are integrated on the same chip or circuit board; in some other embodiments, any one or two of processor 901, memory 902 and peripheral device interface 903 can be implemented on separate chips or circuit boards, which is not limited in this embodiment.

[0101] The radio frequency (RF) circuit 904 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The RF circuit 904 communicates with communication networks and other communication devices via electromagnetic signals. The RF circuit 904 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals back into electrical signals. Optionally, the RF circuit 904 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, etc. The RF circuit 904 can communicate with other terminals through at least one wireless communication protocol. This wireless communication protocol includes, but is not limited to: the World Wide Web, metropolitan area networks, intranets, various generations of mobile communication networks (2G, 3G, 4G, and 5G), wireless local area networks, and / or WiFi (Wireless Fidelity) networks. In some embodiments, the RF circuit 904 may also include circuitry related to NFC (Near Field Communication), which is not limited in this application.

[0102] Display screen 905 is used to display a UI (User Interface). This UI may include graphics, text, icons, videos, and any combination thereof. When display screen 905 is a touch display screen, it also has the ability to collect touch signals on or above its surface. These touch signals can be input as control signals to processor 901 for processing. In this case, display screen 905 can also be used to provide virtual buttons and / or a virtual keyboard, also known as soft buttons and / or a soft keyboard. In some embodiments, there may be one display screen 905, disposed on the front panel of terminal 900; in other embodiments, there may be at least two display screens 905, disposed on different surfaces of terminal 900 or in a folded design; in other embodiments, display screen 905 may be a flexible display screen, disposed on a curved or folded surface of terminal 900. Furthermore, display screen 905 may be configured as a non-rectangular irregular shape, i.e., a non-rectangular screen. Display screen 905 may be made of materials such as LCD (Liquid Crystal Display) or OLED (Organic Light-Emitting Diode).

[0103] The camera assembly 906 is used to acquire images or videos. Optionally, the camera assembly 906 includes a front-facing camera and a rear-facing camera. Typically, the front-facing camera is located on the front panel of the terminal, and the rear-facing camera is located on the back of the terminal. In some embodiments, there are at least two rear-facing cameras, which are any one of a main camera, a depth-sensing camera, a wide-angle camera, and a telephoto camera, to achieve background blurring by fusion of the main camera and the depth-sensing camera, panoramic shooting by fusion of the main camera and the wide-angle camera, VR (Virtual Reality) shooting, or other fusion shooting functions. In some embodiments, the camera assembly 906 may also include a flash. The flash can be a single-color temperature flash or a dual-color temperature flash. A dual-color temperature flash refers to a combination of a warm-light flash and a cool-light flash, which can be used for light compensation at different color temperatures.

[0104] The audio circuit 907 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, converting them into electrical signals that are input to the processor 901 for processing, or to the radio frequency circuit 904 for voice communication. For stereo sound acquisition or noise reduction purposes, multiple microphones may be used, each positioned at a different location on the terminal 900. The microphone may also be an array microphone or an omnidirectional microphone. The speaker is used to convert electrical signals from the processor 901 or the radio frequency circuit 904 into sound waves. The speaker may be a conventional diaphragm speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can convert electrical signals not only into audible sound waves but also into inaudible sound waves for purposes such as distance measurement. In some embodiments, the audio circuit 907 may also include a headphone jack.

[0105] Power supply 909 is used to supply power to the various components in terminal 900. Power supply 909 can be AC ​​power, DC power, a disposable battery, or a rechargeable battery. When power supply 909 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery that is charged via a wired line, while a wireless rechargeable battery is a battery that is charged via a wireless coil. The rechargeable battery can also be used to support fast charging technology.

[0106] In some embodiments, the terminal 900 further includes one or more sensors 910. The one or more sensors 910 include, but are not limited to, an accelerometer 911, a gyroscope 912, a pressure sensor 913, an optical sensor 915, and a proximity sensor 916.

[0107] Accelerometer 911 can detect the magnitude of acceleration along the three coordinate axes of a coordinate system established by terminal 900. For example, accelerometer 911 can be used to detect the components of gravitational acceleration along the three coordinate axes. Processor 901 can control display screen 905 to display the user interface in either a landscape or portrait view based on the gravitational acceleration signal acquired by accelerometer 911. Accelerometer 911 can also be used for games or for acquiring user motion data.

[0108] The gyroscope sensor 912 can detect the orientation and rotation angle of the terminal 900. The gyroscope sensor 912, in conjunction with the accelerometer sensor 911, can collect the user's 3D movements on the terminal 900. Based on the data collected by the gyroscope sensor 912, the processor 901 can perform the following functions: motion sensing (e.g., changing the UI based on the user's tilt), image stabilization during shooting, game control, and inertial navigation.

[0109] The pressure sensor 913 can be disposed on the side bezel of the terminal 900 and / or the lower layer of the display screen 905. When the pressure sensor 913 is disposed on the side bezel of the terminal 900, it can detect the user's grip signal on the terminal 900, and the processor 901 can perform left / right hand recognition or quick operation based on the grip signal collected by the pressure sensor 913. When the pressure sensor 913 is disposed on the lower layer of the display screen 905, the processor 901 can control the operable controls on the UI interface based on the user's pressure operation on the display screen 905. The operable controls include at least one of button controls, scroll bar controls, icon controls, and menu controls.

[0110] An optical sensor 915 is used to collect ambient light intensity. In one embodiment, the processor 901 can control the display brightness of the display screen 905 based on the ambient light intensity collected by the optical sensor 915. Specifically, when the ambient light intensity is high, the display brightness of the display screen 905 is increased; when the ambient light intensity is low, the display brightness of the display screen 905 is decreased. In another embodiment, the processor 901 can also dynamically adjust the shooting parameters of the camera assembly 906 based on the ambient light intensity collected by the optical sensor 915.

[0111] The proximity sensor 916, also known as a distance sensor, is typically located on the front panel of the terminal 900. The proximity sensor 916 is used to detect the distance between the user and the front of the terminal 900. In one embodiment, when the proximity sensor 916 detects that the distance between the user and the front of the terminal 900 is gradually decreasing, the processor 901 controls the display screen 905 to switch from a screen-on state to a screen-off state; when the proximity sensor 916 detects that the distance between the user and the front of the terminal 900 is gradually increasing, the processor 901 controls the display screen 905 to switch from a screen-off state to a screen-on state.

[0112] Those skilled in the art will understand that Figure 9 The structure shown does not constitute a limitation on terminal 900, and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

[0113] The electronic device in the above method embodiments can be implemented as a server. For example, Figure 10This is a schematic diagram of a server structure provided in an embodiment of this application. The server 1000 can vary significantly due to differences in configuration or performance, and may include one or more Central Processing Units (CPUs) 1001 and one or more memories 1002. The memories 1002 store at least one computer program, which is loaded and executed by the processor 1001 to implement the page rendering methods provided in the various method embodiments described above. Of course, the server may also have wired or wireless network interfaces and input / output interfaces for input / output. The server may also include other components for implementing device functions, which will not be elaborated upon here.

[0114] In an exemplary embodiment, a computer-readable storage medium is also provided, such as a memory including at least one computer program, which is executable by a processor to perform the page rendering method in the above embodiments. For example, the computer-readable storage medium can be a read-only memory (ROM), a random access memory (RAM), a compact disc read-only memory (CD-ROM), magnetic tape, a floppy disk, and an optical data storage device, etc.

[0115] In an exemplary embodiment, a computer program product or computer program is also provided, comprising one or more lines of program code stored in a computer-readable storage medium. One or more processors of an electronic device are capable of reading the one or more lines of program code from the computer-readable storage medium, and the one or more processors execute the one or more lines of program code, enabling the electronic device to perform the page rendering method described above.

[0116] It should be understood that in the various embodiments of this application, the order of the above-mentioned processes does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0117] It should be understood that determining B based on A does not mean determining B solely based on A; it also means determining B based on A and / or other information.

[0118] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0119] The above description is only an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A page rendering method, characterized in that, The method includes: In response to a rendering instruction for a target page triggered by a triggering operation on any component on the current display page of any embedded program, the package identifier of the first package corresponding to the identifier information of the target page is queried from the package results; the package identifier of the first package is sent to the client embedded in the embedded program through the target interface, so that the client downloads the first package from the server based on the package identifier of the first package. The first package includes the program code of the target page and the program code of the components in the target page; wherein, the program code of the embedded program is encapsulated in at least two packages, and the at least two packages respectively include the program code of different pages or different components of the embedded program; the packages can reference each other, and the packages support dynamic download. The at least two packages are divided into a main package and at least two sub-packages. The main package includes the pre-launch logic and a skeleton screen. Pages and components are scattered in the sub-packages. Each sub-package contains only some components or pages. Each component shared by multiple pages is encapsulated in a separate package. Plugins are encapsulated in at least one package. In response to the situation where no program code for any component in the target page is found in the first program package, but program code for a substitute component of the target page is found in the first program package, the target page is rendered based on the program code of the target page in the first program package, and the substitute component is rendered in the target page based on the program code of the substitute component; when rendering the substitute component, relevant information of the substitute component is recorded to obtain substitute component rendering information; Based on the rendering information of the alternative component corresponding to the target page, downloading a second program package including the program code of any one of the components includes: transmitting the rendering information of the alternative component corresponding to the target page to the client according to the target interface, and downloading the second program package including the program code of any one of the components based on the client; When the target page and the alternative component have finished rendering, but the second package has not yet finished downloading, it is matched with the package of the embedded program; when the second package is matched, an asynchronous reference operation object is returned, and the step of downloading the second package including the program code of any one of the components based on the client is executed; when the second package is downloaded, the status of the asynchronous reference operation object is set to completed, so as to realize the reference between packages using an asynchronous reference method; based on the program code of any one of the components in the second package, the alternative component rendered in the target page is replaced with the any one of the components; when the second package is not matched, it is determined that the program code of any one of the components is missing, an exception exists, and an exception message is returned. In response to the absence of program code for any component in the target page and program code for a replacement component in the first program package, the target page is rendered, and an empty component is rendered at the location of the component in the target page; based on the program code of the component in the second program package, the empty component rendered in the target page is replaced with the component.

2. A page rendering device, characterized in that, The device includes: The acquisition module is configured to respond to a rendering instruction of a target page triggered by a triggering operation on any component on the current display page of any embedded program, and to query the package identifier of the first program package corresponding to the identification information of the target page from the package results; send the package identifier of the first program package to the client embedded in the embedded program through the target interface, so that the client downloads the first program package from the server based on the package identifier of the first program package, wherein the first program package includes the program code of the target page and the program code of the components in the target page; wherein the program code of the embedded program is encapsulated in at least two program packages, and the at least two program packages respectively include the program code of different pages or different components of the embedded program; the program packages can reference each other, and the program packages support dynamic download; the at least two program packages are divided into a main package and at least two sub-packages; the main package includes the pre-launch logic and a skeleton screen; the pages and components are scattered in the sub-packages; each sub-package contains only some components or pages; each component shared by multiple pages is encapsulated in a separate program package; and plugins are encapsulated in at least one program package. A rendering module is configured to respond to a situation where the program code of any component in the target page cannot be found in the first program package, but the program code of a substitute component for the target page is found in the first program package, to render the target page based on the program code of the target page in the first program package, and to render the substitute component in the target page based on the program code of the substitute component. The acquisition module is used to record relevant information of the alternative component when rendering the alternative component to obtain the alternative component rendering information; and to download a second program package including the program code of any one of the components according to the alternative component rendering information corresponding to the target page, including: transmitting the alternative component rendering information corresponding to the target page to the client according to the target interface, and downloading a second program package including the program code of any one of the components based on the client. The rendering module is also used for: When the target page and the alternative component have finished rendering, but the second package has not yet finished downloading, it is matched with the package of the embedded program; when the second package is matched, an asynchronous reference operation object is returned, and the step of downloading the second package including the program code of any one of the components based on the client is executed; when the second package is downloaded, the state of the asynchronous reference operation object is set to completed, so as to realize the reference between packages using an asynchronous reference method; based on the program code of any one of the components in the second package, the alternative component rendered in the target page is replaced with any one of the components; The return module is used to determine that the program code of any component is missing and an exception exists in response to the failure to match the second package, and to return exception information; The rendering module is further configured to, in response to the absence of program code for any component in the target page and program code for a substitute component of the target page in the first package, render the target page, render an empty component at the location of the target page where the target page is located; and, based on the program code of the target page where the target page is located, replace the empty component rendered in the target page with the target page where the target page is located.

3. An electronic device, characterized in that, The electronic device includes one or more processors and one or more memories, wherein at least one computer program is stored in the one or more memories, and the at least one computer program is loaded and executed by the one or more processors to implement the page rendering method as described in claim 1.

4. A computer-readable storage medium, characterized in that, The storage medium stores at least one computer program, which is loaded and executed by a processor to implement the page rendering method as described in claim 1.

5. A computer program product comprising one or more lines of program code stored in a computer-readable storage medium, wherein one or more processors of an electronic device are capable of reading the one or more lines of program code from the computer-readable storage medium, and wherein the one or more processors execute the one or more lines of program code to enable the electronic device to perform the page rendering method as described in claim 1.

Images