Applet hot area identification and visualization method and device, equipment, medium and product

Abstract

The application discloses a small program hot area identification and visualization method and device, equipment, medium and product, and relates to the technical field of small program front-end development. The method is to first use a packaging tool to analyze an abstract syntax tree of a template file of a target small program in a packaging and building process, and identify a view component node element on the tree and containing a click event binding attribute, then after eliminating system component node elements or node elements without interactive significance, inject style code for highlighting a corresponding click hot area border on each of the remaining elements, and finally output source code obtained after the style injection, and run the source code to highlight the click hot area border. In this way, a small program developer can check the click hot area layout, interactive rationality, and whether there is a too small or overlapping phenomenon, improve the debugging efficiency of the small program click hot area, avoid debugging omission risks, and facilitate practical application and promotion.

Description

Technical Field

[0001] This invention belongs to the field of mini-program front-end development technology, specifically relating to a method, device, equipment, medium, and product for mini-program hotspot identification and visualization. Background Technology

[0002] Mini-programs are applications that can be used without downloading or installing them, realizing the dream of "applications at your fingertips." Users can open the application simply by scanning a QR code or searching for it. Mini-programs also embody the "use and go" concept, so users don't need to worry about installing too many applications.

[0003] In the front-end development of WeChat Mini Programs, there are a large number of view components (Views) that are bound to click events (such as the bindtap event in WeChat Mini Programs). Because the size and position of these clickable hotspot elements are difficult to perceive precisely at the code level, developers often find it difficult to determine whether the user's click area conforms to user experience guidelines (such as the recommendation that the clickable area should be no less than 44px × 44px in applications like Apple or WeChat).

[0004] Currently, existing solutions for debugging and visualizing click hotspots mainly rely on the following methods: (1) Manual debugging method, where developers manually add styles such as borders and background colors to view components that are bound to click events, and then observe their actual clickable range; (2) UI (User Interface) framework encapsulation method, where some component libraries (such as Vant Weapp or Taro UI) provide encapsulation of button click areas, and the click area can be adjusted by adding padding; (3) Debugger-assisted method, where WeChat Developer Tools provides component highlighting functionality, which can display the border of an element when it is manually clicked; (4) Based on automated testing tools, where tools such as Appium support automated testing of click coordinates.

[0005] However, the above-mentioned existing solutions have the following drawbacks: (1) They rely on manual operation, which is inefficient. They cannot automatically identify all click hotspot elements bound to click events on the mini-program page, making the debugging experience dependent on the developer's manual marking, resulting in a large amount of repetitive work and high maintenance costs; (2) They lack a static analysis mechanism during the construction phase. The current mainstream development process fails to systematically analyze the view components bound to click events during the construction phase, and also fails to inject hotspot styles or prompt information; (3) They do not have global visualization capabilities. They cannot automatically render the click hotspot borders of the entire page at runtime, making it difficult to accurately assess the hotspot range and interactive friendliness during the development process; (4) They lack uniformity and universality. Most solutions can only handle a single page or specific components, lacking universality and making it difficult to manage and apply them uniformly in large projects.

[0006] Therefore, how to provide a new solution that can automatically identify and visualize the click hotspots of mini-programs, so as to improve the debugging efficiency of mini-program click hotspots and avoid the risk of debugging omissions, is a topic that urgently needs to be studied by those skilled in the art. Summary of the Invention

[0007] The purpose of this invention is to provide a method, apparatus, computer device, computer-readable storage medium, and computer program product for identifying and visualizing hot zones in mini programs, in order to solve the problems of low debugging efficiency and the risk of debugging omissions in existing mini program click hot zone debugging and visualization solutions.

[0008] To achieve the above objectives, the present invention adopts the following technical solution:

[0009] Firstly, a method for identifying and visualizing hotspots in mini-programs is provided, including:

[0010] Using a packaging tool, the abstract syntax tree of the template file of the target mini-program is analyzed during the packaging and building process, and the view component node elements that contain click event binding attributes on the abstract syntax tree are identified.

