Same-layer rendering method and device, storage medium and electronic equipment

Abstract

The invention discloses a same-layer rendering method and device, a storage medium and electronic equipment, and the method comprises the steps: responding to an application triggering operation, and injecting a native same-layer component based on a component tag; and in response to a trigger operation of a webpage view, loading the native same-layer component based on the component tag, obtaining context information of the component tag and attribute information of the H5 tag, performing initialization processing on the native same-layer component based on the context information and the attribute information, and storing the initialized native same-layer component in the webpage view. And rendering the native same-layer component after the initialization processing on a screen. Same-layer rendering of webpage views on the Android device is achieved in the mode of a browser kernel such as a placeholder tag, unified access of native same-layer components is achieved in the mode of native same-layer component injection, and the same-layer rendering effect is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a same-layer rendering method, device, storage medium and electronic device. Background Art

[0002] In mobile terminal operating systems, H5 (HTML5, Hypertext Markup Language, fifth edition) pages are a commonly used display page. Due to the poor performance of H5 components in H5 browser pages, the rendering effect of H5 pages is poor.

[0003] To address the above issues, the rendering effect of the H5 page can be improved by rendering the native components on the screen in the H5 page.

[0004] In the process of implementing the present invention, it is found that there are at least the following technical problems in the prior art: the current method of optimizing H5 pages through native components has the problems of high cost and poor rendering performance. Summary of the invention

[0005] The present invention provides a same-layer rendering method, device, storage medium and electronic device, so as to reduce development and maintenance costs while ensuring the same-layer rendering effect.

[0006] According to one aspect of the present invention, a same-layer rendering method is provided, comprising:

[0007] In response to application triggering operations, native peer components are injected based on component tags;

[0008] In response to the triggering operation of the web page view, the native same-layer component is loaded based on the component tag, the context information of the component tag and the attribute information of the H5 tag are obtained, the native same-layer component is initialized based on the context information and the attribute information, and the initialized native same-layer component is rendered on the screen.

[0009] Optionally, injecting a native peer component based on a component tag comprises: calling a component injection method, injecting a native peer component based on a component tag, and associating and storing the component tag with the native peer component; wherein the native peer component inherits from the native component;

[0010] Optionally, loading the native same-layer component based on the component tag includes: obtaining the component type of the rendering node in the web page view, and determining the component tag to be loaded according to the component type; calling the component access method, querying the native same-layer component to be loaded based on the component tag, and loading the native same-layer component.

[0011] Optionally, after detecting a triggering operation of the webpage view, the method further includes:

[0012] Check whether there is a degradation event of the same-layer rendering. If so, exit the same-layer rendering;

[0013] The degradation events of the same-layer rendering include one or more of the following: the main switch of the same-layer rendering is in the off state; the communication between the web page view and the native same-layer component is in an unavailable state; the component tag of the native same-layer component is unavailable; the native same-layer component fails to load.

[0014] Optionally, the method further comprises: after loading the native peer component, setting the response state of the native peer component to the trigger operation to prohibit response;

[0015] And, during the rendering process of the web page view, a trigger operation is received through the web page view, and the native same-layer component is called to execute the trigger operation.

[0016] Optionally, the method further comprises: setting an overlay view on the native peer component, rendering a controller component of the native peer component in the overlay view;

[0017] And, receiving a trigger operation on the controller component through the overlay view, calling the native same-layer component to execute the trigger operation, so as to adjust the rendering screen of the native same-layer component.

[0018] Optionally, the method further includes: in response to an application exit operation, destroying the injected native peer component.

[0019] According to another aspect of the present invention, there is provided a same-layer rendering device, comprising:

[0020] The component injection module is used to inject native peer components based on component tags in response to application trigger operations;

[0021] A rendering module is used to respond to a triggering operation of a web page view, load the native same-layer component based on the component tag, obtain the context information of the component tag and the attribute information of the H5 tag, initialize the native same-layer component based on the context information and the attribute information, and render the initialized native same-layer component on the screen.

[0022] According to another aspect of the present invention, an electronic device is provided, the electronic device comprising:

