文/毫末科技 - 庄小铎、胡小根、阿里淘系 F(x) Team - 苏川
毫末科技 是一家行业软件定制开发公司，涉及行业有办公协作类、区块链、数据可视化、零售电商、智慧环保、智慧水务、智慧环卫 、智慧检务、智慧政务、智慧物流、智慧教育、智慧制造、物联网、数据分析、网络及安全、O2O、P2P、B2B、B2C 等。
移动端、web端页面均有开发，前端主要技术栈有 vue、react、flutter、uniapp、taro、html 等。使用了 imgcook sketch 插件导出、自定义 DSL、CLI 命令行、plugin 插件等能力来提升前端代码开发速度。
从 2020-02-03 开始到 2021-05-25，在 imgcook 创建模块数量达 2000+，覆盖60+前端项目，帮助研发提效 40%+。
使用情况
- 时间：从 2020-02-03 开始到 2021-05-25，其中有 165 天使用 imgcook 生成代码
- 使用情况：在 imgcook 创建模块数量达 2000+，覆盖 60+ 前端项目。
- 使用人群：前端、设计师
- 使用人数： 26人左右
- 提效效果：提效 40%，一个普通移动端页面不使用 imgcook 可能需要一天时间开发，而使用 imgcook 需要时间）半天时间即可完成。
为什么用 imgcook？
- 1、主要提高前端代码开发速度
- 2、示例页面-PC端-vue页面：
研发步骤
第 1 步：从 imgcook sketch 插件 导出到编辑器
第 2 步：编辑器设置
1、设置生成的尺寸
手机端页面生成
默认情况，uniapp 和 taro 生成的代码都是为手机端服务的。手机端生成代码时，遵循以下规则生成：
1、同一个项目中，所有待生成元素的宽度相同。通常手机端的设计稿，Artboard 的宽度为 375px 或 750px，那么上传到 imgcook 里的所有的设计元素宽度都保持 375px 或 750px。
2、生成出来的代码是移动端屏幕自适应的。uniapp 和 taro 的自适应机制有所不同。
- uniapp：官方推荐采用 rpx 单位实现移动端的自适应。毫末生成的移动端的 uniapp 的代码，以rpx为单位实现自适应。
- Taro：官方推荐采用 px 或者百分比 %。Taro 在编译为 H5 时会将 px 的尺寸转换为 rem，编译小程序时会将 px 的尺寸转换为 rpx。由于毫末生成的 style 代码为 js 文件，Taro编译器无法自动转换 px 像素。为了解决这个问题，毫末采用了 Taro 推荐的 Taro.pxTransform() 函数来控制自适应。
Pad & Web 端页面生成
有时候需要生成 pad 端甚至桌面端的应用，也就存在需要生成局部视觉代码的情况（无法跟手机端应用一样，强制要求所有待生成元素的宽度保持一致）。如果不加任何配置项，那么生成出来的代码就不存在自适应性（布局混乱）。
为了解决这个问题，在 imgcook 的 web 管理端中，对 Page 元素增加了两个属性以实现 pad 或桌面应用的局部代码屏幕自适应。
export default {
designWidth: 1920, // 设计稿宽度
responsive: "vw" // 配置responsive时，css自适应采用vw单位。responsive不配置的情况（只配置designWidth）下，uniapp默认采用rpx控制自适应（在pad下体验较好），Taro默认采用Taro.pxTransform()函数来控制自适应。
}
配置截图如下：
2、设置组件
由于 imgcook 生成的所有的元素都为 Div/Text/Image，对于表单元素及复杂组件还没有较好的支持。
毫末内部结合 xmind2code 配置的组件，实现了 imgcook 的组件替换。毫末 imgcook 的组件替换，替换的是 xmind2code->ui config 文件中的组件。目前支持非容器型组件（input/button等）。暂时不支持容器型组件（例如Tab等）替换。
在导出代码时，会使用插件 @imgcook/hm-replace-component 来替换组件。
imgcook install @imgcook/hm-replace-component@0.0.9
imgcook的schema中，主要有三类UI元素：
- Div
- Text
- Image
原则上，imgcook 中的以上三类元素，可以替换为毫末配置的任意组件。建议的替换如下：
- Text: imgcook 自动替换。无需替换。
- Image: imgcook 自动替换。无需替换。
- Div: 可以配置替换为其他组件
替换步骤：
- 1、在 imgcook 的 web 界面上，配置 Div 的额外属性：hm-component=\
export default {
'hm-component': 'van-button'
}
配置截图如下：
- 2、在项目中配置 xmind2code 的组件。配置过程参考：xmind2code开发指南
第 3 步：用 cli 命令行导出代码
安装并配置 imgcook cli
官方介绍：
imgcook-cli 可以结合 Plugin 的能力将 imgcook 平台生成的代码产物一键放置到你的本地项目工程里，无缝融合到你的研发流程，如果你有对 imgcook 生成代码的产物有加工需求（比如使用 Plugin 开发自动上传图片到自己的图床、文件目录转换等），imgcook-cli 会是你应用 Plugin 的不二之选。
npm install -g @imgcook/cli
imgcook config edit # 配置imgcook。
为 cli 配置 Plugin，这里官方会默认配置 plugin
- 图片转换插件：@imgcook/plugin-images
- 导出代码时将图片转换为本地相对路径，并将图片下载到本地
- 模块导出生成：@imgcook/plugin-generate
- 下载代码到本地
然后添加上自定义的 plugin：
- 组件替换插件 @imgcook/hm-replace-component
最后配置如下：
{
"accessId": "RolT******V3d1",
"dslId": "259",
"generator": [],
"plugin": [
"@imgcook/hm-replace-component",
"@imgcook/plugin-images",
"@imgcook/plugin-generate"
],
"uploadUrl": ""
}
导出代码
拉取模块代码，写入到文件目录的一个路径下
# 拉取某个模块代码到本地路径
imgcook pull <moduleId> --path <path>
# 例子
imgcook pull 17108 --path ./src/mods/mod17108
使用了哪些 imgcook 能力？
imgcook Sketch 插件导出能力
直接 imgcook首页下载 imgcook sketch 插件使用即可。
使用 imgcook 插件导出图层数据，粘贴到 imgcook。
imgcook 自定义 DSL 生成视图代码能力
imgcook 提供了自定义 DSL 能力，我们可以根据 imgcook 提供的数据和能力生成自己所需的代码。 毫末科技共开发了 10 个 imgcook DSL，用于满足不同应用的代码生成需求：
- uniapp 组件代码生成 毫末uniapp小程序组件开发规范
- uniapp 页面代码生成 毫末uniapp小程序页面开发规范
- Web vue 组件代码生成 毫末Vue组件开发规范
- Web vue 页面代码生成 毫末Vue页面开发规范
- React 组件代码生成 毫末React组件开发规范
- React 页面代码生成 毫末React页面开发规范
- RN 组件代码生成 毫末React Native组件开发规范
- RN 页面代码生成 毫末React Native页面开发规范
- Flutter 组件代码生成 毫末Flutter页面开发规范
- Flutter 页面代码生成 毫末Flutter页面开发规范
imgcook cli 能力
imgcook-cli 可以结合 Plugin 的能力将 imgcook 平台生成的代码产物一键放置到本地项目工程里，我们通过 cli 命令行下载代码到本地项目文件中。
imgcook plugin 插件能力
在使用 imgcook cli 下载代码时，可以通过配置自定义 plugin 对 imgcook 平台生成的代码产物加工处理，我们自定义了 @imgcook/hm-replace-component 插件，用于将我们在编辑器中设置的组件属性替换为自己的组件。
相关链接
向团队介绍 imgcook
如果希望团队用上 imgcook D2C 能力，但又不知道如何介绍 imgcook，我们帮你准备好了介绍文案和 PPT，快来自取吧~
1、组织一个分享会
我们可以将团队同学们召集在一起，组织一个团队内部的分享会，介绍下研发提效利器 imgcook。
2、播放 imgcook 的产品介绍视频
可以播放一下 imgcook 的产品介绍视频，让大家对 imgcook 的功能有一个全方位的了解。视频链接：
或者您也可以直接在 imgcook 网站现场演示。
介绍文案：
imgcook 是阿里巴巴对外开放的一个设计稿智能生成代码平台，可以将 Sketch、PSD、Figma、图片等类型的设计稿一键生成可维护的前端代码，例如 React、Vue、小程序等，还可以自定义生成的代码。
我们可以安装 Sketch、Photoshop、Figma 插件使用插件导出图层数据到 imgcook 或者直接在 imgcook 编辑器中上传设计稿文件解析，然后在imgcook 编辑器中查看生成的代码。
3、详细介绍 imgcook 使用动线
介绍文案：
- 1、导入设计稿，支持从 imgcook 插件导出生成代码或上传设计稿文件解析生成代码两种方式。
- 2、提供设计稿协议支持用户人工标记图层来生成代码（对于目前imgcook处理不是很好的场景都可以用这种方式解决）
- 3、imgcook 智能生成的原理是将描述设计稿文件的 JSON Schema 经过设计稿协议、程序算法和机器学习算法的分析、计算和识别，转换成一个具有合理的 Flex 布局嵌套结构和代码语义的 imgcook JSON Schema，然后再将这个 Schema 用各种不同 DSL 转换函数转换成各种不同类型的前端代码。
- 4、imgcook JSON Schema 可以在 imgcook 编辑器中查看，我们可以在可视化编辑器中修改视图、样式等，本质是修改这个 JSON Schema。
- 5、查看代码，本质是将最终的 imgcook JSON Schema 输入给自定义的 DSL 转换函数，函数的输出就是前端代码。
4、可以举例说说哪些团队是如何使用的
本文档有一些用户使用案例，可以给大家看一下，包括 imgcook 开放的能力。后续用户案例会在 imgcook 官网透出。
5、了解 imgcook 的小缺陷，可以帮助更好的使用
imgcook 虽然能够自动生成可维护性较高的代码，但设计稿图层千变万化，有一些场景目前还没有覆盖到。例如：
- 设计稿关联图层合并问题：氛围、背景、图标等在设计稿中由多个图层组成，生成代码是需要合并导出成一张图片
- 布局合理性问题：imgcook 生成的布局嵌套结构不合理或不符合预期
- UI 逻辑代码生成问题：设计稿中的数据是静态的，实际线上数据是动态的，会带来一些 UI 的变化，但这些 UI 变化在设计稿转代码时无法获知
对于这些问题，imgcook 提供了设计稿协议支持用户手动干预图层的方式来解决，也可以在生成之后在 imgcook 编辑器中可视化调整。
6、了解更多
imgcook 有钉钉用户群，如果使用上有问题可以在群里提问。可以关注 imgcook 官网和掘金账号关注进展。
用户案例征集
如果您的团队接入了 imgcook 提供的 D2C 服务或者您自己有使用 imgcook 的心得，欢迎在本文评论区留言或直接贴上文章链接（ATA、掘金、知乎等技术分享网站均可）。
将有机会获得 imgcook 定制礼品。
如果有使用问题，欢迎入群。阿里内部用户请加入 imgcook 内部上帝群，社区用户请加入 imgcook 社区上帝群。
