Global control method, device and equipment for cross-platform page and medium

Abstract

The application relates to the technical field of interactive control, and specifically discloses a global control method and device for cross-platform pages, equipment and a medium. The method comprises the following steps: in response to a creation request of a target page, creating a native page instance corresponding to the target page through a native container layer, and creating a cross-platform page instance corresponding to the target page through a cross-platform rendering layer; creating a unique page identifier for the target page, and creating a page-level communication channel based on the unique page identifier; the life cycle of the page-level communication channel is bound to the life cycle of the target page; based on the unique page identifier, the page-level communication channel is associated with the native page instance and the cross-platform page instance respectively, so that the native page instance and the cross-platform page instance control each other based on the page-level communication channel, and an interactive framework for realizing the control of the native page instance and the cross-platform page instance by the page-level communication channel is constructed.

Description

Technical Field

[0001] This disclosure generally relates to the field of interactive control technology, and specifically to a global control method, apparatus, device, and medium for cross-platform pages. Background Technology

[0002] In the field of mobile development, native development faces challenges such as high maintenance costs and low iteration efficiency across multiple platforms. Related technologies typically employ cross-platform techniques to achieve a completely consistent visual effect and interactive experience across different native system platforms. Simultaneously, enabling a single codebase to run on different native system platforms effectively reduces development and maintenance costs. However, in these technologies, to ensure a system-level user experience, basic page configurations (such as search boxes, input boxes, and navigation bars) are implemented by the native system platform. The cross-platform rendering layer communicates with the native system through multiple communication channels established piecemeal by function, resulting in insufficient control over the native page by the cross-platform rendering layer. This leads to poor interaction between the two, such as the inability to control keyboard behavior from the cross-platform rendering layer. Summary of the Invention

[0003] In view of the above-mentioned defects or deficiencies in the prior art, it is desirable to provide a global control method, device, equipment and medium for cross-platform pages, which effectively constructs an interactive framework for controlling native page instances and cross-platform page instances through page-level communication channels, and solves the problems of scattered cross-end communication and difficulty in unified reuse of multiple technology stacks in the existing hybrid architecture.

[0004] In a first aspect, embodiments of this application provide a global control method for cross-platform pages, including: In response to the creation request of the target page, a native page instance corresponding to the target page is created through the native container layer, and a cross-platform page instance corresponding to the target page is created through the cross-platform rendering layer; A unique page identifier is created for the target page, and a page-level communication channel is created based on the unique page identifier; the lifecycle of the page-level communication channel is bound to the lifecycle of the target page; Based on the unique page identifier, the page-level communication channel is associated with the native page instance and the cross-platform page instance respectively, so that the native page instance and the cross-platform page instance can control each other based on the page-level communication channel, which is used to realize communication between the native page instance and the cross-platform page instance.

[0005] Secondly, embodiments of this application provide a global control device for cross-platform pages, including: The page creation module is used to respond to the creation request of the target page by creating a native page instance corresponding to the target page through the native container layer, and creating a cross-platform page instance corresponding to the target page through the cross-platform rendering layer. The channel creation module is used to create a unique page identifier for the target page and create a page-level communication channel based on the unique page identifier; the lifecycle of the page-level communication channel is bound to the lifecycle of the target page. The channel association module is used to associate the page-level communication channel with the native page instance and the cross-platform page instance respectively based on the unique page identifier, so that the native page instance and the cross-platform page instance can control each other based on the page-level communication channel, and the page-level communication channel is used for communication between the native page instance and the cross-platform page instance.

[0006] Thirdly, embodiments of this application provide an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described in embodiments of this application.

[0007] Fourthly, embodiments of this application provide a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described in embodiments of this application.

[0008] Fifthly, embodiments of this application provide a computer program product, including a computer program, characterized in that, when the computer program is executed by a processor, it implements the method described in embodiments of this application.

[0009] The global control method, apparatus, device, and medium for cross-platform pages provided in this application, in response to a target page creation request, create a native page instance and a cross-platform page instance corresponding to the target page in the native container layer and the cross-platform rendering layer, respectively. Then, a unique page identifier is created for the target page, and a page-level communication channel is created based on the unique page identifier. Subsequently, the page-level communication channel is associated with the native page instance and the cross-platform page instance based on the unique page identifier, so that the native page instance and the cross-platform page instance can control each other based on the page-level communication channel. This effectively constructs an interactive framework for realizing mutual control between native page instances and cross-platform page instances through page-level communication channels. While ensuring the advantages of native system capabilities, it solves the problems of scattered cross-terminal communication and difficulty in unified reuse of multiple technology stacks in existing hybrid architectures.

[0010] Additional aspects and advantages of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. Attached Figure Description

