Small program hot area identification and visualization method and device, equipment, medium and product

Abstract

The invention discloses an applet hotspot identification and visualization method, device and equipment, a medium and a product, and relates to the technical field of applet front-end development. The method comprises the steps that firstly, an abstract syntax tree of a template file of a target applet is analyzed in the packaging construction process through a packaging tool, view component node elements, containing click event binding attributes, on the tree are recognized, and then after system component node elements or node elements without interaction significance are removed, all the remaining elements are subjected to file package construction. And injecting a style code for highlighting the corresponding click hot area frame on the corresponding element, finally outputting a source code obtained after style injection, and running the source code to highlight the click hot area frame. Therefore, an applet developer can conveniently check the layout of the click hot area, the interaction rationality and whether an over-small or overlapping phenomenon exists or not, the debugging efficiency of the applet click hot area is improved, the debugging omission risk is avoided, and practical application and popularization are facilitated.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of small program front-end development, and particularly relates to a small program hot area identification and visualization method, device, equipment, medium and product. BACKGROUND

[0002] A small program is an application that can be used without downloading and installing, which realizes the dream of "touchable" application, and the user can open the application by scanning or searching. The small program also embodies the concept of "walk away after use", and the user does not need to worry about whether too many applications are installed.

[0003] In the front-end development process of the small program, there are a large number of view components (View) in the small program page that bind click events (such as WeChat small program event bindtap, etc.). Due to the difficulty in accurately perceiving the size and position of these click hot area elements at the code level, it is often difficult for the developer to determine whether the user click area meets the user experience specification (such as the recommended click area of no less than 44px×44px in the Apple or WeChat application page).

[0004] At present, the existing schemes for debugging and visualizing the click hot area mainly rely on the following ways: (1) manual debugging method, that is, the developer adds styles such as border and background color to the view component that binds the click event by manual method, and then observes the actual clickable range; (2) UI (User Interface) framework encapsulation method, that is, some component libraries (such as Vant Weapp or Taro UI, etc.) provide encapsulation of the button click area, which can adjust the click area by increasing the padding; (3) debugger auxiliary method, that is, the WeChat developer tool provides component highlighting function, which can display the border when the element is manually clicked; (4) based on automatic testing tool, that is, tools such as Appium support automatic testing of click coordinates.

[0005] However, the above existing schemes have the following defects: (1) relying on manual operation, low efficiency, that is, unable to automatically identify all click hot area elements that bind click events in the small program page, so that the debugging experience relies on the developer to manually mark, the workload is large, and the maintenance cost is high; (2) lack of static analysis mechanism in the construction period, that is, the current mainstream development process fails to analyze the view component that binds the click event in the construction stage, and fails to inject hot area styles or prompt information; (3) lack of global visualization capability, that is, unable to automatically render the click hot area border of the whole page at runtime, which makes it difficult to accurately evaluate the hot area range and interactive friendliness in the development process; (4) lack of uniformity and universality, that is, most of the schemes can only handle a single page or specific components, lack of universality, and difficult to be uniformly managed and applied in large projects.

[0006] Therefore, how to provide a new scheme capable of automatically identifying and visually presenting the hot area of the applet click so as to improve the debugging efficiency of the hot area of the applet click and avoid the risk of debugging omission is a subject that the person skilled in the art urgently needs to study. SUMMARY

[0007] The purpose of the present application is to provide a hot area identification and visualization method and device for applets, a computer device, a computer readable storage medium and a computer program product, to solve the problem of low debugging efficiency and the risk of debugging omission existing in the current debugging and visualization scheme of the hot area of the applet click.

[0008] In order to achieve the above-mentioned purpose, the present application adopts the following technical scheme: In a first aspect, a hot area identification and visualization method for applets is provided, comprising: Using a packaging tool, analyzing the abstract syntax tree of the template file of the target applet in the packaging and building process, and identifying the view component node elements on the abstract syntax tree and containing the click event binding attribute; Filtering all the view component node elements to eliminate system component node elements or node elements without interactive significance; For each of the remaining view component node elements, injecting style code for highlighting the corresponding click hot area border on the corresponding element; Outputting the source code obtained after the style injection of the target applet, and running the source code to highlight the click hot area border.

