CN115686529A - 代码生成方法和装置、电子设备和可读存储介质 - Google Patents

Abstract

本申请公开了一种代码生成方法和装置、电子设备和可读存储介质，属于计算机软件技术领域。其中，代码生成方法，包括在具有第一代码的情况下，获取第一代码的第一抽象语法树。基于第一代码的层级结构，将第一代码解析为第一数据模型。基于第一数据模型，通过可视化渲染层在可视化界面中渲染出第一组件。基于在可视化界面对第一组件进行第一操作，可视化渲染层根据第一操作，获取第一数据。基于第一数据，对第一数据模型进行更新。基于更新后的第一数据模型，得到更新后的第一抽象语法树。基于更新后的第一抽象语法树，生成第二代码。

Description

代码生成方法和装置、电子设备和可读存储介质

技术领域

本申请属于计算机软件技术领域，具体涉及一种代码生成方法和装置、电子设备和可读存储介质。

背景技术

相关技术的可视化开发中，通常会预置一些业务组件，业务组件的特有属性可以进行修改，但是并不能生成相关的代码，为开发者调试带来困难，并且，因为上述可视化开发模式只能针对特定场景下的开发，并不能针对所有应用程序的开发，造成适用范围小的问题。

发明内容

本申请实施例的目的是提供一种代码生成方法和装置、电子设备和可读存储介质，能够解决可视化开发中业务组件的属性可以进行修改，但是并不能生成修改后业务组件相关的代码，造成调试困难，并且，可视化开发只能针对特定场景，造成适用范围小的问题。

第一方面，本申请实施例提供了一种代码生成方法，包括在具有第一代码的情况下，获取第一代码的第一抽象语法树。基于第一代码的层级结构，将第一代码解析为第一数据模型。基于第一数据模型，通过可视化渲染层在可视化界面中渲染出第一组件。基于在可视化界面对第一组件进行第一操作，可视化渲染层根据第一操作，获取第一数据。基于第一数据，对第一数据模型进行更新。基于更新后的第一数据模型，得到更新后的第一抽象语法树。基于更新后的第一抽象语法树，生成第二代码。

第二方面，本申请实施例提供了一种代码生成装置，包括第一模块、第二模块、第三模块、第四模块、第五模块、第六模块和第七模块。第一模块用于在具有第一代码的情况下，获取第一代码的第一抽象语法树。第二模块用于基于第一代码的层级结构，将第一代码解析为第一数据模型。第三模块用于基于第一数据模型，通过可视化渲染层在可视化界面中渲染出第一组件。第四模块用于基于在可视化界面对第一组件进行第一操作，可视化渲染层根据第一操作，获取第一数据。第五模块用于基于第一数据，对第一数据模型进行更新。第六模块用于基于更新后的第一数据模型，得到更新后的第一抽象语法树。第七模块用于基于更新后的第一抽象语法树，生成第二代码。

第三方面，本申请实施例提供了一种电子设备，该电子设备包括处理器和存储器，存储器存储可在处理器上运行的程序或指令，程序或指令被处理器执行时实现如第一方面的代码生成方法的步骤。

第四方面，本申请实施例提供了一种可读存储介质，可读存储介质上存储程序或指令，程序或指令被处理器执行时实现如第一方面的代码生成方法的步骤。

本申请基于对第一组件的第一操作，可以生成第一操作后对应的第二代码，可以解决相关技术中通过操作组件无法生成代码的问题。通过将修改代码与可视化进行关联，通过对第一组件的第一操作完成页面设计，自动生成第二代码，可以避免进行代码编写，使得用户在应用开发中快速上手使用，进而提升用户体验。本实施例可以根据第一代码进行实时的可视化显示，也可以在对组件进行第一操作后，实时更新代码，通过上述方式，能够使用户的编码效果实时显示出来，进而节省大量调试时间，显著提升移动应用的开发效率。

附图说明

图1示出了本申请实施例提供的代码生成方法的流程示意图之一；

图2示出了本申请实施例提供的代码生成方法的流程示意图之二；

图3示出了本申请实施例提供的代码生成方法的流程示意图之三；

图4示出了本申请实施例提供的代码生成方法的流程示意图之四；

图5示出了本申请实施例提供的代码生成方法的流程示意图之五；

图6示出了本申请实施例提供的代码生成方法的流程示意图之六；

图7示出了本申请实施例提供的代码生成装置的结构框图；

图8示出了本申请实施例提供的电子设备的结构框图；

