Same-layer rendering method and device for native component at bottom layer of swan gap and medium

Abstract

The invention provides a same-layer rendering method and device for a native component at a bottom layer of a swan gap and a medium, and relates to the technical field of same-layer rendering, the method comprises the following steps: acquiring a placeholder tag of each native component in an H5 page through an H5 engine to obtain a placeholder tag list A; using an H5 engine to analyze each placeholder tag in the A to obtain a native component display area parameter list B; calling the ith native component in a region corresponding to the Bi through a native engine; rendering the display data corresponding to the H5 page through an H5 engine, and performing same-layer rendering on the display data corresponding to each native component in the H5 page through a native engine; updating a display area parameter of each native component to enable each native component to be synchronous with the H5 page; according to the invention, the H5 page content can be prevented from being shielded.

Description

Technical Field

[0001] The present invention relates to the field of same-layer rendering technology, and in particular to a same-layer rendering method, device and medium for Hongmeng underlying native components. Background Art

[0002] H5 page rendering is of great significance in modern Web development. It is not only related to user experience, but also affects the performance, maintainability and scalability of Web applications. Efficient rendering can ensure that the page is presented quickly after the user's request, reduce the white screen or loading state, and improve the user experience. In the process of H5 page rendering, there will be rendering of native components. In the prior art, for the situation where there are native components in the H5 page, the native components are usually stacked on the H5 page through the hierarchical relationship of the Z order. This method is relatively simple to implement. However, rendering the H5 page and native components in this way will cause the native components to float on the H5 page. When the H5 page is slid, the position of the native components remains fixed and blocks the content of the H5 page. Summary of the invention

[0003] In view of the above technical problems, the technical solution adopted by the present invention is:

[0004] According to a first aspect of the present application, a method for rendering native components on the same layer of Hongmeng underlying layer is provided, and the method is applied to a Hongmeng terminal, and the Hongmeng terminal includes an H5 engine and a native engine; wherein the H5 engine is used to render an H5 page, and the native engine is used to render a native component; the method includes the following steps:

[0005] S100, in response to the user opening the H5 page of the Hongmeng terminal, obtaining the placeholder tag of each native component in the H5 page through the H5 engine to obtain a placeholder tag list A = (A1, A2, ..., A i , …, A n ), i=1, 2,...,n; where, A i is the placeholder tag of the i-th native component in the H5 page, and n is the number of native components in the H5 page; the placeholder tag is used to represent the display area of ​​the corresponding native component on the H5 page; and obtain the display data corresponding to the H5 page and the display data corresponding to each native component in the H5 page.

[0006] S200, using the H5 engine to parse each placeholder tag in A to obtain the display area parameters of each native component, and then obtain a native component display area parameter list B = (B1, B2, ..., B i , …, B n ), where B i Ai Corresponding display area parameters.

[0007] S300, sending B to the native engine, so that the native engine can i The corresponding area evokes the i-th native component.

[0008] S400: Render the display data corresponding to the H5 page through the H5 engine, and render the display data corresponding to each native component in the H5 page through the native engine.

[0009] S500, in response to the user sliding the H5 page, updating the display area coordinates of each native component so that each native component is synchronized with the H5 page.

[0010] According to another aspect of the present application, a non-transitory computer-readable storage medium is also provided, in which at least one instruction or at least one program is stored, and the at least one instruction or at least one program is loaded and executed by a processor to implement the above-mentioned Hongmeng underlying native component same-layer rendering method.

[0011] According to another aspect of the present application, an electronic device is provided, including a processor and the above-mentioned non-transitory computer-readable storage medium.

[0012] The present invention has at least the following beneficial effects:

[0013] The present invention provides a same-layer rendering method for Hongmeng underlying native components. The Hongmeng terminal includes an H5 engine and a native engine. When a user opens the H5 page of the Hongmeng terminal, the placeholder tag of each native component in the H5 page is obtained through the H5 engine to obtain a placeholder tag list A, and the display area parameters of the native component corresponding to each placeholder tag are parsed, and then the display data of the H5 page and the display data of the native component are rendered on the same layer; when the user slides the H5 page, the display area parameters of each native component are updated, so that each native component in the H5 page can be synchronized with the H5 page, that is, the native on the H5 page moves according to the sliding of the H5 page to avoid the H5 page content being blocked. BRIEF DESCRIPTION OF THE DRAWINGS