[0011] Other features, objects, and advantages of this application will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings: Figure 1 A flowchart illustrating a global control method for cross-platform pages provided in an embodiment of this application is shown. Figure 2 A schematic diagram of the system architecture of a global control method for cross-platform pages provided in an embodiment of this application is shown; Figure 3 A flowchart illustrating a global control method for cross-platform pages according to another embodiment of this application is shown; Figure 4 A flowchart illustrating a global control method for cross-platform pages according to another embodiment of this application is shown; Figure 5 A flowchart illustrating a global control method for cross-platform pages according to another embodiment of this application is shown; Figure 6 A flowchart illustrating a global control method for cross-platform pages according to another embodiment of this application is shown; Figure 7 A schematic diagram of the structure of a global control device for cross-platform pages provided in an embodiment of this application is shown; Figure 8 A schematic diagram of the structure of a global control device for cross-platform pages provided in another embodiment of this application is shown; Figure 9 A schematic diagram of the structure of a computer system suitable for implementing an electronic device or server according to embodiments of this application is shown. Detailed Implementation

[0012] The present application will now be described in further detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and not intended to limit it. Furthermore, it should be noted that, for ease of description, only the parts relevant to the invention are shown in the accompanying drawings.

[0013] It should be noted that, unless otherwise specified, the embodiments and features described in this application can be combined with each other. This application will now be described in detail with reference to the accompanying drawings and embodiments.

[0014] To further illustrate the technical solutions provided in the embodiments of this application, a detailed description is provided below in conjunction with the accompanying drawings and specific implementation methods. Although the embodiments of this application provide method operation instruction steps as shown in the following embodiments or drawings, the method may include more or fewer operation instruction steps based on conventional or non-creative effort. In steps where there is no logically necessary causal relationship, the execution order of these steps is not limited to the execution order provided in the embodiments of this application. In actual processing or when the device executes the method, it may be executed sequentially or in parallel according to the method shown in the embodiments or drawings.

[0015] It should be noted that the acquisition or use of data in the embodiments of this application requires the user's consent. The relevant data can only be obtained after the user's authorization and permission, and the acquisition or use of the data complies with the laws and regulations of the relevant regions.

[0016] Please refer to Figure 1 , Figure 1 A flowchart illustrating a global control method for cross-platform pages according to an embodiment of this application is shown. Figure 1 As shown, the method includes: Step 101: In response to the creation request of the target page, create a native page instance corresponding to the target page through the native container layer, and create a cross-platform page instance corresponding to the target page through the cross-platform rendering layer.

[0017] It should be noted that the target page provided in this application embodiment is a page jointly provided by a hybrid architecture consisting of a native container layer and a cross-platform rendering layer.

[0018] The native container layer is used to create a page container for the target page and to create a native page instance through the page container. The native page instance can be used to render page elements in the basic UI area based on the page configuration of the target page, as well as to receive and report interactive operations or corresponding operation events. The basic UI area includes, but is not limited to, the UI area corresponding to the page framework such as the search box, status bar, and navigation bar in the target page. Interactive operations include, but are not limited to, content input operations, scrolling operations, and click operations.

[0019] The cross-platform rendering layer uses cross-platform rendering technology to create cross-platform page instances. These instances are used to render page elements in the content UI area and to receive and process business logic events. The content UI area includes, but is not limited to, a UI area that is distinct from the basic UI area in the native view layer and is used to display specific business content information.

[0020] Specifically, when a user triggers a certain action, such as clicking a page entry or a page navigation link, the target page is created. After receiving the action to create the target page, the native system can create a new page container to display the target page through the native container layer, and create a native page instance corresponding to the target page. Based on the page configuration of the target page, the native page instance renders the page elements of the basic UI area in the view of the page container. At the same time, a cross-platform page instance is created through the cross-platform rendering layer, and the page elements of the content UI area are rendered in the view of the page container of the cross-platform page instance to obtain the target page.

[0021] The native system can be the operating system used to run the target page, such as Android or iOS. Cross-platform rendering can be achieved through cross-platform application development frameworks such as Flutter and React Native; this application does not specify any particular cross-platform application development framework.

[0022] Step 102: Create a unique page identifier for the target page, and create a page-level communication channel based on the unique page identifier; the lifecycle of the page-level communication channel is bound to the lifecycle of the target page.

[0023] It should be noted that the unique page identifier serves as the identity identifier for the target page. It should be understood that after a unique page identifier is created for the target page, both the native page instance and the cross-platform page instance directly obtain this unique page identifier; that is, both the native page instance and the cross-platform page instance use the target page's unique page identifier as their own identification information. The unique page identifier for the target page can be generated using an auto-incrementing integer algorithm or a Universally Unique Identifier (UUID) generation method.

[0024] Furthermore, after creating a unique page identifier for the target page, a page-level communication channel is created based on this unique page identifier. This page-level communication channel is used to enable communication between native page instances and cross-platform page instances. Specifically, the page-level communication channel is a page-based communication channel; that is, all communication between the native page instance and the cross-platform page instance of the target page is achieved through the page-level communication channel, including but not limited to keyboard control communication, page configuration communication, and event tracking configuration communication.

[0025] It should be understood that the page-level communication channel is created based on the unique page identifier of the target page, and the lifecycle of the page-level communication channel is further bound to the lifecycle of the target page during the creation process.

