A method, system, and terminal for supporting visual development of web pages and mini-programs.

Abstract

The present invention discloses a method, system, medium and terminal for supporting visual development of web pages and small programs. The method comprises: step S1, using a visual editor to set a component tree; step S2, adding and / or designing components to the component tree; step S3, looping the component tree and generating a text string; step S4, obtaining the string generated in step S3; step S5, displaying or running a small program or web page through the string obtained in step S4. Visual development support for web pages and small programs can be achieved; the first component in the component tree can nest multiple layout containers, realizing the nested use of layouts such as flex elastic layout and absolute layout; the first component in the component tree can set a loop container and a conditional container, and the loop container and the conditional container allow the edited page to be displayed conditionally or cyclically according to the bound data, realizing the dynamic display capability of the page.

Description

Technical Field

[0001] The present invention relates to a visual development method, and in particular to a method, system and terminal for supporting visual development of web pages and applets. Background Art

[0002] Visual development of web pages and mini-programs is one of the core technologies of low-code software development platforms. It can effectively lower the threshold for software development and allow ordinary users to develop software visually, thereby improving software development efficiency and reducing software development costs.

[0003] However, many existing technologies are mainly aimed at web page visualization development or APP visualization development and lack unified support for web pages and applets; many existing technologies are limited to simple and single layout methods and cannot adapt to complex nested layouts; many existing technologies do not consider the dynamic display and loop display requirements of UI interfaces, and can only generate static pages, but cannot generate dynamic interactive pages or require subsequent steps to convert them into dynamic interactive pages. They can only be used to process static pages or convert them into dynamic pages after development.

[0004] Although there are many visual development methods for web pages, some use drag-and-drop layout to allow users to implement web page layout by dragging the mouse, but drag-and-drop layout is difficult to solve the problem of layout disorder caused by dynamic changes of components, and has great limitations; some use relative layout to implement web page development, but lose the intuitive operation ability of drag-and-drop layout; some use flex flexible layout to better solve the problem of complex layout, but it is more complicated to use. Summary of the invention

[0005] The technical problem to be solved by the present invention is to overcome the defects of the prior art and provide a method, system and terminal that support visual development of web pages and applets.

[0006] In order to solve the above technical problems, the present invention provides the following technical solutions:

[0007] The present invention provides a method for supporting visual development of web pages and applets, comprising the following steps:

[0008] Step S1, use a visual editor to set the component tree;

[0009] Step S2: adding and / or designing components to the component tree;

[0010] Step S3, looping the component tree and generating a text string;

[0011] Step S4, obtaining the character string generated in step S3;

[0012] Step S5: display or run the applet or webpage using the character string obtained in step S3 or S4.

[0013] As a preferred technical solution of the present invention, in step S2, the components added to the component tree include a first component and a second component;

[0014] The first component is a container component, the second component is a base component,

[0015] The first component may be a nested container component or a base component.

[0016] As a preferred technical solution of the present invention, the text string generation of the web page in step S3 is performed according to the following steps:

[0017] Step S311, looping from the root node of the component tree, including the first component, the second component, and the container or basic component in the first component;

[0018] Step S312: In step S311, when looping to the container, the container is mapped to the corresponding web page component, wherein:

[0019] When looping to the conditional container, set whether the conditional container is displayed according to the binding condition.

[0020] When looping to the loop container, bind the loop container to the corresponding loop function.

[0021] If the loop reaches a first component having child nodes, all child nodes of the first component are traversed as child nodes of the web page component mapped by the first component.

[0022] When looping to a basic component, mapping the basic component to a corresponding web page component;

[0023] Step S313: Generate a text string from the code of the web page component generated in step S312.

[0024] As a preferred technical solution of the present invention, the text string generation of the applet in step S3 is performed according to the following steps:

[0025] Step S321, looping from the root node of the component tree, including the first component, the second component, and the container or basic component in the first component;