[0014] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0015] Figure 1 A flowchart of the same-layer rendering method of Hongmeng underlying native components provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0016] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0017] It should be noted that, based on the present disclosure, those skilled in the art should understand that an aspect described herein can be implemented independently of any other aspect, and two or more of these aspects can be combined in various ways. For example, any number of aspects described herein can be used to implement a device and / or practice a method. In addition, other structures and / or functionalities other than one or more of the aspects described herein can be used to implement this device and / or practice this method.

[0018] The following will refer to Figure 1 The flowchart of the same-layer rendering method of the underlying native component of HarmonyOS is shown, which introduces a same-layer rendering method of the underlying native component of HarmonyOS.

[0019] The Hongmeng underlying native component same-layer rendering method is applied to the Hongmeng terminal, and the Hongmeng terminal includes an H5 engine and a native engine; wherein the H5 engine is used to render H5 pages, and the native engine is used to render native components.

[0020] In this embodiment, the Hongmeng terminal can be a mobile phone equipped with the Hongmeng system, and the Hongmeng terminal is preset with an H5 engine and a native engine.

[0021] The method comprises the following steps:

[0022] S100, in response to the user opening the H5 page of the Hongmeng terminal, obtaining the placeholder tag of each native component in the H5 page through the H5 engine to obtain a placeholder tag list A = (A1, A2, ..., A i , …, A n ), i=1, 2,...,n; where, A i is the placeholder tag of the i-th native component in the H5 page, and n is the number of native components in the H5 page; the placeholder tag is used to represent the display area of ​​the corresponding native component on the H5 page; and obtain the display data corresponding to the H5 page and the display data corresponding to each native component in the H5 page.

[0023] In this embodiment, a preset APP is installed on the Hongmeng terminal, and the related page of the preset APP is an H5 page. When the user opens the related page of the preset APP, the H5 engine can obtain the placeholder tag of each native component contained in the H5 page opened by the user, that is, the placeholder tag of the underlying original component of Hongmeng; the placeholder tag of each native component contained in the H5 page has been written when writing the H5 page code, and each placeholder tag can uniquely represent the corresponding native component; at the same time, the placeholder tag also maps the parameters of the display area of ​​the corresponding native component.

[0024] It should be noted that when the H5 engine obtains the placeholder tag of each native component in the 5 page, it also obtains the display data corresponding to the H5 page and the display data corresponding to each native component in the H5 page; both are performed simultaneously to improve processing efficiency.

[0025] S200, using the H5 engine to parse each placeholder tag in A to obtain the display area parameters of each native component, and then obtain a native component display area parameter list B = (B1, B2, ..., B i , …, B n ), where B i A i Corresponding display area parameters.

[0026] Further, step S200 may include the following steps:

[0027] S210, using H5 engine to A i Analyze to get A i The length L of the display area of ​​the corresponding i-th native component i , Width W i And the center point coordinate ZB of the display area of ​​the i-th native component i =(ZB i，x , ZB i，y ), among which ZB i，x ZB is the X-axis coordinate of the center point of the display area of ​​the i-th native component. i，y The Y-axis coordinate of the center point of the display area of ​​the i-th native component.

[0028] In this embodiment, since the parameters of the display area of ​​the native component corresponding to each placeholder tag have been mapped when the H5 code is written, the H5 engine can map the A i Analyze to get A i The length L of the display area of ​​the corresponding i-th native component i, Width W i And the center point coordinate ZB of the display area of ​​the i-th native component i .

[0029] S220, according to L i , W i and ZB i , determine B i =(L i , W i , ZB i ).

[0030] In this embodiment, B i After that, the specific position and size of the i-th native component displayed on the H5 page can be determined.

[0031] S300, sending B to the native engine, so that the native engine can i The corresponding area evokes the i-th native component.

