一种跨平台可视化代码生成装置和方法与流程

1.本发明涉及一种跨平台可视化代码生成装置和方法，属于计算机应用技术领域。


背景技术：

2.可视化代码生成和运行是低代码软件开发平台的核心技术之一，能够有效降低软件开发门槛，让初级开发者甚至普通使用者能够可视化的开发软件，进而提升软件开发效率，降低软件开发成本。
3.现有技术主要是通过可视化工具生成代码片段集成到系统、通过复用前端组件生成代码、通过配置选项和接口生成代码，但是大部分功能片面无法统一支撑起跨平台以及多场景的可视化代码生成和使用。
4.现有的代码生成技术一类是通过可视化方式直接生成服务端代码如java代码和xml文件，只能在服务端运行，而且受限于特定的程序语言和平台，需要开发者掌握相关后端知识才能开发系统组件或者调试问题。只能生成服务端代码也意味着需要配合其他前端才能实现软件产品的完整开发。这属于非常传统和片面的生成方式。
5.另一类是通过前端代码片段和组件生成代码，缺点是难以支持后端逻辑定制，一般只能通过固定的接口实现后端功能。而且前端组件难以实现跨平台支持，要定制复杂的功能需要维护庞大的代码库和组件库。代码块的复用非常困难，因为代码直接组合在一起很难保证互相不冲突且能够互相操作，除非定义好足够多的规范和限制，这属于比较原始的生成方式。
6.还有一类是基于配置和接口生成代码，即通过与定义一些组件和接口，暴露出一些配置选项，让使用者通过选项组合出想要的代码和功能。主要缺陷是需要维护非常复杂的配置，而且降低了灵活性，使用者只能通过有限的配置组合功能，而复杂的配置又降低了开发效率。对于平台来说维护大量配置会产生大量分支情况会给维护和测试带来很大的负面影响。
7.还有一类是通过表单加触发器或工作流来实现功能自定义，这类方法严重受限于表单和触发器的限制，只能实现对数据表的简单操作，且无法实现跨平台的功能定制，有部分平台为了弥补方法的不足支持通过插入代码实现自定义功能，但是这和可视化代码生成方法相去甚远。
8.另外，现有的可视化代码生成功能只能适配pc网页、手机网页、后端等一个或少数几个平台，缺少对于热门的小程序等特殊环境的支持。而且对于上述平台没有做到统一开发，需要使用不同的工具和组件，甚至需要不同的人员开发，无法有效降低沟通成本和开发成本，也无法保证软件在各个平台的功能一致性。
9.现有的部分可视化代码生成功能只是作为一个辅助工具存在，生成的代码需要复制粘贴到现有系统代码库中运行，或者需要作为组件导入到现有系统，无法实现在线实时编译和运行，而在线实时编译和运行对于大规模的saas系统和低代码开发平台来说是非常重要的基础功能。


技术实现要素：