[0011] All view component node elements are filtered to remove system component node elements or node elements with no interactive meaning;

[0012] For each of the remaining view component node elements, inject style code into the corresponding element to highlight the border of the corresponding clickable hotspot;

[0013] Output the source code of the target mini-program after style injection, and run the source code to highlight the border of the click hotspot.

[0014] Based on the above-mentioned invention, a novel solution is provided for automatically identifying and visually presenting click hotspots in mini-programs using a packaging tool. This involves first using the packaging tool to analyze the abstract syntax tree of the target mini-program's template file during the packaging and building process, identifying view component nodes on the tree that contain click event binding attributes. Then, after removing system component nodes or nodes with no interactive meaning, style code for highlighting the corresponding click hotspot borders is injected into the remaining elements. Finally, the source code obtained after style injection is output and run to highlight the click hotspot borders. This allows for the automatic identification of component elements with click event bindings during the building phase, and the injection of styles to highlight the click hotspot borders. This facilitates mini-program developers in checking the layout, interaction rationality, and whether there are issues with excessively small or overlapping click hotspots, improving debugging efficiency and mitigating debugging omissions, thus facilitating practical application and promotion.

[0015] In one possible design, the packaging tool uses the static module packaging tool webpack, and in the build mode specifically in development mode, style code for highlighting the corresponding clickable hotspot border is injected into the remaining view component node elements.

[0016] In one possible design, all the aforementioned view component node elements are filtered to remove system component node elements or node elements with no interactive meaning, including:

[0017] Based on a preset whitelist and / or blacklist of node elements, all view component node elements are filtered to remove system component node elements or node elements without interactive meaning.

[0018] In one possible design, the style code may be inline style or user-defined style code.

[0019] In one possible design, after running the source code to highlight the border of the clicked hotspot, the method further includes:

[0020] For each of the highlighted clickable hot zones, the size of the corresponding border within the display page is calculated, and it is determined whether the size conforms to the corresponding standard size. If not, the corresponding border is marked with a warning color within the display page.

[0021] In one possible design, after running the source code to highlight the border of the clicked hotspot, the method further includes:

[0022] For each of the highlighted clickable hotspot borders, the size of the corresponding border within the display page is calculated, and the coordinate position of the corresponding border within the display page is obtained;

[0023] Based on the size and coordinates of all the clicked hotspot borders, generate a hotspot information report and output it for display.

[0024] Secondly, a device for identifying and visualizing hot zones in a mini-program is provided, comprising a node element identification unit, an element filtering and processing unit, a style code injection unit, and a source code execution unit that are sequentially connected in communication.

[0025] The node element identification unit is used to analyze the abstract syntax tree of the template file of the target mini-program during the packaging and building process using a packaging tool, and identify the view component node elements on the abstract syntax tree that contain click event binding attributes.

[0026] The element filtering processing unit is used to filter all the view component node elements to remove system component node elements or node elements without interactive meaning.

[0027] The style code injection unit is used to inject style code for highlighting the corresponding clickable hotspot border on the corresponding element for each of the remaining view component node elements.

[0028] The source code execution unit is used to output the source code of the target mini-program after style injection, and run the source code to highlight the border of the click hotspot.

[0029] Thirdly, the present invention provides a computer device, comprising a storage module, a processing module, and a transceiver module connected in sequence for communication, wherein the storage module is used to store a computer program, the transceiver module is used to send and receive messages, and the processing module is used to read the computer program and execute the mini-program hotspot identification and visualization method as described in the first aspect or any possible design in the first aspect.

[0030] Fourthly, the present invention provides a computer-readable storage medium storing instructions that, when executed on a computer, perform the mini-program hotspot identification and visualization method as described in the first aspect or any possible design within the first aspect.

[0031] Fifthly, the present invention provides a computer program product, including a computer program or instructions, wherein when the computer program or instructions are executed by a computer, they implement the mini-program hotspot identification and visualization method as described in the first aspect or any possible design in the first aspect.

[0032] The beneficial effects of the above scheme are:

