Event transfer method and device and terminal equipment

Abstract

The invention provides an event transfer method and device and terminal equipment. According to the application, after the rendering layer constructs the component structure tree based on the component instance, the component structure tree is synchronized to the logic layer to create the corresponding mapping instance, and then the detected user interaction event information is accurately transmitted to the target mapping instance of the logic layer to execute the processing logic. According to the application, the logic layer does not need to temporarily search the processing object after the event is triggered, and establishes association with the rendering layer component through the mapping instance in advance, so that the event positioning and transmission delay is greatly reduced, and the user interaction fluency is remarkably improved; meanwhile, based on the accurate association between the node relation of the component structure tree and the mapping instance, it is ensured that event processing objects are accurately positioned, and the reliability of event transferring and processing is improved. The technical problem that the user interface interaction fluency and the event transfer reliability are reduced due to the fact that a processing object positioning error easily occurs after the event is triggered in the prior art is solved.

Description

Technical Field

[0001] This invention relates to the field of computers, and more particularly to an event transmission method, apparatus, and terminal device. Background Technology

[0002] Currently, the typical way to handle user interaction events in lightweight programs is for the rendering layer to capture the event triggered by the user and then directly pass the relevant information to the logic layer. After receiving the information, the logic layer needs to temporarily retrieve the corresponding event handling object each time before executing the subsequent processing logic.

[0003] However, the current approach has several drawbacks. First, when there are many components, the temporary retrieval process takes extra time, which can lead to delays in event delivery and affect the smoothness of user interaction. Second, when component identifiers are repeated or deeply nested, the logic layer has difficulty accurately locating the target component, which can easily lead to incorrect object location and event handling failure, thus reducing the reliability of interactive event delivery. Summary of the Invention

[0004] This application provides an event transmission method, apparatus, and terminal device, which solves the technical problem in the prior art that the processing object is easily mislocated after the event is triggered, thereby reducing the smoothness of user interface interaction and the reliability of event transmission.

[0005] Firstly, this application provides an event delivery method, which is applied to a dual-threaded architecture including a rendering layer and a logic layer, and includes the following steps: Construct a component structure tree based on the component instances of the rendering layer; The component structure tree is synchronized to the logical layer, so that the logical layer creates a mapping instance for each component instance based on the component structure tree. Events triggered in the rendering layer are detected. If a user interaction event associated with the component instance is detected, the event information is passed to the target mapping instance so that the logic layer executes the processing logic associated with the user interaction event.

[0006] Prior to detecting the event triggered in the rendering layer, the method further includes: Set an ownership identifier for each component instance in the component structure tree, and synchronize the ownership identifier to the mapping instance in the logical layer; The step of passing event information to the target mapping instance upon detecting a user interaction event associated with a component instance includes: Upon detecting a user interaction event associated with a component instance, the event information is extracted and the target attribution identifier of the triggered component instance is determined. The event information and the target attribution identifier are then transmitted to the logic layer, so that the logic layer can locate the target mapping instance based on the target attribution identifier and then pass the event information to the target mapping instance.

[0007] The process includes, after constructing the component structure tree based on the component instances of the rendering layer and before detecting events triggered in the rendering layer, the following: Detect whether each component instance carries an event binding property declaration; For a first component instance carrying an event binding property declaration, an event listener is bound to the first component instance, the event listener being configured to listen for events associated with the event binding property declaration of the first component instance.

[0008] Wherein, the step of transmitting event information to the target mapping instance upon detecting a user interaction event associated with a component instance includes: When a user interaction event associated with a component instance is detected, a preset event dispatch method is invoked in the rendering layer to initiate the propagation process of the user interaction event. The propagation process is used to propagate the user interaction event through multiple component instances in sequence according to the hierarchical structure of the component structure tree, and to pass the event information to the target mapping instance associated with the triggered target component instance.

[0009] The event transmission method further includes: In the propagation process, when the user interaction event propagates to the corresponding target component instance, the event listener bound to the target component instance captures the user interaction event, extracts the event information of the user interaction event, and then passes the event information to the corresponding target mapping instance in the logic layer.

[0010] The method further includes, after passing the event information to the target mapping instance associated with the triggered target component instance: If the event listener detects that the event binding property declaration of the target component instance also includes an intercept declaration, the propagation of the user interaction event is terminated.

[0011] The construction of the component structure tree based on the component instances of the rendering layer includes: Assign an instance identifier to each component instance of the rendering layer; Based on the instance identifier of each component instance, the parent-child reference relationship between the component instances is determined, and a component structure tree representing the hierarchical relationship of all component instances in the rendering layer is constructed based on the parent-child reference relationship.

[0012] The events associated with the component instance also include custom events, and the method further includes: Based on the instance identifier of the component instance, the component structure tree is traversed to obtain the configuration information of the custom events of the parent component instance of each component instance; Based on the obtained configuration information of the custom event, generate metadata corresponding to the custom event; The metadata is synchronized to the corresponding mapping instance in the logical layer.

[0013] This also includes: In the event of detecting a custom event associated with the component instance, the corresponding target metadata is read from the mapping instance of the triggered component instance in the logic layer. Based on the target metadata, the event propagation path and the target event parameters of the triggered custom event are determined. According to the event propagation path, the target event parameters are transmitted to the mapping instance of the corresponding parent component instance in the logic layer to invoke the processing logic corresponding to the triggered custom event.

[0014] The step of synchronizing the metadata to the corresponding mapping instance in the logical layer includes: The metadata is temporarily stored in the message cache queue of the rendering layer; Monitor changes in the properties of component instances in the rendering layer; If a change in the attribute of the component instance is detected, the metadata temporarily stored in the message cache queue is updated; Under the condition that the preset synchronization conditions are met, the updated metadata is synchronized to the corresponding mapping instance in the logical layer.

[0015] Secondly, this application provides an event transmission device, which is applied to a dual-threaded architecture including a rendering layer and a logic layer, and the device includes: A structure tree construction module is used to construct a component structure tree based on the component instances of the rendering layer. The node relationship information synchronization module is used to synchronize the component structure tree to the logical layer, so that the logical layer creates a mapping instance for each component instance based on the component structure tree. The event delivery module is used to detect events triggered in the rendering layer. When a user interaction event associated with a component instance is detected, the event information is delivered to the target mapping instance so that the logic layer executes the processing logic associated with the user interaction event.

[0016] Thirdly, this application provides a terminal device, which includes a processor and a memory; The memory is used to store computer programs and to transfer the computer programs to the processor; The processor is configured to execute the event delivery method as described in the first aspect according to instructions in the computer program.

[0017] This application provides an event transmission method, apparatus, and terminal device. After constructing a component structure tree based on component instances at the rendering layer, this application synchronizes the component structure tree to the logic layer to create corresponding mapping instances. Then, it accurately transmits the detected user interaction event information to the target mapping instance in the logic layer to execute processing logic. In this embodiment, the logic layer does not need to temporarily search for the processing object after an event is triggered; it establishes an association with the rendering layer components in advance through the mapping instance, significantly reducing event location and transmission delays and significantly improving the smoothness of user interaction. Simultaneously, relying on the node relationships in the component structure tree and the precise association with the mapping instance, it ensures accurate location of the event processing object, improving the reliability of event transmission and processing. This solves the technical problem in the prior art where errors in locating the processing object easily occur after an event is triggered, thus reducing the smoothness of user interface interaction and the reliability of event transmission. Attached Figure Description

[0018] Figure 1 This is a flowchart illustrating an event transmission method provided in an embodiment of the present invention.

[0019] Figure 2 This is a schematic diagram of a dual-threaded architecture provided in an embodiment of the present invention.

[0020] Figure 3 This is a flowchart illustrating another event transmission method provided in an embodiment of the present invention.

[0021] Figure 4 This is a timing diagram for event processing provided in an embodiment of the present invention.

[0022] Figure 5 This is a timing diagram for simulating tap and longTap events on a mobile device, provided as an embodiment of the present invention.

[0023] Figure 6 This is a schematic diagram illustrating the implementation of Tap events on a computer, as provided in an embodiment of the present invention.

[0024] Figure 7This is a flowchart illustrating another event transmission method provided in an embodiment of the present invention.

[0025] Figure 8 This is a flowchart illustrating a process for triggering a custom event, as provided in an embodiment of the present invention.

[0026] Figure 9 This is a timing diagram for batch synchronization of metadata provided in an embodiment of the present invention.