10.本发明所要解决的技术问题在于：提供一种跨平台可视化代码生成装置和方法，它解决了现有技术中大部分功能片面无法统一支撑起跨平台以及多场景的可视化代码生成和使用的问题。
11.本发明所要解决的技术问题采取以下技术方案来实现：
12.本技术第一方面提供了一种跨平台可视化代码生成装置，包括可视化控制器编辑工具，可视化控制器编辑工具的前端用户界面中设有动作选项和编译按钮，前端用户界面中的各个动作选项对应于每个动作，所述动作选项包括功能性动作和系统调用动作，通过不同的功能性动作和系统调用动作组成控制器，通过编译按钮执行编译函数生成控制器分别在不同平台上可执行的代码。
13.本技术第二方面提供了一种跨平台可视化代码生成方法，包括：
14.在可视化控制器编辑工具的中前端用户界面通过添加、删除、修改动作选项，以及通过鼠标拖拽改变动作选项的位置，分别组合成后端控制器、网页控制器、小程序控制器；
15.通过点击编译按钮分别编译生成在服务端执行的后端控制器代码，在网页端执行的网页控制器代码，在小程序端执行的小程序控制器代码。
16.优选地，所述后端控制器、网页控制器和小程序控制器均包括功能性动作和系统调用动作。
17.更优选地，所述后端控制器的功能性动作包括云函数动作。
18.更优选地，所述网页控制器和小程序控制器的功能性动作均包括用于处理初始化状态、页面生命周期、用户交互事件的函数动作。
19.更优选地，所述系统调用动作包括调用系统接口、调用数据库接口、调用键值对数据库、调用字符串操作接口、调用数字操作接口、调用数组操作接口、调用时间日期操作接口、调用小程序接口、调用网页接口。
20.本发明的有益效果是：
21.本发明提供的一种跨平台可视化代码生成装置和方法，通过控制器实现逻辑的可视化编辑并解决了前后端协同问题，通过控制器动作和系统调用消除了团队代码格式和风格不一致的问题，有效降低团队管理难度，利用系统调用解决代码生成工具的平台适配问题，通过设计控制器动作和系统调用解决了可视化代码生成工具的功能和扩展性问题，通过控制器动作实现了不同平台的统一性问题。
附图说明
22.图1为跨平台可视化代码开发步骤流程图。
23.图2为可视化控制器编辑工具应用于网页平台。
24.图3为可视化控制器的系统调用分类和系统调用应用于网页平台。
25.图4为后端控制器编辑示例。
26.图5为网页控制器编辑示例。
27.图6为可视化控制器编辑工具中生成的小程序控制器代码文件夹结构和部分代码示例。
具体实施方式
28.为了对本发明的技术手段、创作特征、达成目的与功效易于明白了解，下面结合具体图示，进一步阐述本发明。
29.请参阅图1-6，本技术提供的一种跨平台可视化代码生成装置，包括可视化控制器编辑工具，可视化控制器编辑工具的前端用户界面中设有动作选项和编译按钮，前端用户界面中的各个动作选项对应于每个动作，动作选项包括功能性动作和系统调用动作，通过不同的功能性动作和系统调用动作组成控制器，通过编译按钮执行编译函数生成控制器分别在不同平台上可执行的代码。
30.本技术提供的一种跨平台可视化代码生成方法的步骤如下：
31.步骤一：在可视化控制器编辑工具的中前端用户界面通过添加、删除、修改动作选项，以及通过鼠标拖拽改变动作选项的位置，分别组合成后端控制器、网页控制器、小程序控制器。
32.步骤二：通过点击编译按钮分别编译生成在服务端执行的后端控制器代码，在网页端执行的网页控制器代码，在小程序端执行的小程序控制器代码。
33.后端控制器、网页控制器和小程序控制器均包括功能性动作和系统调用动作。
34.后端控制器的功能性动作包括云函数动作。
35.网页控制器和小程序控制器的功能性动作均包括用于处理初始化状态、页面生命周期、用户交互事件的函数动作。
36.系统调用动作包括调用系统接口、调用数据库接口、调用键值对数据库、调用字符串操作接口、调用数字操作接口、调用数组操作接口、调用时间日期操作接口、调用小程序接口、调用网页接口。
37.可视化控制器编辑工具通过前端组件实现编辑功能，用户界面参阅图2，用户在界面中可通过鼠标拖拽、点击操作等可视化操作方式实现编辑复杂逻辑而无需手动编写代码。控制器由多个动作组成，部分动作可以嵌套子动作，可视化控制器编辑工具可以让用户在界面中进行添加、删除、修改动作，以及通过鼠标拖拽移动动作的位置，通过组合多个动作实现一个控制器，点击编译生成不同平台的代码。每个动作有类型、名称、唯一key、对应类型动作的参数、备注等属性。添加动作之后开发者可以修改动作的参数和备注，以及调节动作的位置。
38.设计的具体动作列表见表1，针对每个动作编写编译函数，变异函数用于生成对应平台的代码。动作类型包括定义函数(func)、定义变量(let)、判断条件(if)、循环处理(map)等等功能，以及并发执行(concurrent)、装饰器(decorator)等高级功能。
39.表1控制器动作类型
[0040][0041][0042]
图2中展示了控制器的基本用户界面和添加动作的下拉菜单功能。在编辑时通过下拉选项选择添加的动作类型，添加之后可以设置动作的选项、删除动作、添加备注、拖拽移动动作的位置。对于其他一些特定平台的接口，通过系统调用实现。
[0043]
系统调用动作是一种特殊动作，系统调用主要有以下分类：系统接口(如打印日
志、延时执行)、数据库接口(对数据库进行增删改查操作)、键值对数据库(操作键值对数据库)、字符串操作接口、数字操作接口、数组操作接口、时间日期操作接口、小程序接口、网页接口，每个分类下有数个至上百个不同的接口，用户添加系统调用动作之后可以选择不同的系统调用接口，选择不同的系统调用接口，系统会自动显示其所需的参数的文档，用户根据文档填写对应参数，参数通过可视化表单的方式填写，支持文本、数字、选择等多种输入方式，也可以选择上下文中的声明的变量。添加系统调用动作之后，使用者可以按照系统调用分类和所属平台筛选出不同的系统调用类型进行选择，选择不同的系统调用类型之后，系统会自动显示其所需的参数和文档，使用者根据文档填写对应选项，选项通过可视化表单的方式填写，也可以选择上下文中的声明的变量。每个系统调用需要实现一个对应的编译函数，编译函数接收平台类型、使用者填写的选项，在编译时编译得到对应的代码。需要为不同平台如后端、网页、小程序设计大量系统调用以实现对应平台的详细功能，部分系统调用也可以适配多个平台。
[0044]
图3体现了网页平台的部分系统调用分类和部分系统调用名称。在网页平台中的系统调用动作只会显示已经适配网页平台的系统调用。
[0045]
后端控制器核心也是由函数动作组成，为了区分于前端控制器的函数，前端控制器包括网页控制器和小程序控制器，使用特定的动作称之为云函数(ccode_func)动作，但是和前端控制器共享同一个可视化控制器编辑工具。现代应用的服务端主要提供api接口(返回json/xml/txt等格式数据)，同时也支持视图函数(返回html/图片/视频等等内容)、事件(通过特定场景触发执行函数)、计划任务(定时执行函数)，用于满足不同场景的需求。通过后端控制器可以支持上述常见需求。通过声明云函数(ccode_func)动作可以声明一个后端云函数，此动作的参数支持选择函数类型，可以是普通云函数也可以设置为视图函数、事件或者计划任务，不同的类型还有不同的选项。
[0046]
本实施例实现了上述所有类型的云函数，普通类型云函数可以作为api接口返回json/xml/txt/csv等格式数据为前端或者第三方提供数据接口，函数参数为前端或者第三方传递的参数；事件类型云函数支持在特定场景触发执行。比如典型的第三方支付需要被第三方支付平台通知触发，触发之后系统根据路由找到对应的事件函数执行，事件函数的参数为对应事件的参数如支付数据包装，一般没有返回值但是可以通过系统调用打印日志。事件类型的云函数还是系统解耦的重要工具，可以在普通云函数中触发事件类型的云函数实现异步执行。普通云函数还可以通过选项设置延时多久执行(timeout)，用于实现延时执行的业务逻辑如指定时间后未付款自动取消订单的逻辑；计划任务可以支持设定在一天的某几个时间点定时执行，计划任务选项为时间数组(times)，计划任务没有参数，也没有返回值，但是可以通过内部系统调用打印到日志系统。
[0047]
本实施例中的云函数、事件、计划任务通过其唯一名称确定唯一性，在系统中通过url路由的方式由平台调用对应名称的云函数；在前端控制器中直接选择对应名称的云函数即可调用；在特定场景中通过事件触发特定名称的云函数；而对于计划任务则由系统调度器(beat)根据时间自动定时执行。
[0048]
为了有效可视化管理云函数，可以通过云函数分组动作(ccode_func_group)对云函数进行分组管理，云函数分组动作下面能且只能添加云函数子节点。
[0049]
在云函数内部，可以通过获取函数参数(部分类型没有参数则为空)，再通过声明
变量、条件判断、循环等动作以及数据库增删改查等系统调用实现常见的后端逻辑，最后直接返回json数据结构或者html/xml/txt等格式(部分类型不需要返回)。步骤三开发的后端控制器通过步骤六生成运行之后可以被网页控制器和小程序控制器直接调用。
[0050]
一个控制器可以包含多个不同类型的云函数、云函数分组，一个大型应用可以创建多个控制器实现不同部分的业务需求，只要云函数名称不冲突即可。一个大型的应用可能由十几个控制器、上百个云函数分组、上千个云函数、和上万个动作组成。
[0051]
图4展示了本实施例的云函数控制器编辑界面，最外层的动作为云函数分组，内部嵌套了多个云函数，云函数可以设置名称、参数和备注等信息；在每个云函数内实现了业务逻辑，部分函数有返回值。
[0052]
网页控制器用于控制网页界面展示的数据以及处理用户交互事件，网页控制器的组成是函数，一个网页控制器可以添加多个函数，不同的函数可以处理初始化状态、页面生命周期、用户交互事件，进而实现前端网页的全部功能。
[0053]
本实施例通过一个特殊名称(oncreatestate)的初始化状态函数动作(func)定义页面状态，初始化状态函数内可以通过声明状态动作(set)声明组件的初始化状态,初始化的状态用于页面的初始渲染，初始化状态函数的返回值将作为页面的初始状态。另外通过名称为onshow的函数动作(func)控制组件显示时操作、通过onhide的函数动作(func)控制组件卸载时操作、通过其它名称控制其他类型的页面生命周期事件。对于用户交互事件如用户点击页面内的某个按钮，可以添加自定义的事件函数(func)，然后在对应组件绑定控制器对应函数即可实现用户点击按钮执行自定义事件。在所有函数中(除了oncreatestate)可以通过修改状态(commit)动作修改前端界面状态，这样实现了网页界面的动态更新。
[0054]
在每个函数内部都可以获取函数的参数、添加多个动作，通过定义变量、赋值、条件判断、循环等功能实现逻辑控制，通过调用网页接口、数据库接口、后端云函数接口，实现业务逻辑。
[0055]
图5展示了本实施例中网页控制器的编辑界面示例，示例中，通过oncreatestate函数动作初始化了状态值state.count，在onshow生命周期函数调用了函数1，函数1位状态值state.count加上了1，初始化渲染中ui界面显示count为2；当用户点击按钮关联执行函数1，状态值state.count再加上了1，ui界面显示count为3。
[0056]
小程序控制器用于控制小程序组件和页面在小程序中的逻辑，通过可视化控制器开发小程序控制器流程和网页控制器相似，小程序控制器的组成是函数，一个小程序控制器可以添加多个函数，不同的函数可以处理初始化状态、页面生命周期、用户交互事件，进而实现小程序控制器的全部功能。本实施例通过控制器解决了两个平台的编辑一致性问题，最终根据不同平台生成不同的代码。
[0057]
本实施例首先通过一个特殊名称(oncreatestate)的初始化状态函数动作(func)定义小程序页面状态，通过onshow/onhide等生命周期函数名称控制页面生命周期，通过自定义事件绑定到页面内的组件实现对用户交互事件的逻辑控制。小程序事件的参数与网页控制器不一致，在对应事件可以通过event变量获取到函数的参数。
[0058]
小程序的状态更新动作和网页一致，都是使用修改状态(commit)接口，但是在最终编译生成的代码会调用小程序平台的setdata接口修改界面。
[0059]
生成和运行后端控制器，需在使用可视化控制器编辑工具开发的控制器，最终需要生成服务端代码才能执行。本实施例实现后端控制器的编译器，支持将控制器编译成服务端javascript(node.js)的代码字符串，代码生成和编译步骤为：在编译前设定一个全局变量actions，循环所有动作，根据不同动作类型生成不同的代码；如果遇到嵌套动作如函数声明，则将子动作重复循环编译后嵌入子动作；如遇到不同类型的系统调用动作，则根据系统调用动作生成对应的代码；如果遇到函数声明则将函数声明复制为actions的属性，比如函数名称为ccode_func1则设置actions.ccode_func1为函数体；生成的代码最后加上一句export default actions导出全局变量actions。最终得到一个esm规范的的node.js代码字符串，将其保存到数据库text类型的字段中。
[0060]
当网页控制器、小程序控制器或者第三方直接请求云函数时，系统根据路由找到对应的控制器对应名称的函数，从数据库中取出对应控制器代码，通过node.js的vm2模块在沙箱中安全的执行代码得到控制器返回值(actions)，根据函数名称如ccode_func1获取到函数对象actions.ccode_func1,执行函数得到结果之后返回给函数调用者。通过热点缓存技术(lru cache)保证重复调用同一个函数时无需重复执行取出代码的操作以优化系统的性能，而且同一个控制器的全部云函数共享同一个控制器，无需重复取出代码。函数执行没有副作用，同一个函数调用多次不会互相冲突。node.js服务器可以部署在集群中支持大规模并发访问。
[0061]
本实施例实现了编译生成可视化控制器动作到node.js(esm)代码，并实现了在服务端到动态执行，但实际上因为可视化控制器和动作的抽象性，只需要为不同动作实现不同语言的编译函数，即可实现编译到其他语言。
[0062]
网页控制器的编译生成步骤为：使用者点击控制器的编译按钮后，执行编译函数，编译函数循环所有的动作(一级动作为函数func)，根据不同动作类型生成不同的代码，如果遇到嵌套动作如函数声明，则将子动作重复循环编译后嵌入子动作；如遇到不同类型的系统调用动作，则根据系统调用动作生成对应的代码；对于修改状态动作(set)会映射成前端框架的状态修改操作，如vue的$set方法或者react的setstate方法。最终生成得到的目标为javascript(es2015)代码文件。部分动作会根据编译目标的不同产生不同的代码。部分系统调用也会因为平台不同而生成不同的代码。
[0063]
当用户访问网页时，会根据页面内的所有组件提取出全部控制器代码，将控制器代码合并成一个javascript文件，自动上传到cdn并缓存，保证只在第一次访问时需要合并操作以优化性能，网页通过script标签加载javascript代码。
[0064]
当网页加载时所有组件会执行javascript代码，循环所有控制器，对于每个控制器，首先执行初始化状态(oncreatestate)函数，根据其返回值初始化渲染状态，然后执行onshow函数执行加载时的动作，在onshow函数中可以调用后端云函数获取数据，或者直接修改页面状态，修改状态之后系统根据状态变更自动更新界面。页面可交互后，用户操作网页中的对应组件会触发对应的事件动作，比如用户点击某个按钮，根据按钮组件绑定的事件名称查找到对应的函数名称，使用对应事件参数调用查找到的函数，在函数内的动作可能弹出提示也可能继续修改状态。至此可视化控制器完全实现了在网页运行和控制页面渲染及交互。
[0065]
本实施例中使用了mvvm类型的前端框架vue实现页面状态和界面的动态绑定，实
际上使用类似的框架如react也能实现一样的效果。因为可视化控制器是独立于框架的，可视化控制器使用修改状态动作(commit)来实现更新界面，此动作可以编译为vue的$set方法或者react的setstate方法。
[0066]
小程序控制器的编译生成步骤为：在控制器编辑界面点击编译按钮，执行编译函数，编译函数首先声明actions空对象，编译函数循环所有的动作(一级动作为函数func)，根据不同动作类型生成不同的代码，如果遇到嵌套动作如函数声明，则将子动作重复循环编译后嵌入子动作；如果遇到函数声明则将函数作为属性复制给actions对象；如遇到不同类型的系统调用动作，则根据系统调用动作生成对应的代码；部分动作内的编译函数根据小程序平台生成小程序特定的代码。与其他两个平台的区别在于生成目标有两个，一个是javascript(es5)格式，另一种是小程序的wxs格式。编译后得到了控制器的小程序代码字符串，保存到数据库text类型字段。
[0067]
当生成小程序时，首先会遍历全部小程序页面，然后遍历每个页面的全部控制器代码，将一个页面内的全部控制器合并成一个index.js文件输出到小程序对应的页面(wxs格式需要输出到wxml文件中)。图6展示了最终生成的小程序的文件结构和部分控制器代码示例，图中清晰的显示了控制器编译代码是在每一个页面文件夹下的index.js文件中，在每个文件中有多个控制器代码；每个控制器以actions＝{}作为初始变量，然后逐步赋值函数，如oncreatestete和onshow，构成小程序的运行对象。在每个index.js还有部分公共的框架代码用于代理小程序功能和调度控制器代码的执行。
[0068]
小程序启动之后会首先执行onshow函数，参数为当前页面查询参数，按顺序运行内部的动作，如果有部分动作修改了界面状态(commit)，会映射到小程序的setdata调用实现界面的更新。用户点击小程序中对应的组件会触发执行对应事件函数，参数为点击事件对象，依次执行函数内的动作，如果动作修改了界面状态(commit)会更新ui界面。至此，通过可视化控制器生成的代码实现了在小程序的运行和交互。
[0069]
本发明通过可视化拖拽编辑控制器实现逻辑的可视化编辑。可视化拖拽相对于人工编写代码优势明显，通过可视化拖拽可以直观的调整函数和动作的位置；通过点击添加、复制粘贴、克隆等操作可以快速复制大量动作而无需担心格式问题或者逻辑错乱。
[0070]
本发明通过标准的动作和系统调用消除了团队代码格式和风格不一致的问题，有效降低团队管理难度。同时只需要核心团队维护好控制器编辑工具、动作、系统调用，就能有效提高系统质量，其他开发者只要使用标准的动作和系统调用就能开发出高质量的软件。
[0071]
本发明通过系统调用功能解决了代码生成工具的平台适配问题，现在很多可视化代码生成工具只适用于特定场景，本发明通过统一的控制器动作配合不同平台下的动作编译函数和系统调用编译函数编译成不同平台的代码，巧妙的解决了多个平台的适配问题。
[0072]
本发明通过动作设计和系统调用设计解决了可视化代码生成工具的功能和扩展性问题，通过新增动作或者新增系统调用即可扩展可视化代码生成工具的功能，通过新增系统调用或者新增平台即可扩展可视化代码生成工具的跨平台能力。
[0073]
本发明通过控制器动作实现了不同平台的统一性问题，通过抽取出公共的逻辑动作如函数、声明和赋值、条件判断、循环语句，以及各个平台特有的系统调用(如后端接口、小程序接口、网页接口)，开发者可以使用一致的可视化动作开发跨平台的功能，并且能够
通过系统调用实现各个平台特殊的功能，进而极大地降低了软件开发的人力成本。
[0074]
本发明通过统一的控制器编辑工具传统的软件开发需要前端人员和后端人员充分沟通需求和对接接口，而本发明通过统一的后端控制器、网页控制器、小程序控制器，同一个人即可自行实现开发后端控制器后直接在网页控制器或者小程序控制器调用，极大地降低了沟通的成本，提高了软件生产效率。
[0075]
本发明通过跨平台的编译解决了小程序端的逻辑编写问题，小程序相对于网页存在差异性，本发明通过同一个动作或系统调用在网页和小程序编译成不同代码的方式实现了了同一个动作无缝适配两个平台，极大的降低了开发成本和维护成本。比如系统调用弹出提示中，在网页平台会编译成浏览器的alert()函数调用，而在小程序中会编译成对应平台的showmodal()函数调用；网页中的修改状态(commit)会映射成小程序的setdata接口。
[0076]
本发明通过后端生成代码在沙箱中实时运行，有效地解决了代码实时编译实时集成运行的问题，相比有些可视化代码生成工具生成的代码仍然需要手动集成到系统成优势明显。对于saas平台和低代码开发平台而言，代码实时编辑运行提高了需求响应能力和加快了问题处理速度。
[0077]
以上显示和描述了本发明的基本原理、主要特征和优点。本领域的技术人员应当了解，本发明不受上述实施例的限制，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入本发明要求保护的范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。