[0026] It should also be understood that, compared to the commonly used MethodChannel in existing technologies (taking Flutter as an example), which provides multiple communication channels such as BasicMessageChannel, MethodChannel, EventChannel, and OptionalMethodChannel to achieve communication between native page instances and cross-platform page instances, the embodiments of this application can achieve communication between native page instances and cross-platform page instances through a page-level communication channel. This effectively avoids problems such as scattered interfaces and difficulty in tracking state in multi-channel solutions, and greatly simplifies debugging and evolution. At the same time, by binding the lifecycle of the page-level communication channel with the lifecycle of the target page, the channel state of the page-level communication channel can follow the page state of the target page. For example, when the user returns or the operating system triggers the closing and recycling of the target page, the page-level communication channel is also closed and deregistered at the same time, effectively solving problems such as communication channel state disorder, callback failure, and resource leakage.

[0027] It should also be noted that the page-level communication channel does not depend on any specific cross-platform application development framework. This means that any cross-platform application development framework capable of calling general method channels can utilize the page-level communication channel to communicate with the native container layer. Therefore, it can provide page-level communication channels for various cross-platform application development frameworks such as Flutter and React Native, significantly reducing the transformation costs of integrating different technology stacks and providing scalability and long-term maintainability to the native architecture.

[0028] Step 103: Based on the unique page identifier, associate the page-level communication channel with the native page instance and the cross-platform instance respectively, so that the native page instance and the cross-platform page instance can control each other based on the page-level communication channel. The page-level communication channel is used to realize communication between the native page instance and the cross-platform page instance.

[0029] Specifically, based on a unique page identifier, a page-level communication channel is attached to both native page instances and cross-platform page instances, enabling bidirectional communication between them and thus achieving mutual control between the native page instances and cross-platform page instances based on the page-level communication channel.

[0030] Therefore, the global control method for cross-platform pages provided in this application, in response to the creation request of the target page, creates a native page instance and a cross-platform page instance corresponding to the target page in the native container layer and the cross-platform rendering layer, respectively. Then, it creates a unique page identifier for the target page and creates a page-level communication channel based on the unique page identifier. Then, it associates the page-level communication channel with the native page instance and the cross-platform page instance based on the unique page identifier, so that the native page instance and the cross-platform page instance can control each other based on the page-level communication channel. This effectively constructs an interactive framework for realizing mutual control between native page instances and cross-platform page instances through page-level communication channels. While ensuring the advantages of native system capabilities, it solves the problems of scattered cross-terminal communication and difficulty in unified reuse of multiple technology stacks in existing hybrid architectures.

[0031] In one specific embodiment, the native system can be configured with multiple execution modules to perform corresponding functions to achieve the above solution. Specifically, such as... Figure 2 As shown, the native container layer includes the page management module (PageManager), the channel management module (ChannelManager), the page control module (NativeUIController), and the communication adaptation module (NativeBridgeAdapter). The cross-platform rendering layer includes the framework communication adaptation module (FrameworkBridgeAdapter), the channel proxy module (ChannelClient), and the page logic and rendering module (CrossPageView).

[0032] The PageManage module is used to create, destroy, and notify native page instances within the native container layer.

[0033] The ChannelManager module is used to create and maintain a unique page-level communication channel (PageSettingChannel) for each page.

[0034] The page control module (NativeUIController) is used to uniformly encapsulate the control capabilities of input controls, system keyboard, status bar, navigation bar, etc. of native page instances.

[0035] The communication adapter module (NativeBridgeAdapter) is used to implement message encoding, decoding and forwarding based on the underlying method call channel (such as MethodChannel).

[0036] The page logic and rendering module (CrossPageView) is used to handle business logic and UI rendering.

[0037] The ChannelClient module provides a unified interface for cross-platform page instances to invoke the PageSettingChannel protocol.

[0038] The FrameworkBridgeAdapter module is used to interface with the communication mechanisms of cross-platform application development frameworks such as Flutter and / or ReactNative, and to distribute messages to the ChannelClient module.

[0039] For example, the above module is implemented through, as follows Figure 3 The page creation process shown demonstrates how the target page is created. Specifically, as follows... Figure 3 As shown: Step 301: Respond to the user's action of creating the target page.

[0040] For example, when a user triggers a navigation action (clicking an entry point, redirecting to a link, etc.), the target page is opened.

[0041] Step 302: Create a native page instance by calling the native system API interface through the PageManage module (PageManger).

[0042] Step 303: Generate a unique page identifier PageID for the target page through the PageManage module (PageManager) and store it in the target page context.

[0043] Step 304: The Channel Management module (ChannelManager) creates a page-level communication channel (PageSettingChannel) corresponding to the target page using the unique page identifier PageID as the key value.

[0044] The channel information of the created page-level communication channel includes message queues, callback registry, and connection handles to the communication adapter module (NativeBridgeAdapter).

[0045] Step 305: The page control module (NativeUIController) initializes the page elements of the basic UI area in the native page instance according to the configuration information of the target page.

[0046] The elements on this page include, but are not limited to, search boxes, input boxes, and navigation bars.

[0047] Step 306: Associate the page-level communication channel with the unique page identifier through the native container layer's communication adapter module (NativeBridgeAdapter).