[0033] (1) This invention creatively provides a new solution for automatically identifying and visually presenting the click hotspot of a mini-program based on a packaging tool. First, the packaging tool is used to analyze the abstract syntax tree of the template file of the target mini-program during the packaging and building process, and identify the view component node elements on the tree that contain click event binding attributes. Then, after removing system component node elements or node elements without interactive meaning, style code for highlighting the corresponding click hotspot border is injected into the corresponding elements for each remaining element. Finally, the source code obtained after style injection is output and the source code is run to highlight the click hotspot border. In this way, the component elements that bind click events in the page can be automatically identified during the building stage, and the click hotspot border can be highlighted by injecting styles. This makes it convenient for mini-program developers to check the layout, interaction rationality, and whether there are any small or overlapping phenomena of the click hotspot, thereby improving the debugging efficiency of the mini-program click hotspot and avoiding the risk of debugging omissions.

[0034] (2) It can realize the automatic identification and visualization of the hot zone of the mini program. Without modifying the business code, it can automatically identify the component elements in the page that are bound to click events and dynamically inject the visual style during the development and construction process, which significantly improves the developer's ability to perceive the interactive hot zone.

[0035] (3) It can significantly improve debugging efficiency and consistency of interactive experience. That is, through unified and visualized hot zone border markings, developers can quickly find interactive problems such as clickable areas being too small, layout overlaps or omissions, which helps to improve the overall user experience of mini programs and reduce the online problem rate.

[0036] (4) It has the value of unified and standardized development, which helps to form a unified hot zone inspection mechanism and interaction specifications in team development, and improves the efficiency of cross-team collaboration.

[0037] (5) By using packaging tools to analyze and identify components that are bound to click events during the build process, rather than capturing them at runtime, “hotspot analysis” can be innovatively brought down to the build phase, improving visualization capabilities and performance stability;

[0038] (6) By automatically injecting inline style code into the identified components, it is possible to completely eliminate the need for manual style addition or modification of the original code structure, thus ensuring the cleanliness of business code;

[0039] (7) This solution allows visual injection to be enabled only in the development and build environment, ensuring that the online version is not affected, and solving the problem that the existing solution cannot distinguish the environment and the risk of pollution;

[0040] (8) Compared with the existing scattered debugging methods (such as manually adding borders or single component style decoration), this solution is the first to combine static analysis and construction injection to realize a unified hot zone detection process of "page level + engineering + automation", which is convenient for practical application and promotion. Attached Figure Description

[0041] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0042] Figure 1 This is a flowchart illustrating the method for identifying and visualizing hot zones in a mini-program, as provided in an embodiment of this application.

[0043] Figure 2 This is a schematic diagram of the structure of the mini-program hotspot identification and visualization device provided in the embodiments of this application.

[0044] Figure 3 A schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0045] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the present invention will be briefly introduced below in conjunction with the accompanying drawings and descriptions of the embodiments or the prior art. Obviously, the following description of the structure of the accompanying drawings is only some embodiments of the present invention. For those skilled in the art, other embodiments can be obtained based on these embodiments without creative effort. It should be noted that the description of these embodiments is for the purpose of helping to understand the present invention, but does not constitute a limitation of the present invention.

[0046] It should be understood that although the terms "first" and "second", etc., may be used herein to describe various objects, these objects should not be limited by these terms. These terms are only used to distinguish one object from another. For example, the first object may be referred to as the second object, and similarly, the second object may be referred to as the first object, without departing from the scope of the exemplary embodiments of the invention.

[0047] It should be understood that the term "and / or" that may appear in this document is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can mean: A exists alone, B exists alone, or A and B exist simultaneously. Another example is A, B and / or C, which can mean that any one of A, B, and C or any combination thereof exists. The term " / and" that may appear in this document describes another relationship between related objects, indicating that two relationships can exist. For example, A / and B can mean: A exists alone or A and B exist simultaneously. In addition, the character " / " that may appear in this document generally indicates that the related objects before and after it are in an "or" relationship.

[0048] Example