[0009] Based on the above-mentioned summary, a new scheme for automatically identifying and visually presenting the hot area of the applet click based on the packaging tool is provided, that is, first using a packaging tool, analyzing the abstract syntax tree of the template file of the target applet in the packaging and building process, and identifying the view component node elements on the tree and containing the click event binding attribute, then after eliminating system component node elements or node elements without interactive significance, for each of the remaining elements, injecting style code for highlighting the corresponding click hot area border on the corresponding element, and finally outputting the source code obtained after the style injection, and running the source code to highlight the click hot area border, so that the component elements binding the click event in the page can be automatically identified in the building stage, and the click hot area border can be highlighted by injecting the style, so that the applet developer can check the click hot area layout, the interactive rationality and whether there is a too small or overlapping phenomenon, improve the debugging efficiency of the hot area of the applet click and avoid the risk of debugging omission, and facilitate practical application and promotion.

[0010] In a possible design, the packaging tool is a static module packaging tool webpack, and the style code for highlighting the corresponding click hot area border is injected on the corresponding element for each of the remaining view component node elements in a build mode, specifically a development mode.

[0011] In a possible design, the screening processing is performed on all the view component node elements to remove system component node elements or node elements without interactive significance, including: According to the preset node element white list and / or node element black list, the screening processing is performed on all the view component node elements to remove system component node elements or node elements without interactive significance.

[0012] In a possible design, the style code adopts an inline style or a code of a user-defined style.

[0013] In a possible design, after the source code is run to highlight the click hot area border, the method further includes: For each of the highlighted click hot area borders, a size of the corresponding border in a display page is calculated, and it is determined whether the size meets a corresponding standard size; if not, the corresponding border is further marked with a warning color in the display page.

[0014] In a possible design, after the source code is run to highlight the click hot area border, the method further includes: For each of the highlighted click hot area borders, a size of the corresponding border in a display page is calculated, and it is determined whether the size meets a corresponding standard size; if not, the corresponding border is further marked with a warning color in the display page. According to the sizes and coordinate positions of all the click hot area borders, a hot area information report is generated and output for display.

[0015] In a second aspect, a small program hot area identification and visualization device is provided, including a node element identification unit, an element screening processing unit, a style code injection unit, and a source code running unit which are sequentially and communicatively connected. The node element identification unit is configured to analyze an abstract syntax tree of a template file of a target small program in a packaging and building process by using a packaging tool, and identify view component node elements on the abstract syntax tree and containing a click event binding attribute. The element screening processing unit is configured to perform screening processing on all the view component node elements to remove system component node elements or node elements without interactive significance. The style code injection unit is configured to inject, for each of the remaining view component node element, style code for highlighting a corresponding click hot area border on the corresponding element. The source code running unit is configured to output the target applet and the source code obtained after the style injection, and run the source code to highlight the click hot area border.

[0016] In a third aspect, the present application provides a computer device, comprising a storage module, a processing module and a transceiver module connected in sequence, wherein the storage module is configured to store a computer program, the transceiver module is configured to transceive messages, and the processing module is configured to read the computer program and execute the applet hot area identification and visualization method according to any possible design of the first aspect.

[0017] In a fourth aspect, the present application provides a computer readable storage medium, wherein instructions are stored on the computer readable storage medium, and when the instructions are executed on a computer, the applet hot area identification and visualization method according to any possible design of the first aspect is executed.

[0018] In a fifth aspect, the present application provides a computer program product, comprising a computer program or instructions, and when the computer program or the instructions are executed on a computer, the applet hot area identification and visualization method according to any possible design of the first aspect is implemented.