[0048] For example, the channel name for a named page-level communication channel is: app / page / <pageid> / settings.

[0049] Step 307: The cross-platform rendering layer creates a cross-platform page instance using the page logic and rendering module (CrossPageView) based on the routing information of the page-level communication channel, so as to render the page elements of the content UI area in the cross-platform page instance.

[0050] The page elements include, but are not limited to, business content information. For example, if the target page is a search results page, the page elements include, but are not limited to, information about multiple search results. Or, if the target page is a stock details page, the page elements include, but are not limited to, market information related to Google, such as candlestick charts.

[0051] Step 308: The framework communication adapter module (FrameworkBridgeAdapter) of the cross-platform rendering layer connects to the corresponding page-level communication channel (PageSettingChannel) based on the unique page identifier.

[0052] Step 309: The Channel Proxy module (ChannelClient) is initialized and exposes the page-level call interface.

[0053] Understandably, during the initialization process of the channel proxy module, native page instances and cross-platform page instances can register their exposed interfaces with the channel proxy module. When a native page instance or a cross-platform page instance needs to call the other party to implement certain logic, the native page instance or the cross-platform page instance can initiate a call request through the channel proxy module (ChannelClient) to implement the interface that implements the specific logic. The call request is then forwarded to the corresponding page instance through the page-level communication channel to implement the corresponding logic.

[0054] Step 310: The target page enters an interactive state.

[0055] In other words, native page instances and cross-platform page instances of the target page can communicate and control each other based on page-level communication channels.

[0056] Therefore, this application embodiment utilizes a unique page identifier to establish a one-to-one correspondence between page-level communication channels and native page instances and cross-platform page instances, effectively solving problems such as a large number of channels, unclear naming and responsibility boundaries, and scattered interfaces in the prior art, and avoiding communication chaos caused by multi-channel communication. Simultaneously, by using the PageManager module to drive the creation of page-level communication channels, the lifecycle of page-level communication channels is bound to the lifecycle of the target page.

[0057] It should be understood that the lifecycle of the page-level communication channel is bound to the lifecycle of the target page not only because the page-level communication channel is created based on the unique page identifier of the target page, but also because the cancellation process of the target page drives the destruction of the page-level communication channel, thereby achieving controllable communication channel status and effective release of memory resources.

[0058] In one embodiment, in response to the revocation request of the target page, a resource cleanup callback is triggered through the native page instance; in response to the resource cleanup callback triggered by the native page instance, a page-level communication channel destruction callback is triggered based on the unique page identifier corresponding to the target page; and the cross-platform rendering layer is notified to release the resources of the cross-platform page instance through a lifecycle message instruction.

[0059] In other words, when the native container layer receives a user's undo request for the target page, such as a return command or a close command, the native container layer triggers a resource cleanup callback.

[0060] Taking the native Android operating system as an example, the resource cleanup callback can be the `onDestroy` callback. It should be understood that the main function of the `onDestroy` callback is to perform resource cleanup, that is, to release resources that are no longer needed by triggering the `onDestroy` callback, thus avoiding memory leaks and other potential problems. Then, in response to the native page instance triggering the resource cleanup callback, based on the unique page identifier corresponding to the target page, a page-level communication channel destruction callback is triggered. That is, during the destruction process of the target page, the page-level communication channels bound to the target page's lifecycle are cleaned up. This ensures that the page-level communication channels are triggered for cleanup as the target page's lifecycle (Activity) is destroyed, thereby achieving page-level communication channel cleanup, avoiding memory leaks, and improving the performance and stability of the target page based on cross-platform rendering. Finally, lifecycle message instructions are used to notify the cross-platform rendering layer to release the resources of the cross-platform page instance, including but not limited to releasing cross-platform rendering layer release event listeners, asynchronous tasks, views, and other resources. This further ensures that the resources of the target page destroyed based on the cross-platform rendering framework can be effectively cleaned up, avoiding memory leaks, and improving the performance and stability of the target page destruction based on the cross-platform rendering framework.

[0061] In one specific embodiment, such as Figure 4 As shown, Step 401: Receive a cancellation request from the user to return to the page or from the system to recycle the page.

[0062] Step 402: Trigger the onDestroy callback through the native page instance.

[0063] Step 403: The Page Manager module drives the Channel Manager module to release the page-level communication channel (PageSettingChannel) corresponding to the unique page identifier (PageID).

[0064] Step 404: The PageSettingChannel closes the underlying method channel and cancels all callbacks.

[0065] Step 405: Release basic page configuration resources through the page control module (NativeUIController), including but not limited to releasing native input controls and resetting the status bar / navigation bar.

[0066] Step 406: Notify the cross-platform rendering layer of the onPageDestroy callback via a lifecycle message.

[0067] Step 407: The Channel Proxy module (ChannelClient) unregisters its listener and releases the call.

[0068] Step 408: The page logic and rendering module (CrossPageView) releases the business logic and page rendering of the cross-platform page instance.

[0069] Step 409 confirms that neither the native page instance nor the cross-platform page instance holds a unique page identifier and a channel object reference.