[0027] Figure 10 This is a schematic diagram of an event transmission device provided in an embodiment of the present invention.

[0028] Figure 11 This is a schematic diagram of the structure of a terminal device provided in an embodiment of the present invention. Detailed Implementation

[0029] The following description and accompanying drawings fully illustrate specific embodiments of this application to enable those skilled in the art to practice them. The embodiments represent only possible variations. Individual components and functions are optional unless explicitly required, and the order of operation may vary. Parts and features of some embodiments may be included in or replace parts and features of other embodiments. The scope of embodiments of this application includes the entire scope of the claims and all available equivalents of the claims. In this document, each embodiment may be referred to individually or collectively by the term "invention," which is merely for convenience and is not intended to automatically limit the scope of the application to any single invention or inventive concept if more than one invention is disclosed. Relational terms such as "first" and "second" are used herein only to distinguish one entity or operation from another, without requiring or implying any actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed. The various embodiments in this document are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the structures, products, etc., disclosed in the embodiments, since they correspond to the disclosed parts, the descriptions are relatively simple; relevant details can be found in the method section.

[0030] Currently, the typical way to handle user interaction events in lightweight programs is for the rendering layer to capture the event triggered by the user and then directly pass the relevant information to the logic layer. After receiving the information, the logic layer needs to temporarily retrieve the corresponding event handling object each time before executing the subsequent processing logic.

[0031] However, the current approach has several drawbacks. First, when there are many components, the temporary retrieval process takes extra time, which can lead to delays in event delivery and affect the smoothness of user interaction. Second, when component identifiers are repeated or deeply nested, the logic layer has difficulty accurately locating the target component, which can easily lead to incorrect object location and event handling failure, thus reducing the reliability of interactive event delivery.

[0032] Based on this, in order to solve the above-mentioned technical problems, embodiments of the present invention provide an event transmission method, such as... Figure 1 As shown, Figure 1 This is a flowchart illustrating an event transmission method provided by an embodiment of the present invention. The event transmission method provided by this embodiment can be executed by an event transmission device, which can be implemented through software and / or hardware. The event transmission device can consist of two or more physical entities, or it can consist of a single physical entity. For example, the event transmission device can be a computer, mobile phone, tablet, or other device. The event transmission method provided by this embodiment is applied to a dual-threaded architecture including a rendering layer and a logic layer. The rendering layer directly handles interface rendering and user interaction detection, while the logic layer is responsible for business logic processing and event response scheduling, and does not directly participate in interface rendering. Furthermore, the dual-threaded architecture refers to splitting the runtime environment of a lightweight program into two independently running threads: a rendering layer thread and a logic layer thread. The two threads communicate across threads using a bridge (e.g., Bridge) provided by the basic library. For example,... Figure 2 As shown, Figure 2 This is a schematic diagram of a dual-threaded architecture provided in an embodiment of the present invention. Figure 2 The logic layer and the rendering layer communicate bidirectionally through a third-party tool (such as JSBridge). The event passing method provided in this embodiment of the invention includes the following steps: Step 101: Construct a component structure tree based on component instances in the rendering layer.

[0033] In a dual-threaded architecture, the rendering layer carries the execution of components. Components are basic units in UI development that encapsulate specific functions (including UI presentation and logic processing) and support reuse, used to efficiently build the interface structure and support user interaction. Examples of components include button components (supporting click interaction and state switching), input box components (supporting text input and format validation), text display components (supporting text style configuration), image components (supporting image loading and preview), and container components (using View / Container to wrap other components and implement basic layout). Component instances are the specific running entities generated in the rendering layer after a component is loaded. They contain the component's attribute configuration, state data, and lifecycle methods, and are the direct carriers of user interaction. In this embodiment, it is first necessary to determine the hierarchical relationship of component instances in the rendering layer. This hierarchical relationship refers to the structured association formed by the nested logic of the interface layout, where a parent component instance contains child component instances. That is, the parent instance acts as a container to hold child instances, and the child instances belong to the parent instance, forming a tree-like hierarchy in a nested order. For example, a layout component instance is the parent, and its internal button and text component instances are the children. After determining the hierarchical relationships, a component structure tree needs to be constructed based on the hierarchical relationships of component instances. The component structure tree is a model that presents the hierarchical relationships of component instances in a tree-like data structure, containing multiple nodes, each corresponding to a component instance, used to reflect the hierarchical association relationships of various component instances in the rendering layer. In one embodiment, common core logic can be injected into all component instances in the rendering layer. This logic generates a globally unique component identifier for each component instance, as well as a hierarchical association identifier representing the nesting relationship between components. Then, based on the actual loading order and nesting relationship of the component instances, with the top-level component instance as the root node and child component instances as child nodes, all component instances are chained together hierarchically to finally generate the component structure tree.

[0034] Step 102: Synchronize the component structure tree to the logic layer so that the logic layer can create a mapping instance for each component instance based on the component structure tree.

[0035] After generating the component structure tree, node relationship information describing the structure tree can be extracted. This information includes the hierarchical associations between nodes (corresponding component instances) in the structure tree. For example, node relationship information includes the component identifier of each node's corresponding component instance and hierarchical association identifiers (such as identifiers pointing to parent component instances). This node relationship information is crucial for the logic layer to identify component hierarchy and affiliation. When synchronizing the component structure tree to the logic layer, a bridge using a dual-threaded architecture can be used. Upon receiving the node relationships, the logic layer essentially obtains the complete structure information of the component structure tree, allowing it to initiate the mapping instance creation process. The mapping instance is a logical proxy object in the logic layer that corresponds one-to-one with the rendering layer component instances, serving as the core carrier for locating event handling objects. For example, the logic layer first establishes an association index between component instances and mapping instances, then creates a corresponding mapping instance for each component instance, writing the component identifier and hierarchical association identifier of the component instance into the mapping instance, ultimately completing the one-to-one association binding between all component instances and mapping instances.

[0036] Step 103: Detect events triggered in the rendering layer. If a user interaction event associated with a component instance is detected, pass the event information to the target mapping instance so that the logic layer can execute the processing logic associated with the user interaction event.

[0037] During subsequent interactions between the rendering layer and the user, the rendering layer leverages its built-in event capture capabilities to monitor user interactions on the interface in real time. When a user triggers a specific interaction (such as clicking a component, swiping page content, or entering text in an input box), the rendering layer immediately identifies and determines the corresponding user interaction event. Simultaneously, it extracts event information according to a pre-defined structured format. This event information includes the component identifier of the triggering component instance, the event type, and interaction data. After extracting the event information, it passes it to the logic layer via a bridge. Upon receiving the event information, the logic layer uses the component identifier from the event information and an association index to quickly locate the target mapping instance associated with the triggering component instance, eliminating the need for additional traversal and improving location efficiency.

[0038] Finally, the logic layer calls the event handler registered on the target mapping instance that matches the event type to execute the preset business logic. For example, the interface displayed by the rendering layer is the shopping interface of an online shopping mall. Relying on the rendering layer's built-in event capture capabilities, it detects user interaction events on the shopping interface in real time. When a user triggers an interaction on the shopping interface, the rendering layer immediately identifies the user interaction event and extracts the event information. If a product card is clicked on the "Product List Page" (triggering the "tap" event), the event type "tap," the component identifier of the product card component, and the product ID (such as "SP202406001") are extracted to ensure that the event is accurately associated with the specific product. If text is entered into the phone number input box on the "Shipping Address Editing Page" (triggering the "input" event), the event type "input," the component identifier of the input box component, and the entered phone number text (such as "13900XXXXXX") are extracted. Subsequently, the rendering layer passes the event information across layers to the logic layer through a bridge. After receiving the event information, the logic layer locates the target mapping instance. For example, for the "tap" event of a product card, it locates the mapping instance corresponding to that product card; for the "input" event of a mobile phone number input box, it locates the mapping instance corresponding to that input box.

[0039] Next, the logic layer calls the shopping business event handler on the target mapping instance to execute the operation. If it is a "tap" event for a product card, the event handler will execute the operation of "jumping to the product details page" based on the product ID, while carrying basic product information (such as price and inventory) for the details page rendering, so that users can view product details; if it is an "input" event for a mobile phone number input box, the event handler will execute the operation of "validating the mobile phone number format (whether it is 11 valid digits to meet the shopping and receiving contact requirements)".