[0019] The above-mentioned scheme has the following beneficial effects: (1) The present application creatively provides a new scheme for automatically identifying and visualizing applet click hot areas based on a packaging tool, that is, first, a packaging tool is used to analyze the abstract syntax tree of the template file of the target applet in the packaging and building process, and view component node elements containing click event binding properties on the tree are identified, then after eliminating system component node elements or node elements without interactive significance, for each of the remaining elements, style code for highlighting the corresponding click hot area border is injected on the corresponding element, and finally, the source code obtained after the style injection is output, and the source code is run to highlight the click hot area border, so that the component elements binding the click event in the page can be automatically identified in the building stage, and the click hot area border can be highlighted by injecting the style, thereby the applet developer can check the click hot area layout, interactive rationality and whether there is a too small or overlapping phenomenon, the debugging efficiency of the applet click hot area is improved, and the risk of debugging omission is avoided. (2) The automatic identification and visualization of the applet hot area can be realized, that is, without modifying the business code, the component elements binding the click event in the page can be automatically identified, and the visual style can be dynamically injected in the development and building process, thereby the developer's perception ability of the interactive hot area is significantly improved. (3) It can significantly improve the debugging efficiency and the consistency of interactive experience. That is, through the unified visual hot area border marking, developers can quickly find the interactive problems such as too small click area, layout overlap or omission, which helps to improve the overall user experience of the applet and reduce the online problem rate; (4) It has the value of unified and standardized development, that is, it helps to form a unified hot area checking mechanism and interactive specification in team development, and improves the cross-team collaboration efficiency; (5) By using the packaging tool to analyze and identify the components that bind the click event in the build process, rather than capturing at runtime, the hot area analysis can be innovatively sunk to the build period, improving the visualization capability and performance stability; (6) By automatically injecting inline style code into the identified components, it can completely eliminate the need for manual style addition or modification of the original code structure, ensuring clean business code; (7) The scheme allows the visualization 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 scheme cannot distinguish between environments and has pollution risk; (8) Compared with the existing scattered debugging methods (such as manually adding a border or modifying the style of a single component), this scheme is the first to combine static analysis with build injection, realizing a unified hot area detection process of “page level + engineering + automation”, which is convenient for practical application and promotion. BRIEF DESCRIPTION OF DRAWINGS

[0020] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, a brief introduction will be given below to the drawings needed to be used in the embodiments or prior art description. Obviously, the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can also be obtained without creative labor on the basis of these drawings.

[0021] Figure 1 The flowchart of the applet hot area identification and visualization method provided by the embodiment of the present application.

[0022] Figure 2 The structural schematic diagram of the applet hot area identification and visualization device provided by the embodiment of the present application.

[0023] Figure 3 The structural schematic diagram of the computer device provided by the embodiment of the present application. DETAILED DESCRIPTION

[0024] In order to more clearly illustrate the technical solutions of the embodiments of the present application or the prior art, the present application will be briefly introduced below in connection with the drawings and the description of the embodiments or the prior art. Obviously, the following description of the drawings is only some embodiments of the present application, and for those skilled in the art, other embodiments can be obtained without creative labor on the basis of these embodiments. It should be noted that the description of these embodiments is used to help understand the present application, but does not constitute a limitation on the present application.

[0025] 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, a first object can be referred to as a second object, and similarly, a second object can be referred to as a first object without departing from the scope of the example embodiments of the present application.

[0026] It should be understood that for the term "and / or" that can appear in the present application, it is only a description of the association relationship of the associated objects, which means that there can be three relationships, for example, A and / or B can mean that A exists alone, B exists alone or A and B exist simultaneously, etc. For example, A, B and / or C can mean that any one of A, B and C or any combination thereof exists; for the term " / and" that can appear in the present application, it is another description of the association relationship of another associated object, which means that there can be two relationships, for example, A / and B can mean that A exists alone or A and B exist simultaneously; in addition, for the character " / " that can appear in the present application, it generally means that the associated objects before and after are in an "or" relationship.

[0027] Embodiments As shown in Figure 1 The applet hot area identification and visualization method provided by the first aspect of the present embodiment can be executed by a computer device with certain computing resources, such as a server, a personal computer (PC, which refers to a multi-purpose computer suitable for personal use in size, price and performance; desktop, notebook computer to small notebook computer and tablet computer and ultrabook, etc.), smart phone, personal digital assistant (PDA) or wearable device, etc. As shown in Figure 1 The applet hot area identification and visualization method includes but is not limited to the following steps S1-S4.

[0028] S1. Analyzing an abstract syntax tree of a template file of a target applet and identifying a view component node element containing a click event binding attribute on the abstract syntax tree in a packaging build process by using a packaging tool.

[0029] In the step S1, the target applet is an applet development object, which can be but is not limited to a certain WeChat applet; and the template file is specifically but not limited to a wxml format file. The packaging tool refers to a tool for integrating an application and its dependent resources into a distributable format (such as APK, EXE or DEB, etc.), covering various scenarios such as web applications, binary programs and cross-platform development; specifically, the packaging tool can be but is not limited to a static module packaging tool webpack, which is a code compilation tool for modern JavaScript applications, having an entry, an exit and a plug-in, etc., and when processing an application, it will internally build a dependency graph, which will be correspondingly mapped to each module required by the project, and generate one or more bundle files. The abstract syntax tree (AST) is a tree-like representation of the abstract syntax structure of the source code, which represents the syntax structure of the programming language in a tree-like form, and each node on the tree represents a syntax element in the source code, such as an expression, a statement or an operator, etc. The click event binding attribute specifically includes but is not limited to bindtap, bind:tap, catchtap and catch:tap, etc. (which are commonly used to implement click event binding in applets). Therefore, the static module packaging tool webpack can be used to analyze and identify the view component node element containing the click event binding attribute on the abstract syntax tree in the packaging build process.

