一种支持网页和小程序可视化开发的方法、系统及终端与流程

1.本发明涉及一种可视化开发的方法，特别涉及一种支持网页和小程序可视化开发的方法、系统及终端。


背景技术：

2.网页和小程序的可视化开发是低代码软件开发平台的核心技术之一，能够有效降低软件开发门槛，让普通使用者能够可视化的开发软件，进而提升软件开发效率，降低软件开发成本。
3.但是，现有的很多技术主要针对网页可视化开发或者app可视化开发而缺少对网页和小程序的统一支持；现有的很多技术局限于简单和单一的布局方式无法适应复杂的嵌套布局；现有的很多技术没有考虑ui界面的动态展示和循环显示需求，仅可以生成目标是静态页面，无法生成动态可交互的页面或者需要后续步骤转化为动态可交互页面，只能用于处理静态页面或者开发好之后再转化为动态页面。
4.虽然现有很多针对网页的可视化开发方法，有些是使用拖拽布局让使用者通过鼠标拖拽实现网页布局，但是拖拽布局难以解决组件动态变化导致布局错乱的问题，有很大的局限性；有部分使用相对布局实现网页开发，但是丢失了拖拽布局的直观操作能力；有部分使用flex弹性布局比较好的解决了复杂布局的问题但是使用比较复杂。


技术实现要素：