[0049] like Figure 1 As shown, the mini-program hotspot identification and visualization method provided in the first aspect of this embodiment can be executed, but is not limited to, by a computer device with certain computing resources, such as a server, a personal computer (PC, referring to a multi-purpose computer of a size, price, and performance suitable for personal use; desktop computers, laptops, mini-laptops, tablets, and ultrabooks are all personal computers), a smartphone, a personal digital assistant (PDA), or a wearable device. Figure 1As shown, the method for identifying and visualizing hot zones in a mini-program includes, but is not limited to, the following steps S1 to S4.

[0050] S1. Using a packaging tool, analyze the abstract syntax tree of the template file of the target mini-program during the packaging and building process, and identify the view component node elements on the abstract syntax tree that contain click event binding attributes.

[0051] In step S1, the target mini-program is the mini-program development object, which can be, but is not limited to, a specific WeChat mini-program; the template file is specifically, but not limited to, a wxml format file. The packaging tool refers to a tool that integrates the application and its dependent resources into a distributable format (such as APK, EXE, or DEB), covering various scenarios such as web applications, binary programs, and cross-platform development; specifically, the packaging tool can be, but is not limited to, the static module packaging tool webpack, which is a code compilation tool for modern JavaScript applications, having entry points, exit points, and plugins. When processing the application, it internally builds a dependency graph, which maps to each module required by the project and generates one or more bundle files. The Abstract Syntax Tree (AST) is a tree-like representation of the abstract syntactic structure of the source code. It represents the syntactic structure of a programming language in a tree-like form, with each node in the tree representing a syntactic element in the source code, such as an expression, statement, or operator. Specific examples of the click event binding attributes, but not limited to, include bindtap, bind:tap, catchtap, and catch:tap (these elements are commonly used in mini-programs to implement click event binding). Therefore, the static module bundling tool webpack can be used to routinely analyze and identify view component node elements on the abstract syntax tree that contain the click event binding attributes during the bundling and building process.

[0052] S2. Filter all the view component node elements to remove system component node elements or node elements without interactive meaning.

[0053] In step S2, since not every view component node element on the abstract syntax tree that contains the click event binding attribute needs to have its corresponding click hotspot debugged, this step is necessary to accurately identify the specific debugging and visualization object. Specifically, all view component node elements are filtered to remove system component node elements or node elements without interactive meaning. This includes, but is not limited to, filtering all view component node elements according to a preset node element whitelist and / or node element blacklist to remove system component node elements or node elements without interactive meaning. The node element whitelist specifically includes, but is not limited to, pre-defined non-system component node elements or node elements with interactive meaning, and the node element blacklist specifically includes, but is not limited to, pre-defined system component node elements or node elements without interactive meaning. Therefore, the specific process of filtering can be implemented based on a blacklist / whitelist mechanism.

[0054] S3. For each of the remaining view component node elements, inject style code on the corresponding element to highlight the border of the corresponding clickable hotspot.

[0055] In step S3, the remaining view component node elements after filtering and removal are the specific debugging and visualization objects. To avoid redundant code and contamination of production code in a production environment, when the packaging tool uses the static module bundler webpack, it is preferable to inject style code for highlighting the corresponding clickable hotspot borders onto the remaining view component node elements in a development mode build mode (webpack has three build modes: development, production, and none; the development mode is characterized by uncompressed code and ease of debugging, making it suitable for local development environments). Furthermore, the style code preferably uses inline styles (a way to define Cascading Style Sheets (CSS) rules directly in the style attribute of HTML tags) or user-defined style code to further avoid contaminating production code.

[0056] S4. Output the source code of the target mini-program after style injection, and run the source code to highlight the border of the click hotspot.

