End calling method and device based on open tag, computer equipment and storage medium
By using an open tag-based call-to-end method and leveraging custom directives and directive hooks in the front-end framework to dynamically generate overlay tags, the problem of low development efficiency caused by complex page design after app sharing is solved, achieving efficient and flexible page navigation and code maintenance.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-12-02
- Publication Date
- 2026-03-24
AI Technical Summary
In existing technologies, the page design after an APP is shared to a social platform is complex, resulting in a large workload for development, low development efficiency, difficult code maintenance, and high costs.
The approach adopts an open tag-based endpoint call method. It creates endpoint commands through custom directives in the front-end framework, listens to the state of page nodes, dynamically generates overlay tags, and responds to interactive operations to perform jumps. It also uses command hooks for initialization and parameter updates.
It improves development efficiency and flexibility, reduces development costs and risks, and enhances code maintainability and page loading efficiency.
Smart Images
Figure CN121722997A_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of development, and is applied to online processing business scenarios such as financial technology, and in particular relates to a method and device for calling an end based on an open label, a computer device and a storage medium. BACKGROUND
[0002] In today's era of rapid development of mobile Internet, APP (Application) promotion and user interaction have become the key focus of application development. Sharing APPs to mainstream social platforms and using their open label function to call small programs or APPs are common needs to improve application dissemination efficiency and user experience. For example, in the financial field, with the deepening of digital services, sharing financial APPs to mainstream social platforms has become a key requirement to improve the dissemination and user experience of financial services, which can expand service coverage and provide users with convenient operation portals.
[0003] In practical applications, the page design after sharing the APP to the social platform is highly diverse. Different page click area styles differ greatly, such as round buttons, which are visually soft and can effectively utilize space, making it easy for users to operate accurately; square icons are simple and regular, making it easy to quickly identify interactive intentions. At the same time, the landing page content after calling the end is not static, but is dynamically adjusted according to real-time user operations and complex business logic.
[0004] However, traditional development relies on handwritten labels, and developers need to write specific codes for each page's unique click area style and landing page dynamic changes. This brings many problems: on the one hand, the increasing number of pages increases the development workload exponentially, consuming a lot of manpower and time; on the other hand, the code differences and complexity make maintenance difficult, and when business or page design changes, a lot of resources need to be invested to modify and test the code, which seriously reduces development efficiency and increases project costs and risks. SUMMARY
[0005] The purpose of the embodiments of the present application is to provide a method and device for calling an end based on an open label, a computer device and a storage medium, to solve the technical problem of high development workload and complexity in the prior art, which seriously reduces development efficiency.
[0006] In a first aspect, a method for calling an end based on an open label is provided, which adopts the technical solution as follows: A calling end instruction is created through a front-end framework custom instruction, and the calling end instruction is bound to a target page node; A predefined initialization function is called through an instruction hook of the calling end instruction, and a calling end jump parameter is passed to initialize the target page node; Monitor the mounting status of the target page node, and dynamically create an open tag node when the mounting status meets the preset insertion conditions; The style of the open tag node is assigned based on the node attributes of the target page node to obtain the overlay tag; Upon detecting an update to the client redirection parameters, the command hook is invoked to extract the target landing page parameters from the updated client redirection parameters, and the target landing page parameters are assigned to the overlay tag to obtain the client redirection tag; In response to the interactive operation of the terminal jump tag, the user is redirected to the target landing page.
[0007] Secondly, an open tag-based terminal device is provided, which adopts the following technical solution: A module is created to create client-calling instructions using custom directives from the front-end framework, and then binds the client-calling instructions to target page nodes. The delivery module is used to call a predefined initialization function through the instruction hook of the terminal instruction, and to initialize the target page node by passing the terminal jump parameters; The monitoring module is used to monitor the mounting status of the target page node, and dynamically create an open tag node when the mounting status meets the preset insertion conditions; The assignment module is used to assign style values to the open tag node based on the node attributes of the target page node to obtain the overlay tag; The extraction module is used to listen for updates to the client jump parameters, call the instruction hook to extract the target landing page parameters from the updated client jump parameters, and assign the target landing page parameters to the overlay tag to obtain the client jump tag; The jump module is used to jump to the target landing page in response to the interactive operation of the jump tag of the client.
[0008] Thirdly, a computer device is provided that adopts the technical solution described below: The computer device includes a memory and a processor, the memory storing computer-readable instructions, and the processor executing the computer-readable instructions to implement the steps of the open tag-based call method as described above.
[0009] Fourthly, a computer-readable storage medium is provided, which adopts the technical solution described below: The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the open tag-based call-to-end method as described above.
[0010] Compared with the prior art, this application has the following main advantages: This application provides a method for triggering page navigation based on open tags. It utilizes a front-end framework to define a generic command for controlling page navigation. The generic command's hook calls a predefined initialization function to initialize the target page node bound to the page component. Then, it monitors the mounting status of the target page node. When the mounting status meets preset insertion conditions, an open tag node is generated based on the target page node. The size data of the target page node is assigned to the open tag node, and an overlay tag is generated and inserted into the target page node. The application also monitors the parameter update status of the navigation parameters, calls the command hook to extract the target landing page parameters from the updated navigation parameters, assigns the target landing page parameters to the overlay tag, and obtains the navigation tag. Finally, in response to the interaction with the navigation tag, the user is redirected to the target landing page. This method easily implements navigation functionality through custom generic commands, improving development efficiency and flexibility, enhancing code maintainability, reducing development costs and risks, and improving page navigation efficiency. Attached Figure Description
[0011] To more clearly illustrate the solutions in this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0012] Figure 1 This is an exemplary system architecture diagram to which this application can be applied; Figure 2 This is a flowchart of an embodiment of the open tag-based call method according to this application; Figure 3 This is a schematic diagram of the structure of an embodiment of the open tag-based call terminal device according to this application; Figure 4 This is a schematic diagram of the structure of one embodiment of the computer device according to this application. Detailed Implementation
[0013] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains; the terminology used herein in the specification of the application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having," and any variations thereof, in the specification, claims, and foregoing drawings of this application, are intended to cover non-exclusive inclusion. The terms "first," "second," etc., in the specification, claims, or foregoing drawings of this application are used to distinguish different objects, not to describe a particular order.
[0014] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.
[0015] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings.
[0016] like Figure 1 As shown, system architecture 100 may include terminal device 101, network 102, and server 103. Terminal device 101 may be a laptop 1011, tablet 1012, or mobile phone 1013. Network 102 is used as a medium to provide a communication link between terminal device 101 and server 103. Network 102 may include various connection types, such as wired, wireless communication links, or fiber optic cables.
[0017] Users can use terminal device 101 to interact with server 103 via network 102 to receive or send messages, etc. Various communication client applications can be installed on terminal device 101, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social media platform software, etc.
[0018] Terminal device 101 can be various electronic devices with a display screen and support web browsing. In addition to laptops 1011, tablets 1012, or mobile phones 1013, terminal device 101 can also be an e-book reader, an MP3 player (Moving Picture Experts Group Audio Layer III), an MP4 player (Moving Picture Experts Group Audio Layer IV), a laptop computer, and a desktop computer, etc.
[0019] Server 103 can be a server that provides various services, such as a backend server that provides support for the pages displayed on terminal device 101.
[0020] It should be noted that the open tag-based client activation method provided in this application is generally executed by a server / terminal device, and correspondingly, the open tag-based client activation device is generally located in the server / terminal device.
[0021] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.
[0022] Continue to refer to Figure 2 The flowchart illustrates an embodiment of the open tag-based call method according to this application, including the following steps: Step S201: Create a client-calling instruction using a custom instruction from the front-end framework, and bind the client-calling instruction to the target page node.
[0023] A front-end framework is a progressive web programming framework for building user interfaces. Its purpose is to simplify the development of dynamic web pages, achieve automatic synchronization of data and views through reactive data binding, and adopt a component-based architecture to break down the interface into independent and reusable modules, making the code easier to maintain and extend.
[0024] Custom instructions encapsulate common logic to support reuse across different components. The encapsulation process abstracts core functionalities that are independent of specific business scenarios into independent processing modules, enabling instructions to adapt to different usage environments and requirements.
[0025] Specifically, the implementation of custom directives involves several key components. The directive registration mechanism allows developers to declare a directive with a specific name in the front-end framework. This directive can be applied to any page node through attributes. Custom directives are bound to the lifecycle of DOM (Document Object Model) elements through directive hooks. When a DOM element is created, updated, or destroyed, the corresponding directive hook will be automatically invoked.
[0026] In this embodiment, a client-calling directive is created using a custom directive from the front-end framework. This directive is used to implement the client-calling functionality. Specifically, custom directives are registered globally or locally in the front-end framework. The client-calling directive encapsulates client-calling transition logic to control the client-calling transition process. Internally, the client-calling directive maintains a state machine for the client-calling process, including initialization, loading, and ready states. State machine transitions are driven by external events, such as DOM mounting completion or third-party interface loading completion.
[0027] Globally registered custom directives can be used in any component of the entire application. Global registration is achieved by calling the directive registration interface provided by the front-end framework in the application's entry file. Registration requires specifying the directive's name and corresponding implementation logic. Global registration is suitable for scenarios where the application functionality needs to be widely used across multiple pages or components. Locally registered custom directives are only available within specific components. They are declared in the component's configuration object, offering better encapsulation and independence. This approach is suitable for scenarios where the application functionality is only used in a few specific components.
[0028] The client activation logic involves several steps: First, the client activation event parameters are extracted and parsed, obtaining detailed information about the user's operation from the client activation event object, such as click location and touch pressure. Second, the jump conditions are determined, checking whether the current environment supports the client activation function and whether the target application is installed. Third, the jump parameters are constructed, merging the client activation jump parameters passed during initialization with the information obtained at runtime to form complete jump data. Finally, the jump operation is executed, calling the jump method provided by the third-party interface to achieve the jump to the target application.
[0029] In this embodiment, after creating the call command, it is bound to the target page node, allowing the target page node to execute the call logic. The target page node is a specified DOM node. Specifically, the call command is bound to the lifecycle of the specified DOM node via a command hook. When the DOM node is created, updated, or destroyed, the corresponding command hook is automatically invoked.
[0030] It should be emphasized that, to further ensure the privacy and security of the call commands, the aforementioned call commands can also be stored in a node of a blockchain.
[0031] The blockchain referred to in this application is a novel application model of computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanisms, and encryption algorithms. Essentially, a blockchain is a decentralized database, a chain of data blocks linked together using cryptographic methods. Each data block contains information about a batch of network transactions, used to verify the validity of the information (anti-counterfeiting) and generate the next block. A blockchain can include an underlying blockchain platform, a platform product service layer, and an application service layer.
[0032] Step S202: The predefined initialization function is called through the instruction hook of the call-end instruction to initialize the target page node by passing the call-end jump parameters.
[0033] Instruction hooks (inserted) are lifecycle callback mechanisms provided by front-end frameworks, allowing developers to execute custom logic at specific lifecycle stages of DOM nodes. In implementing client functionality, the main instruction hooks used include binding hooks, insertion hooks, update hooks, and unbinding hooks. For example, the binding hook is called when an instruction is first bound to a DOM node, at which point the DOM node may not yet be inserted into the DOM tree; the insertion hook is called when the bound DOM node is inserted into its parent node, at which point DOM manipulation can be safely performed.
[0034] The predefined initialization function is the entry point for the client-calling logic. It is responsible for receiving and processing configuration parameters passed in from the outside and is used to initialize the target page node. After initialization, the target page node is bound to the client-calling event, which is used to trigger a jump to the target landing page address.
[0035] In this embodiment, the target page node is initialized in the instruction hook. Specifically, the initialization function is called through the instruction hook, and the target page node and the terminal jump parameters are passed through the initialization function to complete the terminal function configuration of the target page node.
[0036] The target page node and the client jump parameters are both input parameters to the initialization function. The target page node serves as the coverage target for subsequent open tag nodes, and its position and size information will be used for subsequent tag positioning and size adjustment. The client jump parameters include the identifier of the target application, the landing page jump address, and the data to be transmitted.
[0037] Step S203: Monitor the mounting status of the target page node. When the mounting status meets the preset insertion conditions, dynamically create an open tag node.
[0038] Mounting a target page node refers to the process of inserting the target page node into the DOM tree and completing its rendering; the mounting state refers to whether the target page node has been rendered and embedded in the DOM tree. It should be noted that in front-end frameworks, component rendering is asynchronous, and there is a time lag between DOM node creation and mounting. Only after the node is fully mounted can accurate node attributes, including shape, size information, and position, be obtained.
[0039] The mounting status of a target page node is considered complete only when both the parent component of the target page node and all child nodes of the target page node are fully mounted.
[0040] In some alternative implementations, the steps for monitoring the mount status of the target page node include: Get the parent component to which the target page node is bound, traverse the node tree of the parent component, and extract the mounting identifier information of each node in the node tree; Determine whether the mounting status is complete based on the mounting identification information; If the mounting status of a node is incomplete, record the node identifier and mark it as a node to be processed, thus obtaining a list of nodes to be processed. According to the preset time interval, retrieve the mount status changes of each node to be processed from the list of nodes to be processed one by one; Based on the changes in the mounting status, determine whether all nodes in the list of nodes to be processed have been mounted.
[0041] Specifically, based on the location information of the target page node, the positioning data of the parent component is obtained, and the hierarchical relationship of all nodes of the parent component is parsed through a preset traversal path to obtain a complete node tree hierarchy. The mounting identifier information of each node in the node tree is extracted by traversing layer by layer, and a preset listening function is called to obtain the current mounting status of the currently traversed node according to the mounting identifier information. When the current mounting status is incomplete, the currently traversed node is recorded as a pending node and marked as a pending node, and added to the pending node list. The mounting status change of each pending node in the pending node list is obtained from the pending node list at preset time intervals. When the mounting status changes from incomplete to complete, the pending node is removed from the pending node list. The mounting status change of each pending node in the pending node list is checked in a loop until the status of all pending nodes changes to complete. Then, it is determined that the target page node is mounted successfully, and the mounting status meets the preset insertion conditions.
[0042] It should be understood that once the parent component of the target page node is mounted, it means that the entire component tree inside the parent component has been mounted, and the entire component tree includes the target page node and all its child nodes.
[0043] In some optional embodiments, the preset traversal path can employ a depth-first search algorithm, starting from the root node of the node tree and traversing downwards layer by layer to obtain the mounting identifier information of each node.
[0044] By monitoring the mounting status of target page nodes, the integrity and availability of node data can be ensured, thereby improving the reliability of terminal command execution.
[0045] After the target page node is mounted, the pre-defined loading function is called through the instruction hook to dynamically load the loading interface and monitor the loading status of the loading interface. When the loading status is complete, it means that the loading interface initialization is complete, and an open tag node is dynamically created to cover the target page node.
[0046] Open tag nodes are created using the document object's `createElement` method. During creation, you need to specify the node name and perform the corresponding registration process. The created open tag node is a blank DOM object; it requires subsequent attribute settings and style configurations to function.
[0047] Step S204: Assign style values to the open tag node based on the node attributes of the target page node to obtain the overlay tag, and insert the overlay tag into the target page node.
[0048] Open tag nodes are used to completely cover target page nodes. The process of generating an open tag involves dynamically adding a new page node on top of the target page node, ensuring that the original interactive area of the open tag node and the target page node visually overlaps completely, while also taking over the original interactive behavior of the target page node.
[0049] In some alternative implementations, the steps for creating open tag nodes based on the node attributes of the target page node include: Extract the node attributes of the target page nodes and parse the node attributes to obtain style attributes; Determine the absolute positioning and size data of the open tag node based on the style attributes; Styles are assigned to open label nodes based on absolute positioning and size data to obtain overlay labels.
[0050] Node attributes include, but are not limited to, node identifier, node name, node value, hierarchy, and style attributes. Style attributes include, but are not limited to, boundary rectangle information and visual effects. Boundary rectangle information includes the node's position relative to the viewport and its dimensions. The position relative to the viewport includes the distance of the left boundary relative to the left side of the viewport (left), the top boundary relative to the top of the viewport (top), the right boundary relative to the right side of the viewport (right), and the bottom boundary relative to the bottom of the viewport (bottom). The dimensions include the node's width and height. Absolute positioning allows open tag nodes to be removed from the normal document flow and positioned independently of other page elements.
[0051] The absolute positioning of an open tag node refers to its absolute positioning relative to a target page node. To calculate this, the target page node is used as its positioning ancestor. The bounding rectangle information of the target page node is obtained from its style properties. The absolute positioning of the open tag node is then determined based on this bounding rectangle information, ensuring that the open tag node's absolute positioning matches the target page node's position. For example, setting the open tag node's position to absolute and setting left and top to preset values, specifically `position: absolute; left:0; top: 0`, aligns the open tag node with the top-left corner of the target page node, ensuring that the open tag node accurately covers the target page node.
[0052] The open tag node is styled based on its absolute positioning and size data to obtain the overlay tag. Style assignment includes setting the open tag node's absolute positioning, width, height, background color, and transparency. The width, height, background color, and transparency values can be directly obtained from the target page node's style properties, or adjusted appropriately based on the target page node's properties.
[0053] Transparency attributes include background transparency, border transparency, and content transparency. In some optional implementations, background transparency is set to completely transparent so that the background of the overlay tag does not obscure the original content; border transparency is also set to completely transparent to avoid creating unnecessary visual boundaries; the handling of content transparency needs to be adjusted according to specific needs, ensuring that the original functions of the target page nodes function normally while maintaining visual harmony.
[0054] By assigning style values to open tag nodes, we can ensure the naturalness and accuracy of open tag node coverage, thereby improving the visual effect of coverage and ensuring the harmony of the page.
[0055] Step S205: Upon detecting an update to the client redirect parameters, the command hook is invoked to extract the target landing page parameters from the updated client redirect parameters. The target landing page parameters are then assigned to the overlay tag to obtain the client redirect tag.
[0056] Among them, the app redirection parameters are crucial data controlling app redirection behavior. These parameters include the target application's identification information, the redirect address (target landing page address), the data to be transmitted, and the redirection options. These parameters determine the specific behavior of the user after clicking the app redirection tag, such as which application to redirect to, which page to open, and what data to transmit. The accuracy and completeness of the app redirection parameters directly affect the correct execution of the app functionality.
[0057] In this embodiment, the accuracy and completeness of the call-to-jump parameters are ensured by monitoring their changes in real time. This monitoring can be achieved by continuously detecting the content and update time of the parameter data through the call-to-jump command's update hook. The update hook is a lifecycle callback mechanism provided by the front-end framework, automatically invoked when component data changes. By adding monitoring logic to the update hook, parameter changes can be captured in real time and corresponding processing operations can be executed, ensuring real-time synchronization between the call-to-jump functionality and the application state.
[0058] When an update to the client redirect parameters is detected, the command hook extracts the updated target landing page parameters from the updated redirect parameters and assigns the target landing page parameters to the tag attributes of the overriding tag. These tag attributes are used to configure client behavior. The tag attribute assignment process includes attribute name mapping and value format conversion. Attribute name mapping converts generic parameter names to attribute names required by the specific service; value format conversion converts the internally used parameter format to the format required by the attribute, such as string encoding or JSON serialization.
[0059] In some alternative implementations, the following steps are included before the step of listening for an update to the caller jump parameters: Listen for changes in the caller's redirection parameters and retrieve the changed parameters. Determine whether the changed parameters meet the preset valid conditions; If the changed parameters meet the preset valid conditions, it is determined that the call terminal jump parameters have been updated.
[0060] The call-to-call (CTC) command update hook continuously monitors the CTC jump parameters. When a parameter changes, the update hook is invoked, receiving both the new and old CTC jump parameters. The changed parameter is determined by comparing the differences between the two, and it is then checked whether the changed parameter meets preset validity conditions. Not all parameter changes require triggering an update of the overwrite tag; updates are only performed when the change affects core parameters of the CTC function. The preset validity condition check primarily filters out changes to core parameters that truly require adjustment of the jump target. Specifically, changes to core parameters, such as the jump address and application identifier, usually require immediate updates; changes to secondary parameters, such as data transmission and configuration options, may only require updates under specific conditions.
[0061] When the changed parameter meets the preset valid conditions, that is, when the changed parameter is a core parameter, it is determined that the call terminal jump parameter has been updated, and the update timing is triggered.
[0062] By monitoring changes in client navigation parameters to determine update timing, unnecessary DOM operations and style calculations can be reduced. At the same time, client accuracy is improved, ensuring system stability and a smooth user experience.
[0063] In some alternative implementations, after assigning the target landing page parameters to the overlay tag to obtain the client redirect tag, the following steps are also included: Verify the execution effect of the client redirection logic of the client redirection tag and record the relevant update log.
[0064] Specifically, verifying the execution effect of the client-side redirection logic primarily involves simulating user interaction behavior to check whether the client-side redirection tag can correctly execute the redirection operation based on the updated target landing page parameters. The update log records information such as update time, update content, and verification results for subsequent debugging and optimization. The update log also includes detailed descriptions of any abnormal execution situations. For example, if the verification finds that the client-side redirection logic fails, the client-side command will record the reason for the failure, such as the target landing page being inaccessible or the redirection method being set incorrectly. This provides crucial support for developers to quickly locate and resolve problems.
[0065] Step S206: In response to the interactive operation of the caller's jump label, jump to the target landing page.
[0066] Obtain user interaction data for the app navigation tag, including clicks, swipes, and other behavioral data. In response to the interaction data for the app navigation tag, execute the app navigation logic of the app navigation tag and navigate to the target landing page of the target application.
[0067] This application can easily implement the terminal jump function through custom general instructions, which can improve development efficiency and flexibility, enhance code maintainability, reduce development costs and risks, and improve page terminal jump efficiency.
[0068] In some alternative implementations, the following is included before the step of dynamically creating open tag nodes described above: Construct query conditions and check whether open tag nodes exist based on the query conditions; When an open tag node exists, the node attributes of the open tag node are replaced according to the node attributes of the target page node; If no open tag node exists, perform the steps to dynamically create an open tag node.
[0069] Before dynamically creating open tag nodes, a query is performed to check if open tag nodes already exist, and the open tags are updated or created based on the query results. The query process includes steps such as determining the query scope, constructing query conditions, and validating results. Determining the query scope involves selecting an appropriate DOM subtree for querying; in this embodiment, the query starts from the parent container of the target page node. Query conditions are generated based on the identifier information. Result validation involves further checking the query results to ensure that the found nodes are indeed open tag nodes.
[0070] Specifically, the query criteria are pre-set specific identifiers, which include combinations of various identifiers such as tag type, class name, and node identifier. The query is performed within a specified range according to the query criteria. If a tag node matching the query criteria is found, an attribute matching mechanism verifies whether the found tag node is indeed an open tag node. The attribute matching mechanism matches various attributes of the found tag node (including tag name, function identifier, configuration parameters, etc.) with the preset attributes of open tag nodes (i.e., target attributes). If a match is found, the tag node is determined to be an open tag node; otherwise, the tag node is not an open tag node.
[0071] If an open tag node already exists, the attributes of the current open tag node are replaced without creating a new node. By comparing the target attribute with the current attribute, the specific attribute that needs to be replaced is determined, and the specific attribute that needs to be replaced is then replaced and updated.
[0072] The replacement and update process needs to consider the dependencies between attributes. For example, changes in some attributes may affect the validity of other attributes. Therefore, the updates need to be performed in the correct order to ensure consistency among all attributes.
[0073] In one embodiment, when an open tag node already exists, the extinfo attribute value can be directly replaced.
[0074] If no open tag node exists, a new open tag node is dynamically created and inserted into the DOM tree.
[0075] This application uses a tag duplication check to avoid duplicate tag creation and ensure the rational use of resources.
[0076] In some alternative implementations, after assigning style values to the open tag node based on the node attributes of the target page node to obtain the overlay tag, the following is also included: Verify that the coverage area of the overlay tag and the target page node completely overlaps; If the coverage areas do not completely overlap, the coverage labels are corrected until a coverage label that meets the conditions is obtained.
[0077] In this embodiment, the location information and size of the overlay tag and the target page node are compared to determine whether their coverage areas completely overlap. Specifically, location information verification can be performed by comparing the top-left corner coordinates of the overlay tag and the top-left corner coordinates of the target page node; size verification can be performed by comparing the width and height of the overlay tag and the width and height of the target page node.
[0078] If the top-left corner coordinates, width, and height are all consistent, the coverage area is considered to be completely overlapping; otherwise, the coverage area is considered to be not completely overlapping. If the coverage area is not completely overlapping, a correction mechanism is triggered, the style attributes of the overlay tag are reset, and the size data of the target page node is re-acquired and reassigned to the overlay tag.
[0079] In some optional implementations, a reasonable tolerance range is set to verify whether the coverage area completely overlaps. Specifically, if the difference between the top-left corner coordinates of the overlay tag and the top-left corner coordinates of the target page node is less than or equal to a preset position deviation value, the coverage area is determined to completely overlap; otherwise, the coverage area is determined to be incompletely overlapped. If the differences between the width and height of the overlay tag and the width and height of the target page node are both less than or equal to preset size deviation values, the coverage area is determined to completely overlap; otherwise, the coverage area is determined to be incompletely overlapped.
[0080] In some optional implementations, verifying whether the coverage area of the overlay tag and the target page node completely overlaps also includes hierarchical consistency verification and visibility consistency verification. Hierarchical consistency verification refers to verifying whether the overlay tag is correctly displayed on the target page node; visibility consistency verification refers to verifying whether the overlay tag is within the visible area of the target page node.
[0081] This application improves the accuracy of coverage by verifying the coverage range of the overlay tags and the target page nodes, and effectively enhances the fit between the overlay tags and the target page nodes, thus ensuring the precision of user interaction.
[0082] In some alternative implementations, after assigning style values to the open tag node based on the node attributes of the target page node to obtain the overlay tag, the following is also included: Generate transparent placeholder labels based on the coverage area of the overlay label, and insert the transparent placeholder labels into the overlay label.
[0083] Transparent placeholder tags, acting as placeholders within an overlay tag slot, can completely cover the overlay tag. This coverage is achieved by setting the size and position attributes of the transparent placeholder tag, ensuring that its geometric properties are completely consistent with the parent overlay tag. Transparency is controlled through style attributes, including transparent background, transparent text, and transparent borders.
[0084] In one alternative implementation, the transparent placeholder tag can be a hyperlink tag, which is equivalent to overlaying a hyperlink on the overlay tag, thus enabling the link function.
[0085] Specifically, the size and position information of the overlay tag are obtained and assigned to the transparent placeholder tag, resulting in a transparent placeholder tag that perfectly matches the geometric properties of the overlay tag. The assigned transparent placeholder tag is then inserted into the slot of the overlay tag. The use of the slot allows the transparent placeholder tag to become a child element of the overlay tag, enjoying the various functions and style inheritance provided by the overlay tag.
[0086] By inserting transparent placeholder labels into the cover label slots, the overall layout harmony and user interaction experience can be improved.
[0087] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing related hardware through computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above methods. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, or read-only memory (ROM), or random access memory (RAM).
[0088] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.
[0089] Further reference Figure 3 As a response to the above Figure 2 To implement the method shown, this application provides an embodiment of an open tag-based client device, which is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.
[0090] like Figure 3As shown, the open tag-based client device 300 described in this embodiment includes: a creation module 301, a transmission module 302, a listening module 303, an assignment module 304, an extraction module 305, and a jump module 306. Wherein: The creation module 301 is used to create a terminal call instruction through a front-end framework custom instruction, and bind the terminal call instruction to the target page node; The transmission module 302 is used to call a predefined initialization function through the instruction hook of the terminal instruction, and to initialize the target page node by passing the terminal jump parameters; The listening module 303 is used to listen to the mounting status of the target page node, and dynamically create an open tag node when the mounting status meets the preset insertion conditions; The assignment module 304 is used to assign style values to the open tag node based on the node attributes of the target page node to obtain the overlay tag; The extraction module 305 is used to listen for updates to the client jump parameters, call the instruction hook to extract the target landing page parameters from the updated client jump parameters, and assign the target landing page parameters to the overlay tag to obtain the client jump tag; The jump module 306 is used to jump to the target landing page in response to the interactive operation of the terminal jump tag.
[0091] It should be emphasized that, to further ensure the privacy and security of the call commands, the aforementioned call commands can also be stored in a node of a blockchain.
[0092] The aforementioned open tag-based terminal device 300 can easily implement terminal jump functionality through custom general instructions, which can improve development efficiency and flexibility, enhance code maintainability, reduce development costs and risks, and improve page terminal jump efficiency.
[0093] In some alternative implementations, the listener module 303 includes: Traverse submodules to obtain the parent component to which the target page node is bound, traverse the node tree of the parent component, and extract the mounting identifier information of each node in the node tree; The first judgment submodule is used to determine whether the mounting status is completed based on the mounting identification information; The recording submodule is used to record the node identifier of the node and mark it as a node to be processed if the mounting status of the node is incomplete, thereby obtaining a list of nodes to be processed. The acquisition submodule is used to acquire the mount status changes of each node in the list of nodes to be processed at preset time intervals. The second judgment submodule is used to determine whether all nodes in the list of nodes to be processed have been successfully mounted based on the changes in the mounting status.
[0094] By monitoring the mounting status of target page nodes, the integrity and availability of node data can be ensured, thereby improving the reliability of terminal command execution.
[0095] In some alternative implementations, the aforementioned open tag-based client device 300 further includes a repeat query module for: Construct query conditions, and query whether the open tag node exists based on the query conditions; When the open tag node exists, the node attributes of the open tag node are replaced according to the node attributes of the target page node; If the open tag node does not exist, perform the step of dynamically creating the open tag node.
[0096] By implementing tag duplication checks, we can avoid duplicate tag creation and ensure the rational use of resources.
[0097] In some optional implementations of this embodiment, the assignment module 304 includes: The attribute parsing submodule is used to extract the node attributes of the target page nodes and parse the node attributes to obtain style attributes; The determination submodule is used to determine the absolute positioning and size data of the open tag node based on the style attributes; The assignment submodule is used to assign style values to the open label node based on the absolute positioning and the size data to obtain the overlay label.
[0098] By assigning style values to open tag nodes, we can ensure the naturalness and accuracy of open tag node coverage, thereby improving the visual effect of coverage and ensuring the harmony of the page.
[0099] In some alternative implementations, the aforementioned open tag-based client device 300 further includes: a verification module, used for: Verify whether the coverage area of the overlay tag and the target page node completely overlaps; If the coverage areas do not completely overlap, the coverage label is corrected until a coverage label that meets the conditions is obtained.
[0100] By verifying the coverage range of the overlay tags and the target page nodes, the accuracy of the overlay can be improved, and the fit between the overlay tags and the target page nodes can be effectively enhanced, thus ensuring the accuracy of user interaction.
[0101] In some alternative implementations, the aforementioned open tag-based call terminal device 300 further includes an insertion module for: A transparent placeholder label is generated based on the coverage area of the overlay label, and the transparent placeholder label is inserted into the overlay label.
[0102] By inserting transparent placeholder labels into the cover label slots, the overall layout harmony and user interaction experience can be improved.
[0103] In some alternative implementations, the aforementioned open tag-based call terminal device 300 further includes an update determination module, used for: Monitor the changes in the call terminal jump parameters and obtain the changed parameters; Determine whether the changed parameter meets the preset valid condition; When the changed parameters meet the preset valid conditions, it is determined that the call terminal jump parameters have been updated.
[0104] By monitoring changes in client navigation parameters to determine update timing, unnecessary DOM operations and style calculations can be reduced. At the same time, client accuracy is improved, ensuring system stability and a smooth user experience.
[0105] To address the aforementioned technical problems, embodiments of this application also provide a computer device. Please refer to [link / reference needed]. Figure 4 , Figure 4 This is a basic structural block diagram of the computer device in this embodiment.
[0106] The computer device 4 includes a memory 41, a processor 42, and a network interface 43 that are interconnected via a system bus. It should be noted that only the computer device 4 with memory 41, processor 42, and network interface 43 is shown in the figure; however, it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented alternatively. Those skilled in the art will understand that the computer device described here is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes, but is not limited to, microprocessors, application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.
[0107] The computer device can be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device can interact with the user via a keyboard, mouse, remote control, touchpad, or voice control.
[0108] The memory 41 includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 41 may be an internal storage unit of the computer device 4, such as the hard disk or memory of the computer device 4. In other embodiments, the memory 41 may also be an external storage device of the computer device 4, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 4. Of course, the memory 41 may also include both the internal storage unit and its external storage device of the computer device 4. In this embodiment, the memory 41 is typically used to store the operating system and various application software installed on the computer device 4, such as computer-readable instructions based on the open tag terminal method. In addition, the memory 41 can also be used to temporarily store various types of data that have been output or will be output.
[0109] In some embodiments, the processor 42 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip. The processor 42 is typically used to control the overall operation of the computer device 4. In this embodiment, the processor 42 is used to execute computer-readable instructions stored in the memory 41 or to process data, for example, to execute the computer-readable instructions of the open tag-based call method.
[0110] The network interface 43 may include a wireless network interface or a wired network interface, which is typically used to establish communication connections between the computer device 4 and other electronic devices.
[0111] Customizable generic commands can easily implement client-side navigation functionality, improving development efficiency and flexibility, enhancing code maintainability, reducing development costs and risks, and improving page-side navigation efficiency.
[0112] This application also provides another embodiment, namely, providing a computer-readable storage medium storing computer-readable instructions that can be executed by at least one processor to cause the at least one processor to perform the steps of the open tag-based call method as described above.
[0113] Customizable generic commands can easily implement client-side navigation functionality, improving development efficiency and flexibility, enhancing code maintainability, reducing development costs and risks, and improving page-side navigation efficiency.
[0114] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.
[0115] Obviously, the embodiments described above are only some embodiments of this application, not all embodiments. The accompanying drawings show preferred embodiments of this application, but do not limit the patent scope of this application. This application can be implemented in many different forms; rather, the purpose of providing these embodiments is to provide a more thorough and comprehensive understanding of the disclosure of this application. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing specific embodiments, or make equivalent substitutions for some of the technical features. Any equivalent structures made using the content of this application's specification and drawings, directly or indirectly applied to other related technical fields, are similarly within the scope of patent protection of this application.
[0116] The software tools or components not belonging to our company that appear in the embodiments of this application are merely examples and do not represent actual use.
Claims
1. A call-to-client method based on open tags, characterized in that, Includes the following steps: Create a client-calling instruction using a custom instruction from the front-end framework, and then bind the client-calling instruction to a target page node; The call to the predefined initialization function is initiated by the call to the terminal instruction hook, and the target page node is initialized by passing the terminal jump parameters; Monitor the mounting status of the target page node, and dynamically create an open tag node when the mounting status meets the preset insertion conditions; The style of the open tag node is assigned based on the node attributes of the target page node to obtain the overlay tag; Upon detecting an update to the client redirection parameters, the command hook is invoked to extract the target landing page parameters from the updated client redirection parameters, and the target landing page parameters are assigned to the overlay tag to obtain the client redirection tag; In response to the interactive operation of the terminal jump tag, the user is redirected to the target landing page.
2. The call-to-end method based on open tags according to claim 1, characterized in that, The step of monitoring the mount status of the target page node includes: Obtain the parent component to which the target page node is bound, traverse the node tree of the parent component, and extract the mounting identifier information of each node in the node tree; Determine whether the mounting status is complete based on the mounting identification information; If the mounting status of the node is incomplete, the node identifier of the node is recorded and marked as a node to be processed, thus obtaining the list of nodes to be processed; According to the preset time interval, retrieve the mount status changes of each node to be processed from the list of nodes to be processed one by one; Based on the changes in the mounting status, it is determined whether all nodes in the list of nodes to be processed have been mounted.
3. The call-to-end method based on open tags according to claim 1, characterized in that, The following steps are included before the step of dynamically creating open tag nodes: Construct query conditions, and query whether the open tag node exists based on the query conditions; When the open tag node exists, the node attributes of the open tag node are replaced according to the node attributes of the target page node; If the open tag node does not exist, perform the step of dynamically creating the open tag node.
4. The call-to-end method based on open tags according to claim 1, characterized in that, The step of assigning style values to the open tag node based on the node attributes of the target page node to obtain the overlay tag includes: Extract the node attributes of the target page nodes and parse the node attributes to obtain style attributes; The absolute positioning and size data of the open tag node are determined based on the style attributes; Based on the absolute positioning and the size data, style values are assigned to the open label node to obtain the overlay label.
5. The call-to-end method based on open tags according to claim 1, characterized in that, After the step of assigning style values to the open tag node based on the node attributes of the target page node to obtain the overlay tag, the method further includes: Verify whether the coverage area of the overlay tag and the target page node completely overlaps; If the coverage areas do not completely overlap, the coverage label is corrected until a coverage label that meets the conditions is obtained.
6. The call-to-end method based on open tags according to claim 1, characterized in that, After the step of assigning style values to the open tag node based on the node attributes of the target page node to obtain the overlay tag, the method further includes: A transparent placeholder label is generated based on the coverage area of the overlay label, and the transparent placeholder label is inserted into the overlay label.
7. The call-to-end method based on open tags according to claim 1, characterized in that, The step before detecting an update to the call terminal jump parameter includes: Monitor the changes in the call terminal jump parameters and obtain the changed parameters; Determine whether the changed parameter meets the preset valid condition; When the changed parameters meet the preset valid conditions, it is determined that the call terminal jump parameters have been updated.
8. A call terminal device based on open tags, characterized in that, include: A module is created to create client-calling instructions using custom directives from the front-end framework, and then binds the client-calling instructions to target page nodes. The delivery module is used to call a predefined initialization function through the instruction hook of the terminal instruction, and to initialize the target page node by passing the terminal jump parameters; The monitoring module is used to monitor the mounting status of the target page node, and dynamically create an open tag node when the mounting status meets the preset insertion conditions; The assignment module is used to assign style values to the open tag node based on the node attributes of the target page node to obtain the overlay tag; The extraction module is used to listen for updates to the client jump parameters, call the instruction hook to extract the target landing page parameters from the updated client jump parameters, and assign the target landing page parameters to the overlay tag to obtain the client jump tag; The jump module is used to jump to the target landing page in response to the interactive operation of the jump tag of the client.
9. A computer device, characterized in that, It includes a memory and a processor, wherein the memory stores computer-readable instructions, and the processor executes the computer-readable instructions to implement the steps of the open tag-based call-to-end method as described in any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-readable instructions that, when executed by a processor, implement the steps of the open tag-based call-to-end method as described in any one of claims 1 to 7.