[0030] S2. Screening all the view component node elements to eliminate system component node elements or node elements without interactive significance.

[0031] In the step S2, since not all the view component node elements on the abstract syntax tree and containing the click event binding attribute need to debug the corresponding click hot area, this step is to accurately lock the specific debugging and visualizing object. Specifically, all the view component node elements are screened to exclude system component node elements or non-interactive node elements, including but not limited to: according to the preset node element white list and / or node element black list, all the view component node elements are screened to exclude system component node elements or non-interactive node elements. The node element white list specifically includes but is not limited to pre-set non-system component node elements or interactive node elements, and the node element black list specifically includes but is not limited to pre-set system component node elements or non-interactive node elements, so that the specific process of the screening can be realized based on the black and white list mechanism.

[0032] S3. For each of the remaining view component node elements, inject a style code for highlighting the corresponding click hot area border on the corresponding element.

[0033] In the step S3, the remaining view component node elements after screening are the specific debugging and visualizing object. In order to realize the purpose of not having redundant code in the production environment and avoiding polluting the production code, when the packaging tool is a static module packaging tool webpack, it is preferred to inject a style code for highlighting the corresponding click hot area border on the corresponding element for each of the remaining view component node elements in the development mode of the build mode (the static module packaging tool webpack has the following three build modes: development mode development, production mode production and no mode none, wherein the development mode development has the characteristics of not being compressed and being convenient for debugging, and is suitable for local development environment). In addition, the style code preferably uses inline style (InlineStyle, which is a way of defining Cascading Style Sheets CSS rules directly in the style attribute of HyperText Markup Language HTML tags) or user-defined style code to further avoid polluting the production code.

[0034] S4. Output the target applet and the source code obtained after style injection, and run the source code to highlight the click hot area border.

[0035] In the step S4, the click hot area layout, interaction rationality and whether there is too small or overlapping phenomenon can be checked by the applet developer through highlighting the border of the click hot area. In addition, in order to expand the applet hot area identification and visualization capability of the embodiment, preferably, after running the source code to highlight the border of the click hot area, the method further includes but: for each highlighted border of the click hot area, the size of the corresponding border in the display page is calculated, and it is judged whether the size meets the corresponding standard size, if not, the corresponding border is also marked in the display page with a warning color. The specific calculation method of the size can be realized by counting the number of pixels in the height direction and the width direction of the corresponding border; the standard size is exemplified but not limited to not less than 44px*44px (px represents pixel unit); the warning color can be but not limited to yellow or red, so that the click hot area with layout problem can also be automatically warned, further facilitating the applet developer to check the click hot area. And preferably, after running the source code to highlight the border of the click hot area, the method further includes but not limited to: for each highlighted border of the click hot area, the size of the corresponding border in the display page is calculated, and the coordinate position of the corresponding border in the display page is obtained; according to the size and coordinate position of all the click hot area borders, a hot area information report is generated and output for display. In this way, the applet developer can also be further facilitated to check the click hot area.

[0036] Therefore, based on the applet hot area identification and visualization method described in the foregoing steps S1-S4, a new scheme for automatically identifying and visually presenting the applet click hot area based on the packaging tool is provided, that is, first, the packaging tool is used to analyze the abstract syntax tree of the template file of the target applet in the packaging and building process, and the view component node element containing the click event binding attribute on the tree is identified, then after eliminating the system component node element or the node element without interactive meaning, for each element remaining, the style code for highlighting the border of the corresponding click hot area is injected on the corresponding element, finally the source code obtained after the style injection is output, and the source code is run to highlight the border of the click hot area. In this way, the component element binding the click event in the page can be automatically identified in the building stage, and the border of the click hot area can be highlighted by injecting the style, so that the applet developer can check the click hot area layout, interaction rationality and whether there is too small or overlapping phenomenon, improve the debugging efficiency of the applet click hot area and avoid the risk of debugging omission, which is convenient for practical application and promotion.

[0037] As 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. 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.

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

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

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