[0070] It should be understood that step 409 performs a secondary check on the target page to ensure that resources are released correctly and to prevent memory leaks.

[0071] Therefore, this application's embodiments introduce a page-level communication channel with "page" as the smallest unit, which binds the communication channel to the lifecycle of the page. That is, the creation and destruction of the communication channel are tied to the page. This not only solves the problem of inconvenient management of the large number of communication channels and scattered interfaces in the traditional cross-platform framework, but also solves the problems of resource leakage, callback failure, and state disorder caused by the large number of communication channels and scattered interfaces in the traditional cross-platform framework.

[0072] Furthermore, the page-level communication channel can meet the interaction requirements for mutual control between native page instances and cross-platform page instances, that is, the native page instance controls the cross-platform page instance and the cross-platform page instance controls the native page instance.

[0073] In one feasible embodiment, the native page instance and the cross-platform page instance control each other based on a page-level communication channel, including: in response to a user's original operation on the target page, identifying the original operation as a first type of operation applied to a corresponding area of ​​the cross-platform page instance; the first type of operation is an operation of a specific type applied to a specific area previously registered by the cross-platform page instance; passing the original operation as the first type of operation through the native page instance to the cross-platform page instance; and responding to the first type of operation through the cross-platform page instance.

[0074] Specifically, the native UIController module in the original container layer can receive the user's original operations on the target page. These operations include, but are not limited to, clicks, swipes, text input, and drags. In response to the user's operation on the target page, it can first be identified whether the operation is a first-type operation.

[0075] The cross-platform page instance refers to the content UI area. The first type of operation refers to the operation whose response object is a cross-platform page instance. This first type of operation can be a preset specific area within the content UI area or an operation of a specific operation type.

[0076] Specifically, whether an original operation is a first-type operation can be determined by the area in which it is applied and the operation type. For example, it can be determined whether the area in which the original operation is applied is a specific area where the cross-platform page instance was previously registered and whether the original operation is a preset operation type. If the area in which the original operation is applied is a specific area where the cross-platform page instance was previously registered and the operation is a preset operation type, then the original operation is determined to be a first-type operation; otherwise, the original operation is determined not to be a first-type operation.

[0077] Furthermore, the operation information of the first type of operation can be sent and registered to the native page instance through a cross-platform page. Specifically, this includes: obtaining the operation control information of the first type of operation, which includes the applicable area range of the first type of operation and the operation type of the first type of operation; and sending the operation control information to the native page instance using a page-level communication channel, so that the native page instance can identify the operation as the first type of operation based on the operation control information.

[0078] It should be noted that, in this embodiment of the application, the operation applied by the user on the target page needs to be ignored by the native page instance and responded to by the cross-platform page instance. In this case, the cross-platform page instance needs to register the operations that need to be directly processed (such as the first type of operation) in advance with the native page instance. Then, when the user applies a specific operation (i.e., the first type of operation) in a specific area and is responded to by the native page instance, the first type of operation can be received by the page control module in the native container layer, and the operation information of the first type of operation can be passed through the native page instance to the cross-platform page instance so that the cross-platform page instance can directly respond to the first type of operation, thereby avoiding the native page instance from responding directly after receiving the user operation.

[0079] Specifically, such as Figure 5 As shown, the message processing process of a cross-platform page instance includes: A user applies a specific operation (i.e., a first-type operation) to a specific area corresponding to the cross-platform page instance. The cross-platform page instance determines whether the operation is one that it can directly respond to. To prevent the native page instance from intercepting or directly responding to the operation, the cross-platform page instance encapsulates the operation control information of the first-type operation into an input response message based on the data structure defined by the page-level communication channel. This input response message is then sent to the native page instance via the page-level communication channel. The native page instance receives and decodes the input response message, and then registers the specific area and operation type corresponding to the input response message as a first-type operation to be ignored. When the user applies the specific operation again to a specific area on the target page, the native page instance identifies the subsequent operation as a first-type operation applied to the specific area and passes it through to the cross-platform page instance, which then responds to the subsequent operation.

[0080] It should be noted that the first type of operation can be a specific action, such as sliding a list within a certain range, or it can be an action determined by a cross-platform page instance based on prior operations, such as sliding a list.

[0081] It should also be noted that, based on the use of page-level communication channels for message transmission proposed in the embodiments of this application, this application further proposes to define a unified message protocol and data structure for page-level communication channels, so as to facilitate standardized message transmission between native systems and cross-platform application development frameworks, thereby making page-level communication channels widely applicable.

[0082] Specifically, when a cross-platform page instance encapsulates the operation control information of the first type of operation into an input response message, it can encapsulate the operation control information of the first type of operation according to the message structure defined in the page-level communication channel registration. For example, an input response message for registering to ignore a list scrolling operation can be represented as: {"pageID": "p123"} "category": "gestureControl", "action":"ignoreRegion", "payload": { "offsetX": 20, "offsetY": 100 "width": 200, "height": 80, "type": "all" }} Here, `pageID` is a unique page identifier used to route messages to the corresponding cross-platform page instance; `category` is the message category, which in this embodiment includes, for example, "gestureControl" to represent gesture control; `action` is the specific action identifier, which in this embodiment includes, for example, "ignoreRegion"; and `payload` is the payload object carrying business data, which in this embodiment includes, for example, "offsetX", "offsetY", "width", "height", and "type". Here, "offsetX" and "offsetY" represent the offset of a specific region relative to the page, "width" and "height" represent the width and height of the specific region, and "type" represents the gesture type that needs to be ignored, such as a click operation "tap", a swipe operation "pan", or all operation types "all".