5.本发明要解决的技术问题是克服现有技术的缺陷，提供一种支持网页和小程序可视化开发的方法、系统及终端。
6.为了解决上述技术问题，本发明提供了如下的技术方案：
7.本发明一种支持网页和小程序可视化开发的方法，包括如下步骤，
8.步骤s1、使用可视化编辑器进行设置组件树；
9.步骤s2、向组件树进行组件的添加和/或设计；
10.步骤s3、进行对组件树的循环并生成文本字符串；
11.步骤s4、得到所述步骤s3生成的字符串；
12.步骤s5、通过所述步骤s3或s4中得到的字符串进行小程序或网页进行显示或运行。
13.作为本发明的一种优选技术方案，所述步骤s2中，向所述组件树添加的组件包括第一组件和第二组件；
14.所述第一组件为容器组件，所述第二组件为基础组件，
15.所述第一组件可嵌套容器组件或基础组件。
16.作为本发明的一种优选技术方案，所述步骤s3中的网页页面的文本字符串生成，按以下步骤进行，
17.步骤s311、自组件树根节点进行循环，包括第一组件、第二组件以及第一组件内的
容器或基础组件；
18.步骤s312、所述步骤s311中，循环到容器时将容器映射成对应的网页组件，其中，
19.循环到条件容器时，将条件容器根据绑定条件设置是否显示，
20.循环到循环容器时，将循环容器绑定对应的循环功能，
21.如果循环到包含有具有子节点的第一组件、则遍历所述第一组件的所有子节点作为所述第一组件映射的网页组件的子节点，
22.循环到基础组件时，将所述基础组件映射为对应的网页组件；
23.步骤s313、将所述步骤s312中生成的网页组件的代码生成文本字符串。
24.作为本发明的一种优选技术方案，所述步骤s3中的小程序的文本字符串生成，按以下步骤进行，
25.步骤s321、自组件树根节点进行循环，包括第一组件、第二组件以及第一组件内的容器或基础组件；
26.步骤s322、所述步骤s311中，循环到容器时将容器映射成对应的小程序组件，其中，
27.循环到条件容器时，将条件容器映射为小程序中相对应的条件语句，
28.循环到循环容器时，将循环容器映射为小程序中相对应的循环语句，
29.如果循环到包含有具有子节点的第一组件、则遍历所述第一组件的所有子节点作为所述第一组件映射的小程序组件的子节点，
30.循环到基础组件时，将所述基础组件映射为相对应的小程序组件；
31.步骤s323、将所述步骤s322中生成的小程序组件的代码生成文本字符串。
32.优选地，所述步骤s5中，
33.对于网页的显示通过框架加载字符串到对应的页面中的方式进行；
34.对于小程序的运行通过将字符串编译到小程序模板中的方式进行；
35.本发明一种支持网页和小程序可视化开发的系统，应用于前述的一种支持网页和小程序可视化开发的方法，包括可视化编辑器，其中，
36.所述可视化编辑器包括组件树；
37.所述组件树包括有第一组件和第二组件，其中，
38.所述第一组件可嵌套有所述第一组件和/或所述第二组件；
39.所述第二组件不可嵌套所述第一组件和所述第二组件。
40.优选地，所述第一组件为容器组件，其中，所述第一组件包括布局容器、条件容器或循环容器中的一个或多个；
41.所述第二组件为基础组件。
42.进一步优选地，当所述第一组件为条件容器时，所述条件容器的选项包括对布尔值数据的绑定；
43.当所述第一组件为循环容器时，所述循环容器的绑定有数组类型数据。
44.本发明一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现本发明的一种支持网页和小程序可视化开发的方法。
45.本发明一种电子终端，其特征在于，包括处理器和存储器，其中，
46.所述存储器用于存储计算机程序，所述处理器用于执行所述存储器存储的计算机
程序，以使所述终端执行本发明的一种支持网页和小程序可视化开发的方法。
47.本发明所达到的有益效果是：本发明可以实现对网页和小程序的可视化开发支持；组件树内的第一组件可以嵌套多个布局容器，实现了flex弹性布局和绝对布局等布局的嵌套使用，以及通过开放式的容器实现了对未来多种布局方式的支持；组件树的第一组件可以设置循环容器以及条件容器，通过循环容器和条件容器让编辑的页面能够根据绑定的数据按条件展示或者循环展示，实现了页面的动态展示能力，并且通过将条件容器和循环容器编译成原生指令的方式实现了功能的完备性以及性能的可靠性；通过生成网页组件代码或小程序组件代码的方式得到对应网页或小程序的文本字符串，能够在一个编辑体系下适配两个平台；第二组件不可嵌套容器组件或基础组件，降低了复杂布局的可视化编辑难度；组件树编辑器实现了界面的可视化布局，让不会写代码的人也能够开发出跨网页和小程序平台的软件和应用，同时通过区分容器组件和基础组件，降低了可视化布局的难度；本发明通过容器组件实现布局，可以通过嵌套容器组件实现嵌套布局，在不同的布局容器中可以实现不同的布局方式，进而实现非常复杂的嵌套布局；本发明可以通过容器组件扩展布局方式、通过基础组件扩展基础功能，进而适配更多布局方式和基础功能，相比其他方案更具灵活性；本发明通过引入条件容器和循环容器解决了可视化界面的动态绑定和循环绑定的问题，大大增强了可视化界面开发的灵活性，通过条件容器和循环容器实现了动态可交互的界面，并且最终映射成对应平台的原生条件判断指令和循环指令，保证了功能完性和性能可靠性；本发明通过将容器组件和基础组件映射成网页组件和小程序组件的方法，实现了同一个可视化编辑方法同时适配多个平台，极大的降低了软件开发的成本，实现了一次开发可以运行在多个平台。
附图说明
48.附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：
49.图1是本发明的示意图之一；
50.图2是本发明的示意图之二；
51.图3是本发明的示意图之三。
具体实施方式
52.以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。
53.实施例
54.本发明提供一种支持网页和小程序可视化开发的方法，包括如下步骤，
55.步骤s1、使用可视化编辑器进行设置组件树，在组件树中可以添加组件、删除组件、克隆组件、展开折叠组件、隐藏组件，以及设置组件的选项和样式；
56.步骤s2、向组件树进行组件的添加和/或设计；
57.步骤s3、进行对组件树的循环并生成文本字符串；
58.步骤s4、得到步骤s3生成的字符串；
59.步骤s5、通过步骤s3或s4中得到的字符串进行小程序或网页进行显示或运行。
60.步骤s2中，向组件树添加的组件包括第一组件和第二组件；第一组件为容器组件，第二组件为基础组件，第一组件可嵌套容器组件或基础组件，基础组件是不能继续嵌套其他组件的一类基本组件，主要包括文本、图片、视频等用户界面最基础最核心单元。可以将基础组件嵌套在容器组件内实现复杂的可视化界面。基础组件支持内容、样式等选项，可以在组件树中选中对应的组件修改。基础组件针对网页和小程序可以有不同的选项，可以针对网页和小程序设置不同的基础组件，以此来实现针对两个平台的差异化定制。
61.步骤s3中的网页页面的文本字符串生成，按以下步骤进行，
62.步骤s311、自组件树根节点进行循环，包括第一组件、第二组件以及第一组件内的容器或基础组件；
63.步骤s312、步骤s311中，循环到容器时将容器映射成对应的网页组件，其中，
64.循环到条件容器时，将条件容器根据绑定条件控制该条件容器本体或该条件容器及其子组件设置是否显示，
65.循环到循环容器时，将循环容器绑定对应的循环功能，
66.如果循环到包含有具有子节点的第一组件、则遍历第一组件的所有子节点作为第一组件映射的网页组件的子节点，
67.循环到基础组件时，将基础组件映射为对应的网页组件；
68.步骤s313、将步骤s312中生成的网页组件的代码生成文本字符串。
69.步骤s3中的小程序的文本字符串生成，按以下步骤进行，
70.步骤s321、自组件树根节点进行循环，包括第一组件、第二组件以及第一组件内的容器或基础组件；
71.步骤s322、步骤s311中，循环到容器时将容器映射成对应的小程序组件，其中，
72.循环到条件容器时，将条件容器映射为小程序中相对应的条件语句，
73.循环到循环容器时，将循环容器映射为小程序中相对应的循环语句，
74.如果循环到包含有具有子节点的第一组件、则遍历第一组件的所有子节点作为第一组件映射的小程序组件的子节点，
75.循环到基础组件时，将基础组件映射为相对应的小程序组件；
76.步骤s323、将步骤s322中生成的小程序组件的代码生成文本字符串。
77.具体的，如图1所示，为本实施例使用的容器组件的类型和对应各个平台的组件映射示例，需要强调的是，图中的映射组件是对应平台组件的核心代码，实际上还需要大量辅助代码；在本实施例中，将网页端容器组件映射为vue组件，将小程序端容器组件映射为小程序模版代码或者小程序组件。
78.每个组件(包括第一组件或第二组件)接受使用者自定义的选项，根据选项渲染成不同的结果，如文本组件接受文本字符串选项、图片组件接受图片链接选项、视频组件接受视频链接选项，每个组件支持多个选项。
79.不同类型的容器组件组件有不同的选项，选项可以控制容器的位置、布局和属性，以及控制子组件的布局关系，具体的、本实施例通过布局容器实现了flex弹性布局，flex布局容器将自己的css属性的display值设置为flex，然后通过flex-wrap、flex-direction、justify-content、flex-grow、flex-basis等相关属性控制自身和子组件的布局，也可以使用相对容器配合绝对容器实现绝对容器的绝对布局，绝对布局容器可以设置自身相对于
top、right、bottom、left实现定位。本实施例实现的布局方式并不代表本方法的全部能力，可以通过扩展容器组件的方式实现任意布局方式，而且可以针对性的针对不同的平台设置特定的选项或者特定的容器组件。
80.本实施例中，以通过将组件树映射到vue框架的vnode虚拟节点的方式实现可视化动态预览的方式为例，具体方式为在vue组件的render渲染函数内，自组件树的根节点开始循环所有组件，如果遇到容器组件则按照其映射的组件渲染，并渲染其子组件作为子节点，以此类推；如果遇到条件同期则判断条件是否为真，不为真直接丢弃组件不渲染，为真则渲染其子组件作为子节点；如果遇到循环容器则循环所有数据结构渲染子组件；如果遇到基础组件则直接渲染对应映射组件。这样将组件树转换成了可以运行的vue组件，实现了可视化的实时编辑和预览。
81.如图2所示，为本实施例中的可视化编辑器，左侧为组件树，组件树内为嵌套的容器组件，右侧为界面预览。图2中显示了组件树中的布局容器下嵌套了条件容器和循环容器，条件容器为真下面的文本组件显示在了预览界面；循环容器循环显示了多张图片。右侧即为使用vue组件实现的组件树实时渲染。本实施例中使用vue框架并不构成对实施方式的限制，根据容器组件和基础组件的配置也可以映射生成到react等框架的组件或者web components组件，本实施例只是一种典型实现方式或较佳实施方式中的一种。
82.步骤s5中，对于网页的显示通过框架加载字符串到对应的页面中的方式进行显示；对于小程序的运行通过将字符串编译到小程序模板中的方式进行运行。
83.具体的，对于网页的生成和/或显示，本实施例中以vue框架为例，包括编译和组装两个阶段。ui界面开发完成之后，首先从组件树根节点开始，遍历所有的容器组件和基础组件，针对每一个组件编译函数生成对应的vue模版代码，如果容器组件有子节点则循环子节点编译之后将编译结果嵌套进当前节点的模版代码，如果是基础组件则无子节点，所有节点遍历完成得到一个合法的vue模版字符串，保存到数据库text类型字段备用。另外编译过程还需要处理以下细节：首先是选项的编译，容器组件和基础组件的选项会映射成vue组件的属性，这样才能让组件根据属性渲染出不同的结果和产生不同的交互行为；条件容器的编译，条件容器是界面动态显示的关键技术之一，条件容器会编译成v-if指令，实现界面的动态显示；循环容器的编译，循环容器是实现ui界面循环展示如显示一个列表的重要功能，网页端会编译成v-for指令。页面编译成模版之后，需要组装成vue组件才能被正常渲染使用。组装的过程主要是将上述vue模版字符串作为组件对象的template属性，加上其他生命周期函数和methods方法函数，最终构造成一个合法的vue组件对象，使用vue框架渲染到网页中。函数和逻辑的编译和生成本领域技术人员均知晓且不属于本发明的讨论范畴故而从略。需要强调的是，本实施例使用编译到vue模版并生成vue组件的方式实现可视化界面的编译和展示，只是作为一个例子，实际上可以使用其他框架如react或者web components实现对应功能。
84.对于小程序的生成和/或运行，本实施例中以微信小程序为例，包括编译和组装两个阶段。ui界面开发完成之后，首先从组件树根节点开始，遍历所有的容器组件和基础组件，针对每一个组件编译函数生成对应的小程序模版代码，如果容器组件有子节点则循环子节点编译之后将编译结果嵌套进当前节点的模版代码，如果是基础组件则无子节点，所有节点遍历完成得到一个合法的小程序模版字符串，保存到数据库text类型字段备用。另
外编译过程还需要处理以下细节：首先是选项的编译，容器组件和基础组件的选项会映射成小程序组件的属性，这样才能让组件根据属性渲染出不同的结果和产生不同的交互行为；条件容器的编译，条件容器是界面动态显示的关键技术之一，条件容器会编译成wx:if指令，实现界面的动态显示；循环容器的编译，循环容器是实现ui界面循环展示如显示一个列表的重要功能，网页端会编译成wx:for指令。组件编译完成之后，通过直接生成为小程序包中对应页面的index.wxml文件，跟随小程序一起打包运行。保证了可视化开发能够完整实现原生小程序的所有功能。
85.如图3所示，展示了小程序界面生成的模版，左侧展示了对应页面的index.wxml文件在小程序包的位置，右侧展示了最终生成的小程序模版代码，可以发现里面布局容器通过flex属性实现flex布局；通过wx:if指令实现条件容器；通过wx:for指令实现循环容器。需要强调的是，本实施例实现了编译到微信小程序的wxml模版，实际上也可以编译到支付宝小程序等其他小程序平台，只需要将对应的模版语法匹配为其他小程序平台的对应语法即可。区别仅仅在于部分模版的差异。
86.本实施例还提供一种支持网页和小程序可视化开发的系统，应用于本实施中的一种支持网页和小程序可视化开发的方法，实现进行针对网页和小程序的可视化开发，包括可视化编辑器，其中，可视化编辑器包括组件树；组件树包括有第一组件和第二组件，其中，第一组件可嵌套有第一组件和/或第二组件；第二组件不可嵌套第一组件和第二组件。
87.第一组件为容器组件，其中，第一组件包括布局容器、条件容器或循环容器中的一个或多个；第二组件为基础组件。具体的，容器组件在网页和小程序平台可以由不同的组件实现，但是在可视化编辑器的组件树中使用同一个容器代表，同一个容器在生成网页和小程序时使用不同的映射规则映射为网页和小程序的不同组件，以此实现同时支持网页和小程序平台。
88.本实施例中，第一组件和第二组件的容器有不同的选项，选项可以控制容器的位置、布局、样式、内容，以及控制子组件的布局关系，网页和小程序平台可以使用不同的容器选项，可以支持不同的容器类型，以此来实现针对两个平台的差异化定制。本实施例中的条件容器有选项可以绑定数据，只有当数据为真时显示条件容器及其子组件；本实施例中的循环容器有选项绑定需要循环的数组类型数据，根据数组长度循环显示多个循环容器及其子组件，而且子组件可以获取到循环中的变量。
89.通过容器的使用，可以实现基础组件无法实现的功能，具体的，当第一组件为条件容器时，条件容器的选项包括对布尔值数据的绑定，当为真时才会显示，实现界面的动态显示隐藏；当第一组件为循环容器时，循环容器的绑定有数组类型数据，绑定之后自动循环数组显示子节点；布局容器可以实现对于flex弹性布局和绝对布局等布局的嵌套使用，以及通过开放式的容器实现了对未来多种布局方式的支持。
90.通过容器的使用以及将容器和基础组件构成的组件树映射到网页和小程序，实现了兼容网页和小程序的功能。
91.一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现本实施例中的一种支持网页和小程序可视化开发的方法。
92.本实施例中的计算机可读存储介质，本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过计算机程序相关的硬件来完成。前述的计算机程序
可以存储于一计算机可读存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：rom、ram、磁碟或者光盘等各种可以存储程序代码的介质。
93.一种电子终端，包括处理器、存储器、收发器和通信接口，其中，存储器和通信接口与处理器和收发器连接并完成相互间的通信，存储器用于存储计算机程序，通信接口用于进行通信，处理器和收发器用于执行存储器存储的计算机程序，以使终端执行本实施例中的一种支持网页和小程序可视化开发的方法中的各个步骤。
94.在本实施例中，存储器可能包含随机存取存储器(random access memory，简称ram)，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。
95.上述的处理器可以是通用处理器，包括中央处理器(central processing unit，简称cpu)、网络处理器(network processor，简称np)等；还可以是数字信号处理器(digital signal processing，简称dsp)、专用集成电路(application specificintegrated circuit，简称asic)、现场可编程门阵列(field－programmable gate array，简称fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
96.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
97.本发明可用于众多通用或专用的计算系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络pc、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。
98.本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
99.本发明的一种支持网页和小程序可视化开发的方法、系统及终端，可以实现对网页和小程序的可视化开发支持；组件树内的第一组件可以嵌套多个布局容器，实现了flex弹性布局和绝对布局等布局的嵌套使用，以及通过开放式的容器实现了对未来多种布局方式的支持；组件树的第一组件可以设置循环容器以及条件容器，通过循环容器和条件容器让编辑的页面能够根据绑定的数据按条件展示或者循环展示，实现了页面的动态展示能力，并且通过将条件容器和循环容器编译成原生指令的方式实现了功能的完备性以及性能的可靠性；通过生成网页组件代码或小程序组件代码的方式得到对应网页或小程序的文本字符串，能够在一个编辑体系下适配两个平台；第二组件不可嵌套容器组件或基础组件，降低了复杂布局的可视化编辑难度；组件树编辑器实现了界面的可视化布局，让不会写代码的人也能够开发出跨网页和小程序平台的软件和应用，同时通过区分容器组件和基础组件，降低了可视化布局的难度；本发明通过容器组件实现布局，可以通过嵌套容器组件实现嵌套布局，在不同的布局容器中可以实现不同的布局方式，进而实现非常复杂的嵌套布局；
本发明可以通过容器组件扩展布局方式、通过基础组件扩展基础功能，进而适配更多布局方式和基础功能，相比其他方案更具灵活性，也实现了通过增加容器组件和基础组件扩展可视化开发界面的布局能力和组件能力；本发明通过引入条件容器和循环容器解决了可视化界面的动态绑定和循环绑定的问题，大大增强了可视化界面开发的灵活性，通过条件容器和循环容器实现了动态可交互的界面，并且最终映射成对应平台的原生条件判断指令和循环指令，保证了功能完性和性能可靠性；本发明通过将容器组件和基础组件映射成网页组件和小程序组件的方法，实现了同一个可视化编辑方法同时适配多个平台，极大的降低了软件开发的成本，实现了一次开发可以运行在多个平台；通过循环容器和条件容器实现了界面的动态显示及循环显示，解决了可视化开发中的循环布局问题。
100.最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。