[0041] The fourth aspect of the embodiment provides a computer readable storage medium storing instructions of the small program hot area identification and visualization method as described in the first aspect, that is, the computer readable storage medium stores instructions, and when the instructions are executed on a computer, the small program hot area identification and visualization method as described in the first aspect is executed. Wherein, the computer readable storage medium refers to a carrier for storing data, which can include, but is not limited to, floppy disks, optical disks, hard disks, flash memories, USB flash disks, memory sticks and other computer readable storage media, and the computer can be a general-purpose computer, a special-purpose computer, a computer network or other programmable devices.

[0042] The working process, working details and technical effects of the foregoing computer readable storage medium can refer to the small program hot area identification and visualization method as described in the first aspect, and will not be described here.

[0043] The fifth aspect of the embodiment provides a computer program product, including a computer program or instructions, which, when executed by a computer, implement the small program hot area identification and visualization method as described in the first aspect. Wherein, the computer can be a general-purpose computer, a special-purpose computer, a computer network or other programmable devices.

[0044] Finally, it should be noted that: the above only describes the preferred embodiments of the present application, and is not used to limit the protection scope of the present application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application shall be included in the protection scope of the present application.

Claims

1. An applet hot zone identification and visualization method, characterized in that, The method comprises the following steps: using a packaging tool to analyze an abstract syntax tree of a template file of a target applet in a packaging build process, and identifying view component node elements containing click event binding attributes on the abstract syntax tree; performing screening processing on all the view component node elements to remove system component node elements or node elements without interactive significance; for each of the remaining view component node elements, injecting style code for highlighting a corresponding click hot area border on the corresponding element; outputting source code of the target applet obtained after the style injection, and running the source code to highlight the click hot area border.

2. The applet hot zone identification and visualization method of claim 1, wherein, The packaging tool is a static module packaging tool webpack, and for each of the remaining view component node elements, the style code for highlighting a corresponding click hot area border is injected on the corresponding element in a build mode that is specifically a development mode.

3. The applet hot zone identification and visualization method of claim 1, wherein, The screening processing on all the view component node elements to remove system component node elements or node elements without interactive significance comprises: performing screening processing on all the view component node elements to remove system component node elements or node elements without interactive significance according to a preset node element white list and / or a node element black list.

4. The app hot zone identification and visualization method of claim 1, wherein, The style code is in the form of inline style or user-defined style.

5. The applet hot zone identification and visualization method of claim 1, wherein, After running the source code to highlight the click hot area border, the method further comprises: for each of the highlighted click hot area borders, calculating a size of the corresponding border in a display page, and determining whether the size conforms to a corresponding standard size, and if not, marking the corresponding border in the display page with a warning color.

6. The applet hot zone identification and visualization method of claim 1, wherein, After running the source code to highlight the click hot area border, the method further comprises: for each of the highlighted click hot area borders, calculating a size of the corresponding border in a display page, and obtaining a coordinate position of the corresponding border in the display page; generating a hot area information report according to the sizes and coordinate positions of all the click hot area borders, and outputting and displaying the report.

7. An applet hot zone identification and visualization apparatus, comprising: The system comprises a node element identification unit, an element screening processing unit, a style code injection unit, and a source code running unit connected in sequence; the node element identification unit is configured to use a packaging tool to analyze an abstract syntax tree of a template file of a target applet in a packaging build process, and identify view component node elements containing click event binding attributes on the abstract syntax tree; the element screening processing unit is configured to perform screening processing on all the view component node elements to remove system component node elements or node elements without interactive significance; the style code injection unit is configured to, for each of the remaining view component node elements, inject style code for highlighting a corresponding click hot area border on the corresponding element; the source code running unit is configured to output source code of the target applet obtained after the style injection, and run the source code to highlight the click hot area border.

8. A computer device, comprising: The application comprises a storage module, a processing module and a transceiver module connected in sequence, wherein the storage module is used for storing a computer program, the transceiver module is used for receiving and sending messages, and the processing module is used for reading the computer program and executing the small program hot area identification and visualization method as claimed in any one of claims 1-6.

9. A computer-readable storage medium, characterized in that The computer readable storage medium stores instructions, and when the instructions are executed on a computer, the small program hot area identification and visualization method as claimed in any one of claims 1-6 is executed.

10. A computer program product comprising computer programs or instructions, characterized in that, The computer program or the instructions realize the small program hot area identification and visualization method as claimed in any one of claims 1-6 when executed by a computer.

Images