[0032] In this embodiment, after the H5 engine parses the native component display area parameters corresponding to each placeholder tag, it sends B to the native engine by passing parameters. After receiving B, the native engine can perform a call-up operation on each native component in the H5 page according to B.

[0033] S400: Render the display data corresponding to the H5 page through the H5 engine, and render the display data corresponding to each native component in the H5 page at the same level through the native engine.

[0034] Further, step S400 may include the following steps:

[0035] S410, if the display data corresponding to the H5 page and the display data corresponding to each native component in the H5 page are obtained, the H5 page is rendered from top to bottom and from left to right, and the display data corresponding to each native component is rendered simultaneously through the native engine.

[0036] In this embodiment, since the display data corresponding to the H5 page and the display data corresponding to the native component have different acquisition addresses, the display data corresponding to the H5 page and the display data corresponding to the native component may be acquired at the same time or may not be acquired at the same time; if the display data corresponding to the H5 page and the display data corresponding to each native component in the H5 page are both acquired, the H5 engine renders the display data corresponding to the H5 page while the native engine renders the display data corresponding to each native component, thereby improving the rendering efficiency of the display data.

[0037] S420: If the display data corresponding to the H5 page is completely acquired and the display data corresponding to each native component in the H5 page is not completely acquired, the H5 page is rendered from top to bottom and from left to right.

[0038] S430, when rendering to the display area corresponding to the i-th native component, if the display data corresponding to the i-th native component has been acquired, the display data corresponding to the i-th native component is rendered through the native engine; otherwise, wait until the display data corresponding to the i-th native component has been acquired.

[0039] In this embodiment, if the display data corresponding to the H5 page has been acquired and the display data corresponding to each native component in the H5 page has not been fully acquired, then the display data corresponding to the H5 page can be rendered first, and while rendering the display data corresponding to the H5 page, the display data corresponding to each native component can be continuously acquired; when rendering the display data corresponding to the H5 page, a top-to-bottom and left-to-right method is adopted. During the rendering of the H5 page, it will be rendered to a display area corresponding to a native component. When rendering to the display area, if the display data corresponding to the native component has been acquired, the display data corresponding to the native component is rendered through the native engine; otherwise, wait until the display data corresponding to the native component is acquired; thereby, blank areas can be avoided during the rendering of the H5 page, thereby improving the user experience.

[0040] Furthermore, after step S430, the method may further include the following steps:

[0041] S440: If the waiting time T for display data corresponding to the i-th native component is obtained i >T', the display area corresponding to the i-th native component is rendered blank; wherein T' is the preset waiting time threshold.

[0042] In this embodiment, the display data corresponding to the native component may not be obtained due to some factors. At this time, in order to continue rendering the H5 page, the display area of ​​the native component that cannot obtain the display data can be rendered blank first, and then the area can be rendered after other areas are rendered, so as to ensure that the display data corresponding to other native components can be rendered smoothly; T' is an empirical value, which can be set according to actual needs, or determined according to the size of the display data of the corresponding i-th native component. Specifically, T'=(QH i / QV)×α; where QH i is the size of the display data of the i-th native component, QV is the data transmission rate corresponding to the current network environment, α is the preset weight, and α>1.

[0043] S500, in response to the user sliding the H5 page, updating the display area parameters of each native component so that each native component is synchronized with the H5 page.

[0044] Further, step S500 may include the following steps:

[0045] S510, obtaining the sliding distance ΔL of the H5 page.

[0046] In this embodiment, when the user slides the H5 page, the sliding distance of the H5 page can be obtained; it should be noted that those skilled in the art can use the existing page sliding distance acquisition method to obtain the sliding distance ΔL of the H5 page according to actual needs, which will not be repeated here.

[0047] S520, update the coordinates of the display area corresponding to each placeholder tag in A through the H5 engine; enter S200.

[0048] After obtaining ΔL, the coordinates of the display area corresponding to each placeholder tag in A can be updated through the H5 engine, and then parsed again through step S200 to complete the update of the coordinates of each native component, so that when the user slides the H5 page, each native component in the H5 page can follow the sliding, avoiding the native component from blocking the content in the H5 page.