[0040] If the event handling returns a result, such as an incorrect phone number format (returning a prompt "Please enter an 11-digit valid phone number for contacting customers upon purchase") or confirming sufficient stock before redirecting to the product details page (returning "Product stock is sufficient, details can be viewed normally"), the logic layer will pass the result back to the rendering layer via a bridge. Upon receiving the result, the rendering layer drives the shopping interface feedback: for format errors, the border of the phone number input box is highlighted and an error message is displayed; for sufficient stock, no additional pop-ups are displayed, but the product details page loads smoothly. This ultimately completes the full event handling loop of user interaction, logic execution, and interface feedback in the shopping interface, perfectly aligning with user operation needs in shopping scenarios.

[0041] The event transmission method provided in the above-described embodiments of the present invention, after constructing a component structure tree based on component instances in the rendering layer, synchronizes the component structure tree to the logic layer to create corresponding mapping instances, and then accurately transmits the detected user interaction event information to the target mapping instance in the logic layer to execute processing logic. In this embodiment, the logic layer does not need to temporarily search for the processing object after the event is triggered; it establishes an association with the rendering layer components in advance through the mapping instance, significantly reducing event location and transmission delays and significantly improving the smoothness of user interaction. Simultaneously, relying on the node relationships in the component structure tree and the precise association with the mapping instance, it ensures accurate location of the event processing object, improving the reliability of event transmission and processing. This solves the technical problem in the prior art where errors in the location of processing objects easily occur after event triggering, thereby reducing the smoothness of user interface interaction and the reliability of event transmission.

[0042] Based on the above embodiments, before detecting the event triggered in the rendering layer in step 103, the method further includes: Step 1021: Set the ownership identifier for each component instance in the component structure tree, and synchronize the ownership identifier to the mapping instance in the logic layer.

[0043] In this embodiment, after creating mapping instances corresponding to component instances, the logic layer can also assign a unique attribution identifier to each component instance in the component structure tree. The attribution identifier is a unique identifier generated based on the reference attribution relationship of the component instance, used to clarify the mapping instance to which the component instance belongs in the logic layer. It should be noted that the attribution identifier differs from the hierarchical association identifier, which represents the structural nesting relationship. The hierarchical association identifier reflects the structural relationship of who wraps the component, while the attribution identifier reflects the business relationship to which the component's logical attribution belongs. In specific implementation, the common core logic injected by the rendering layer generates an attribution identifier for each component instance. For example, for built-in components (such as button or input box components), the attribution identifier will be associated with the unique identifier of the most recent custom component or page root module that references the built-in component. After generating the attribution identifier, it will be stored together with the component identifier and hierarchical association identifier in the corresponding node of the component structure tree, so that the node information of each node contains both structural relationship data and attribution business data.

[0044] Subsequently, the attribution identifiers need to be synchronized to the corresponding mapping instances in the logical layer. For example, the rendering layer transmits the attribution identifiers of each node to the logical layer through a bridge. After receiving the information, the logical layer writes the corresponding attribution identifier into the attributes of the mapping instance. At the same time, the logical layer establishes an association index (such as a hash table structure) between the attribution identifier and the mapping instance. The key of the index is the attribution identifier, and the value is all the mapping instances associated with that identifier, providing a retrieval channel for the subsequent logical layer to quickly locate the mapping instance.

[0045] Step 1022: Detect events triggered in the rendering layer. If a user interaction event associated with a component instance is detected, extract the event information and determine the target attribution identifier of the triggered component instance. Transmit the event information and the target attribution identifier to the logic layer so that the logic layer can locate the target mapping instance based on the target attribution identifier and then pass the event information to the target mapping instance.

[0046] The rendering layer relies on its built-in event capture capabilities to monitor user interactions. When a user interaction event is detected, in addition to extracting event information such as the event type (e.g., tap, input), the component's unique identifier, and interaction data, it also needs to extract the target attribution identifier of the triggered component instance from the corresponding node in the component's structure tree. Then, a bridge transmits the event information and the target attribution identifier from the rendering layer to the logic layer. Upon receiving the information, the logic layer uses the target attribution identifier to query the association index of the attribution identifier and mapping instances, thereby quickly locating all mapping instances associated with the target attribution identifier. Subsequently, the logic layer combines the component identifier of the component instance in the event information to filter out the corresponding target mapping instance from the associated mapping instances and passes the event information to the target mapping instance to execute the corresponding processing logic. For example, in one embodiment, a user enters "13900XXX" into the phone number input box (component identifier "INPUT_Phone001", attribution identifier "CPN_AddrEdit001") on the "Shipping Address Editing Page" of the shopping interface: The rendering layer captures the input event, extracts the event information (type "input", identifier "INPUT_Phone001", data "13900XXX") and the target attribution identifier "CPN_AddrEdit001", and transmits it to the logic layer through a bridge. The logic layer uses "CPN_AddrEdit001" to query the index, combines it with "INPUT_Phone001" to locate the target mapping instance "MAP_Phone001", transmits the event information, calls the phone number verification processor, and obtains the result "incomplete input"; after the result is returned to the rendering layer, the border of the input box is highlighted in red and the prompt "Please enter an 11-digit valid phone number" is displayed, which fits the user operation requirements of the shopping scenario.

[0047] The above approach effectively solves the problem of the logic layer's difficulty in distinguishing the logical ownership of components in scenarios with duplicate or deeply nested component identifiers. This is achieved by setting a unique attribution identifier for each component instance in the rendering layer's component structure tree and synchronizing it to the corresponding mapping instance in the logic layer. Simultaneously, this identifier is carried during event propagation for the logic layer to locate the component. This avoids event handling failures caused by location confusion and significantly improves the accuracy of event handling object location. In addition, the logic layer can quickly locate the target mapping instance through the identifier, significantly reducing the time spent on event location.

[0048] This invention also provides another event transmission method, such as... Figure 3 As shown, Figure 3 This is a flowchart illustrating another event transmission method provided in an embodiment of the present invention. Figure 3 The event passing method shown is a specific embodiment of the above-described event passing method. The event passing method provided in this embodiment of the invention includes the following steps: Step 201: Construct a component structure tree based on component instances in the rendering layer.

[0049] Step 202: Synchronize the component structure tree to the logic layer so that the logic layer can create a mapping instance for each component instance based on the component structure tree.

[0050] Step 203: Check whether each component instance carries an event binding property declaration.

[0051] In this embodiment, after constructing the component structure tree, it is also necessary to check whether each component instance in the rendering layer carries an event binding attribute declaration. The event binding attribute declaration is an event association attribute set by the user in the component configuration, used to specify the type of event the component needs to listen to. Common formats include bind:tap (listening for tap events), catch:scroll (listening for scroll events), bind:input (listening for input events), etc. In practice, all nodes in the component structure tree are traversed, and each component instance is checked one by one to see if it carries an event binding attribute declaration.

[0052] Step 204: For the first component instance carrying the event binding property declaration, bind an event listener to the first component instance. Configure the event listener to listen for events associated with the event binding property declaration of the first component instance.

[0053] In this embodiment, a component instance carrying an event binding attribute declaration is defined as a first component instance. For the first component instance, a corresponding event listener can be bound to it according to the event type declared. For example, in a shopping page, the "product card component" is configured with bind:tap, and the "shipping address input box" is configured with bind:input. A "tap event listener" is bound to the component declared with bind:tap, and an "input event listener" is bound to the component declared with bind:input, ensuring that the monitoring type of the listener matches the declaration perfectly. After binding, the event listener is associated with the component instance's attributes (such as component identifier and attribution identifier) ​​and is only activated when the declared event type is detected, avoiding meaningless monitoring consumption. If the component instance has no event binding attribute declaration, such as a text component (text) that is only used for display and does not need to respond to user interaction, the event listener binding is skipped to reduce unnecessary resource consumption.

[0054] In one embodiment, taking the "Product List Page" of the shopping interface as an example, the "Product Image Component" on the page is only used to display images and has no event binding attribute declaration, so no listeners are bound. The "Product Card Component" has its wxml tag configured with bind:tap="handleGoodsTap" (declaring that it listens for the tap event), and a "tap event listener" is bound to it to monitor only the tap interaction on this component. The "Favorite Button next to the Product Price" has bound bind:longtap="handleCollectLongTap" (declaring that it listens for the long press event), and a "long press event listener" is bound to it to monitor only the long press interaction.