[0026] Step S322: In step S311, when looping to the container, the container is mapped to the corresponding mini-program component, wherein:

[0027] When looping to the conditional container, map the conditional container to the corresponding conditional statement in the applet.

[0028] When looping to the loop container, map the loop container to the corresponding loop statement in the applet.

[0029] If the loop reaches a first component having child nodes, all child nodes of the first component are traversed as child nodes of the applet component mapped by the first component.

[0030] When looping to a basic component, mapping the basic component to a corresponding mini-program component;

[0031] Step S323, generating a text string from the code of the mini-program component generated in step S322.

[0032] Preferably, in step S5,

[0033] The display of web pages is performed by loading strings into corresponding pages through the framework;

[0034] The applet is run by compiling the string into the applet template;

[0035] The present invention provides a system for supporting visual development of web pages and small programs, which is applied to the aforementioned method for supporting visual development of web pages and small programs, and includes a visual editor, wherein:

[0036] The visual editor includes a component tree;

[0037] The component tree includes a first component and a second component, wherein:

[0038] The first component may be nested with the first component and / or the second component;

[0039] The second component cannot nest the first component and the second component.

[0040] Preferably, the first component is a container component, wherein the first component includes one or more of a layout container, a conditional container or a loop container;

[0041] The second component is a base component.

[0042] Further preferably, when the first component is a conditional container, the options of the conditional container include binding of Boolean value data;

[0043] When the first component is a loop container, the loop container is bound with array type data.

[0044] The present invention provides a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, a method of the present invention for supporting visual development of web pages and applets is implemented.

[0045] The present invention provides an electronic terminal, characterized in that it comprises a processor and a memory, wherein:

[0046] The memory is used to store computer programs, and the processor is used to execute the computer programs stored in the memory, so that the terminal executes a method of supporting visual development of web pages and applets of the present invention.

[0047] The beneficial effects achieved by the present invention are: the present invention can realize visual development support for web pages and mini-programs; the first component in the component tree can nest multiple layout containers, realize the nested use of layouts such as flex elastic layout and absolute layout, and realize support for multiple layout methods in the future through open containers; the first component of the component tree can set a loop container and a conditional container, through the loop container and the conditional container, the edited page can be displayed conditionally or cyclically according to the bound data, realizing the dynamic display capability of the page, and by compiling the conditional container and the loop container into native instructions, the functional completeness and performance reliability are realized; by generating a web page component code or a mini-program component code, the text string corresponding to the web page or mini-program is obtained, and two platforms can be adapted under one editing system; the second component cannot nest container components or basic components, reducing the difficulty of visual editing of complex layouts; the component tree editor realizes the visual layout of the interface, so that people who cannot write code can also develop software and applications across web pages and mini-program platforms. At the same time, by distinguishing container components from basic components, the difficulty of visual layout is reduced; the present invention realizes layout through container components, and can realize nested layout through nested container components. Different layout methods can be realized in different layout containers, thereby realizing very complex nested layout; the present invention can expand layout methods through container components and expand basic functions through basic components, thereby adapting to more layout methods and basic functions, and is more flexible than other solutions; the present invention solves the problems of dynamic binding and loop binding of the visual interface by introducing conditional containers and loop containers, greatly enhancing the flexibility of visual interface development, and realizes a dynamic and interactive interface through conditional containers and loop containers, and finally maps them into native conditional judgment instructions and loop instructions of the corresponding platform, thereby ensuring functional integrity and performance reliability; the present invention realizes the simultaneous adaptation of the same visual editing method to multiple platforms through a method of mapping container components and basic components into web page components and applet components, thereby greatly reducing the cost of software development and realizing that one-time development can run on multiple platforms. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] The accompanying drawings are used to provide a further understanding of the present invention and constitute a part of the specification. Together with the embodiments of the present invention, they are used to explain the present invention and do not constitute a limitation of the present invention. In the accompanying drawings:

[0049] Figure 1 It is one of the schematic diagrams of the present invention;