图9示出了本申请实施例的一种电子设备的硬件结构示意图；

图10示出了本申请实施例的可视化构建器的结构框图；

图11示出了本申请实施例的拖拽组件界面示意图；

图12示出了本申请实施例的更新组件样式界面示意图；

图13示出了本申请实施例的编辑属性界面示意图；

图14示出了本申请实施例的属性绑定变量界面示意图；

图15示出了本申请实施例的新增函数界面示意图；

图16示出了本申请实施例的组件绑定事件界面示意图；

图17示出了本申请实施例的组件大纲界面示意图；

图18示出了本申请实施例的代码示意图；

图19示出了本申请实施例的预览界面示意图。

其中，图7至图10中附图标记与部件名称之间的对应关系为：

100：代码生成装置；110：第一模块；120：第二模块；130：第三模块；140：第四模块；150：第五模块；160：第六模块；170：第七模块；200：可视化构建器；202：抽象语法树；204：可视化渲染层；206：可视化界面；208：模版功能板块；210：脚本功能板块；212：样式功能板块；214：创建节点；216：***节点；218：删除节点；220：更新或移除属性；222：调整组件层级结构；224：获取数据变量；226：新增或删除数据变量；228：获取函数列表；230：新增函数；232：更新函数体；234：获取组件样式；236：更新或移除组件样式；238：拖拽组件；240：删除组件；242：更新组件样式；244：编辑属性；246：属性绑定变量；248：增加函数；250：组件绑定事件；252：组件大纲；254：更改组件层级结构；256：删除组件；258：克隆组件；260：代码；300：开发工具；1000：电子设备；1002：处理器；1004：存储器；1100：电子设备；1101：射频单元；1102：网络模块；1103：音频输出单元；1104：输入单元；11041：图形处理器；11042：麦克风；1105：传感器；1106：显示单元；11061：显示面板；1107：用户输入单元；11071：触控面板；11072：其他输入设备；1108：接口单元；1109：存储器；1110：处理器。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员获得的所有其他实施例，都属于本申请保护的范围。

本申请的说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施，且“第一”、“第二”等所区分的对象通常为一类，并不限定对象的个数，例如第一对象可以是一个，也可以是多个。此外，说明书以及权利要求中“和/或”表示所连接对象的至少其中之一，字符“/”，一般表示前后关联对象是一种“或”的关系。

下面结合附图1至图19，通过具体的实施例及其应用场景对本申请实施例提供的代码生成方法和装置、电子设备和可读存储介质进行详细地说明。

在本申请实施例提供了一种代码生成方法，图1示出了本申请实施例提供的代码生成方法的流程示意图之一，如图1所示，代码生成方法包括：

步骤S102，在具有第一代码的情况下，获取第一代码的第一抽象语法树。

步骤S104，基于第一代码的层级结构，将第一代码解析为第一数据模型。

步骤S106，基于第一数据模型，通过可视化渲染层在可视化界面中渲染出第一组件。

步骤S108，基于在可视化界面对第一组件进行第一操作，可视化渲染层根据第一操作，获取第一数据。

步骤S110，基于第一数据，对第一数据模型进行更新。

步骤S112，基于更新后的第一数据模型，得到更新后的第一抽象语法树。

步骤S114，基于更新后的第一抽象语法树，生成第二代码。

可以理解的是，第一代码是指前端开发者搭建静态页面生成的前端代码。抽象语法树(Abstract Syntax Tree，AST，或简称语法树Syntax tree)，是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

本实施例的代码生成方法，实施的主体可以是可视化建构器、可视化解析器、可视化编辑器或代码生成装置。

本实施例中前端代码进入可视化构建器后先经过一层抽象语法树，之后封装到可视化的渲染层，再渲染到可视化界面上。上述过程可以是一个逆向的过程，在可视化界面上的操作都要调用可视化渲染层的接口，经过可视化渲染层的处理，再更新抽象语法树后生成对应的代码。

具体地，针对第一代码，获取第一代码的第一抽象语法树，通过第一抽象语法树，分析得到第一代码的层级结构，进而对第一代码进行解析，得到第一数据模型。可视化渲染层通过遍历第一数据模型，在可视化界面渲染出第一组件。上述过程可以实现对于第一代码的可视化。基于可视化的结果，当用户对第一组件进行第一操作，第一组件发生变化，进而可视化渲染层根据第一组件发生的变化，可以得到第一数据，第一数据即为对第一组件进行第一操作后，第一数据模型对应的数据，采用第一数据对第一模型更新，再根据第一模型更新第一抽象语法树，最终，得到第二代码。上述过程可以实现在对第一组件进行第一操作后，对第一代码进行同步的更改，得到第一操作后组件对应的第二代码，即在可视化界面对组件的所有操作，均会生成前端通用的代码。