[0083] In another feasible embodiment, the native page instance and the cross-platform page instance control each other based on a page-level communication channel, including: in response to a user's original operation on the target page, identifying the original operation as a second type of operation applied to the area corresponding to the cross-platform page instance, or a third type of operation applied to the area corresponding to the native page instance; the second type of operation is an operation applied to a specific area previously registered by a non-cross-platform page instance, or an operation of a non-specific operation type applied to a specific area previously registered by the cross-platform page instance; and responding to the original operation as a second type of operation or a third type of operation through the native page instance.

[0084] It should be noted that when an operation does not meet the conditions for a first-type operation, it is determined to be a second-type operation applied to a specific area not previously registered by the cross-platform page instance, or applied to a specific area previously registered by the cross-platform page instance but not of a specific operation type, or applied to the area corresponding to the native page instance. The difference between second-type and third-type operations lies in which page instance renders the applied area. If the applied area is rendered by a cross-platform page instance, the operation is determined to be a second-type operation; if the applied area is rendered by a native page instance, the operation is determined to be a third-type operation.

[0085] Furthermore, the second type of operation specifically refers to operations applied to the rendering area of ​​a cross-platform page instance other than the first type of operation that has been registered as a cross-platform page instance.

[0086] It should be understood that both the second and third types of operations are responded to by the native page instance. The native page instance's response to the second and third types of operations includes either direct execution or constructing an operation event for the corresponding operation (i.e., the second or third operation) and forwarding that operation event to the cross-platform page instance for execution.

[0087] Specifically, when the response from the native page instance is an operation event that constructs the corresponding operation (i.e., the second or third operation), and this operation event is forwarded to the cross-platform page instance for execution, the native page instance responds to the second or third type of operation, including: identifying the operation event of the original operation as a business logic processing event; generating a business logic processing message based on the operation event of the original operation through the native page instance; sending the business logic processing message to the cross-platform page instance using a page-level communication channel; and executing the operation corresponding to the business logic processing message through the cross-platform page instance and updating the target page.

[0088] Furthermore, based on the operation events of the original operation, the native page instance generates business logic processing messages, including: encapsulating the operation events of the original operation into business logic processing messages according to the message structure defined by the page-level communication channel.

[0089] In other words, when a user's initial action is identified as a second or third type of operation, the native page instance receives the initial action and generates a corresponding operation event, such as gaining focus, text change, or submission. Then, the native page instance encapsulates the second or third type of operation event into a business logic processing message according to the data structure defined by the message protocol of the page-level communication channel. This business logic processing message can be encoded as a JSON string or binary data.

[0090] For example, taking the user input of "abc" as the original operation, the business logic processing message can be represented as follows: { "pageID": "p123" "category": "input" "action": "onTextChange", "payload": { "text": "abc" "isComposing": false } } Wherein, pageID is a unique page identifier used to route messages to the corresponding cross-platform page instance; category is the message category, in this embodiment "input" represents input messages; action is a specific action identifier, in this embodiment including, for example, gaining focus "onFocusGained", text change "onTextChange", submission "onSubmit", etc.; payload is the payload object carrying business data, in this embodiment including, for example, the current input text, cursor position, whether it is a combined input, etc.

[0091] In one specific embodiment, such as Figure 6 As shown, the message processing process based on the native page instance includes: when a user performs a primitive operation as a second or third type of operation on the target page, the native page instance encapsulates the operation event corresponding to the primitive operation into a business logic processing message based on the data structure defined by the page-level communication channel, and sends the business logic processing message to the cross-platform page instance through the page-level communication channel. The cross-platform page instance receives the business logic processing message, decodes it, and then executes the business logic and updates the target page according to the message content.

[0092] Therefore, this application further realizes the reverse control of native page instances by cross-platform page instances, effectively solving the problem in traditional solutions where cross-platform page instances cannot finely control the basic page configuration, resulting in fragmented interactions and duplicate implementations on the target page. It achieves a unified business flow and consistent interactive experience for native and cross-platform page instances. Moreover, by utilizing the message protocol and data structure defined by the page-level communication channel, it eliminates the need to rely on specific cross-platform application development frameworks. As long as the cross-platform application development framework has the ability to call the underlying method channel, the message protocol can be reused, significantly reducing the transformation cost of integrating different technology stacks and improving the scalability and long-term maintainability of the cross-platform architecture.

[0093] It should be noted that although the operation of the method of the present invention is described in a specific order in the accompanying drawings, this does not require or imply that the operations must be performed in that specific order, or that all the operations shown must be performed in order to achieve the desired result.