[0023] at least one processor; and

[0024] a memory communicatively connected to the at least one processor; wherein,

[0025] The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the same-layer rendering method described in any embodiment of the present invention.

[0026] According to another aspect of the present invention, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a processor to implement the same-layer rendering method described in any embodiment of the present invention when executed.

[0027] The technical solution of the embodiment of the present invention injects native same-layer components when the application is started, obtains native same-layer components according to the needs of the web view when the web view is created, and performs same-layer rendering on the screen after initialization. Same-layer rendering of web views on Android devices is achieved by injecting native same-layer components into the browser kernel, such as placeholder tags, and unified access to native same-layer components is achieved by injecting native same-layer components, thereby improving the same-layer rendering effect.

[0028] It should be understood that the contents described in this section are not intended to identify the key or important features of the embodiments of the present invention, nor are they intended to limit the scope of the present invention. Other features of the present invention will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] 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.

[0030] Figure 1 is a flowchart of a same-layer rendering method provided by an embodiment of the present invention;

[0031] Figure 2 This is a schematic diagram of a same-layer rendering framework provided by an embodiment of the present invention;

[0032] Figure 3 It is a schematic diagram of the interaction between the browser kernel, web page view and H5 page provided by an embodiment of the present invention;

[0033] Figure 4 It is a schematic diagram of a same-layer rendering process degradation strategy provided by an embodiment of the present invention;

[0034] Figure 5 This is a schematic diagram of responses during the same-layer rendering process provided by an embodiment of the present invention;

[0035] Figure 6 is a structural schematic diagram of a same-layer rendering device provided by an embodiment of the present invention;

[0036] Figure 7 It is a structural schematic diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0037] In order to enable those skilled in the art to better understand the scheme of the present invention, the technical scheme in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings 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 ordinary technicians in this field without creative work should fall within the scope of protection of the present invention.

[0038] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0039] The embodiment of the present invention provides a same-layer rendering method applicable to the Android system, see Figure 1 , Figure 1 This is a flowchart of a same-layer rendering method provided by an embodiment of the present invention. This embodiment is applicable to the same-layer rendering of H5 pages in an Android system. The method can be executed by a same-layer rendering device. The same-layer rendering device can be implemented in the form of hardware and / or software. The same-layer rendering device can be configured in an electronic device configured with an Android system, such as a mobile phone. The electronic device is configured with a browser kernel, a web page view, a JS bridge, and a same-layer rendering file package. See Figure 2 , Figure 2It is a schematic diagram of a same-layer rendering framework provided by an embodiment of the present invention, wherein a plurality of API methods for executing the same-layer rendering logic are encapsulated in the same-layer rendering file package, and the development of the same-layer rendering function can be realized in the electronic device by configuring the same-layer rendering file package. The API methods included in the same-layer rendering file package include, but are not limited to, the component injection method registerWidget, the component acquisition method getWidget, the initialization information acquisition method getData(), the communication capability callNative() of JS calling native components, the capability callJS() of native components returning data to JS, the initialization method onSurfaceCreaded(), the component destruction method onSurfaceDestroyed(), the touch event distribution method onTouchEvent(), the label display and hiding method onVisibilityChanged(), the label removal method onDestroy(), etc. The same-layer rendering file package can set an extension interface according to the application development requirements to realize the extension of the API methods in the same-layer rendering file package.

[0040] The browser kernel, web page view and JS bridge cooperate to execute the same-layer rendering method in this solution, such as Figure 1 As shown, the method includes:

[0041] S110 , in response to an application triggering operation, injecting native same-layer components based on component tags.

[0042] S120. In response to the triggering operation of the web page view, the native same-layer component is loaded based on the component tag, the context information of the component tag and the attribute information of the H5 tag are obtained, the native same-layer component is initialized based on the context information and the attribute information, and the initialized native same-layer component is rendered on the screen.

[0043] In this embodiment, the application APP can be a small program that is parasitic on the native application and includes an H5 page, or it can also be an application program that includes an H5 page. There is no limitation on the type of application APP, and any application APP that has the same-layer rendering requirement can be used.