本实施例中，基于对第一组件的第一操作，可以生成第一操作后对应的第二代码，可以解决相关技术中通过操作组件无法生成代码的问题。通过将修改代码与可视化进行关联，通过对第一组件的第一操作完成页面设计，自动生成第二代码，可以避免进行代码编写，使得用户在应用开发中快速上手使用，进而提升用户体验。本实施例可以根据第一代码进行实时的可视化显示，也可以在对组件进行第一操作后，实时更新代码，通过上述方式，能够使用户的编码效果实时显示出来，进而节省大量调试时间，显著提升移动应用的开发效率。

进一步地，对第一代码的解析过程，实施的主体可以是代码解析器。

进一步地，可视化界面设有多种组件，组件包括***组件、UI(界面)组件和高级组件，第一组件即为***组件、UI组件和高级组件中的一种或者多种的组合。本实施例中通过预置基础组件、UI组件和高级组件，可以将代码生成方法应用于任何应用程序的开发，增加代码生成方法的应用范围。

进一步地，本实施可以应用于多个操作***，即支持多***，举例而言，可以同时支持Windows、MacOS、Linux操作***。

在本申请的一些实施例中，第一数据模型采用JSON(JavaScript ObjectNotation,JS对象简谱)数据结构，包括节点ID(Identity document，身份证标识号)、节点类型、节点属性、节点样式、子节点和父节点。

具体地，第一数据模型为可遍历的数据模型，具体格式如下：

进一步地，可以采用代码解析脚本构建第一数据模型。代码解析脚本可以根据代码的层级结构，将代码解析为可遍历的JSON数据结构，包括节点ID即组件ID、节点类型、节点属性、节点样式即组件样式、子节点和父节点。其中，组件名称即节点类型，节点属性即组件属性，组件事件为节点属性的一种，可通过attributes中astType的值进行判断，如果astType的值为function，则这个属性就是事件类型。可视化渲染层遍历JSON数据结构，将对应的组件渲染为可视化内置的***组件、UI组件或高级组件，最终可以显示第一组件。

本实施例中，将第一数据模型设置为JSON数据结构，可以更好的实现对组件的可视化。

在本申请的一些实施例中，图2示出了本申请实施例提供的代码生成方法的流程示意图之二，如图2所示，基于第一数据模型，通过可视化渲染层在可视化界面中渲染出第一组件，具体包括：

步骤S202，基于第一数据模型的节点类型，在可视化界面中渲染出节点类型对应的第一组件。

步骤S204，基于子节点和父节点的字段，确定第一组件的层级关系。

步骤S206，在可视化界面层选中第一组件后，根据节点ID，显示节点属性和节点样式。

可以理解的是，可视化界面层根据第一数据模型中的节点类型type，渲染成内置的基础组件、UI组件或高级组件，再根据第一数据模型中的子节点children和父节点parent字段来确定组件的层级关系。在可视化界面层点击不同的组件，根据组件的节点ID，来显示组件的属性attributes和样式styles。

本实施例给出了第一模型中数据与可视化几面层之间的对应关系，根据对应关系，渲染出第一组件，进而实现对代码的可视化。

在本申请的一些实施例中，图3示出了本申请实施例提供的代码生成方法的流程示意图之三，如图3所示，代码生成方法，还包括：

步骤S302，设置模版功能板块，通过模版功能板块开放第一数据模型的第一数据接口，第一数据接口包括创建节点、***节点、删除节点、更新或移除节点属性和调整组件层级结构。

步骤S304，设置脚本功能板块，通过脚本功能板块开放第一数据模型的第二数据接口，第二数据接口包括新增或删除数据变量、获取函数列表、新增函数和更新函数体。

步骤S306，设置样式功能板块，通过样式功能板块开放第一数据模型的第三数据接口，第三数据接口包括获取组件样式、更新或移除组件样式。

具体地，本实施例中将前端代码解析成抽象语法树，再根据抽象语法树分解成三个功能块：模版功能板块、脚本功能板块和样式功能板块。