[0094] Figure 7 A schematic diagram of the structure of a global control device for cross-platform pages provided in an embodiment of this application is shown.

[0095] like Figure 7 As shown, the global control device 10 for cross-platform pages includes: Page creation module 11 is used to respond to the creation request of the target page by creating a native page instance corresponding to the target page through the native container layer and creating a cross-platform page instance corresponding to the target page through the cross-platform rendering layer. The channel creation module 12 is used to create a unique page identifier for the target page and create a page-level communication channel based on the unique page identifier; the lifecycle of the page-level communication channel is bound to the lifecycle of the target page. The channel association module 13 is used to associate the page-level communication channel with the native page instance and the cross-platform page instance respectively based on the unique page identifier, so that the native page instance and the cross-platform page instance can control each other based on the page-level communication channel, and the page-level communication channel is used for communication between the native page instance and the cross-platform page instance.

[0096] Figure 8 A schematic diagram of the structure of a global control device for cross-platform pages provided in another embodiment of this application is shown.

[0097] like Figure 8 As shown, the global control device 10 for cross-platform pages also includes: The native page instance module 14 is used to respond to the original operation performed by the user on the target page, identify the original operation as a first type of operation applied to the corresponding area of ​​the cross-platform page instance; the first type of operation is an operation of a specific type applied to a specific area previously registered by the cross-platform page instance; and pass the original operation as the first type of operation to the cross-platform page instance. Cross-platform page instance module 16 is used to respond to the original operation.

[0098] In some embodiments, the native page instance module 14 is specifically used for: In response to the user's original operation on the target page, the original operation is identified as either a second type of operation applied to the area corresponding to the cross-platform page instance, or a third type of operation applied to the area corresponding to the native page instance; the second type of operation is either an operation applied to a specific area not previously registered by the cross-platform page instance, or an operation of a non-specific operation type applied to a specific area previously registered by the cross-platform page instance; the original operation is responded to as either the second type of operation or the third type of operation.

[0099] In some embodiments, the native page instance module 14 is further configured to: The operation events of the original operation are identified as business logic processing events; Based on the operation events of the original operation, the native page instance generates a business logic processing message. Transmission module 15 is used to send the business logic processing message to the cross-platform page instance using the page-level communication channel; The cross-platform page instance module 16 is used to perform the operation corresponding to the business logic processing message and update the target page.

[0100] In some embodiments, the native page instance module 14 is further configured to: Based on the message structure defined by the page-level communication channel, the operation events of the original operation are encapsulated into the business logic processing message.

[0101] In some embodiments, the page creation module 11 is further configured to: In response to the cancellation request from the target page, a resource cleanup callback is triggered through the native page instance; Channel creation module 12 is used for: In response to the resource cleanup callback triggered by the native page instance, the page-level communication channel destruction callback is triggered based on the unique page identifier corresponding to the target page; The cross-platform rendering layer is notified to release the resources of the cross-platform page instance via a lifecycle message instruction.

[0102] It should be understood that the modules or modules described in the global control device 10 for cross-platform pages are related to the reference. Figure 1 The steps in the described method correspond accordingly. Therefore, the operations and features described above for the method are also applicable to the global control device 10 for cross-platform pages and the modules contained therein, and will not be repeated here. The global control device 10 for cross-platform pages can be pre-implemented in the browser or other security applications of the electronic device, or it can be loaded into the browser or its security applications of the electronic device by downloading or other means. The corresponding modules in the global control device 10 for cross-platform pages can cooperate with the modules in the electronic device to implement the solutions of the embodiments of this application.

[0103] The division of modules or units mentioned in the detailed description above is not mandatory. In fact, according to the embodiments of this disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0104] The following is for reference. Figure 9 , Figure 9 A schematic diagram of the structure of a computer system suitable for implementing the embodiments of this application is shown. like Figure 9 As shown, the computer system 900 includes a central processing unit (CPU) 901, which can perform various appropriate actions and processes based on programs stored in read-only memory (ROM) 902 or programs loaded from storage section 908 into random access memory (RAM) 903. RAM 903 also stores various programs and data required for the system's operating instructions. CPU 901, ROM 902, and RAM 903 are interconnected via bus 904. Input / output (I / O) interface 905 is also connected to bus 904.

[0105] The following components are connected to I / O interface 905: an input section 906 including a keyboard, mouse, etc.; an output section 907 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 908 including a hard disk, etc.; and a communication section 909 including a network interface card such as a LAN card, modem, etc. The communication section 909 performs communication processing via a network such as the Internet. A drive 910 is also connected to I / O interface 905 as needed. A removable medium 911, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 910 as needed so that computer programs read from it can be installed into storage section 908 as needed.

[0106] Specifically, according to embodiments of this application, the flowchart above refers to... Figure 2 The described process can be implemented as a computer software program. For example, embodiments of this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowchart. In such an embodiment, the computer program contains program code for performing the methods shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via communication section 909, and / or installed from removable medium 911. When the computer program is executed by central processing unit (CPU) 901, it performs the functions defined in the system of this application.