[0044] The trigger operation of the application can be a startup operation of the application, and the trigger operation can include but is not limited to a click operation on the application logo, an input operation of the application startup gesture, etc. When the application is started, the native same-layer component is injected locally in the application for the application's running process to call. Specifically, the component tag of the native same-layer component to be injected is obtained, and the injection operation of the native same-layer component is performed through the component tag. Among them, the native same-layer components required for each application are different, and a component tag array can be set in advance. The component tag array includes the native same-layer components required by the application during the running process, wherein the component tag here is a placeholder tag. Traverse the component tags in the component tag array to implement the injection of native same-layer components. The native same-layer component inherits from the native component and is used for same-layer rendering in the H5 page. Specifically, the native same-layer component can be a component developed by inheriting the JDHybridWidgetClient base class.

[0045] Optionally, injecting native same-layer components based on component tags includes: calling a component injection method, injecting native same-layer components based on component tags, and associating and storing the component tags and native same-layer components. Specifically, for each component tag obtained by traversing the component tag array, call registerWidget, take the component tag as an input parameter, execute the component injection method, and inject the native same-layer component corresponding to the component tag. Native same-layer components and component tags are cached in an associated form. Specifically, the component tags and native same-layer components are stored in the form of key-value pairs, where the component tag can be used as the key and the native same-layer component as the value, and are stored in the form of key-value pairs in the local cache space of the application.

[0046] Optionally, in response to an application triggering operation, a JS bridge plug-in is injected to achieve two-way communication between the H5 component and the native same-layer component.

[0047] During the running of the application, when the web view of the H5 page is triggered, the same-layer rendering logic is executed. The triggering operation of the web view webview can be a click operation on a specific control, a web page switching operation, a gesture operation to enter the H5 page, or a page creation operation caused by the startup of the application.

[0048] When the web page view is triggered, the web page view creates a DOM node, and each DOM node corresponds to a component. Native peer components are loaded according to the component type of the DOM node. Optionally, the native peer components are loaded based on the component tag, including: obtaining the component type of the rendering node in the web page view, determining the component tag to be loaded according to the component type; calling the component access method, querying the native peer component to be loaded based on the component tag, and loading the native peer component.

[0049] Among them, the component type includes one or more of the camera component, video component, canvas component, image component, map component, audio component, indicator component, input box component, etc. Different component types correspond to different native peer components. The number of DOM nodes created in the web page view can be one or more, and the component types of different DOM nodes can be different. The native peer components corresponding to each DOM node are loaded separately.

[0050] Exemplarily, the component type of the dom node is a video component, and correspondingly, the component tag of the component to be loaded is a video component tag. The component access method can be called according to the tag name of the determined component tag to read the native same-layer component from the cache. Specifically, the getWidget method can be called, and the tag name of the determined component tag (such as the embed tag name) can be used as an input parameter to query the native same-layer component corresponding to the tag name in the stored key-value pair, and load the queried native same-layer component.

[0051] The page view calls the registerEmbededWidget method, the browser kernel creates a web plug-in instance, and generates a render layer, which is used for same-layer rendering.

[0052] The web page view initializes the native same-layer component and performs same-layer rendering based on the above rendering layer. Specifically, by calling the initialization information acquisition method getData() and taking the component tag of the native same-layer component as an input parameter, the context information of the component tag and the attribute information of the H5 tag can be obtained. Executing getData() can return the context information context required for the initialization of the native same-layer component and the attribute information of all H5 tags under the component tag. The attribute information of the H5 tag includes but is not limited to the attribute information such as the width and height of the native same-layer component rendered on the screen. It can be understood that different native same-layer components have different attribute information. Taking the video component as an example, its attribute information includes but is not limited to resource address, playback mode, component display mode, etc.; taking the camera component as an example, its attribute information includes but is not limited to application mode, camera orientation, frame data size, etc.