[0050] Figure 2 This is the second schematic diagram of the present invention;

[0051] Figure 3 It is the third schematic diagram of the present invention. DETAILED DESCRIPTION

[0052] The preferred embodiments of the present invention are described below in conjunction with the accompanying drawings. It should be understood that the preferred embodiments described herein are only used to illustrate and explain the present invention, and are not used to limit the present invention.

[0053] Example

[0054] The present invention provides a method for supporting visual development of web pages and applets, comprising the following steps:

[0055] Step S1, use a visual editor to set a component tree, in which you can add components, delete components, clone components, expand and collapse components, hide components, and set component options and styles;

[0056] Step S2: adding and / or designing components to the component tree;

[0057] Step S3, looping the component tree and generating a text string;

[0058] Step S4, obtaining the character string generated in step S3;

[0059] Step S5: Display or run the applet or web page using the character string obtained in step S3 or S4.

[0060] In step S2, the components added to the component tree include a first component and a second component; the first component is a container component, and the second component is a base component. The first component can nest container components or base components. The base component is a type of basic component that cannot continue to nest other components, mainly including text, pictures, videos and other basic and core units of the user interface. The basic component can be nested in the container component to realize a complex visual interface. The basic component supports options such as content and style, and the corresponding component can be selected in the component tree for modification. The basic component can have different options for web pages and applets, and different basic components can be set for web pages and applets to achieve differentiated customization for the two platforms.

[0061] The text string generation of the web page in step S3 is performed according to the following steps:

[0062] Step S311, looping from the root node of the component tree, including the first component, the second component, and the container or basic component in the first component;

[0063] In step S312 and step S311, when looping to the container, the container is mapped to the corresponding web page component, wherein:

[0064] When looping to the conditional container, the conditional container is controlled according to the binding condition to set whether the conditional container body or the conditional container and its subcomponents are displayed.

[0065] When looping to the loop container, bind the loop container to the corresponding loop function.

[0066] If the loop reaches a first component having child nodes, all child nodes of the first component are traversed as child nodes of the web page component mapped by the first component.

[0067] When looping to the basic component, map the basic component to the corresponding web page component;

[0068] Step S313: Generate a text string from the code of the web page component generated in step S312.

[0069] The text string generation of the applet in step S3 is performed according to the following steps:

[0070] Step S321, looping from the root node of the component tree, including the first component, the second component, and the container or basic component in the first component;

[0071] In step S322 and step S311, when looping to the container, the container is mapped to the corresponding mini-program component, wherein:

[0072] When looping to the conditional container, map the conditional container to the corresponding conditional statement in the applet.

[0073] When looping to the loop container, map the loop container to the corresponding loop statement in the applet.

[0074] If the loop reaches a first component having child nodes, all child nodes of the first component are traversed as child nodes of the applet component mapped by the first component.

[0075] When looping to the basic component, map the basic component to the corresponding mini-program component;

[0076] Step S323, generating a text string from the code of the mini-program component generated in step S322.

[0077] Specifically, Figure 1As shown, the types of container components used in this embodiment and the component mapping examples corresponding to each platform. It should be emphasized that the mapping components in the figure are the core codes of the corresponding platform components, and actually require a lot of auxiliary codes; in this embodiment, the web page container component is mapped to the Vue component, and the mini program container component is mapped to the mini program template code or mini program component.

[0078] Each component (including the first component or the second component) accepts user-defined options and renders different results based on the options. For example, the text component accepts text string options, the image component accepts image link options, and the video component accepts video link options. Each component supports multiple options.

[0079] Different types of container components have different options. Options can control the position, layout and properties of the container, as well as the layout relationship of subcomponents. Specifically, this embodiment implements flex elastic layout through layout container. The flex layout container sets the display value of its own CSS attribute to flex, and then controls the layout of itself and subcomponents through related attributes such as flex-wrap, flex-direction, justify-content, flex-grow, flex-basis, etc., and can also use relative containers in conjunction with absolute containers to achieve absolute layout of absolute containers. Absolute layout containers can set themselves to be positioned relative to top, right, bottom, and left. The layout method implemented in this embodiment does not represent the full capabilities of this method. Any layout method can be implemented by extending the container component, and specific options or specific container components can be set for different platforms.