[0055] The above approach, by detecting whether the rendering layer component instance carries an event binding attribute declaration and binding the corresponding event listener only to components with such declarations, avoids allocating listener resources to components that do not require user interaction, significantly reducing rendering layer memory consumption and invalid monitoring overhead. At the same time, the event listener only listens to the event types specified in the declaration, ensuring that the monitoring scope accurately matches business needs, reducing interference from irrelevant events, and improving the efficiency and targeting of rendering layer event monitoring.

[0056] Step 205: When a user interaction event associated with a component instance is detected, a preset event dispatch method is called in the rendering layer to start the propagation process of the user interaction event. The propagation process is used to make the user interaction event propagate through multiple component instances in sequence according to the hierarchical structure of the component structure tree, and pass the event information to the target mapping instance associated with the triggered target component instance.

[0057] In this embodiment, the preset event dispatch method is a standardized interface (such as dispatchEvent) encapsulated by the rendering layer. Its core functions include generating an event object containing a complete context (fields include event type, trigger time, touch coordinates, unique identifier of the current component, and attribution identifier, etc.), parsing the hierarchical relationship of the component structure tree, determining the propagation direction according to the event binding attribute declaration, and initiating an orderly propagation process. The propagation process is the path of the event in the component structure tree, which must strictly follow the component hierarchy order. At each component instance, a processing logic of "listener detection - event handling (if any) - continued propagation" is triggered to ensure predictability. Furthermore, the propagation direction of the user interaction event propagation process is determined by the event type corresponding to the event binding attribute declaration. Optionally, the event type corresponding to the event binding attribute declaration includes a first event type and a second event type. The propagation direction corresponding to the first event type is from top to bottom in the component structure tree. That is, the event starts from the top-level root component of the component structure tree, passes through each level of parent components of the target component instance, and finally propagates to the bottom-level target component instance that triggered the event, realizing the capture logic of "higher-level components prioritizing event monitoring". The propagation direction for the second event type is from bottom to top within the component structure tree. That is, the event starts from the bottom-level target component instance that triggers the event, passes through its parent components at each level, and finally propagates to the top-level root component of the component structure tree, realizing the bubbling logic that "after a lower-level component triggers, a higher-level component can subsequently respond." In one embodiment, the first event type is the `capture-bind` attribute, used to declare the component instance's need to listen for the event during the "capture phase"; the second event type is the `bind` attribute, used to declare the component instance's need to listen for the event during the "bubbling phase." Furthermore, in the propagation process of the same user interaction event, the propagation process corresponding to the first event type (`capture-bind` attribute) executes before the propagation process corresponding to the second event type (`bind` attribute), ensuring that event propagation conforms to the standardized "capture-bubbling" chain logic. Here, the target component instance refers to the component instance that is triggered by the event, and the mapping instance associated with the target component instance is the target mapping instance.

[0058] Step 206: In the propagation process, when a user interaction event propagates to the corresponding target component instance, the event listener bound to the target component instance captures the user interaction event, extracts the event information of the user interaction event, and then passes the event information to the corresponding target mapping instance in the logic layer so that the logic layer executes the processing logic corresponding to the user interaction event.

[0059] Specifically, in this embodiment, when a user triggers an interaction at the rendering layer (such as clicking the "Add to Cart" button), if the component instance is already bound to a corresponding event listener, the rendering layer automatically calls a preset event dispatch method to generate an event object containing basic information such as the event type, trigger location, and the component's unique identifier, and initiates the propagation process. During the propagation process, the event object propagates along the hierarchical path of the component's structure tree. Each component instance along the way sequentially checks whether it is bound to an event listener of the corresponding event type. If a passing component instance does not have a corresponding event listener, the user interaction event skips that component and continues propagating; if a passing component instance has a corresponding event listener, the event listener is immediately activated when the user interaction event propagates to that component. When the user interaction event propagates to the target component instance (i.e., a component instance carrying an event binding attribute declaration matching the event type of the user interaction event and already bound to a corresponding event listener, such as the "Add to Cart" button), its bound event listener captures the event object and extracts event information from the user interaction event. The event listener then passes the extracted event information to the logic layer via the bridge. The logic layer locates the corresponding target mapping instance based on the attribution identifier, thus completing the accurate transmission of event information.

[0060] In one embodiment, such as Figure 4 As shown, Figure 4 This is a timing diagram for event processing provided in an embodiment of the present invention. Figure 4 In this lifecycle method, a Vue component enters this state after the DOM is mounted in the rendering layer. At this point, the component is in an operable state, providing a prerequisite for subsequent detection of event binding attribute declarations and listener binding, ensuring that operations are performed while the component is available. Simultaneously, it retrieves the component's `attrs` attribute set and the user-bound event options: extracting the component's `attrs` attribute set and the user-configured event options (including `capture-bind`, `capture-catch`, `bind`, and `catch` class attributes).

[0061] Next, it checks whether the component instance has configured one of the four event binding attribute declarations: bind, catch, capture-bind, or capture-catch. If the component instance has configured capture-bind or capture-catch event binding attribute declarations, the addEventListener (capture phase) operation is executed. If the component instance has configured bind or catch event binding attribute declarations, the addEventListener (bubbling phase) operation is executed. For components without event binding attribute declarations, the binding step is skipped to avoid allocating redundant listener resources for components with no interactive requirements (such as text components used only for display), thereby reducing rendering layer memory usage and unnecessary monitoring overhead.

[0062] When a user interacts with the rendering layer (e.g., clicks, swipes), it triggers the bound event listeners. The activated event listeners then trigger preset callback functions, initiating the event information extraction and encapsulation process. Based on the event binding attribute declaration type (captureCatch, captureBind, catch, bind) configured in the component, the current propagation stage of the event is calculated. Additionally, an event object is assembled according to a specified format, including fields such as type, detail, currentTarget, target, and touches. Then, using a bridge, the triggerUIEvent method is called, carrying webviewId, refId, methodName, and payload. Based on the webviewId and moduleId, the logic layer locates the mapping instance. The logic layer then searches for the corresponding target mapping instance in the mapping instance association index based on the received identifier.

[0063] Finally, the logic layer calls the matching event handler on the target mapping instance to execute the business logic and generate a result, returning the processing result `res` after execution. If there is a need for UI feedback, the processing result `res` is passed to the preset `success` callback function and executed.

[0064] For example, taking the "Product Details Page" of the shopping interface as an example, the page component structure tree is as follows: Page root component (PAGE_Detail) → Product operation area component (CPN_GoodsOp, bound to capture-bind:tap="handleCaptureTap", dataset:{"goodsId":"SP202406001"}) → Add to cart button component (BTN_AddCart, bound to bind:tap="handleAddCart", unique identifier "BTN_AddCart001", attribution identifier "CPN_GoodsOp001"). When the user clicks the "Add to Cart" button, a tap event is triggered. The first event type corresponds to top-down capture propagation, and the second event type corresponds to bottom-up bubbling propagation. The specific execution process is as follows: Capture Phase: The target component instance is the "Product Operation Area Component (CPN_GoodsOp)" (corresponding to the first event type). Event propagation path (from top to bottom): Page root component → Product Operation Area Component → Add to Cart button component. User interaction events first propagate to the Product Operation Area Component. The capture-bind:tap event listener bound to the Product Operation Area Component perfectly matches the tap event type in the current capture phase. Therefore, this component is determined to be the target component in the capture phase, and the event listener is immediately activated. The event listener extracts event information from the event object, and the event information is encapsulated as {"eventType":"tap","targetCompId":"CPN_GoodsOp001","refId":"CPN_GoodsOp001","bizData":{"goodsId":"SP202406001"},"position":{"x":320,"y":580},"timestamp":1700123456789}. Then, the information is passed to the logic layer through the bridge. The logic layer uses "CPN_GoodsOp001" to query the associated index, locates the mapping instance "MAP_GoodsOp001" corresponding to the product operation area component, and calls the processor of the instance to execute the "verify product inventory" logic (returning "sufficient inventory, 15 items remaining").

[0065] Bubbling Phase: The target component instance is the "Add to Cart button component (BTN_AddCart)" (corresponding to the second event type). Event propagation path (bottom to top): Add to Cart button component → Product operation area component → Page root component. The user interaction event first propagates to the Add to Cart button component. The bind:tap event listener bound to the button component perfectly matches the current bubbling phase and the tap event type, therefore this component is determined to be the target component in the bubbling phase. The event listener extracts more detailed event information and encapsulates it as follows: {"eventType":"tap","targetCompId":"BTN_AddCart001","refId":"CPN_GoodsOp001","bizData":{"goodsId":"SP2024 06001","btnType":"addCart"},"position":{"x":320,"y":580},"timestamp":1700123456789,"touchDuration":200}.