[0049] Furthermore, ΔL can be directly obtained through the native engine, and then the coordinates corresponding to each native component are updated. When this method is adopted, the coordinate update efficiency of the native component is higher because the parsing process of the H5 engine is skipped. When the page slides, the native component follows more smoothly.

[0050] In this embodiment, the Harmony terminal includes an H5 engine and a native engine. When a user opens the H5 page of the Harmony terminal, the placeholder tag of each native component in the H5 page is obtained through the H5 engine to obtain a placeholder tag list A, and the display area parameters of the native component corresponding to each placeholder tag are parsed, and then the display data of the H5 page and the display data of the native component are rendered on the same layer; when the user slides the H5 page, the display area parameters of each native component are updated, so that each native component in the H5 page can be synchronized with the H5 page, that is, the native on the H5 page moves according to the sliding of the H5 page to avoid obstruction of the H5 page content.

[0051] In addition, although the steps of the method in the present disclosure are described in a specific order in the drawings, this does not require or imply that the steps must be performed in this specific order, or that all the steps shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps, etc.

[0052] An embodiment of the present invention also provides a non-transitory computer-readable storage medium, which can be set in an electronic device to store at least one instruction or at least one program related to implementing a method in a method embodiment. The at least one instruction or the at least one program is loaded and executed by the processor to implement the method provided in the above embodiment.

[0053] The program product may use any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0054] Computer readable signal media may include data signals propagated in baseband or as part of a carrier wave, in which readable program code is carried. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Readable signal media may also be any readable medium other than a readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0055] The program code embodied on the readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wired, optical cable, RF, etc., or any suitable combination of the foregoing.

[0056] Program code for performing the operations of the present application may be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java, C++, etc., and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as a separate software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server. In the case of a remote computing device, the remote computing device may be connected to the user computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computing device (e.g., using an Internet service provider to connect through the Internet).

[0057] An embodiment of the present invention further provides an electronic device, comprising a processor and the aforementioned non-transitory computer-readable storage medium.

[0058] The electronic device is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0059] The electronic device is presented in the form of a general-purpose computing device. The components of the electronic device may include, but are not limited to: the at least one processor mentioned above, the at least one memory mentioned above, and a bus connecting different system components (including the memory and the processor).

[0060] The memory stores program codes, which can be executed by the processor, so that the processor executes the steps in various embodiments described in this specification.

[0061] The memory may include readable media in the form of volatile memory, such as random access memory (RAM) and / or cache memory, and may further include read only memory (ROM).

[0062] The memory may also include a program / utility having a set (at least one) of program modules, such program modules including but not limited to: an operating system, one or more application programs, other program modules and program data, each of which or some combination may include an implementation of a network environment.

[0063] The bus may represent one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor, or a local bus using any of a variety of bus architectures.

[0064] The electronic device may also communicate with one or more external devices (e.g., keyboards, pointing devices, Bluetooth devices, etc.), may communicate with one or more devices that enable a user to interact with the electronic device, and / or may communicate with any device (e.g., routers, modems, etc.) that enables the electronic device to communicate with one or more other computing devices. Such communication may be performed through an input / output (I / O) interface. Furthermore, the electronic device may also communicate with one or more networks (e.g., local area networks (LANs), wide area networks (WANs), and / or public networks, such as the Internet) through a network adapter. The network adapter communicates with other modules of the electronic device through a bus. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device, including but not limited to: microcode, device drivers, redundant processors, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, etc.

[0065] Through the description of the above implementation, it is easy for those skilled in the art to understand that the example implementation described here can be implemented by software, or by software combined with necessary hardware. Therefore, the technical solution according to the implementation of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, including several instructions to enable a computing device (which can be a personal computer, a server, a terminal device, or a network device, etc.) to execute the method according to the implementation of the present disclosure.

[0066] An embodiment of the present invention further provides a computer program product, which includes program code. When the program product is run on an electronic device, the program code is used to enable the electronic device to execute the steps of the method according to various exemplary embodiments of the present invention described above in this specification.