进一步地，模版功能板块开放有创建节点、***节点、删除节点、更新或移除属性、调整组件层级结构等数据结构接口。在可视化界面上操作拖拽组件、删除组件、编辑组件属性等都是调用上述数据结构接口来更新第一数据模型，进而渲染到可视化界面上。举例而言，对于拖拽组件的操作，其原理为在父组件的children集合中***子节点的数据模型。删除节点的操作为从父节点的children集合中删除节点的数据模型，更新组件属性为更新组件数据模型中attributes中指定的属性节点。

进一步地，脚本功能板块封装了新增或删除数据变量、获取函数列表、新增函数、更新函数体等功能的数据接口。

进一步地，样式功能板块封装了获取组件样式、更新或移除组件样式等功能的数据接口。

本实施例中，可视化界面上的操作均是通过调用可视化解析架构开放的接口即通过调用模版功能板块、脚本功能板块和样式功能板块提供的数据接口，来更新第一数据模型，进而实现更新数据模型，生成第二代码。

在本申请的一些实施例中，第一操作包括以下之一或其组合：

拖拽组件、删除组件、更新组件样式、编辑属性、属性绑定变量、新增函数、组件绑定事件、在组件大纲中更改组件的层级结构、在组件大纲中删除组件、在组件大纲中克隆组件。

具体地，在可视化界面上显示有第一组件，对第一组件可以进行第一操作。

进一步地，拖拽组件是调用模版功能板块开放的创建节点接口，生成新建节点的数据模型，然后再调用***节点接口，将新建节点的数据模型***到父节点的children的集合中，如图11所示，通过拖拽***组件内的button至画布中，构建出button组件。

进一步地，删除组件是调用模版功能板块中开放的删除节点接口，将被删除组件从父组件的children的集合中删除。

进一步地，可视化界面中的组件支持渲染标准的W3C样式属性，更新组件样式是更新相关属性后，调用样式功能版本开放的接口，对组件的数据模型进行更新。修改样式如图12所示，通过样式中的预定义样式，可以选取需要的样式。

进一步地，可视化界面中的组件都有特定的属性，编辑属性是编辑组件属性后，调用模版功能板块的更新属性接口，对组件的数据模型的attributes进行更新，重新渲染到可视化界面上。修改属性如图13所示，通过属性中的通用属性进行相关属性的更改。

进一步地，组件的属性除了可以直接编辑属性值外，还可以给属性绑定变量，属性绑定变量需要调用脚本功能板块中获取数据变量的接口取到数据变量的集合，然后再调用模版功能板块的更新属性的接口，给组件绑定变量。绑定data变量如图14所示，通过数据绑定，可以搜索变量，进而绑定变量，也可以增加JS表达式，也可以解除绑定。

进一步地，新增函数是通过调用脚本功能板块中开放的新增函数接口，在页面的函数集合中新增函数。编辑函数如图15所示，可以编辑函数的名称、添加动作、代码等，通过编辑函数进行函数的新增以及变更。

进一步地，组件设有特定的事件，事件也是属性的一种，组件绑定事件为组件的事件选择函数后，调用模版功能板块的更新属性的接口，给组件事件绑定函数。绑定事件如图16所示，通过事件中的通用事件可以添加组建的事件。

进一步地，可视化界面还可以显示组件大纲，根据整个页面的数据模型，显示组件的层级结构，组件大纲可以实现的功能有为更改组件的层级结构、删除组件或克隆组件。大纲树如图17所示，可以对组件(button)实现复制、粘贴、剪切、克隆、清空子级、删除、移动等操作。

上述所有的修改都会对应到相应板块的数据模型中，数据模型生成对应的抽象语法树，再根据抽象语法树，生成对应代码，代码如图18所示。生成的代码可以直接预览，如图19所示，左侧窗口是可视化界面，右侧是预览界面。

本实施例中，通过在可视化代码解析框架开放一套相关的组件数据结构接口，实现创建组件、***组件、删除组件、更新或删除组件样式、编辑或删除组件属性，绑定或解绑组件事件等，可视化界面画布中的操作，包括拖拽生成代码、编辑组件样式、编辑组件事件也是通过调用上述接口，继而生成对应的代码。

在本申请的一些实施例中，图4示出了本申请实施例提供的代码生成方法的流程示意图之四，图5示出了本申请实施例提供的代码生成方法的流程示意图之五，如图4和图5所示，代码生成方法，还包括：

步骤S402，将第二代码在开发工具中的预览工具进行预览。

步骤S404，将第二代码通过开发工具的WIFI调试或USB调试，在移动设备上预览。