[0107] It should be noted that the computer-readable medium shown in this application can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media can also be any computer-readable medium other than computer-readable storage media, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0108] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operational instructions of possible implementations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two connected blocks may actually be executed substantially in parallel, or they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified functions or operational instructions, or using a combination of dedicated hardware and computer instructions.

[0109] The units or modules described in the embodiments of this application can be implemented in software or hardware. The described units or modules can also be housed in a processor; for example, a processor can be described as including a page creation module, a channel creation module, and a channel association module. The names of these units or modules do not necessarily limit the specific unit or module itself. For example, a page creation module can also be described as "in response to a target page creation request, creating a native page instance corresponding to the target page in the native container layer, and creating a cross-platform page instance corresponding to the target page in the cross-platform rendering layer; the native page instance is used to provide the basic page configuration of the target page; the cross-platform page instance is used to provide the business logic and page rendering of the target page."

[0110] In another aspect, this application also provides a computer-readable storage medium, which may be included in the electronic device described in the above embodiments, or may exist independently and not assembled into the electronic device. The aforementioned computer-readable storage medium stores one or more programs that, when used by one or more processors, execute the global control method for cross-platform pages described in this application.

[0111] The above description is merely a preferred embodiment of this application and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of disclosure in this application is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the foregoing disclosed concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features with similar functions disclosed in this application.< / pageid>

Claims

1. A global control method for cross-platform pages, characterized in that, include: In response to the creation request of the target page, a native page instance corresponding to the target page is created through the native container layer, and a cross-platform page instance corresponding to the target page is created through the cross-platform rendering layer; A unique page identifier is created for the target page, and a page-level communication channel is created based on the unique page identifier; the lifecycle of the page-level communication channel is bound to the lifecycle of the target page; Based on the unique page identifier, the page-level communication channel is associated with the native page instance and the cross-platform page instance respectively, so that the native page instance and the cross-platform page instance can control each other based on the page-level communication channel, which is used to realize communication between the native page instance and the cross-platform page instance.

2. The global control method for cross-platform pages according to claim 1, characterized in that, The native page instance and the cross-platform page instance control each other based on the page-level communication channel, including: In response to the user's original operation on the target page, the original operation is identified as a first type of operation applied to the area corresponding to the cross-platform page instance; the first type of operation is an operation of a specific type applied to a specific area previously registered by the cross-platform page instance. The original operation, which is the first type of operation, is passed through to the cross-platform page instance through the native page instance; The original operation is responded to through the cross-platform page instance.

3. The global control method for cross-platform pages according to claim 1, characterized in that, The native page instance and the cross-platform page instance control each other based on the page-level communication channel, including: In response to the user's original operation on the target page, the original operation is identified as either a second type of operation applied to the area corresponding to the cross-platform page instance, or a third type of operation applied to the area corresponding to the native page instance; the second type of operation is either an operation applied to a specific area not previously registered by the cross-platform page instance, or an operation of a non-specific operation type applied to a specific area previously registered by the cross-platform page instance. The response of the native page instance serves as the original operation for either the second type of operation or the third type of operation.

4. The global control method for cross-platform pages according to claim 1, characterized in that, The original operation that uses the native page instance response as the second type of operation or the third type of operation includes: The operation events of the original operation are identified as business logic processing events; Based on the operation events of the original operation, the native page instance generates a business logic processing message. The business logic processing message is sent to the cross-platform page instance using the page-level communication channel; The cross-platform page instance executes the operation corresponding to the business logic processing message and updates the target page.

5. The global control method for cross-platform pages according to claim 4, characterized in that, The step of generating business logic processing messages based on the operation events of the original operation through the native page instance includes: Based on the message structure defined by the page-level communication channel, the operation events of the original operation are encapsulated into the business logic processing message.

6. The global control method for cross-platform pages according to claim 1, characterized in that, Also includes: In response to the cancellation request from the target page, a resource cleanup callback is triggered through the native page instance; In response to the resource cleanup callback triggered by the native page instance, the page-level communication channel destruction callback is triggered based on the unique page identifier corresponding to the target page; The cross-platform rendering layer is notified to release the resources of the cross-platform page instance via a lifecycle message instruction.

7. A global control device for cross-platform pages, characterized in that, include: The page creation module is used to respond to the creation request of the target page by creating a native page instance corresponding to the target page through the native container layer, and creating a cross-platform page instance corresponding to the target page through the cross-platform rendering layer. The channel creation module is used to create a unique page identifier for the target page and create a page-level communication channel based on the unique page identifier; the lifecycle of the page-level communication channel is bound to the lifecycle of the target page. The channel association module is used to associate the page-level communication channel with the native page instance and the cross-platform page instance respectively based on the unique page identifier, so that the native page instance and the cross-platform page instance can control each other based on the page-level communication channel, and the page-level communication channel is used for communication between the native page instance and the cross-platform page instance.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the global control method for cross-platform pages as described in any one of claims 1-6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by the processor, the program implements the global control method for cross-platform pages as described in any one of claims 1-6.

10. A computer program product, comprising a computer program, characterized in that, When executed by a processor, the computer program implements the global control method for cross-platform pages as described in any one of claims 1-6.

Images