[0067] Although some specific embodiments of the present invention have been described in detail by way of example, it should be understood by those skilled in the art that the above examples are only for illustration, not for limiting the scope of the present invention. It should also be understood by those skilled in the art that various modifications may be made to the embodiments without departing from the scope and spirit of the present invention.

Claims

1. A method for rendering the same layer of Hongmeng underlying native components, characterized in that: The method is applied to a Hongmeng terminal, and the Hongmeng terminal includes an H5 engine and a native engine; wherein the H5 engine is used to render an H5 page, and the native engine is used to render a native component; the method includes the following steps: S100, in response to the user opening the H5 page of the Hongmeng terminal, obtaining the placeholder tag of each native component in the H5 page through the H5 engine to obtain a placeholder tag list A = (A1, A2, ..., A i , …, A n ), i=1, 2,...,n; where, A i is the placeholder tag of the i-th native component in the H5 page, and n is the number of native components in the H5 page; the placeholder tag is used to represent the display area of ​​the corresponding native component on the H5 page; and obtain the display data corresponding to the H5 page and the display data corresponding to each native component in the H5 page; S200, using the H5 engine to parse each placeholder tag in A to obtain the display area parameters of each native component, and then obtain a native component display area parameter list B = (B1, B2, ..., B i , …, B n ), where B i A i Corresponding display area parameters; S300, sending B to the native engine, so that the native engine can i The corresponding area evokes the i-th native component; S400, rendering the display data corresponding to the H5 page through the H5 engine, and rendering the display data corresponding to each native component in the H5 page at the same layer through the native engine; S500, in response to the user sliding the H5 page, updating the display area parameters of each native component so that each native component is synchronized with the H5 page.

2. According to the Hongmeng underlying native component same-layer rendering method of claim 1, it is characterized in that: Step S200 includes the following steps: S210, using H5 engine to A i Analyze to get A i The length L of the display area of ​​the corresponding i-th native component i , Width W i And the center point coordinate ZB of the display area of ​​the i-th native component i =(ZB i，x , ZB i，y ), among which ZB i，x ZB is the X-axis coordinate of the center point of the display area of ​​the i-th native component. i，y The Y-axis coordinate of the center point of the display area of ​​the i-th native component; S220, according to L i , W i and ZB i , determine B i =(L i , W i , ZB i ).

3. According to the Hongmeng underlying native component same-layer rendering method of claim 1, it is characterized in that: Step S400 includes the following steps: S410, if the display data corresponding to the H5 page and the display data corresponding to each native component in the H5 page are all obtained, the H5 page is rendered from top to bottom and from left to right, and the display data corresponding to each native component is rendered simultaneously through the native engine; S420, if the display data corresponding to the H5 page is completely acquired and the display data corresponding to each native component in the H5 page is not completely acquired, the H5 page is rendered from top to bottom and from left to right; S430, when rendering to the display area corresponding to the i-th native component, if the display data corresponding to the i-th native component has been acquired, the display data corresponding to the i-th native component is rendered through the native engine; otherwise, wait until the display data corresponding to the i-th native component has been acquired.

4. The same-layer rendering method of Hongmeng underlying native components according to claim 1 is characterized in that: After step S430, the method further includes the following steps: S440: If the waiting time T for display data corresponding to the i-th native component is obtained i >T', the display area corresponding to the i-th native component is rendered blank; wherein T' is the preset waiting time threshold.

5. The same-layer rendering method of Hongmeng underlying native components according to claim 1 is characterized in that: Step S500 includes the following steps: S510, obtaining the sliding distance ΔL of the H5 page; S520, update the coordinates of the display area corresponding to each placeholder tag in A through the H5 engine; enter S200.

6. The same-layer rendering method of Hongmeng underlying native components according to claim 1 is characterized in that: The Hongmeng terminal includes a mobile phone equipped with the Hongmeng system.

7. A non-transitory computer-readable storage medium, wherein at least one instruction or at least one program is stored in the storage medium, characterized in that: The at least one instruction or the at least one program is loaded and executed by the processor to implement the same-layer rendering method of the HarmonyOS underlying native component as described in any one of claims 1-6.

8. An electronic device, characterized in that: Includes a processor and the non-transitory computer-readable storage medium of claim 7.

Images