[0053] Based on the above context information and the attribute information of the H5 tag, the initialization method onSurfaceCreaded() is called to initialize the native same-layer component. After the initialization is completed, the screen of the native same-layer component is drawn to the layer texture bound to the rendering layer. When the notification of the completion of the update of the layer texture is received, the rendering layer is rendered on the screen to achieve the same-layer rendering of the native same-layer component. For example, see Figure 3 , Figure 3It is a schematic diagram of the interaction between the browser kernel, web page view and H5 page provided in an embodiment of the present invention.

[0054] The technical solution provided in this embodiment injects native same-layer components when the application is started, obtains native same-layer components according to the needs of the web view when the web view is created, and performs same-layer rendering on the screen after initialization. Same-layer rendering of web views on Android devices is achieved by injecting native same-layer components into the browser kernel, such as placeholder tags, and unified access to native same-layer components is achieved by injecting native same-layer components, which improves the same-layer rendering effect and does not invade the application.

[0055] On the basis of the above embodiments, during the same-layer rendering process after the trigger operation of the web page view is detected, it is detected whether there is a degradation event of the same-layer rendering. If so, the same-layer rendering is exited. In this embodiment, for the rendering of the H5 page, two rendering logics are set, including the same-layer rendering logic and the H5 tag rendering logic. The priority of the same-layer rendering logic is higher than the priority of the H5 tag rendering logic, that is, the same-layer rendering logic is executed first. A degradation strategy is pre-set. During the execution of the same-layer rendering logic, the degradation event of the same-layer rendering is detected. In the event of a degradation event, the same-layer rendering process is exited, and the page rendering is performed based on the H5 tag rendering logic to ensure smooth rendering of the page.

[0056] Optionally, the degradation events of same-layer rendering include one or more of the following: the main switch of same-layer rendering is in the off state; the communication between the web page view and the native same-layer component is in an unavailable state; the component tag of the native same-layer component is unavailable; the native same-layer component fails to load.

[0057] The switch state of the same-layer rendering master switch can be set through a visual interface, specifically, an interactive interface is displayed, the interactive interface includes a state control of the same-layer rendering master switch, and the switch state of the same-layer rendering master switch is set in response to the setting operation of the state control. When the creation operation of the web page view is detected, the switch state of the same-layer rendering master switch is read. If the same-layer rendering master switch is in the on state, the same-layer rendering is continued. If the same-layer rendering master switch is in the off state, the same-layer rendering is exited, and the page rendering is performed based on the H5 tag rendering logic.

[0058] When the same-layer rendering master switch is turned on, the web page view reads the component tag in the component tag array, and loads the native same-layer component based on the component tag after reading the component tag. When reading the component tag, it can be determined whether the component tag is available, that is, whether the corresponding native same-layer component can be queried through the component tag. If the component tag is unavailable, it means that the native same-layer component cannot be loaded through the component tag, and an exception occurs in the same-layer rendering, and the same-layer rendering is exited, and the page is rendered based on the H5 tag rendering logic.

[0059] When the same-layer rendering master switch is on, the H5 page calls the JS bridge to verify whether the status of the JS bridge can realize the communication between the H5 page and the native same-layer components. If the JS bridge is unavailable, the same-layer rendering is exited and the page is rendered based on the H5 tag rendering logic.

[0060] When the JS bridge is available and the component tag is available, the native same-layer component is loaded to determine whether the native same-layer component is loaded successfully. If the native same-layer component fails to load, the same-layer rendering cannot be performed, and the same-layer rendering is exited. The page is rendered based on the H5 tag rendering logic. If the native same-layer component is loaded successfully, the same-layer rendering is performed through the native same-layer component.

[0061] By setting the above degradation strategy and detecting degradation events during the rendering process of the H5 page, the rendering logic is adjusted in time when degradation events occur to ensure smooth rendering of the page. For example, see Figure 4 , Figure 4 It is a schematic diagram of a same-layer rendering process degradation strategy provided by an embodiment of the present invention.

[0062] Based on the above embodiments, in the case of same-layer rendering, there is a consumption conflict between the native same-layer component and the web page view for the external trigger operation, and at the same time, there is inconsistency in the response mode of the native same-layer component and the web page view to the external trigger operation, resulting in a response conflict. Among them, the external trigger operation can be a gesture operation, such as but not limited to a click operation, a sliding operation, a long press operation, etc. of an external input.