[0080] In this embodiment, a method of realizing visual dynamic preview by mapping the component tree to the vnode virtual node of the Vue framework is taken as an example. The specific method is that in the render function of the Vue component, all components are looped from the root node of the component tree. If a container component is encountered, it is rendered according to its mapped component, and its subcomponents are rendered as child nodes, and so on; if a condition is encountered, it is determined whether the condition is true. If it is not true, the component is directly discarded and not rendered. If it is true, its subcomponents are rendered as child nodes; if a loop container is encountered, all data structures are looped to render subcomponents; if a basic component is encountered, the corresponding mapped component is directly rendered. In this way, the component tree is converted into a runnable Vue component, and visual real-time editing and preview are realized.

[0081] like Figure 2 As shown, it is the visual editor in this embodiment, with a component tree on the left, nested container components in the component tree, and an interface preview on the right. Figure 2It shows that the conditional container and the loop container are nested under the layout container in the component tree. The text component below the conditional container is displayed in the preview interface; the loop container displays multiple pictures in a loop. The right side is the real-time rendering of the component tree implemented using the Vue component. The use of the Vue framework in this embodiment does not constitute a limitation on the implementation method. According to the configuration of the container component and the basic component, it can also be mapped to generate components of frameworks such as React or WebComponents components. This embodiment is only a typical implementation method or one of the better implementation methods.

[0082] In step S5, the web page is displayed by loading the character string into the corresponding page through the framework; the mini program is run by compiling the character string into the mini program template.

[0083] Specifically, for the generation and / or display of web pages, the Vue framework is taken as an example in this embodiment, including two stages of compilation and assembly. After the UI interface is developed, first start from the root node of the component tree, traverse all container components and basic components, and generate the corresponding Vue template code for each component compilation function. If the container component has child nodes, the child nodes are compiled in a loop and the compilation result is nested into the template code of the current node. If it is a basic component, there is no child node. After all nodes are traversed, a legal Vue template string is obtained and saved to the database TEXT type field for standby. In addition, the compilation process also needs to deal with the following details: first, the compilation of options, the options of container components and basic components will be mapped to the properties of Vue components, so that the components can render different results and generate different interactive behaviors according to the properties; the compilation of conditional containers, conditional containers are one of the key technologies for dynamic display of interfaces, and conditional containers will be compiled into v-if instructions to realize dynamic display of interfaces; the compilation of loop containers, loop containers are important functions for realizing loop display of UI interfaces such as displaying a list, and the web page end will be compiled into v-for instructions. After the page is compiled into a template, it needs to be assembled into a Vue component to be rendered and used normally. The assembly process mainly uses the above Vue template string as the template attribute of the component object, adds other life cycle functions and methods method functions, and finally constructs a legal Vue component object, which is rendered to the web page using the Vue framework. The compilation and generation of functions and logics are known to those skilled in the art and are not within the scope of discussion of the present invention, so they are omitted. It should be emphasized that this embodiment uses the method of compiling to the Vue template and generating the Vue component to realize the compilation and display of the visual interface. This is just an example. In fact, other frameworks such as React or Web Components can be used to implement the corresponding functions.