[0057] In step S4, highlighting the clickable hotspot borders facilitates mini-program developers' checks on the layout, interaction rationality, and whether there are any issues with the borders being too small or overlapping. Furthermore, to expand the mini-program's hotspot recognition and visualization capabilities in this embodiment, preferably, after running the source code to highlight the clickable hotspot borders, the method further includes: calculating the size of each highlighted clickable hotspot border within the display page, and determining whether the size conforms to the corresponding standard size. If not, the corresponding border is marked with a warning color within the display page. The specific calculation method for the aforementioned size can be conventionally implemented by counting the number of pixels in the height and width directions of the corresponding border; the aforementioned standard size is, for example, but not limited to, no less than 44px × 44px (px represents a pixel unit); the aforementioned warning color can be, but is not limited to, yellow or red, thereby automatically alerting clickable hotspots with layout problems, further facilitating mini-program developers' checks on the clickable hotspots. Furthermore, preferably, after running the source code to highlight the clickable hotspot borders, the method further includes, but is not limited to: calculating the size of each highlighted clickable hotspot border within the display page, and obtaining the coordinate position of the corresponding border within the display page; generating a hotspot information report based on the size and coordinate position of all clickable hotspot borders and outputting it for display. This further facilitates mini-program developers in checking clickable hotspots.

[0058] Therefore, based on the mini-program hotspot identification and visualization method described in steps S1 to S4 above, a new solution is provided for automatically identifying and visualizing mini-program click hotspots using a packaging tool. First, the packaging tool analyzes the abstract syntax tree of the target mini-program's template file during the packaging and building process, identifying view component nodes on the tree that contain click event binding attributes. Then, after removing system component nodes or nodes without interactive meaning, style code is injected into the remaining elements to highlight the corresponding click hotspot borders. Finally, the source code obtained after style injection is output and run to highlight the click hotspot borders. This allows for automatic identification of component elements bound to click events during the building phase, and the injection of styles to highlight the click hotspot borders. This facilitates mini-program developers in checking the layout, interaction rationality, and whether there are issues with excessively small or overlapping click hotspots, improving debugging efficiency and mitigating debugging omissions, thus facilitating practical application and promotion.

[0059] like Figure 2As shown, the second aspect of this embodiment provides a virtual device for implementing the mini-program hotspot identification and visualization method described in the first aspect, including a node element identification unit, an element filtering and processing unit, a style code injection unit, and a source code execution unit that are sequentially connected in communication.

[0060] The node element identification unit is used to analyze the abstract syntax tree of the template file of the target mini-program during the packaging and building process using a packaging tool, and identify the view component node elements on the abstract syntax tree that contain click event binding attributes.

[0061] The element filtering processing unit is used to filter all the view component node elements to remove system component node elements or node elements without interactive meaning.

[0062] The style code injection unit is used to inject style code for highlighting the corresponding clickable hotspot border on the corresponding element for each of the remaining view component node elements.

[0063] The source code execution unit is used to output the source code of the target mini-program after style injection, and run the source code to highlight the border of the click hotspot.

[0064] The working process, working details and technical effects of the aforementioned device provided in the second aspect of this embodiment can be found in the applet hotspot identification and visualization method described in the first aspect, and will not be repeated here.

[0065] like Figure 3 As shown, the third aspect of this embodiment provides a computer device for executing the mini-program hotspot identification and visualization method as described in the first aspect. The device includes a storage module, a processing module, and a transceiver module connected in sequence. The storage module stores a computer program, the transceiver module sends and receives messages, and the processing module reads the computer program and executes the mini-program hotspot identification and visualization method as described in the first aspect. Specifically, the storage module may include, but is not limited to, random-access memory (RAM), read-only memory (ROM), flash memory, first-in-first-out (FIFO) memory, and / or first-in-last-out (FILO) memory, etc.; the processing module may, but is not limited to, use a microprocessor of the STM32F105 series. Furthermore, the computer device may also include, but is not limited to, a power supply module, a display screen, and other necessary components.

[0066] The working process, working details, and technical effects of the aforementioned computer equipment can be found in the method for identifying and visualizing hot zones in the mini-program described in the first aspect, and will not be repeated here.

[0067] This fourth aspect of the embodiment provides a computer-readable storage medium storing instructions comprising the method for identifying and visualizing mini-program hotspots as described in the first aspect. Specifically, the computer-readable storage medium stores instructions that, when executed on a computer, perform the method for identifying and visualizing mini-program hotspots as described in the first aspect. The computer-readable storage medium refers to a carrier for storing data, and may include, but is not limited to, floppy disks, optical disks, hard disks, flash memory, USB flash drives, and / or Memory Sticks. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices.