[0063] To address the above problem, after loading the native peer component, the response state of the native peer component to the trigger operation is set to prohibited response. When the native peer component is set to prohibited from responding to the trigger operation, it is only responsible for the same-layer rendering, and the web page view detects and responds to the trigger operation, thereby avoiding the problem of conflicting responses to the trigger operation between the web page view and the native peer component.

[0064] During the rendering process of the web page view, a trigger operation is received through the web page view, and the native same-layer component is called to perform the trigger operation. When the web page view detects a trigger operation, it calls the touch event distribution method onTouchEvent() for processing, determines the type of the trigger operation, and calls the native same-layer component to perform the trigger operation according to the type of the trigger operation. Specifically, the native same-layer component is called by calling the callNative() method to respond to the trigger operation. For pages with multiple component tags, a unique tag id can be specified for the component tag, such as the className of an HTML tag. The native same-layer component calls the specific callNative() event response through the tag id.

[0065] For some native same-layer components that have multiple types of trigger events, the controller component of the native same-layer component needs to be rendered to respond to multiple trigger events. In response to the above problems, an overlay view is set on the native same-layer component, and the controller component of the native same-layer component is rendered in the overlay view. Taking the video component as an example, the controller component of the video component includes but is not limited to a pause component, a play component, a rotation component, a video switching component, etc. Taking the audio component as an example, the controller component of the audio component includes but is not limited to a pause component, a play component, a loop playback component, an audio switching component, etc.

[0066] For example, see Figure 5 , Figure 5 Schematic diagram of response during the same layer rendering process provided by an embodiment of the present invention. The overlay view has the same width and height as the native same layer component, the controller component is rendered in the overlay view, and the overlay view can receive a trigger operation on any controller component.

[0067] The trigger operation on the controller component is received through the overlay view, and the native same-layer component is called to perform the trigger operation to adjust the rendering screen of the native same-layer component. Specifically, the native same-layer component is called by calling the callNative() method to respond to the trigger operation. Exemplarily, in the case of detecting a trigger operation on the pause component, the native same-layer component is called by the callNative() method to respond to the pause of playback.

[0068] It should be noted that during the response process of the native same-layer component, the native same-layer component can obtain processing parameters from the overlay view. Specifically, the overlay view needs to obtain processing parameters through the callJS() method, and the trigger operation is responded to based on the obtained processing parameters. For example, for the video playback progress adjustment operation, the target adjustment progress needs to be obtained during the response process of the native same-layer component, and the target adjustment progress is obtained from the overlay view through the callJS() method to adjust the video playback progress.

[0069] By setting the response strategy of native same-layer components and web page views to external trigger operations, a low-cost access mode for response time is implemented through the JS bridge method, avoiding response conflicts and response exceptions.

[0070] Based on the above embodiment, the method further includes: in response to the application exit operation, destroying the injected native same-layer component. When the application APP exits, the injected native same-layer component is destroyed by calling the component destruction method onSurfaceDestroyed() method, thereby reducing the occupation of cache resources.

[0071] Figure 6 Schematic diagram of the structure of a same-layer rendering device provided by an embodiment of the present invention. Figure 6 As shown, the device comprises:

[0072] A component injection module 210 is used to inject native peer components based on component tags in response to an application trigger operation;

[0073] The rendering module 220 is used to respond to the triggering operation of the web page view, load the native same-layer component based on the component tag, obtain the context information of the component tag and the attribute information of the H5 tag, initialize the native same-layer component based on the context information and the attribute information, and render the initialized native same-layer component on the screen.

[0074] The technical solution of this embodiment injects native same-layer components when the application is started, obtains native same-layer components according to the needs of the web view when the web view is created, and performs same-layer rendering on the screen after initialization. Same-layer rendering of web views on Android devices is achieved by injecting native same-layer components into the browser kernel, such as placeholder tags, and unified access to native same-layer components is achieved by injecting native same-layer components, thereby improving the same-layer rendering effect.