[0066] The event information is then passed to the logic layer via the bridge. The logic layer queries the index based on "CPN_GoodsOp001" and filters out the target mapping instance "MAP_AddCart001" in combination with "BTN_AddCart001". After passing the event information to the target mapping instance, the processor is called to execute the core business logic of "adding products to the shopping cart", thus completing the transmission of event information and preparation for subsequent processing.

[0067] Additionally, on mobile devices, touchstart, touchmove, and touchend can be used to simulate tap and longTap events. For example, ... Figure 5 As shown, Figure 5 This invention provides a timing diagram for simulating tap and longTap events on a mobile device. When a user's finger touches the mobile screen, it triggers the underlying touchstart event. The TapEvent system then enters the event monitoring process and formally starts the simulation logic of the tap event. After capturing the touchstart event, the TapEvent system immediately records the touch start position (e.g., coordinates x:320, y:580) and simultaneously starts a long-press delay timer of a preset duration (e.g., set to 350ms), which serves as the key basis for distinguishing between tap (short press) and longTap (long press) events. If the user's finger slides after touching the screen, a touchmove event is triggered (this step is optional; if the finger remains stationary, this event is not triggered). After capturing the touchmove event, the TapEvent system calculates the distance the finger has moved in real time. If the distance exceeds a preset threshold (e.g., 10px), it determines that the current operation is a slide rather than a click and immediately cancels the triggering plan for subsequent tap events. After the user completes the interaction, they release their finger, ending the touch operation and triggering the underlying touchend event. After the TapEvent system captures the touchend event, it first clears the previously started long press delay timer to avoid accidentally triggering the longTap event; then it checks the touch duration (which must be less than the preset short press threshold, such as 700ms) and position offset (which must be within the valid range) to confirm that the current operation is a compliant tap event; then it calls setTimeout(0) to implement delayed dispatch to ensure that the touchend related processing flow is completely executed.

[0068] After the touchend processing is complete, the TapEvent system officially dispatches the tap event using the dispatchEvent method, initiating the event propagation process. The dispatched tap event bubbles up the DOM tree hierarchy, with each DOM node along the way checking for the corresponding event listener. When the tap event reaches the target Vue component, the component triggers the triggerCustomEvent mechanism, passing the event information (such as event type, triggering component identifier, business data, etc.) to the logic layer via a bridge. The logic layer then executes the corresponding business logic (such as adding a product to the cart, page redirection, etc.).

[0069] In the implementation of tap and touch events on a computer, since there are no separate touch and tap events, the mousedown event can be used to simulate the touchstart event, the mousemove event to simulate the touchmove event, the mouseup event to simulate the touchend event, and the click event to simulate the tap event. For example, ... Figure 6 As shown, Figure 6 This is a schematic diagram illustrating the implementation of Tap events on a computer according to an embodiment of the present invention. Specifically, when a user presses the mouse, triggering the `mousedown` event of the Document, the TapEvent system captures this event and simulates the `touchstart` event on a mobile device to initiate the simulation process of the Tap event on the computer. When the user moves the mouse (this step is optional; it is not executed if the mouse is pressed but not moved), triggering the `mousemove` event of the Document, the TapEvent system captures this event and simulates the `touchmove` event on a mobile device to track the mouse movement trajectory and determine if it is a valid click operation. When the user releases the mouse, triggering the `mouseup` event of the Document, the TapEvent system captures this event and simulates the `touchend` event on a mobile device to complete the simulation of the "touch ended" state. When the user triggers a `click` event, the Document executes the `handlePCClick` processing logic, and the TapEvent system calls the `dispatchEvent(tap)` method based on this logic to formally dispatch the simulated Tap event. The dispatched Tap event bubbles up from bottom to top in the DOM element hierarchy, passing through each DOM node. When the tap event propagates to the target Vue component, the component triggers the triggerCustomEvent mechanism, which passes the event information (such as the event type, triggering component identifier, etc.) to the logic layer. The logic layer then executes the corresponding event handling logic, achieving consistent business responses between desktop and mobile devices.

[0070] As described above, by initiating a standardized propagation process of user interaction events according to the component structure tree by calling a preset event dispatch method at the rendering layer, and during the propagation process, the dedicated listener of the target component instance accurately captures the event, extracts complete event information, and then passes it to the corresponding target mapping instance in the logic layer, this effectively solves the problems of disordered event propagation paths and missed or incorrect capture of target components in traditional events. Even in multi-component nested scenarios such as "page root component - product operation area component - add to cart button" on shopping details pages, it can ensure that events are propagated along the expected "capture / bubbling" path, greatly improving the accuracy of event positioning. On the other hand, the complete information extracted by the listener after capturing the event (including component unique identifier, attribution identifier, product ID, and other business data) provides sufficient basis for the logic layer to quickly locate the mapping instance and accurately execute business logic (such as product inventory verification and add to cart operation), avoiding processing errors caused by incomplete information. At the same time, the standardized propagation process reduces redundant consumption of event propagation, and combined with the precise activation mechanism of the listener, it reduces the occupation of ineffective resources, improves the user interaction response speed, and ensures the smoothness of the interface and the reliability of event processing in high-frequency interaction scenarios such as shopping.

[0071] Based on the above embodiments, after extracting the event information of the user interaction event and passing the event information to the target mapping instance associated with the triggered target component instance, the method further includes: If the event listener detects that the event binding property declaration of the target component instance also includes an intercept declaration, the propagation of the user interaction event is terminated.

[0072] In one embodiment, after the event listener captures the event object, it first extracts the event binding attribute declaration from the bound target component instance and determines whether the event binding attribute declaration also includes an interception declaration. In one embodiment, the attribute corresponding to the interception declaration specifically refers to event attributes prefixed with "catch" (such as "catch:tap" for bubbling phase interception, "capture-catch:tap" for capture phase interception). The core judgment criterion is whether the attribute name starts with "catch" (including both "catch" and "capture-catch"). If the event binding attribute declaration of the target component instance is detected to include such an interception declaration (such as "catch:tap"), the event propagation chain is directly cut off, ensuring that the event is no longer passed to other component instances on the current propagation path, and subsequent component instances will not receive the event again, avoiding the same event being processed repeatedly by multiple components and ensuring the uniqueness and controllability of business logic. It should be noted that interception attributes can be applied to any stage of event propagation. That is, capture-catch applies to the capture stage (when propagating from top to bottom), and catch applies to the bubbling stage (when propagating from bottom to top). Both follow the logic of "capture the event, process it, and terminate the propagation", only the stage in which they are applied is different.

[0073] As described above, by extracting event information from the event listener and passing it to the target mapping instance in the logic layer, if the event binding attribute declaration of the target component instance is detected to include an interception declaration, the event propagation is terminated. This effectively solves the problem of excessive transmission and redundant processing caused by traditional event propagation without interception, reduces invalid resource consumption, and improves user interaction response speed.

[0074] This invention also provides another event transmission method, such as... Figure 7 As shown, Figure 7 This is a flowchart illustrating another event transmission method provided in an embodiment of the present invention. Figure 7 The event passing method shown is a specific embodiment of the above-described event passing method. The event passing method provided in this embodiment of the invention includes the following steps: Step 301: Assign an instance identifier to each component instance in the rendering layer.

[0075] In this embodiment, before constructing the component structure tree, a set of instance identifiers can be assigned to each component instance in the rendering layer. Each set of instance identifiers includes at least a first identifier for uniquely identifying the component instance and a second identifier for pointing to the parent component instance of the component instance. The first identifier is a globally unique string identifier used to uniquely distinguish different component instances in the rendering layer, avoiding hierarchy confusion caused by duplicate identifiers. The second identifier is the first identifier pointing to the parent component instance (e.g., if the parent component's first identifier is "COMP_20240601_000", then the child component's second identifier is this value), used to clarify the parent affiliation of the component instance, and is the core basis for constructing the parent-child reference relationship.

[0076] Step 302: Based on the instance identifier of each component instance, determine the parent-child reference relationship between each component instance, and construct a component structure tree that represents the hierarchical relationship of all component instances in the rendering layer based on the parent-child reference relationship. The component structure tree includes multiple nodes, and each node corresponds to a component instance.

