一种代码生成方法、装置、设备及可读存储介质与流程

1.本技术涉及数据处理技术领域，尤其涉及一种代码生成方法、装置、设备及可读存储介质。


背景技术：

2.前端业务系统开发过程中，考虑到组件是组成任何一个视图的最基础元素，通过组件库中的组件结合，能快速搭建前端页面、减少设计与开发沟通成本、统一体验规范。但是，对于交互方式、页面及组件样式比较固定的应用场景，仍存在代码重复开发的问题。


技术实现要素：

3.本技术提供了一种代码生成方法、装置、设备及可读存储介质，如下：
4.一种代码生成方法，包括：
5.响应于代码更新指令，获取待更新组件的属性信息，所述属性信息包括组件标识、组件名称、组件类型、以及嵌套规则；
6.基于所述待更新组件的属性信息，生成待更新代码片段以及待更新代码片段的代码标识；
7.基于标识对应关系和所述待更新组件的组件标识，在原始代码文件中定位所述待更新组件的原始代码片段，所述标识对应关系包括组件标识和代码标识的对应关系，目标组件标识对应的代码标识唯一指示基于所述目标组件标识指示的组件生成的代码片段；
8.将所述待更新组件的原始代码片段替换为所述待更新代码片段，并将所述标识对应关系中，所述待更新组件的组件标识对应的代码标识替换为所述待更新代码片段的代码标识。
9.可选地，响应于代码更新指令，获取待更新组件的属性信息，包括：
10.响应于检测到所述待更新组件的操作指令，获取所述待更新组件的操作指令对应的所述待更新组件的属性信息；所述操作指令包括拖拽操作；
11.和/或，实时监测页面设计图，并识别所述页面设计图中各个组件的布局信息，当检测到所述待更新组件的布局信息发生更新，获取所述待更新组件的属性信息。
12.可选地，本方法还包括：生成所述原始代码文件；
13.所述生成所述原始代码文件，包括：
14.获取原始页面中原始组件的所述属性信息；
15.基于各个所述原始组件的所述属性信息，生成各个所述原始组件的原始代码片段；
16.基于各个所述原始组件的原始代码片段，获取所述原始代码文件。
17.可选地，获取原始页面中原始组件的所述属性信息，包括：
18.响应于检测到所述原始组件的所述操作指令，获取所述原始组件的操作指令对应的所述原始组件的属性信息。
19.和/或，获取原始页面的页面设计图，识别所述原始页面的页面设计图中各个原始组件的布局信息，基于各个所述原始组件的布局信息获取各个所述原始组件的属性信息。
20.可选地，方法在所述基于各个所述原始组件的所述属性信息，生成各个所述原始组件的原始代码片段后，还包括：
21.对应记录所述原始组件的组件标识和所述原始组件的原始代码片段的代码标识的对应关系，生成所述标识对应关系。
22.一种代码生成装置，包括：
23.属性信息获取单元，用于响应于代码更新指令，获取待更新组件的属性信息，所述属性信息包括组件标识、组件名称、组件类型、以及嵌套规则；
24.代码标识生成单元，用于基于所述待更新组件的属性信息，生成待更新代码片段以及待更新代码片段的代码标识；
25.更新代码生成单元，用于基于标识对应关系和所述待更新组件的组件标识，在原始代码文件中定位所述待更新组件的原始代码片段，所述标识对应关系包括组件标识和代码标识的对应关系，目标组件标识对应的代码标识唯一指示基于所述目标组件标识指示的组件生成的代码片段；
26.代码替换单元，用于将所述待更新组件的原始代码片段替换为所述待更新代码片段，并将所述标识对应关系中，所述待更新组件的组件标识对应的代码标识替换为所述待更新代码片段的代码标识。
27.可选地，属性信息获取单元，用于响应于代码更新指令，获取待更新组件的属性信息，包括：属性信息获取单元具体用于：
28.响应于检测到所述待更新组件的操作指令，获取所述待更新组件的操作指令对应的所述待更新组件的属性信息；所述操作指令包括拖拽操作；
29.和/或，实时监测页面设计图，并识别所述页面设计图中各个组件的布局信息，当检测到所述待更新组件的布局信息发生更新，获取所述待更新组件的属性信息。
30.可选地，本装置还包括：原始代码文件生成单元，用于生成所述原始代码文件；
31.所述原始代码文件生成单元用于生成所述原始代码文件，包括：所述原始代码文件生成单元具体用于：
32.获取原始页面中原始组件的所述属性信息；
33.基于各个所述原始组件的所述属性信息，生成各个所述原始组件的原始代码片段；
34.基于各个所述原始组件的原始代码片段，获取所述原始代码文件。
35.一种代码生成设备，包括：存储器和处理器；
36.所述存储器，用于存储程序；
37.所述处理器，用于执行所述程序，实现代码生成方法的各个步骤。
38.一种可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现代码生成方法的各个步骤。
39.由上述技术方案可以看出，本技术实施例提供的代码生成方法、装置、设备及可读存储介质，响应于代码更新指令，获取待更新组件的属性信息。基于待更新组件的属性信息，生成待更新代码片段以及待更新代码片段的代码标识。基于标识对应关系和待更新组
件的组件标识，在原始代码文件中定位待更新组件的原始代码片段，标识对应关系包括组件标识和代码标识的对应关系。将待更新组件的原始代码片段替换为待更新代码片段，并将标识对应关系中，待更新组件的组件标识对应的代码标识替换为待更新代码片段的代码标识，可见，通过标识对应关系替换待更新组件的代码片段，提高代码生成效率。
附图说明
40.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
41.图1为本技术实施例提供的一种代码生成方法的流程示意图；
42.图2为本技术实施例提供的一种代码生成方法的具体实施方式的流程示意图；
43.图3为本技术实施例提供的一种代码生成装置的结构示意图；
44.图4为本技术实施例提供的一种代码生成设备的结构示意图。
具体实施方式
45.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
46.本技术提供的方法，可以适用于需要基于组件库中的组件搭建页面设计图并自动生成视图代码的场景。需要说明的是，本发明提供的一种代码生成方法、装置、设备及可读存储介质可用于金融领域或其他领域，例如，可用于金融领域中的软件开发应用场景。其他领域为除金融领域之外的任意领域，例如，计算机领域。上述仅为示例，并不对本发明提供的一种代码生成方法、装置、设备及可读存储介质的应用领域进行限定。
47.进一步的，本技术可以应用于代码平台，代码平台设置于智能设备，例如电脑、平板或智能手机，或者服务器。接下来，结合附图1对本技术代码生成方法进行介绍，如图1示例了一种代码生成方法流程图，该方法详细包括：
48.s101、获取原始页面中原始组件的属性信息。
49.本实施例中，属性信息包括组件标识、组件名称、组件类型、以及嵌套规则。获取原始组件的属性信息的方法包括多种，可选的两种方法如下：
50.1、响应于检测到原始组件的操作指令，获取原始组件的操作指令对应的所述原始组件的属性信息。其中，操作指令包括但不限于拖拽指令。
51.2、获取原始页面的页面设计图，识别原始页面的页面设计图中各个原始组件的布局信息，基于各个原始组件的布局信息获取各个所述原始组件的属性信息。
52.其中，布局信息包括原始组件的位置信息以及各个原始组件之间的关系等。具体的识别页面设计图的方法参见现有技术。例如，通过图片识别、文本识别等技术提取原型图中的界面元素，将原型图进行切分，识别切分后的组件类型以及布局信息，自动获取组件进行界面的组装操作，并获取组件的属性信息。需要说明的是，基于布局信息获取属性信息的
方法为识别出组件以及布局信息后，首先获取组件id，基于组件id获取组件的属性信息。具体参见现有技术。
53.s102、基于各个原始组件的属性信息，生成各个原始组件的原始代码片段。
54.本实施例中，基于各个原始组件的属性信息，生成各个原始组件的原始代码片段的方法包括多种，例如：
55.在一种可选的实施例中，根据原始组件的类型映射到预设的不同类型组件对应的代码片段模板，将原始组件的属性信息替换到代码片段模板的相应位置，得到完整的代码片段，作为原始组件的原始代码片段。
56.s103、基于各个原始组件的原始代码片段，获取原始代码文件。
57.本实施例中，通过组装各个原始组件的原始代码片段，生成原始代码文件，具体方法参见现有技术。
58.s104、对应记录原始组件的组件标识和原始组件的原始代码片段的代码标识的对应关系，生成标识对应关系。
59.s105、响应于代码更新指令，获取待更新组件的属性信息。
60.本实施例中，属性信息包括组件标识、组件名称、组件类型、以及嵌套规则。
61.本实施例中，代码更新指令的触发时机包括多个，例如，响应于用户对组件的操作指令，触发代码更新指令，或者响应于检测到页面设计图的更新操作，触发代码更新指令。
62.基于此，获取待更新组件的属性信息的方法包括：
63.响应于检测到待更新组件的操作指令，获取待更新组件的操作指令对应的待更新组件的属性信息。操作指令包括拖拽操作。
64.和/或，实时监测页面设计图，并识别页面设计图中各个组件的布局信息，当检测到待更新组件的布局信息发生更新，获取待更新组件的属性信息。
65.本实施例中，实时识别页面设计图中各个组件的布局信息的具体方法参见上述实施例，检测到待更新组件的布局信息发生更新包括：通过实时对比各个组件的布局信息，若存在布局信息更新，则将组件作为待更新组件。需要说明的是，可以基于预设的监测周期比对布局信息，目的在于节省计算资源。
66.需要说明的是，代码更新指令可以是用户主动触发的，比如用户更新平台上的组件，并利用预设的ide插件发起http请求获取与更新该组件相关的代码片段，其中，ide插件通过http协议保持与平台的通讯，当需要更新本地代码时发送http请求，当通过插件发起http更新请求时，服务端会检查客户端记录的id是否存在，以及id对应的cid是否有变化，如果cid不一致则证明该组件发生过更新。
67.s106、基于待更新组件的属性信息，生成待更新代码片段以及待更新代码片段的代码标识。
68.本实施例中，标识对应关系包括组件标识和代码标识的对应关系，目标组件标识对应的代码标识唯一指示基于目标组件标识指示的组件生成的代码片段。
69.可选地，标识对应关系包括组件id和代码cid的对应关系，其中，组件id唯一标识该组件，代码cid唯一标识一段组件代码。可以理解的是，组件id对应的代码cid唯一标识基于该组件id的组件属性生成的组件代码。
70.具体地，针对每个组件会生成一个唯一的身份标识id，以及对应的代码片段内容
标识cid，cid唯一指示一段代码，并自动对应记录界面中组件身份标识及内容标识，示例如下：
[0071][0072]
具体地，本地代码引用时会在引用代码处加入当前组件的id作为组件标识，具体来说，id主要包含两部分的内容：html及css部分。针对html引用时格式如下
[0073]
《div id＝id1》《component1/》《/div》
[0074]
识别到id1发生变化时，获取上述基于diff算法生成的最小更新片段，在代码文件中找到id1的子元素，替换对应的片段
[0075]
针对css部分：引用格式如下
[0076]
#id1：{
[0077]
...
[0078]
},
[0079]
在代码片段中找到id1部分，替换样式更新内容。
[0080]
s107、基于标识对应关系和待更新组件的组件标识，在原始代码文件中定位待更新组件的原始代码片段。
[0081]
s108、将待更新组件的原始代码片段替换为待更新代码片段，并将标识对应关系中，待更新组件的组件标识对应的代码标识替换为待更新代码片段的代码标识。
[0082]
从上述技术方案可以看出，本技术实施例提供的
[0083]
改进点在于监测变化的方式以及替换的方式，通过内容标识cid识别内容的变更，
[0084]
本专利的替换是一种基于变更组件的替换，根据id与cid的映射关系确认某个组件是否发生过更新，如果已经更新过，则删除改组件对应代码片段，并将服务端生成的片段插入到删除位置。也即，本技术可以通过原型图直接生成设计稿，减轻了设计的工作量，区域代码片段的生成可以更加灵活的进行代码复用。
[0085]
接下来结合一种具体的应用场景，进一步对本方案的具体实现方法进行说明，如下：
[0086]
在amd、cmd、commonjs等模块化标准开始流行后，模块化的思维方式，给前端开发者们造成了比较深刻的影响。前端开发工程师开始对原本混沌的javascript代码按照标准模式进行组织和分类。据此构建的web app，不仅提高了系统的可维护性，并且便于和其他开发者进行沟通，从而形成一个巨大的开发链条。借助其他开发者提供的一系列模块，使我们能够专注于业务逻辑，同时降低代码冗余、开发成本和潜在风险。
[0087]
基于模块化开发的大致思路，前端开发工程师对一堆看似杂乱无章的dom结构进行归纳、总结、提炼，使之成为一个个独立的组件。数个组件的协同工作，呈现出一个完整的页面。
[0088]
前端业务系统开发过程中，对于交互方式、页面及组件样式比较固定的应用场景，
存在代码重复开发、用户体验度降低等问题。因此，考虑到组件是组成任何一个视图的最基础元素，是整个平台系统的基石。组件之间的耦合度、通信、可扩展性、易用性是否足够强大，很大一部分程度上决定了整个系统的质量。“组件库”这一事物近两年已在互联网行业中流行起来，它的主要价值是：能快速搭建前端页面、减少设计与开发沟通成本、统一体验规范等等。为了满足中小企业的需求，越来越多的开源组件库诞生，但开源代表着通用，无法满足业务特色需求，是不少企业面临的痛点。
[0089]
目前，开源组件库期望达到的主要目标为：
[0090]
1)通过组件进行规范控制，减少随意的组合方式，减少不必要的细微差异；
[0091]
2)组件需满足业务的内容及品牌差异，同时支持规范更新时的统一调整；
[0092]
3)具备云端动态统一调整，以及从各维度进行组件查询与管理的能力。
[0093]
基于此，本技术实施例提供的一种代码生成方法可以应用于开发平台中，本实施例中，开发平台包括：服务端和浏览器端。
[0094]
本实施例中，服务端具体用于：
[0095]
1)当浏览器端新增组件时，服务端通过新增接口addcontrol(object modelconfig)接收浏览器端通过http post请求方式传递过来的组件属性对象，并持久化至mysql数据库。
[0096]
2)当浏览器端维护组件时，服务端通过更新接口updatecontrol(object modelconfig)接收浏览器端通过http post请求方式传递过来的组件属性对象，以组件id为键，将待维护的组件信息更新至数据库中。
[0097]
3)当浏览器端查询组件时，服务端通过查询接口querycontrol(integer modelid)接收浏览器端通过http get请求方式传递过来的组件id，以组件id为键，从数据库中获取待查询的组件信息并返回至浏览器端。
[0098]
4)当浏览器端删除组件时，服务端通过更新接口deletecontrol(integer modelid)接收浏览器端通过http post请求方式传递过来的组件id，以组件id为键，将该组件信息从数据库中删除。
[0099]
5)当浏览器端创建页面时，服务端通过页面创建接口addpage(object pagesoul)接收浏览器端通过http post请求方式传递过来的页面参数对象，并持久化至mysql数据库。
[0100]
本实施例中，浏览器端具体用于：
[0101]
1)新增、查询、删除、修改组件时，浏览器端通过http协议将组件信息、当前用户信息通过接口请求方式传递至服务端。
[0102]
2)当用户拖拽组件生成页面时，浏览器端基于html5实现组件拖拽，若拖拽面板droppanel不存在或者元素无约束标识allowdrop，则不允许放置组件。若元素约束标识allowdrop存在且无约束关系(即allowdrop为空数组)，允许放置组件。若元素约束标识allowdrop存在且存在约束关系(即allowdrop为非空数组)，则根据约束关系允许放置组件。
[0103]
3)完成页面组装后，通过代码视图展示生成的页面源码，根据业务逻辑可在线维护页面视图渲染、javascript部分。
[0104]
4)通过viewstudio平台提供的导出功能，导出页面对应的目标文件至目标系统，
无需额外引入viewstudio平台相关依赖包。
[0105]
结合上述开发平台，对本技术实施例提供的一种代码生成方法的具体实现流程进行介绍，图2为本技术实施例提供的一种代码生成方法的具体实现流程，如图2所示，本技术包括：
[0106]
s201、浏览器端响应于拖拽操作获取组件id，根据组件id返回组件属性。
[0107]
本实施例中，组件属性包括但不限于组件id，名称、类型、嵌套规则等。
[0108]
可选地，当用户利用浏览器端提供的组件拖拽功能，组装符合业务需求的目标页面时，浏览器端根据拖拽的组件id返回组件属性。
[0109]
或者，通过图片识别、文本识别等技术提取设计稿中的界面元素，将设计稿进行切分，识别切分后的组件类型，自动获取对应的组件进行界面的组装操作，浏览器端根据组装操作指示的组件id返回组件属性。
[0110]
s202、指令解析引擎响应于接收到组件的属性信息，执行指令解析流程，得到指令解析结果。
[0111]
具体地，指令解析引擎执行流程如下：
[0112]
1)指令解析引擎监听到传入的组件属性，通过json.stringify(data)将json对象转为json字符串，得到解析结果。
[0113]
2)利用正则表达式将解析结果作为插槽值，放入指令解析引擎模板(简称为引擎模板)插槽处。
[0114]
3)应用js-pretty工具美化引擎模板，增强引擎模板代码可读性。
[0115]
4)对可解析执行指令进行语法检查。
[0116]
5)若语法检查通过，将指令解析结果作为传入参数传递至dom解析引擎。
[0117]
6)若语法检查未通过，返回执行3)。
[0118]
需要说明的是，本步骤是一种基于属性信息获取代码片段的具体实现方法，在其他可选的实施例中，还可以通过其他方法得到组件(待更新组件和原始组件)的代码片段，例如，上述实施例中的s102。
[0119]
s203、dom解析引擎执行dom解析流程，得到dom解析结果。
[0120]
具体地，dom解析引擎执行流程如下：
[0121]
1)组装页面过程中，dom解析引擎监听到传入的组件属性，根据dom解析引擎执行规则，当组件元素拖拽开始时触发ondragstart函数，用于记录当前拖拽组件信息，便于全局应用。
[0122]
2)当拖拽对象投放区内移动时触发ondragover函数，取出之前ondragstart函数存储的组件信息，并调用校验组件是否可拖拽方法检查当前组件是否可拖拽，若拖拽面板droppanel不存在或者元素无约束标识allowdrop，则不允许放置组件。若元素约束标识allowdrop存在且无约束关系(即allowdrop为空数组)，允许放置组件。若元素约束标识allowdrop存在且存在约束关系(即allowdrop为非空数组)，则根据约束关系允许放置组件。
[0123]
3)当拖拽对象投放在投放区时触发ondrop函数，通过调用generateuid方法生成当前组件id标识，该id标识一方面用于标识组件唯一性，另一方面用于设置页面中当前组件与其他组件之间的父子元素关系。当元素拖拽结束时触发ondragend函数，通过获取当前
组件与其他组件之间的位置嵌套关系，以currentdrag.pid＝predrag.uid表示当前组件与上层组件间的父子组件级联关系。当拖拽对象离开投放区时触发ondragleave函数，根据组件id删除其与其他组件之间的级联关系。
[0124]
s204、构建渲染树并绘制页面。
[0125]
s205、ide插件通过http协议保持与平台的通讯，当需要更新本地代码时发送http请求获取对应区域的代码片段，并替换本地代码中的原代码片段。
[0126]
需要说明的是，上述s201～s205为应用本技术实施例提供的一种页面视图生成场景下代码生成方法的具体实现方式，通过图3所示的流程，实现从设计、代码生成、代码使用、维护、到更新设计的闭环。
[0127]
从上述技术方案可以看出，本发明系统viewstudio平台采用拖拽组件方式开发页面。从开发角度讲，开发平台技术人员需要维护组件，支持通过组件拖拽生成页面，并将生成后的页面导出至目标系统，无需引入平台依赖包。本发明系统viewstudio平台支撑前端开发工程师应用设计页面的核心部分是指令解析引擎、dom解析引擎分析与设计。本发明的指令解析引擎、dom解析引擎采用独立平台系统执行，应用该平台产生的代码无需引入相关依赖包，不存在代码入侵问题。且dom解析引擎采用render函数提升节点渲染性能，将template里面的节点解析成虚拟dom。使用render函数构建dom时，免去了将模板转译成vnode函数的转译过程。它比模板更接近编译器，因此较其他设计平台执行效率高、页面渲染性能优越。
[0128]
进一步，针对制品库中组件开发工程师提交的组件样式单一，在集成到采用不同样式框架的业务系统时适配性较差，且存在代码入侵风险的缺点，本发明通过增加多样式ui框架预设、接近底层编译器渲染方式构建dom等，从而实现单一组件支持多样式ui框架的功能。而且该平台导出的代码可无缝集成至其他业务系统，无需引入额外的依赖包，不存在代码入侵风险。
[0129]
进一步，可以任意选择区域导出对应区域的代码片段。原型图直接生成设计初稿，可保持设计稿与原型图的同步更新。生成的代码片段可以直接插入到工程代码中，通过更新操作保持代码与设计的同步。
[0130]
图3示出了本技术实施例提供的一种代码生成装置的结构示意图，如图3所示，该装置可以包括：
[0131]
属性信息获取单元301，用于响应于代码更新指令，获取待更新组件的属性信息，所述属性信息包括组件标识、组件名称、组件类型、以及嵌套规则；
[0132]
代码标识生成单元302，用于基于所述待更新组件的属性信息，生成待更新代码片段以及待更新代码片段的代码标识；
[0133]
更新代码生成单元303，用于基于标识对应关系和所述待更新组件的组件标识，在原始代码文件中定位所述待更新组件的原始代码片段，所述标识对应关系包括组件标识和代码标识的对应关系，目标组件标识对应的代码标识唯一指示基于所述目标组件标识指示的组件生成的代码片段；
[0134]
代码替换单元304，用于将所述待更新组件的原始代码片段替换为所述待更新代码片段，并将所述标识对应关系中，所述待更新组件的组件标识对应的代码标识替换为所述待更新代码片段的代码标识。
[0135]
可选地，属性信息获取单元，用于响应于代码更新指令，获取待更新组件的属性信息，包括：属性信息获取单元具体用于：
[0136]
响应于检测到所述待更新组件的操作指令，获取所述待更新组件的操作指令对应的所述待更新组件的属性信息；所述操作指令包括拖拽操作；
[0137]
和/或，实时监测页面设计图，并识别所述页面设计图中各个组件的布局信息，当检测到所述待更新组件的布局信息发生更新，获取所述待更新组件的属性信息。
[0138]
可选地，本装置还包括：原始代码文件生成单元，用于生成所述原始代码文件；
[0139]
所述原始代码文件生成单元用于生成所述原始代码文件，包括：所述原始代码文件生成单元具体用于：
[0140]
获取原始页面中原始组件的所述属性信息；
[0141]
基于各个所述原始组件的所述属性信息，生成各个所述原始组件的原始代码片段；
[0142]
基于各个所述原始组件的原始代码片段，获取所述原始代码文件。
[0143]
图4示出了该代码生成设备的结构示意图，该设备可以包括：至少一个处理器401，至少一个通信接口402，至少一个存储器403和至少一个通信总线404；
[0144]
在本技术实施例中，处理器401、通信接口402、存储器403、通信总线404的数量为至少一个，且处理器401、通信接口402、存储器403通过通信总线404完成相互间的通信；
[0145]
处理器401可能是一个中央处理器cpu，或者是特定集成电路asic(application specific integrated circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路等；
[0146]
存储器403可能包含高速ram存储器，也可能还包括非易失性存储器(non-volatile memory)等，例如至少一个磁盘存储器；
[0147]
其中，存储器存储有程序，处理器可执行存储器存储的程序，实现本技术实施例提供的一种代码生成方法的各个步骤，如下：
[0148]
一种代码生成方法，包括：
[0149]
响应于代码更新指令，获取待更新组件的属性信息，所述属性信息包括组件标识、组件名称、组件类型、以及嵌套规则；
[0150]
基于所述待更新组件的属性信息，生成待更新代码片段以及待更新代码片段的代码标识；
[0151]
基于标识对应关系和所述待更新组件的组件标识，在原始代码文件中定位所述待更新组件的原始代码片段，所述标识对应关系包括组件标识和代码标识的对应关系，目标组件标识对应的代码标识唯一指示基于所述目标组件标识指示的组件生成的代码片段；
[0152]
将所述待更新组件的原始代码片段替换为所述待更新代码片段，并将所述标识对应关系中，所述待更新组件的组件标识对应的代码标识替换为所述待更新代码片段的代码标识。
[0153]
可选地，响应于代码更新指令，获取待更新组件的属性信息，包括：
[0154]
响应于检测到所述待更新组件的操作指令，获取所述待更新组件的操作指令对应的所述待更新组件的属性信息；所述操作指令包括拖拽操作；
[0155]
和/或，实时监测页面设计图，并识别所述页面设计图中各个组件的布局信息，当
检测到所述待更新组件的布局信息发生更新，获取所述待更新组件的属性信息。
[0156]
可选地，本方法还包括：生成所述原始代码文件；
[0157]
所述生成所述原始代码文件，包括：
[0158]
获取原始页面中原始组件的所述属性信息；
[0159]
基于各个所述原始组件的所述属性信息，生成各个所述原始组件的原始代码片段；
[0160]
基于各个所述原始组件的原始代码片段，获取所述原始代码文件。
[0161]
可选地，获取原始页面中原始组件的所述属性信息，包括：
[0162]
响应于检测到所述原始组件的所述操作指令，获取所述原始组件的操作指令对应的所述原始组件的属性信息。
[0163]
和/或，获取原始页面的页面设计图，识别所述原始页面的页面设计图中各个原始组件的布局信息，基于各个所述原始组件的布局信息获取各个所述原始组件的属性信息。
[0164]
可选地，方法在所述基于各个所述原始组件的所述属性信息，生成各个所述原始组件的原始代码片段后，还包括：
[0165]
对应记录所述原始组件的组件标识和所述原始组件的原始代码片段的代码标识的对应关系，生成所述标识对应关系。
[0166]
本技术实施例还提供一种可读存储介质，该可读存储介质可存储有适于处理器执行的计算机程序，计算机程序被处理器执行时，实现本技术实施例提供的一种代码生成方法的各个步骤，如下：
[0167]
一种代码生成方法，包括：
[0168]
响应于代码更新指令，获取待更新组件的属性信息，所述属性信息包括组件标识、组件名称、组件类型、以及嵌套规则；
[0169]
基于所述待更新组件的属性信息，生成待更新代码片段以及待更新代码片段的代码标识；
[0170]
基于标识对应关系和所述待更新组件的组件标识，在原始代码文件中定位所述待更新组件的原始代码片段，所述标识对应关系包括组件标识和代码标识的对应关系，目标组件标识对应的代码标识唯一指示基于所述目标组件标识指示的组件生成的代码片段；
[0171]
将所述待更新组件的原始代码片段替换为所述待更新代码片段，并将所述标识对应关系中，所述待更新组件的组件标识对应的代码标识替换为所述待更新代码片段的代码标识。
[0172]
可选地，响应于代码更新指令，获取待更新组件的属性信息，包括：
[0173]
响应于检测到所述待更新组件的操作指令，获取所述待更新组件的操作指令对应的所述待更新组件的属性信息；所述操作指令包括拖拽操作；
[0174]
和/或，实时监测页面设计图，并识别所述页面设计图中各个组件的布局信息，当检测到所述待更新组件的布局信息发生更新，获取所述待更新组件的属性信息。
[0175]
可选地，本方法还包括：生成所述原始代码文件；
[0176]
所述生成所述原始代码文件，包括：
[0177]
获取原始页面中原始组件的所述属性信息；
[0178]
基于各个所述原始组件的所述属性信息，生成各个所述原始组件的原始代码片
段；
[0179]
基于各个所述原始组件的原始代码片段，获取所述原始代码文件。
[0180]
可选地，获取原始页面中原始组件的所述属性信息，包括：
[0181]
响应于检测到所述原始组件的所述操作指令，获取所述原始组件的操作指令对应的所述原始组件的属性信息。
[0182]
和/或，获取原始页面的页面设计图，识别所述原始页面的页面设计图中各个原始组件的布局信息，基于各个所述原始组件的布局信息获取各个所述原始组件的属性信息。
[0183]
可选地，方法在所述基于各个所述原始组件的所述属性信息，生成各个所述原始组件的原始代码片段后，还包括：
[0184]
对应记录所述原始组件的组件标识和所述原始组件的原始代码片段的代码标识的对应关系，生成所述标识对应关系。
[0185]
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
[0186]
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。
[0187]
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本技术。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本技术的精神或范围的情况下，在其它实施例中实现。因此，本技术将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。