[0075] On the basis of the above embodiment, optionally, the component injection module 210 is used to: call the component injection method, inject the native same-layer component based on the component tag, and store the component tag and the native same-layer component in association; wherein the native same-layer component inherits from the native component.

[0076] Based on the above embodiment, optionally, the rendering module 220 is used to: obtain the component type of the rendering node in the web page view, and determine the component tag to be loaded according to the component type; call the component access method, query the native same-layer component to be loaded based on the component tag, and load the native same-layer component.

[0077] Based on the above embodiment, optionally, the device further includes a degradation processing module, which is used to detect whether there is a degradation event of same-layer rendering, and if so, exit the same-layer rendering;

[0078] The degradation events of the same layer rendering include one or more of the following:

[0079] The main switch of same-layer rendering is turned off;

[0080] The communication between the web page view and the native peer component is in an unavailable state;

[0081] The component tag of the native peer component is unavailable;

[0082] The native peer component failed to load.

[0083] On the basis of the above embodiment, optionally, the device further comprises a trigger operation processing module, which is used to set the response state of the native peer component to the trigger operation to prohibit response after loading the native peer component;

[0084] And, during the rendering process of the web page view, a trigger operation is received through the web page view, and the native same-layer component is called to execute the trigger operation.

[0085] Optionally, the trigger operation processing module is further used to: set an overlay view on the native peer component, and render the controller component of the native peer component in the overlay view;

[0086] And, receiving a trigger operation on the controller component through the overlay view, calling the native same-layer component to execute the trigger operation to adjust the rendering screen of the native same-layer component.

[0087] On the basis of the above embodiment, optionally, the device further includes a component destruction module, which is used to destroy the injected native same-layer component in response to an application exit operation.

[0088] The same-layer rendering device provided in the embodiment of the present invention can execute the same-layer rendering method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the execution method.

[0089] Figure 71 is a schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. The electronic device 10 is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices (such as helmets, glasses, watches, etc.) and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present invention described and / or required herein.

[0090] like Figure 7 As shown, the electronic device 10 includes at least one processor 11, and a memory connected to the at least one processor 11, such as a read-only memory (ROM) 12, a random access memory (RAM) 13, etc., wherein the memory stores a computer program that can be executed by at least one processor, and the processor 11 can perform various appropriate actions and processes according to the computer program stored in the read-only memory (ROM) 12 or the computer program loaded from the storage unit 18 to the random access memory (RAM) 13. In the RAM 13, various programs and data required for the operation of the electronic device 10 can also be stored. The processor 11, the ROM 12, and the RAM 13 are connected to each other through a bus 14. An input / output (I / O) interface 15 is also connected to the bus 14.

[0091] A number of components in the electronic device 10 are connected to the I / O interface 15, including: an input unit 16, such as a keyboard, a mouse, etc.; an output unit 17, such as various types of displays, speakers, etc.; a storage unit 18, such as a disk, an optical disk, etc.; and a communication unit 19, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 19 allows the electronic device 10 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0092] The processor 11 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, etc. The processor 11 executes the various methods and processes described above, such as the same-layer rendering method.

[0093] In some embodiments, the same-layer rendering method may be implemented as a computer program, which is tangibly contained in a computer-readable storage medium, such as a storage unit 18. In some embodiments, part or all of the computer program may be loaded and / or installed on the electronic device 10 via the ROM 12 and / or the communication unit 19. When the computer program is loaded into the RAM 13 and executed by the processor 11, one or more steps of the same-layer rendering method described above may be performed. Alternatively, in other embodiments, the processor 11 may be configured to perform the same-layer rendering method in any other appropriate manner (e.g., by means of firmware).

[0094] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0095] The computer program for implementing the same-layer rendering method of the present invention can be written in any combination of one or more programming languages. These computer programs can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that when the computer program is executed by the processor, the functions / operations specified in the flowchart and / or block diagram are implemented. The computer program can be executed entirely on the machine, partially on the machine, partially on the machine as a stand-alone software package and partially on a remote machine, or entirely on a remote machine or server.