可以理解的是，代码生成方法实施的主体可以是可视化建构器、可视化解析器、可视化编辑器或代码生成装置。上述实现代码生成方法的可视化建构器、可视化解析器、可视化编辑器或代码生成装置可以内置到开发工具中。

具体地，可视化是一个前端框架，通过开发工具的Webview组件(浏览器内核视图)，加载可视化界面，通过前端WebSocket框架做桥接(客户端和服务器端数据传输协议)，向webview发送事件，事件的格式：

{cmd:“事件ID”,data:{//携带的数据}}。

{cmd:1,data:{}}切换到代码界面。

{cmd:2,data:{content:“代码”}}生成的代码写入文件。即通过WebSocket通信机制来和WebView进行通讯，进而将代码写入本地文件。

本实施例中，可视化框架内置到开发工具中，已有的代码，通过可视化解析器，渲染到可视化界面的画布上。生成的代码既可以通过开发工具的实时预览工具预览，也可通过开发工具的WI-FI调试和USB调试，在真机上预览。

本实施例通过内置到开发工具中，在可视化编辑器中所有的操作都会生成对应的代码，切换到开发工具的代码界面即可查看生成的代码，并且生成的代码可以直接在开发工具的预览界面预览或者直接在手机上预览，很大程度的提高了可视化开发的体验性，从代码界面修改代码再切换到可视化界面也会产生相应的效果。

在本申请的一些实施例中，图6示出了本申请实施例提供的代码生成方法的流程示意图之六，如图6所示，代码生成方法，还包括：

步骤S502，在不具有第一代码的情况下，基于在可视化界面进行第二操作，在可视化界面显示第二组件。

步骤S504，可视化渲染层根据第二操作，获取第二数据。

步骤S506，基于第二数据，生成第二数据模型。

步骤S508，基于第二数据模型，得到第二抽象语法树。

步骤S510，基于第二抽象语法树，生成第三代码。

具体地，在没有第一代码的情况下，可以在可视化界面直接进行第二操作，第二操作与第一操作的种类相同，在进行第二操作后，显示第二组件，进而根据组件生成第三代码。

举例而言，第二操作可以是拖拽组件、删除组件、更新组件样式、编辑属性、属性绑定变量、新增函数、组件绑定事件、在组件大纲中更改组件的层级结构、在组件大纲中删除组件、在组件大纲中克隆组件等等。第二组件为***组件、UI组件和高级组件中的一种或者多种的组合。

本申请实施例提供的代码生成方法，执行主体可以为代码生成装置。本申请实施例中以代码生成装置执行代码生成方法为例，说明本申请实施例提供的代码生成装置。

在本申请的一些实施例中提供了一种代码生成装置，图7示出了本申请实施例提供的代码生成装置的结构框图，如图7所示，代码生成装置100，包括第一模块110、第二模块120、第三模块130、第四模块140、第五模块150、第六模块160和第七模块170。第一模块110用于在具有第一代码的情况下，获取第一代码的第一抽象语法树。第二模块120用于基于第一代码的层级结构，将第一代码解析为第一数据模型。第三模块130用于基于第一数据模型，通过可视化渲染层在可视化界面中渲染出第一组件。第四模块140用于基于在可视化界面对第一组件进行第一操作，可视化渲染层根据第一操作，获取第一数据。第五模块150用于基于第一数据，对第一数据模型进行更新。第六模块160用于基于更新后的第一数据模型，得到更新后的第一抽象语法树。第七模块170用于基于更新后的第一抽象语法树，生成第二代码。

本实施例中，基于对第一组件的第一操作，可以生成第一操作后对应的第二代码，可以解决相关技术中通过操作组件无法生成代码的问题。通过将修改代码与可视化进行关联，通过对第一组件的第一操作完成页面设计，自动生成第二代码，可以避免进行代码编写，使得用户在应用开发中快速上手使用，进而提升用户体验。本实施例可以根据第一代码进行实时的可视化显示，也可以在对组件进行第一操作后，实时更新代码，通过上述方式，能够使用户的编码效果实时显示出来，进而节省大量调试时间，显著提升移动应用的开发效率。

本申请实施例提供的代码生成装置100可以实现上述代码生成方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

本申请实施例中的代码生成装置可以是电子设备，也可以是电子设备中的部件，例如集成电路或芯片。该电子设备可以是终端，也可以为除终端之外的其他设备。示例性的，电子设备可以为手机、平板电脑、笔记本电脑、掌上电脑、车载电子设备、移动上网装置(Mobile Internet Device，MID)、增强现实(augmented reality，AR)/虚拟现实(virtualreality，VR)设备、机器人、可穿戴设备、超级移动个人计算机(ultra-mobile personalcomputer，UMPC)、上网本或者个人数字助理(personal digital assistant，PDA)等，还可以为服务器、网络附属存储器(Network Attached Storage，NAS)、个人计算机(personalcomputer，PC)、电视机(television，TV)、柜员机或者自助机等，本申请实施例不作具体限定。

本申请实施例中的代码生成装置可以为具有操作***的装置。该操作***可以为安卓(Android)操作***，可以为iOS操作***，还可以为其他可能的操作***，本申请实施例不作具体限定。

本申请实施例提供的代码生成装置能够实现上述方法实施例实现的各个过程，为避免重复，这里不再赘述。

可选地，如图8所示，本申请实施例还提供一种电子设备1000，电子设备1000包括处理器1002和存储器1004，存储器1004上存储有可在处理器1002上运行的程序或指令，该程序或指令被处理器1002执行时实现上述方法实施例的各个步骤，且能达到相同的技术效果，为避免重复，这里不再赘述。

需要说明的是，本申请实施例中的电子设备包括上述的移动电子设备和非移动电子设备。

图9为实现本申请实施例的一种电子设备的硬件结构示意图。

该电子设备1100包括但不限于：射频单元1101、网络模块1102、音频输出单元1103、输入单元1104、传感器1105、显示单元1106、用户输入单元1107、接口单元1108、存储器1109以及处理器1110等部件。

本领域技术人员可以理解，电子设备1100还可以包括给各个部件供电的电源(比如电池)，电源可以通过电源管理***与处理器1110逻辑相连，从而通过电源管理***实现管理充电、放电功耗管理等功能。图9中示出的电子设备结构并不构成对电子设备的限定，电子设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置，在此不再赘述。

其中，处理器1110，用于在具有第一代码的情况下，获取第一代码的第一抽象语法树。

处理器1110，用于基于第一代码的层级结构，将第一代码解析为第一数据模型。

处理器1110，用于基于第一数据模型，通过可视化渲染层在可视化界面中渲染出第一组件。

处理器1110，用于基于在可视化界面对第一组件进行第一操作，可视化渲染层根据第一操作，获取第一数据。

处理器1110，用于基于第一数据，对第一数据模型进行更新。

处理器1110，用于基于更新后的第一数据模型，得到更新后的第一抽象语法树。

处理器1110，用于基于更新后的第一抽象语法树，生成第二代码。

本实施例中，基于对第一组件的第一操作，可以生成第一操作后对应的第二代码，可以解决相关技术中通过操作组件无法生成代码的问题。通过将修改代码与可视化进行关联，通过对第一组件的第一操作完成页面设计，自动生成第二代码，可以避免进行代码编写，使得用户在应用开发中快速上手使用，进而提升用户体验。本实施例可以根据第一代码进行实时的可视化显示，也可以在对组件进行第一操作后，实时更新代码，通过上述方式，能够使用户的编码效果实时显示出来，进而节省大量调试时间，显著提升移动应用的开发效率。

本申请实施例提供的处理器1110可以实现上述代码生成方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

应理解的是，本申请实施例中，输入单元1104可以包括图形处理器(GraphicsProcessing Unit，GPU)11041和麦克风11042，图形处理器11041对在视频捕获模式或图像捕获模式中由图像捕获装置(如摄像头)获得的静态图片或视频的图像数据进行处理。显示单元1106可包括显示面板11061，可以采用液晶显示器、有机发光二极管等形式来配置显示面板11061。用户输入单元1107包括触控面板11071以及其他输入设备11072中的至少一种。触控面板11071，也称为触摸屏。触控面板11071可包括触摸检测装置和触摸控制器两个部分。其他输入设备11072可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆，在此不再赘述。

存储器1109可用于存储软件程序以及各种数据。存储器1109可主要包括存储程序或指令的第一存储区和存储数据的第二存储区，其中，第一存储区可存储操作***、至少一个功能所需的应用程序或指令(比如声音播放功能、图像播放功能等)等。此外，存储器1109可以包括易失性存储器或非易失性存储器，或者，存储器1109可以包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(Read-Only Memory，ROM)、可编程只读存储器(Programmable ROM，PROM)、可擦除可编程只读存储器(Erasable PROM，EPROM)、电可擦除可编程只读存储器(Electrically EPROM，EEPROM)或闪存。易失性存储器可以是随机存取存储器(Random Access Memory，RAM)，静态随机存取存储器(Static RAM，SRAM)、动态随机存取存储器(Dynamic RAM，DRAM)、同步动态随机存取存储器(Synchronous DRAM，SDRAM)、双倍数据速率同步动态随机存取存储器(Double Data Rate SDRAM，DDRSDRAM)、增强型同步动态随机存取存储器(Enhanced SDRAM，ESDRAM)、同步连接动态随机存取存储器(Synch link DRAM，SLDRAM)和直接内存总线随机存取存储器(Direct Rambus RAM，DRRAM)。本申请实施例中的存储器1109包括但不限于这些和任意其它适合类型的存储器。

处理器1110可包括一个或多个处理单元；可选的，处理器1110集成应用处理器和调制解调处理器，其中，应用处理器主要处理涉及操作***、用户界面和应用程序等的操作，调制解调处理器主要处理无线通信信号，如基带处理器。可以理解的是，上述调制解调处理器也可以不集成到处理器1110中。

本申请实施例还提供一种可读存储介质，可读存储介质上存储有程序或指令，该程序或指令被处理器执行时实现上述代码生成方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

其中，处理器为上述实施例中的电子设备中的处理器。可读存储介质，包括计算机可读存储介质，如计算机只读存储器ROM、随机存取存储器RAM、磁碟或者光盘等。

本申请实施例另提供了一种芯片，芯片包括处理器和通信接口，通信接口和处理器耦合，处理器用于运行程序或指令，实现上述代码生成方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

应理解，本申请实施例提到的芯片还可以称为***级芯片、***芯片、芯片***或片上***芯片等。

本申请实施例提供一种计算机程序产品，该程序产品被存储在存储介质中，该程序产品被至少一个处理器执行以实现如上述代码生成方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

具体实施例：

本实施例提供了一种代码生成装置，也就是可视化构建器200，如图10所示，包括抽象语法树202、可视化渲染层204和可视化界面206。

前端代码260即第一代码封装至可视化构建器200，首先经过一层抽象语法树202处理成三个功能板块，包括模版功能板块208、脚本功能板块210和样式功能板块212，得到数据模型，然后将数据模型封装到可视化渲染层204，再渲染到可视化界面206上，上述也可以是一个逆向的过程，在可视化界面206上的操作都要调用可视化渲染层204的接口，经过可视化渲染层204的处理，再更新抽象语法树202后生成对应的代码。

模版功能板块208开放的数据结构接口包括创建节点214、***节点216、删除节点218、更新或移除属性220、调整组件层级结构222等数据结构接口，在可视化界面上操作都是调用这些数据结构接口，来更新数据模型，渲染到可视化界面206上。

脚本功能板块210开放的数据接口包括获取数据变量224、新增或删除数据变量226、获取函数列表228、新增函数230(新增函数接口)、更新函数体232等功能。

样式功能板块212开放的数据接口包括获取组件样式234、更新或移除组件样式236等功能。

可视化界面206上的操作都是通过调用可视化解析架构开放的接口，以此来更新数据模型，操作包括拖拽组件238、删除组件240、更新组件样式242、编辑属性244、属性绑定变量246、增加函数248(添加函数操作)、组件绑定事件250、在组件大纲252中更改组件层级结构254、在组件大纲252中删除组件256、在组件大纲中克隆组件258。以上所有的修改都会对应到相应板块的数据模型中，数据模型生成对应的抽象语法树202，在根据抽象语法树202生成对应的代码，生成的代码可以直接预览。

本实施例的可视化构建器200支持多***，同时支持Windows、MacOS、Linux操作***。可视化界面206上的所有操作都会生成前端通用的代码。并且，本实施例能够使用户的编码效果实时显示出来，能节省大量调试时间，显著提升移动应用的开发效率。

本实施例的可视化构建器200已经内置到开发工具300中，在可视化界面206中所有的操作都会生成对应的代码260，切换到开发工具300的代码界面即可查看生成的代码，并且生成的代码可以直接在开发工具300的预览界面预览或者直接在手机上预览，很大程度的提高了可视化开发的体验性，从代码界面修改代码再切换到可视化界面也会产生相应的效果。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。此外，需要指出的是，本申请实施方式中的方法和装置的范围不限按示出或讨论的顺序来执行功能，还可包括根据所涉及的功能按基本同时的方式或按相反的顺序来执行功能，例如，可以按不同于所描述的次序来执行所描述的方法，并且还可以添加、省去、或组合各种步骤。另外，参照某些示例所描述的特征可在其他示例中被组合。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以计算机软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例的方法。

上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本申请的保护之内。

Claims (10)

1.一种代码生成方法，其特征在于，包括：

在具有第一代码的情况下，获取所述第一代码的第一抽象语法树；

基于所述第一代码的层级结构，将所述第一代码解析为第一数据模型；

基于所述第一数据模型，通过可视化渲染层在可视化界面中渲染出第一组件；

基于在所述可视化界面对所述第一组件进行第一操作，所述可视化渲染层根据所述第一操作，获取第一数据；

基于所述第一数据，对所述第一数据模型进行更新；

基于所述更新后的第一数据模型，得到更新后的第一抽象语法树；

基于所述更新后的第一抽象语法树，生成第二代码。

2.根据权利要求1所述的代码生成方法，其特征在于，所述第一数据模型采用JSON数据结构，包括节点ID、节点类型、节点属性、节点样式、子节点和父节点。

3.根据权利要求2所述的代码生成方法，其特征在于，所述基于所述第一数据模型，通过可视化渲染层在可视化界面中渲染出第一组件，具体包括：

基于所述第一数据模型的节点类型，在所述可视化界面中渲染出所述节点类型对应的第一组件；

基于所述子节点和所述父节点的字段，确定所述第一组件的层级关系；

在所述可视化界面层选中所述第一组件后，根据所述节点ID，显示所述节点属性和节点样式。

4.根据权利要求1所述的代码生成方法，其特征在于，还包括：

设置模版功能板块，通过所述模版功能板块开放所述第一数据模型的第一数据接口，所述第一数据接口包括创建节点、***节点、删除节点、更新或移除节点属性和调整组件层级结构；

设置脚本功能板块，通过所述脚本功能板块开放所述第一数据模型的第二数据接口，所述第二数据接口包括新增或删除数据变量、获取函数列表、新增函数和更新函数体；

设置样式功能板块，通过所述样式功能板块开放所述第一数据模型的第三数据接口，所述第三数据接口包括获取组件样式、更新或移除组件样式。

5.根据权利要求1所述的代码生成方法，其特征在于，所述第一操作包括以下之一或其组合：

拖拽组件、删除组件、更新组件样式、编辑属性、属性绑定变量、新增函数、组件绑定事件、在组件大纲中更改组件的层级结构、在组件大纲中删除组件、在组件大纲中克隆组件。

6.根据权利要求1所述的代码生成方法，其特征在于，还包括：

将所述第二代码在开发工具中的预览工具进行预览；和/或

将所述第二代码通过所述开发工具的WIFI调试或USB调试，在移动设备上预览。

7.根据权利要求1至6中任一项所述的代码生成方法，其特征在于，还包括：

在不具有第一代码的情况下，基于在所述可视化界面进行第二操作，在所述可视化界面显示第二组件；

所述可视化渲染层根据所述第二操作，获取第二数据；

基于所述第二数据，生成第二数据模型；

基于所述第二数据模型，得到第二抽象语法树；

基于所述第二抽象语法树，生成第三代码。

8.一种代码生成装置，其特征在于，包括：

第一模块，用于在具有第一代码的情况下，获取所述第一代码的第一抽象语法树；

第二模块，用于基于所述第一代码的层级结构，将所述第一代码解析为第一数据模型；

第三模块，用于基于所述第一数据模型，通过可视化渲染层在可视化界面中渲染出第一组件；

第四模块，用于基于在所述可视化界面对所述第一组件进行第一操作，所述可视化渲染层根据所述第一操作，获取第一数据；

第五模块，用于基于所述第一数据，对所述第一数据模型进行更新；

第六模块，用于基于所述更新后的第一数据模型，得到更新后的第一抽象语法树；

第七模块，用于基于所述更新后的第一抽象语法树，生成第二代码。

9.一种电子设备，其特征在于，包括：

存储器，其上存储有程序或指令；

处理器，用于执行所述程序或指令时实现如权利要求1至7中任一项所述的代码生成方法的步骤。

10.一种可读存储介质，其上存储有程序或指令，其特征在于，所述程序或指令被处理器执行时实现如权利要求1至7中任一项所述的代码生成方法的步骤。

Images