[0084] For the generation and / or operation of the applet, the WeChat applet is taken as an example in this embodiment, including two stages: compilation and assembly. After the UI interface is developed, first start from the root node of the component tree, traverse all container components and basic components, and generate the corresponding applet template code for each component compilation function. If the container component has child nodes, the child nodes are compiled in a loop and the compilation result is nested into the template code of the current node. If it is a basic component, there is no child node. After all nodes are traversed, a legal applet template string is obtained, which is saved to the database TEXT type field for standby. In addition, the compilation process also needs to deal with the following details: first, the compilation of options, the options of container components and basic components will be mapped into the properties of applet components, so that the components can render different results and generate different interactive behaviors according to the properties; the compilation of conditional containers, conditional containers are one of the key technologies for dynamic display of interfaces, and conditional containers will be compiled into wx:if instructions to realize dynamic display of interfaces; the compilation of loop containers, loop containers are important functions for realizing loop display of UI interfaces such as displaying a list, and the web page will be compiled into wx:for instructions. After the component is compiled, it is directly generated as the index.wxml file of the corresponding page in the mini program package and packaged and run together with the mini program. This ensures that visual development can fully realize all the functions of the native mini program.

[0085] like Figure 3 As shown, the template generated by the mini-program interface is shown. The left side shows the location of the index.wxml file of the corresponding page in the mini-program package, and the right side shows the final generated mini-program template code. It can be found that the layout container implements flex layout through the flex attribute; the conditional container is implemented through the wx:if instruction; and the loop container is implemented through the wx:for instruction. It should be emphasized that this embodiment implements the wxml template compiled into the WeChat mini-program, and can actually be compiled into other mini-program platforms such as the Alipay mini-program. It only needs to match the corresponding template syntax to the corresponding syntax of other mini-program platforms. The difference lies only in the difference of some templates.

[0086] This embodiment also provides a system that supports visual development of web pages and mini-programs, and a method for supporting visual development of web pages and mini-programs used in this embodiment to implement visual development of web pages and mini-programs, including a visual editor, wherein the visual editor includes a component tree; the component tree includes a first component and a second component, wherein the first component can be nested in the first component and / or the second component; the second component cannot be nested in the first component and the second component.

[0087] The first component is a container component, wherein the first component includes one or more of a layout container, a conditional container, or a loop container; the second component is a base component. Specifically, the container component can be implemented by different components on the web page and the mini program platform, but the same container is used to represent it in the component tree of the visual editor. When generating a web page and a mini program, the same container is mapped to different components of the web page and the mini program using different mapping rules, thereby supporting both the web page and the mini program platform.

[0088] In this embodiment, the containers of the first component and the second component have different options, and the options can control the position, layout, style, content of the container, and control the layout relationship of the subcomponents. The web page and the mini program platform can use different container options and support different container types to achieve differentiated customization for the two platforms. The conditional container in this embodiment has an option to bind data, and the conditional container and its subcomponents are displayed only when the data is true; the loop container in this embodiment has an option to bind array type data that needs to be looped, and multiple loop containers and their subcomponents are displayed in a loop according to the length of the array, and the subcomponents can obtain the variables in the loop.

[0089] By using containers, functions that cannot be achieved by basic components can be implemented. Specifically, when the first component is a conditional container, the options of the conditional container include binding to Boolean data, which will be displayed only when it is true, thereby realizing dynamic display and hiding of the interface; when the first component is a loop container, the loop container is bound to array type data, and after binding, the array is automatically looped to display child nodes; the layout container can realize the nested use of layouts such as flex flexible layout and absolute layout, and support for multiple layout methods in the future is realized through open containers.

[0090] By using containers and mapping the component tree composed of containers and basic components to web pages and applets, the function of compatibility between web pages and applets is achieved.

[0091] A computer-readable storage medium stores a computer program, which, when executed by a processor, implements a method in this embodiment for supporting visual development of web pages and applets.

[0092] The computer-readable storage medium in this embodiment can be understood by ordinary technicians in this field: all or part of the steps of implementing the above-mentioned method embodiments can be completed by hardware related to the computer program. The aforementioned computer program can be stored in a computer-readable storage medium. When the program is executed, the steps of the above-mentioned method embodiments are executed; and the aforementioned storage medium includes: ROM, RAM, magnetic disk or optical disk and other media that can store program codes.

