设计稿一键生成代码，研发智能化探索与实践

我们做什么业务

双 11 大促刚落下帷幕，相信大家也剁手了不少东西。近年来各种大促活动纷繁层出，这些活动的背后，就有我们的身影。我们做大促业务已经第7个年头了，每年都会承接大量的会场建设需求。

会场开发需求不断增长，研发的手段也不断精进。从最初的全人工开发，到通过低代码平台（京东内部代号通天塔，下称“通天塔”）搭建，在通天塔的协助下，会场的开发效率有了大幅的提高。但是通天塔重点处理形态比较固定的楼层，目前还不能大规模搭建个性化模块。随着个性化模块数量的增长，亟需一种新的手段解决开发效率的瓶颈问题。

我们了解到 Deco 智能代码 可以实现从设计稿快速生成代码，很适合个性化模块搭建的场景。在 618 大促中尝试用 Deco 搭建部分个性化会场，获得过不错的效果，所以在本次双 11 大促中大规模应用 Deco 做个性化会场模块开发。

事前，我们担心会不会有使用门槛，比如对设计稿有特殊的要求（还得找设计师改），事实上完全多虑了，找设计师拿设计稿后直接将楼层的画板通过插件上传到 Deco 即可。

跳转到 Deco 的详情页面，即可查看到整个楼层的结构样式代码。布局结构和样式基本复合手写的习惯，特别是弹性布局，基本和手写无异了。对一些瑕疵点稍作调整，就可以运行起来查看楼层的效果了。

引用组件库

一般我们开发页面时，都会手动引入组件库，然后在页面中引用组件，从而构成页面。

import { xxImage, xxText } from '@xxxUI'
<View className='head' onClick={btnClick}>
  <xxImage src={url} mode='heightFix' size={300} />
  <xxText className='taro-text' >{name}</xxText>
</View>

而在 Deco 上，使用组件的方式会有所调整。首先需要将组件库设置到 Deco 中，然后选中某个设计稿区域，点选对应的组件，就可以替换成组件了，不用额外写引用和样式。如果没有映射组件，默认转化出来的是基础的标签（div/text/image）。

如果需要进一步提效，就需要借助 Deco 的 AI 能力。通过训练组件库，就可以实现组件的自动识别和替换。

虽然训练组件库需要额外的工作量，但是一旦完成训练后，处理大量的会场时就可以一劳永逸了，不用逐个 import 组件和设置组件的样式，直接就可以导出替换了组件的页面了。

开发数据逻辑

在 Deco 上可以看到很多前端的概念，props、state、生命周期、全局变量等等，基本在代码编辑器上的操作都可以在 Deco 里面实现。既然有了这些功能，那就动动手写写代码吧。

【异步请求】

每个会场里面都有大量的数据请求，人工开发时，我们使用了很多封装的请求方法，针对不同的请求场景使用不同的请求方法，但是请求的模式相对比较固定，各种请求都有点繁复。

fetch(url)
  .then(...)
  .catch(...)

在 Deco 里面我们可以接入已经封装的方法，按照以往的方式继续码代码。此外 Deco 给了我们一点惊喜。它支持多种形式的请求，只需点选完几个参数，就可以帮我生成请求的代码，无论是复合请求还是普通的自定义请求，都可以快速生成代码。

【代码提示】

另外，在对组件属性数据绑定还有在编辑器写代码时，提供了智能的代码提示功能。

Deco 的代码提示除了编辑器的代码提示以外，还可以动态展示选中节点的作用域，并将变量的数据结构和真实值展示出来，简单点选一下就可以从作用域内选择数据。对比下来，编码变得很便利，也不担心搞错数据字段了。

【数据上报】

最后，Deco 整合了数据上报功能，可以直接设置点击埋点和曝光埋点等，简单配置一下，数据上报也大功告成。

源码！源码！

通过 Deco 完成了大部分的开发，最后就获取源码做验证测试。

Deco 提供很多方便的定制化方案，我们在 Deco 上定制了一套代码模板，可以直接输出合适的项目代码，不用做过多的二次适配工作。

另外，Deco 还支持直接生成低代码组件共建平台（京东内部代号通天塔 ihub）组件，无缝对接通天塔。每次在 Deco 上做完设计稿开发，直接输出代码合并到项目中运行验证。

每次业务完成后都需要将新的需求沉淀下来丰富到组件库中，我们则将标准的组件样式上传到 Deco 后，定义组件的内部逻辑，就可以输出一个标准化的组件，在 Deco 上就可以完成开发闭环。

虽然 Deco 很便利，但在使用过程也发现一些不足之处。每次完成编辑后，都需要将代码下载到本地，安装环境，手动编译项目才可以获得组件。由于开发的组件比较多，每次都要重复这些步骤挺繁琐的，希望可以在后续的版本中能得到优化。

在本次双 11 大促中，通过 Deco 搭建的数十个楼层成功上线。对 Deco 的使用，也从陌生，到熟悉，摸索出一套适合我们的接入模式。对不同的业务流程调整不同的策略，效率提升达到48%，相信随着业务合作的深入，可以带来更大的赋能。