[0077] Next, iterate through all assigned instance identifiers, establishing parent-child reference relationships between components based on the rule of matching the second identifier with the first identifier. Specifically, it iterate through the second identifier of each component instance, checking if a component instance exists with a first identifier that matches that value. If it does, mark the component instance corresponding to the second identifier as the parent component and the current component instance as the child component. Repeat this process until the parent-child relationships of all component instances are determined (top-level components have no parent set, and bottom-level components have no children set). Once the parent-child reference relationships are determined, based on these relationships, with the top-level component instance as the root node, attach child component instances layer by layer to their corresponding parent components, forming a tree-like component structure tree.

[0078] As described above, by assigning a unique first identifier to each component instance in the rendering layer and a second identifier pointing to the parent, and constructing a component structure tree based on the parent-child reference relationship determined by the two, the component structure tree can completely match the actual nesting logic of the rendering layer components. This avoids problems such as incorrect event propagation paths and deviations in mapping instance creation caused by inconsistencies between the structure tree and the actual component nesting, significantly improving the accuracy of the component structure tree and the reliability of subsequent processes. At the same time, it simplifies the logical complexity of structure tree construction and reduces the resource consumption of the rendering layer.

[0079] Step 303: Synchronize the component structure tree to the logic layer so that the logic layer can create a mapping instance for each component instance based on the component structure tree.

[0080] Step 304: Detect events triggered in the rendering layer. If a user interaction event associated with a component instance is detected, pass the event information to the target mapping instance so that the logic layer can execute the processing logic associated with the user interaction event.

[0081] Building upon the above embodiments, the events associated with component instances also include custom events. The configuration information for custom events is pre-stored in the rendering layer. Custom events are non-default interactive events defined by developers based on business requirements. The configuration information for custom events includes event identifiers (unique IDs), triggering conditions (trigger source, pre-validation, frequency limits), data carried (required / optional fields, format constraints), and execution logic.

[0082] The event transmission method provided in this embodiment of the invention further includes: Step 305: Traverse the component structure tree based on the instance identifier of the component instance to obtain the configuration information of the custom events of the parent component instance of each component instance.

[0083] In this embodiment, the component structure tree can be traversed layer by layer from the bottom component instance based on the second identifier of each component instance, and the configuration information of the custom event of the corresponding parent component of each component instance can be read during the traversal.

[0084] Step 306: Based on the obtained configuration information of the custom event, generate the metadata corresponding to the custom event.

[0085] Based on the obtained configuration information, metadata is generated according to a preset format. The metadata includes the event propagation path and event parameters. The event parameters include fields such as event name, parameter list (including parameter type and default value), and parent component identifier, ensuring that the metadata can completely describe the event processing rules.

[0086] Step 307: Synchronize the metadata to the corresponding mapping instance in the logical layer.

[0087] Finally, the meta-information is synchronized to the corresponding mapping instance in the logic layer through a bridge, based on the one-to-one relationship between component instances and mapping instances, and written into the properties of the mapping instance. Simultaneously, the logic layer returns a synchronization confirmation signal to ensure that no meta-information is lost or mismatched. For example, assume the underlying component instance is a "favorite button component" (first identifier "BTN_Collect001", second identifier "CPN_Card001", pointing to the parent component instance "product card component"). During the traversal, the parent component instance "product card component" is found through the second identifier "CPN_Card001", and its preset "onCollectChange" event configuration information is read (parameter list: goodsId (string), isCollected (boolean value)). Then, based on the configuration information of the event, metadata is generated and encapsulated as {"eventName":"onCollectChange","propagationPath":["BTN_Collect001","CPN_Card001"],"paramList":[{"name":"goodsId","type":"string"},{"name":"isCollected","type":"boolean"}],"parentCompId":"CPN_Card001"}. Finally, the metadata is synchronized to the mapping instance "MAP_Collect001" corresponding to the "Favorite Button Component" in the logic layer through a bridge, completing the storage and preparation of the metadata.

[0088] Based on the above embodiments, it also includes: Step 308: When a custom event associated with a component instance is detected, read the corresponding target metadata from the mapping instance of the triggered component instance in the logic layer.

[0089] In this embodiment, custom events can be triggered by code because they are essentially logic-driven events serving business collaboration. Unlike system default events triggered by direct user interaction (such as clicks or input), custom events require precise cross-component / cross-layer communication at specific business nodes (such as successful data submission or status update completion). Collaboration needs that are not directly user-operated (such as a child component notifying its parent component to update the UI, or the logic layer feeding back processing results to the rendering layer) are triggered through user interaction. Furthermore, code triggering allows for precise control over the timing and propagation scope of events (directed delivery to the target component, avoiding redundant responses from irrelevant components). This adapts to the separation design of the rendering layer handling interaction and the logic layer handling business in a dual-thread architecture. It also clearly distinguishes custom events from system default events, avoiding event conflicts and ultimately ensuring an orderly closed loop of business collaboration between components and between the two threads. When a custom event triggered by code on a component instance is detected, the corresponding target metadata needs to be read from the mapping instance corresponding to the triggered component instance in the logic layer.

[0090] Step 309: Determine the event propagation path and the target event parameters of the triggered custom event based on the target metadata.

[0091] After obtaining the target metadata, the propagation path in the target metadata is parsed to determine the parent component instance to which the custom event needs to be passed. At the same time, it is verified whether the parameters passed by the code match the event parameters in the target metadata, such as whether the parameter name and type are consistent. If they match, the event parameters in the target metadata are determined as the target event parameters. If they are missing, the default values ​​in the metadata are used to fill in the missing parameters.

[0092] Step 310: Based on the event propagation path, transmit the target event parameters to the mapping instance of the corresponding parent component instance in the logic layer to call the processing logic corresponding to the triggered custom event.

[0093] Finally, based on the event propagation path in the metadata, the corresponding parent component instance is determined, the target event parameters are transmitted to the mapping instance of the corresponding parent component instance in the logic layer, and the processor matching the triggered custom event is called to execute the business logic.

[0094] In one embodiment, such as Figure 8 As shown, Figure 8 This is a flowchart illustrating a process for triggering a custom event, provided by an embodiment of the present invention. Figure 8In the logic layer, after detecting that the code has triggered a custom event, the triggerEvent method is called, passing in the event name and the moduleId used to locate the component instance (associated with the first identifier of the component instance), and the call is forwarded to the rendering layer through the Bridge.

[0095] After receiving a triggerEvent request from the logic layer, the Bridge dispatches it to the rendering layer, initiating the component instance location process. The rendering layer uses the moduleId (the first identifier associated with the component instance) to locate the corresponding component instance within the rendering layer, thus identifying the target component instance that triggered the custom event. Once the target component instance is found, the rendering layer locates it and extracts its DOM information (such as hierarchy and event configuration) to prepare for generating the event context.

[0096] Next, the rendering layer encapsulates an event context containing DOM information, component identifiers, etc., and passes it back to the logic layer via the Bridge, completing the information feedback between the rendering and logic layers. After receiving the event context returned by the rendering layer, the Bridge calls back to the event handling module of the logic layer, enabling the logic layer to obtain the basic information to trigger the custom event. The logic layer combines the callback event context with the target metadata to verify and assemble the target event parameters of the custom event (ensuring that the parameters match the event parameters in the metadata, and filling in default values ​​if missing). Finally, according to the event propagation path in the target metadata, the logic layer broadcasts the assembled custom event parameters to the corresponding mapping instance of the parent component instance via the Bridge, triggering the processing logic matching the custom event in the mapping instance, completing the closed loop of the custom event response.

[0097] For example, let's take the "favorite button trigger event" on the "product list page" of the shopping interface as an example. When a user clicks the "Favorite Button" component, the code triggers a custom event: the "onCollectChange" event, passing the parameters {goodsId:'SP202406001', isCollected:true}. Then, it reads metadata from the "MAP_Collect001" mapping instance in the logic layer (propagation path: favorite button → product card, event parameters: goodsId, isCollected). Based on the metadata "parentCompId", it finds the parent component mapping instance "MAP_Card001" and determines the target event parameters. Next, it passes the target event parameters to the parent component mapping instance "MAP_Card001", calls the "handleCollectChange" handler of "MAP_Card001", updates the product favorite status (writes it to the database), and simultaneously feeds back to the rendering layer, changing the favorite button icon from "hollow" to "solid", completing the event handling loop.