[0093] An electronic terminal includes a processor, a memory, a transceiver and a communication interface, wherein the memory and the communication interface are connected to the processor and the transceiver and complete communication with each other, the memory is used to store computer programs, the communication interface is used to communicate, and the processor and the transceiver are used to execute the computer programs stored in the memory, so that the terminal executes each step in a method of supporting visual development of web pages and applets in this embodiment.

[0094] In this embodiment, the memory may include a random access memory (RAM), and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory.

[0095] The above-mentioned processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

[0096] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0097] The present invention can be used in many general or special computing system environments or configurations, such as personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronic devices, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, and the like.

[0098] The present invention may be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present invention may also be practiced in distributed computing environments where tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules may be located in local and remote computer storage media, including storage devices.

[0099] The present invention provides a method, system and terminal for supporting visual development of web pages and mini-programs, which can realize visual development support for web pages and mini-programs; the first component in the component tree can nest multiple layout containers, realize the nested use of layouts such as flex elastic layout and absolute layout, and realize support for multiple future layout methods through open containers; the first component of the component tree can set a loop container and a conditional container, through which the edited page can be displayed conditionally or cyclically according to the bound data, realizing the dynamic display capability of the page, and by compiling the conditional container and the loop container into native instructions, the functional completeness and performance reliability are realized; by generating a web page component code or a mini-program component code, a text string corresponding to the web page or mini-program is obtained, which can adapt to two platforms under one editing system; the second component cannot nest container components or basic components, reducing the difficulty of visual editing of complex layouts; the component tree editor realizes the visual layout of the interface, so that people who cannot write code can also develop software and applications across web pages and mini-program platforms, and at the same time, by distinguishing container components from basic components, the difficulty of visual layout is reduced; the present invention can realize visual layout of the interface, so that people who cannot write code can also develop software and applications across web pages and mini-program platforms, and at the same time, by distinguishing container components from basic components, the difficulty of visual layout is reduced; The layout can be realized through container components, and nested layout can be realized through nested container components. Different layout modes can be realized in different layout containers, thereby realizing very complex nested layouts. The present invention can expand layout modes through container components and expand basic functions through basic components, thereby adapting to more layout modes and basic functions. Compared with other schemes, the present invention is more flexible and also realizes the expansion of layout capabilities and component capabilities of the visual development interface by adding container components and basic components. The present invention solves the problems of dynamic binding and loop binding of the visual interface by introducing conditional containers and loop containers, greatly enhancing the flexibility of visual interface development, realizes a dynamic and interactive interface through conditional containers and loop containers, and finally maps them into native conditional judgment instructions and loop instructions of the corresponding platform, ensuring functional integrity and performance reliability. The present invention realizes the adaptation of the same visual editing method to multiple platforms at the same time through a method of mapping container components and basic components into web page components and applet components, greatly reducing the cost of software development and realizing that one development can run on multiple platforms. Dynamic display and loop display of the interface are realized through loop containers and conditional containers, solving the loop layout problem in visual development.