[0068] The working process, working details and technical effects of the aforementioned computer-readable storage medium can be found in the method for identifying and visualizing hot zones in mini programs as described in the first aspect, and will not be repeated here.

[0069] This fifth aspect of the embodiment provides a computer program product, including a computer program or instructions, which, when executed by a computer, implement the applet hotspot identification and visualization method as described in the first aspect. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device.

[0070] Finally, it should be noted that the above description is merely a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for identifying and visualizing hot zones in a mini-program, characterized in that, include: Using a packaging tool, the abstract syntax tree of the template file of the target mini-program is analyzed during the packaging and building process, and the view component node elements that contain click event binding attributes on the abstract syntax tree are identified. All view component node elements are filtered to remove system component node elements or node elements with no interactive meaning; For each of the remaining view component node elements, inject style code into the corresponding element to highlight the border of the corresponding clickable hotspot; Output the source code of the target mini-program after style injection, and run the source code to highlight the border of the click hotspot.

2. The method for identifying and visualizing hot zones in mini-programs according to claim 1, characterized in that, The packaging tool used is the static module packaging tool webpack. In the development mode, the style code for highlighting the corresponding clickable hotspot border is injected into the remaining view component node elements.

3. The method for identifying and visualizing hot zones in mini-programs according to claim 1, characterized in that, All view component node elements are filtered to remove system component node elements or node elements with no interactive meaning, including: Based on a preset whitelist and / or blacklist of node elements, all view component node elements are filtered to remove system component node elements or node elements without interactive meaning.

4. The method for identifying and visualizing hot zones in mini-programs according to claim 1, characterized in that, The style code can be either inline style or user-defined style code.

5. The method for identifying and visualizing hot zones in mini-programs according to claim 1, characterized in that, After running the source code to highlight the border of the clicked hotspot, the method further includes: For each of the highlighted clickable hot zones, the size of the corresponding border within the display page is calculated, and it is determined whether the size conforms to the corresponding standard size. If not, the corresponding border is marked with a warning color within the display page.

6. The method for identifying and visualizing hot zones in a mini-program according to claim 1, characterized in that, After running the source code to highlight the border of the clicked hotspot, the method further includes: For each of the highlighted clickable hotspot borders, the size of the corresponding border within the display page is calculated, and the coordinate position of the corresponding border within the display page is obtained; Based on the size and coordinates of all the clicked hotspot borders, generate a hotspot information report and output it for display.

7. A device for identifying and visualizing hot zones in a mini-program, characterized in that, It includes a node element identification unit, an element filtering and processing unit, a style code injection unit, and a source code execution unit that are connected in sequence. The node element identification unit is used to analyze the abstract syntax tree of the template file of the target mini-program during the packaging and building process using a packaging tool, and identify the view component node elements on the abstract syntax tree that contain click event binding attributes. The element filtering processing unit is used to filter all the view component node elements to remove system component node elements or node elements without interactive meaning. The style code injection unit is used to inject style code for highlighting the corresponding clickable hotspot border on the corresponding element for each of the remaining view component node elements. The source code execution unit is used to output the source code of the target mini-program after style injection, and run the source code to highlight the border of the click hotspot.

8. A computer device, characterized in that, It includes a storage module, a processing module, and a transceiver module that are sequentially connected in communication. The storage module is used to store computer programs, the transceiver module is used to send and receive messages, and the processing module is used to read the computer programs and execute the mini-program hotspot identification and visualization method as described in any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that... The computer-readable storage medium stores instructions that, when executed on a computer, perform the mini-program hotspot identification and visualization method as described in any one of claims 1 to 6.

10. A computer program product, comprising a computer program or instructions, characterized in that, When the computer program or the instructions are executed by the computer, they implement the mini-program hotspot identification and visualization method as described in any one of claims 1 to 6.

Images