[0098] As described above, by triggering a custom event through code, the propagation path and event parameters are accurately determined based on metadata and then passed to the parent component's mapping instance to execute the corresponding processing logic. This effectively solves the problems of parameter confusion and undirected propagation after traditional custom event triggering. It achieves precise business collaboration between components across levels and between two threads, improves the efficiency and reliability of custom event processing, and ensures the orderly implementation of the business loop.

[0099] Based on the above embodiments, step 307, which synchronizes the metadata to the corresponding mapping instance in the logical layer, includes: Step 3071: Temporarily store the metadata in the message cache queue of the rendering layer.

[0100] Step 3072: Listen for changes in the properties of component instances in the rendering layer.

[0101] Step 3073: If a change in the properties of a component instance is detected, update the metadata temporarily stored in the message cache queue.

[0102] Step 3074: Under the condition that the preset synchronization conditions are met, synchronize the updated metadata to the corresponding mapping instance in the logical layer.

[0103] In this embodiment, after the metadata of custom events is generated in the rendering layer, it is not immediately transmitted to the logic layer for synchronization. Instead, it is temporarily stored in an information cache queue in the order of generation time. The elements of the information cache queue include the metadata content, the first identifier of the associated component, and the generation timestamp. A maximum queue capacity is set to prevent overflow. Then, the attribute monitoring module is started in the rendering layer to monitor changes in the custom event configuration of the associated components in the information cache queue in real time (such as adding parameters or modifying event names). If a change is detected, the corresponding metadata in the information cache queue is located and its content is updated. Subsequently, when a preset synchronization condition is triggered, the metadata in the queue is batch synchronized to the corresponding mapping instance in the logic layer through a bridge. After synchronization is complete, the information cache queue is cleared. The preset synchronization condition can be set in advance, for example, the preset synchronization condition is that the current macro task (such as component rendering or user interaction callback) is completed. In one embodiment, as shown... Figure 9 As shown, Figure 9 This invention provides a timing diagram for batch synchronization of metadata. Figure 9 In the `onMounted` lifecycle hook, the rendering layer establishes a `watchEffect` to monitor changes in the component instance's `id`, `class`, data type properties, event configurations, and other attributes, preparing to capture component attribute changes. The component instance traverses the component tree structure upwards based on `parentId` (the second identifier), collecting information about parent components bound to custom events to obtain the parent component's custom event configuration. The component instance assembles meta-information, including fields such as event propagation path, `id`, `class`, `dataset`, `eventOptions`, and `ancestors`, ensuring the meta-information fully describes the event handling rules. Afterwards, the rendering layer synchronizes the meta-information to the logic layer via a Bridge, carrying the `moduleId` (associated with the component instance's first identifier) ​​during synchronization, completing the meta-information transfer from the rendering layer to the logic layer.

[0104] The logic layer updates the corresponding mapped instance cache based on the moduleId, storing the latest meta information in the mapped instance to ensure that the logic layer holds the latest meta information of the component instance. The watchEffect listening module in the rendering layer triggers a callback, activating the listening logic due to changes in component properties caused by meta information synchronization, preparing for subsequent event merging operations. The message cache queue management module in the rendering layer merges cached event messages, following the rule of consuming the event queue once per macro task, reducing the number of bridge communication calls and improving performance (this is the preset synchronization condition: batch synchronization when the macro task ends).

[0105] Next, the rendering layer initiates a `triggerEvent` call via `Bridge`, carrying the `moduleId` and the event name, to start the custom event processing flow. The mapping instance management module of the logic layer reads the cached meta (i.e., the synchronized target meta information) to provide a basis for custom event parameter assembly and propagation path parsing.

[0106] The event handling module in the logic layer assembles custom event parameters and locates the mapping instance of the parent component instance based on the event propagation path in the meta tag. For the parent component mapping instance, it calls the matching handler, broadcasts the event to the parent component, and executes the business logic. Finally, the logic layer returns the event handling result to the rendering layer, completing the closed loop of batch synchronization of metadata and custom event handling.

[0107] The above-mentioned mechanisms, such as temporary storage of metadata in a cache queue, listening for and updating component attribute changes, and batch synchronization under preset conditions, can effectively reduce the number of communication times for metadata synchronization between two threads, avoid redundant bridge interactions caused by frequent changes in custom event configurations, reduce resource consumption, and improve overall performance.

[0108] This invention also provides an event transmission device, such as... Figure 10 As shown, Figure 10 This is a schematic diagram of an event passing device provided in an embodiment of the present invention. The event passing device provided in this embodiment of the present invention is applied to a dual-threaded architecture including a rendering layer and a logic layer. The event passing device includes: The structure tree building module 401 is used to build a component structure tree based on component instances in the rendering layer.

[0109] The node relationship information synchronization module 402 is used to synchronize the component structure tree to the logic layer, so that the logic layer can create a mapping instance for each component instance based on the component structure tree.

[0110] The event delivery module 403 is used to detect events triggered in the rendering layer. When a user interaction event associated with a component instance is detected, the event information is delivered to the target mapping instance so that the logic layer can execute the processing logic associated with the user interaction event.

[0111] It also includes an ownership identifier setting module, which is used to set the ownership identifier of each component instance in the component structure tree before detecting events triggered in the rendering layer, and synchronize the ownership identifier to the mapping instance in the logic layer. Accordingly, the event delivery module 403 is specifically used to extract event information and determine the target attribution identifier of the triggered component instance when a user interaction event associated with a component instance is detected, and to transmit the event information and the target attribution identifier to the logic layer, so that the logic layer can locate the target mapping instance based on the target attribution identifier and then transmit the event information to the target mapping instance.

[0112] The property declaration checking module is used to check whether each component instance carries an event binding property declaration after the component structure tree is built based on the component instance of the rendering layer and before the events triggered in the rendering layer are detected. The listener binding module is used to bind event listeners to a first component instance that carries an event binding property declaration. The event listeners are configured to listen for events associated with the event binding property declaration of the first component instance.

[0113] The event transmission module 403 includes: The event propagation submodule is used to call a preset event dispatch method in the rendering layer to start the propagation process of the user interaction event when a user interaction event associated with a component instance is detected. The propagation process is used to make the user interaction event propagate through multiple component instances in sequence according to the hierarchical structure of the component structure tree, and pass the event information to the target mapping instance associated with the triggered target component instance. The event information transmission submodule is used in the propagation process. When a user interaction event propagates to the corresponding target component instance, the event listener bound to the target component instance captures the user interaction event, extracts the event information of the user interaction event, and then passes the event information to the corresponding target mapping instance in the logic layer.

[0114] The event delivery module 403 is further configured to terminate the propagation of user interaction events after the event information is delivered to the target mapping instance associated with the triggered target component instance, if the event listener detects that the event binding attribute declaration of the target component instance also includes an interception declaration.

[0115] The structure tree construction module 401 includes: The identifier allocation submodule is used to assign an instance identifier to each component instance in the rendering layer. The structure tree construction submodule is used to determine the parent-child reference relationship between component instances based on the instance identifier of each component instance, and to construct a component structure tree that represents the hierarchical relationship of all component instances in the rendering layer based on the parent-child reference relationship.

[0116] The events associated with component instances also include custom events, and the event delivery mechanism also includes: The configuration information acquisition module is used to traverse the component structure tree based on the instance identifier of the component instance to obtain the configuration information of custom events of the parent component instance of each component instance. The metadata generation module is used to generate metadata corresponding to the custom event based on the configuration information of the obtained custom event. The metadata synchronization module is used to synchronize metadata to the corresponding mapping instance in the logical layer.

[0117] The event transmission device also includes: The custom event triggering module is used to read the corresponding target metadata from the mapping instance of the triggered component instance in the logic layer when a custom event associated with the triggering component instance is detected. The event parameter determination module is used to determine the event propagation path and the target event parameters of the triggered custom event based on the target metadata. The event parameter transmission module is used to transmit the target event parameters to the mapping instance of the corresponding parent component instance in the logic layer according to the event propagation path, so as to call the processing logic corresponding to the triggered custom event.

[0118] The metadata synchronization module includes: The metadata temporary storage submodule is used to temporarily store metadata to the message cache queue of the rendering layer; The property change listener submodule is used to listen for property changes of component instances in the rendering layer; The metadata update submodule is used to update the metadata temporarily stored in the message cache queue when a change in the property of a component instance is detected. The metadata synchronization submodule is used to synchronize the updated metadata to the corresponding mapping instance in the logical layer when the preset synchronization conditions are met.

[0119] The event transmission device provided in this embodiment of the invention is included in a terminal device and can be used to execute the event transmission method provided in the above embodiment, and has corresponding functions and beneficial effects.

[0120] It is worth noting that in the above-described embodiments of the event transmission device, the various units and modules included are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be achieved; in addition, the specific names of each functional unit are only for easy differentiation and are not used to limit the scope of protection of the present invention.

[0121] This embodiment also provides a terminal device, such as Figure 11 As shown, Figure 11 This is a schematic diagram of the structure of a terminal device provided in an embodiment of the present invention, such as... Figure 11As shown, the terminal device 50 includes a processor 500 and a memory 501; The memory 501 is used to store the computer program 502 and to transfer the computer program 502 to the processor 500; The processor 500 is used to execute the steps in one of the above-described event transmission method embodiments according to the instructions in the computer program 502.

[0122] For example, computer program 502 may be divided into one or more modules / units, one or more of which are stored in memory 501 and executed by processor 500 to complete this application. One or more modules / units may be a series of computer program instruction segments capable of performing a specific function, which describe the execution process of computer program 502 in terminal device 50.

[0123] Terminal device 50 may be a computing device such as a desktop computer, laptop, handheld computer, or cloud server. Terminal device 50 may include, but is not limited to, processor 500 and memory 501. Those skilled in the art will understand that... Figure 11 This is merely an example of terminal device 50 and does not constitute a limitation on terminal device 50. It may include more or fewer components than shown, or combine certain components, or different components. For example, terminal device 50 may also include input / output devices, network access devices, buses, etc.

[0124] The processor 500 may be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor.

[0125] The memory 501 can be an internal storage unit of the terminal device 50, such as a hard disk or RAM of the terminal device 50. The memory 501 can also be an external storage device of the terminal device 50, such as a plug-in hard disk, Smart Media Card (SMC), Secure Digital (SD) card, or FlashCard equipped on the terminal device 50. Furthermore, the memory 501 can include both internal and external storage units of the terminal device 50. The memory 501 is used to store computer programs and other programs and data required by the terminal device 50. The memory 501 can also be used to temporarily store data that has been output or will be output.

[0126] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0127] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces, or indirect coupling or communication connection between apparatuses or units, and may be electrical, mechanical, or other forms.