[0100] Finally, it should be noted that the above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art can still modify the technical solutions described in the aforementioned embodiments or replace some of the technical features therein by equivalents. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for supporting visual development of web pages and applets, characterized in that: The following steps are included: Step S1, use a visual editor to set the component tree; Step S2: adding and / or designing components to the component tree; Step S3, looping the component tree and generating a text string; the text string generation of the web page in step S3 is performed according to the following steps: Step S311, looping from the root node of the component tree, including the first component, the second component, and the container component or basic component in the first component; Step S312: In step S311, when looping to the container component, the container component is mapped to the corresponding web page component, wherein: When looping to the conditional container, set whether the conditional container is displayed according to the binding condition. When looping to the loop container, bind the loop container to the corresponding loop function. If the loop reaches a first component having child nodes, all child nodes of the first component are traversed as child nodes of the web page component mapped by the first component. When looping to a basic component, mapping the basic component to a corresponding web page component; Step S313, generating a text string from the code of the webpage component generated in step S312; The text string generation of the applet in step S3 is performed according to the following steps: Step S321, looping from the root node of the component tree, including the first component, the second component, and the container component or the basic component in the first component; Step S322: In step S321, when looping to the container component, the container component is mapped to the corresponding mini-program component, wherein: When looping to the conditional container, map the conditional container to the corresponding conditional statement in the applet. When looping to the loop container, map the loop container to the corresponding loop statement in the applet. If the loop reaches a first component having child nodes, all child nodes of the first component are traversed as child nodes of the applet component mapped by the first component. When looping to a basic component, mapping the basic component to a corresponding mini-program component; Step S323, generating a text string from the code of the mini-program component generated in step S322; Step S4, obtaining the character string generated in step S3; Step S5, displaying or running the applet or webpage using the character string obtained in step S4; Among them, the visual dynamic preview is realized by mapping the component tree to the vnode virtual node of the Vue framework: in the render function of the Vue component, all components are looped from the root node of the component tree. If a container component is encountered, it is rendered according to its mapped component, and its child components are rendered as child nodes, and so on; if a conditional container is encountered, it is determined whether the condition is true. If it is not true, the component is directly discarded and not rendered. If it is true, its child components are rendered as child nodes; if a loop container is encountered, all data structures are looped to render child components; if a basic component is encountered, the corresponding mapped component is directly rendered; Wherein, in said step S5, The display of the web page is carried out by loading the string into the corresponding page through the framework: after the UI interface development is completed, first start from the root node of the component tree, traverse all container components and basic components, generate the corresponding Vue template code for each component compilation function, and obtain a Vue template string after the traversal is completed; the compilation process also needs to process the following: the options of the container component and the basic component are mapped into the properties of the Vue component; the conditional container is compiled into the v-if instruction; the loop container is compiled into the v-for instruction; after the page is compiled into a template, it is assembled into a Vue component; the assembly process uses the Vue template string as the template attribute of the component object, plus other life cycle functions and methods method functions, and finally constructs a Vue component object, which is rendered to the web page using the Vue framework; The running of the mini-program is carried out by compiling the string into the mini-program template: after the UI interface development is completed, first start from the root node of the component tree, traverse all container components and basic components, and generate the corresponding mini-program template code for each component compilation function. After the traversal is completed, a mini-program template string is obtained; the compilation process also needs to process: the options of container components and basic components are mapped into the properties of the mini-program components; the conditional container is compiled into the wx:if instruction to realize the dynamic display of the interface; the loop container is compiled into the wx:for instruction; after the component compilation is completed, it is directly generated as the index.wxml file of the corresponding page in the mini-program package, and packaged and run with the mini-program.

2. A method for supporting visual development of web pages and applets according to claim 1, characterized in that: In the step S2, the components added to the component tree include a first component and a second component; The first component is a container component, the second component is a base component, The first component may be a nested container component or a base component.

3. A system for supporting visual development of web pages and applets, implementing a method for supporting visual development of web pages and applets as described in any one of claims 1 to 2, characterized in that: Includes a visual editor, which The visual editor includes a component tree; The component tree includes a first component and a second component, wherein: The first component may be nested with the first component and / or the second component; The second component cannot nest the first component and the second component.

4. A system for supporting visual development of web pages and applets according to claim 3, characterized in that: The first component is a container component, wherein the first component includes one or more of a layout container, a conditional container, or a loop container; The second component is a base component.

5. A system for supporting visual development of web pages and applets according to claim 4, characterized in that: When the first component is a conditional container, the options of the conditional container include binding to Boolean value data; When the first component is a loop container, the binding of the loop container includes array type data.

6. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 2 is implemented.

7. An electronic terminal, characterized in that: comprising a processor and a memory, wherein: The memory is used to store a computer program, and the processor is used to execute the computer program stored in the memory, so that the terminal executes the method according to any one of claims 1 to 2.

Images