[0096] An embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a processor to execute a same-layer rendering method, the method comprising:

[0097] In response to an application trigger operation, a native same-layer component is injected based on a component tag; in response to a web page view trigger operation, the native same-layer component is loaded based on the component tag, context information of the component tag and attribute information of the H5 tag are obtained, the native same-layer component is initialized based on the context information and the attribute information, and the initialized native same-layer component is rendered on the screen.

[0098] In the context of the present invention, a computer-readable storage medium may be a tangible medium that may contain or store a computer program for use by or in combination with an instruction execution system, device or equipment. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or equipment, or any suitable combination of the foregoing. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer 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 foregoing.

[0099] To provide interaction with a user, the systems and techniques described herein may be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or trackball) through which the user can provide input to the electronic device. Other types of devices may also be used to provide interaction with the user; for example, the feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form (including acoustic input, voice input, or tactile input).

[0100] The systems and techniques described herein may be implemented in a computing system that includes backend components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes frontend components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such backend components, middleware components, or frontend components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), a blockchain network, and the Internet.

[0101] A computing system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The client and server relationship is generated by computer programs running on the corresponding computers and having a client-server relationship with each other. The server may be a cloud server, also known as a cloud computing server or cloud host, which is a host product in the cloud computing service system to solve the defects of difficult management and weak business scalability in traditional physical hosts and VPS services.

[0102] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps described in the present invention can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solution of the present invention can be achieved, and this document does not limit this.

[0103] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A same-layer rendering method, characterized in that: include: In response to application triggering operations, native peer components are injected based on component tags; In response to the triggering operation of the web page view, the native same-layer component is loaded based on the component tag, the context information of the component tag and the attribute information of the H5 tag are obtained, the native same-layer component is initialized based on the context information and the attribute information, and the initialized native same-layer component is rendered on the screen.

2. The method according to claim 1, characterized in that The component tag-based injection of native same-layer components includes: Call the component injection method, inject the native peer component based on the component tag, and store the component tag and the native peer component in association; wherein the native peer component inherits from the native component.

3. The method according to claim 1, characterized in that The loading of the native same-layer component based on the component tag includes: Obtaining a component type of a rendering node in the webpage view, and determining a component tag to be loaded according to the component type; The component access method is called, the native peer component to be loaded is queried based on the component tag, and the native peer component is loaded.

4. The method according to claim 1, characterized in that: After detecting the triggering operation of the webpage view, the method further includes: Check whether there is a degradation event of the same-layer rendering. If so, exit the same-layer rendering; The degradation events of the same layer rendering include one or more of the following: The main switch of same-layer rendering is turned off; The communication between the web page view and the native peer component is in an unavailable state; The component tag of the native peer component is unavailable; The native peer component failed to load.

5. The method according to claim 1, characterized in that The method further comprises: After loading the native peer component, setting the response state of the native peer component to the trigger operation to prohibit response; And, during the rendering process of the web page view, a trigger operation is received through the web page view, and the native same-layer component is called to execute the trigger operation.

6. The method according to claim 1, characterized in that The method further comprises: Setting an overlay view on the native peer component, rendering the controller component of the native peer component in the overlay view; And, receiving a trigger operation on the controller component through the overlay view, calling the native same-layer component to execute the trigger operation, so as to adjust the rendering screen of the native same-layer component.

7. The method according to claim 1, characterized in that The method further comprises: In response to an application exit operation, the injected native peer component is destroyed.

8. A same-layer rendering device, characterized in that: include: The component injection module is used to inject native peer components based on component tags in response to application trigger operations; A rendering module is used to respond to a triggering operation of a web page view, load the native same-layer component based on the component tag, obtain the context information of the component tag and the attribute information of the H5 tag, initialize the native same-layer component based on the context information and the attribute information, and render the initialized native same-layer component on the screen.

9. An electronic device, characterized in that: The electronic device comprises: at least one processor; and a memory communicatively connected to the at least one processor; wherein, The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the same-layer rendering method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a processor to implement the same-layer rendering method according to any one of claims 1 to 7 when executed.

Images