[0128] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0129] Furthermore, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0130] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing computer programs, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0131] This invention also provides a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform an event delivery method, the method comprising the following steps: A component structure tree is constructed based on component instances in the rendering layer. The component structure tree includes multiple nodes, and each node corresponds to a component instance. Synchronize the component structure tree to the logic layer so that the logic layer can create a mapping instance for each component instance based on the component structure tree. Detect events triggered in the rendering layer. If a user interaction event associated with a component instance is detected, pass the event information to the target mapping instance so that the logic layer can execute the processing logic associated with the user interaction event.

[0132] Note that the above are merely preferred embodiments and the technical principles applied in this invention. Those skilled in the art will understand that the embodiments of this invention are not limited to the specific embodiments described herein, and various obvious changes, readjustments, and substitutions can be made without departing from the protection scope of this invention. Therefore, although the embodiments of this invention have been described in detail above, the embodiments of this invention are not limited to the above embodiments. More other equivalent embodiments may be included without departing from the concept of the embodiments of this invention, and the scope of the embodiments of this invention is determined by the scope of the appended claims.

Claims

1. An event delivery method, characterized by, The method is applied to a dual-thread architecture including a rendering layer and a logic layer, and comprises the following steps: constructing a component structure tree based on component instances of the rendering layer; synchronizing the component structure tree to the logic layer, so that the logic layer creates mapping instances for each of the component instances based on the component structure tree; detecting an event triggered in the rendering layer, and in the case of detecting a user interaction event associated with the component instance, delivering event information to a target mapping instance, so that the logic layer executes processing logic associated with the user interaction event.

2. The event delivery method of claim 1, wherein, Before the step of detecting an event triggered in the rendering layer, the method further comprises: setting a home identifier of each of the component instances in the component structure tree, and synchronizing the home identifier to a mapping instance in the logic layer; in the case of detecting a user interaction event associated with the component instance, the step of delivering event information to a target mapping instance comprises: in the case of detecting a user interaction event associated with the component instance, extracting event information and determining a target home identifier of the triggered component instance, and transmitting the event information and the target home identifier to the logic layer, so that the logic layer locates a target mapping instance based on the target home identifier, and then delivers the event information to the target mapping instance.

3. The event delivery method of claim 1, wherein, After the step of constructing a component structure tree based on component instances of the rendering layer, and before the step of detecting an event triggered in the rendering layer, the method further comprises: detecting whether each of the component instances carries an event binding attribute declaration; for a first component instance carrying the event binding attribute declaration, binding an event listener in the first component instance, the event listener being configured to listen to an event associated with the event binding attribute declaration of the first component instance.

4. The event delivery method of claim 3, wherein, in the case of detecting a user interaction event associated with the component instance, the step of delivering event information to a corresponding target mapping instance comprises: in the case of detecting a user interaction event associated with the component instance, calling a preset event dispatching method in the rendering layer to start a propagation process of the user interaction event, the propagation process being used to make the user interaction event propagate through a plurality of component instances in turn according to a hierarchical structure of the component structure tree, and deliver the event information to a target mapping instance associated with a triggered target component instance.

5. The event delivery method of claim 4, wherein, the method further comprises: in the propagation process, in the case of the user interaction event propagating to a corresponding target component instance, capturing the user interaction event by an event listener bound on the target component instance, and after extracting event information of the user interaction event, delivering the event information to a corresponding target mapping instance in the logic layer.

6. The event delivery method of claim 4, wherein, after the step of delivering the event information to a target mapping instance associated with a triggered target component instance, the method further comprises: in the case of the event binding attribute declaration of the target component instance detected by the event listener further comprising an interception declaration, terminating the propagation of the user interaction event.

7. The event delivery method of claim 1, wherein, the step of constructing a component structure tree based on component instances of the rendering layer comprises: assigning an instance identifier to each component instance of the rendering layer; determining a parent-child reference relationship between each component instance based on the instance identifier of each component instance, and constructing a component structure tree representing a hierarchical relationship of all component instances in the rendering layer based on the parent-child reference relationship.

8. The event delivery method of claim 7, wherein, The event associated with the component instance also includes a custom event, and the method further includes: traversing the component structure tree based on the instance identifier of the component instance to obtain configuration information of the custom event of the parent component instance of each component instance; generating meta information corresponding to the custom event based on the obtained configuration information of the custom event; synchronizing the meta information to the corresponding mapping instance in the logic layer.

9. The event delivery method of claim 8, wherein, Further comprising: in the case of detecting a custom event associated with the component instance, reading the corresponding target meta information from the mapping instance of the triggered component instance in the logic layer; determining an event propagation path and determining the target event parameter of the triggered custom event based on the target meta information; According to the event propagation path, the target event parameter is transmitted to the mapping instance of the corresponding parent component instance in the logic layer to call the processing logic corresponding to the triggered custom event.

10. The event delivery method of claim 8, wherein, The synchronization of the meta information to the corresponding mapping instance in the logic layer includes: temporarily storing the meta information in the message cache queue of the rendering layer; listening to the attribute changes of the component instance in the rendering layer; In the case of detecting that the attribute of the component instance changes, updating the meta information temporarily stored in the message cache queue; In the case of meeting the preset synchronization condition, the updated meta information is synchronized to the corresponding mapping instance in the logic layer.

11. An event delivery apparatus, characterized by comprising: The device is applied to a double-thread architecture including a rendering layer and a logic layer, and the device includes: a structure tree construction module for constructing a component structure tree based on the component instances of the rendering layer; a node relationship information synchronization module for synchronizing the component structure tree to the logic layer, so that the logic layer creates a corresponding mapping instance for each component instance based on the component structure tree; an event delivery module for detecting triggered events in the rendering layer, and in the case of detecting a user interaction event associated with the component instance, delivering event information to the corresponding target mapping instance to make the logic layer execute processing logic corresponding to the user interaction event.

12. A terminal device, comprising: The terminal device includes a processor and a memory; The memory is used to store a computer program and transmit the computer program to the processor; The processor is used to execute the event delivery method according to the instructions in the computer program.

Images