脱离切图仔,教你智能生成前端代码 [必学]

写在开头

• 什么是Sketch?
• 什么场景会需要智能生成代码？
• 智能化开发,生成代码的原理是什么？
• 什么是Sketch插件，如何开发？（请看公众号第二条，京东凹凸实验室的文章，开发Sketch插件的实践）

带着这些问题，来阅读本文吧

环境准备

• MAC系统、Skecth软件、Skecth插件、imgcook网站

https://imgcook.taobao.org/

• Skecth推荐使用破解版，这个网上搜索一下
• 然后启动Skecth后，下载安装imgcook插件
• 然后倒入你的Sketch项目，选中对应的模块，到处数据

由于我这里负责的业务比较核心敏感，就拿官方案例的Skecth文件来做示例

正式开始

• 倒入对应的Skecth文件后

• 选中对应的需要生成模块，选中后点击导出数据

• 导出成功后，会将相关数据写入到系统粘贴版，此时我们读取出来

{"type":"Block","id":"Block_1","__VERSION__":"2.0","props":{"style":{"width":750,"height":348},"attrs":{"x":0,"y":0}},"children":[{"__VERSION__":"2.0","props":{"style":{"width":750,"height":348,"backgroundColor":"rgba(255,255,255,1)","overflow":"hidden"},"attrs":{"x":0,"y":0}},"selfId":"70CC9868-1AC8-486E-84E3-75887F3A10A6","children":[],"nodeLayerName":"Rectangle","type":"Shape","id":"Shape_0"},{"__VERSION__":"2.0","props":{"style":{"width":364,"height":80,"color":"rgba(153, 153, 153, 1)","fontFamily":"PingFang SC","fontSize":26,"fontWeight":300,"lineHeight":40,"opacity":1},"attrs":{"x":354,"y":88,"text":"画面清晰流畅，佩戴舒适且操作简便，能给你优质使用体验","lines":2}},"selfId":"25E60004-A8C6-4691-81A3-CDA67EEF76D70","nodeLayerName":"画面清晰流畅，佩戴舒适且操作简便，能给你","type":"Text","id":"Text_1_0"},{"__VERSION__":"2.0","props":{"style":{"width":39,"height":28,"color":"rgba(34, 170, 255, 1)","fontFamily":"PingFang SC","fontSize":24,"fontWeight":400,"lineHeight":28,"opacity":1},"attrs":{"x":687,"y":284,"text":"152","lines":1}},"selfId":"4BD9A28A-CCE8-4E25-9051-77FDEB978EFD0","nodeLayerName":"152","type":"Text","id":"Text_2_0"},{"__VERSION__":"2.0","props":{"style":{"width":36,"height":36},"attrs":{"x":642,"y":280,"source":"https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/4543191097ed11eaab429db2572494df.png","originStyles":{"backgroundColor":"rgba(34,170,255,1)"}}},"selfId":"07F98BC9-BC4E-473C-B20F-20380FBCA7B5","children":[],"nodeLayerName":"Combined Shape","type":"Image","id":"Image_3"},{"__VERSION__":"2.0","props":{"style":{"width":288,"height":34,"color":"rgba(51, 51, 51, 1)","fontFamily":"PingFang SC","fontSize":30,"fontWeight":600,"lineHeight":34,"opacity":1},"attrs":{"x":354,"y":40,"text":"惠普MR混合现实眼镜","lines":1}},"selfId":"1CC6F0E4-0531-4836-8857-D4DF39FC8CA50","nodeLayerName":"惠普MR混合现实眼镜","type":"Text","id":"Text_4_0"},{"__VERSION__":"2.0","props":{"style":{"width":300,"height":300,"overflow":"hidden"},"attrs":{"x":24,"y":24,"source":"https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/45c2f77097ed11ea9ffb4d12d04995ca.png","originStyles":{"backgroundColor":"rgba(0,0,0,0.02)","borderTopLeftRadius":12,"borderTopRightRadius":12,"borderBottomRightRadius":12,"borderBottomLeftRadius":12}}},"selfId":"20DE93EB-3C70-4903-AA0E-5474EEA9E014","children":[],"nodeLayerName":"Rectangle 2 Copy","type":"Image","id":"Image_5"},{"__VERSION__":"2.0","props":{"style":{"width":300,"height":300},"attrs":{"x":24,"y":24,"source":"https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/4764c09097ed11ea8f4f8bb23c14090e.png"}},"selfId":"281A54D6-33E9-4186-8A4E-313B1D2FCCC9","children":[],"nodeLayerName":"Bitmap","type":"Image","id":"Image_6"}],"layerProtocols":[],"artboardImg":"https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/44c584a097ed11ea84362f052c062532.png","taskId":"445C667DA4BE50E086C299DD221AA5F6-1589685595582","name":"Group 8 Copy 23","pluginVersion":"2.2.0","reference":"sketch"}

• 这就是导出的数据，此时我们点击去粘贴后，会自动帮我们打开网站，然后将数据粘贴到空白处

• 接着imgcook帮我们将数据变成可视化的形式渲染出来，并且此时可以配置布局、事件、样式等

• 例如此时我需要给图片添加事件

• 有点在线编程+设计器模式的形式，我们公司移动端也是可以这样开发一些功能

生成代码

• 我们写好代码好，点击保存

这个需要先自己创建对应的组织和项目才能保存

• 保存成功后，一键生成各种不一样的代码。

生成的代码质量和样式还原度

• 这是刚才生成的React规范JS代码，以及样式文件

'use strict';

import React, { Component } from 'react';

import styles from './style.js';

class Block_0 extends Component {
  render() {
    return (
      <div style={styles.mod}>
        <div style={styles.box}>
          <img
            style={styles.primary}
            onClick={(e) => {
              console.log('onclick');
            }}
            src={'https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/7aa1833097ed11eaaa44854a54132a4d.png'}
          />
          <div style={styles.side}>
            <span style={styles.title} lines={undefined}>
              惠普MR混合现实眼镜
            </span>
            <span style={styles.summary} lines={undefined}>
              画面清晰流畅，佩戴舒适且操作简便，能给你优质使用体验
            </span>
            <div style={styles.wrap}>
              <img
                style={styles.icon}
                src={'https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/784ff21097ed11ea9ffb4d12d04995ca.png'}
              />
              <span style={styles.num} lines={undefined}>
                152
              </span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default Block_0;

• 样式文件:

export default {
  mod: { width: '750px', height: '348px' },
  box: {
    display: 'flex',
    alignItems: 'flex-start',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#ffffff',
    width: '750px',
    height: '348px',
    overflow: 'hidden',
  },
  primary: { marginTop: '24px', marginRight: '30px', width: '300px', height: '300px' },
  side: { display: 'flex', alignItems: 'flex-start', flexDirection: 'column', marginTop: '40px', height: '276px' },
  title: {
    position: 'relative',
    opacity: 1,
    maxWidth: '384px',
    height: '34px',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    lineHeight: '34px',
    whiteSpace: 'nowrap',
    color: '#333333',
    fontSize: '30px',
    fontWeight: 600,
  },
  summary: {
    WebkitLineClamp: '2px',
    position: 'relative',
    opacity: 1,
    marginTop: '14px',
    width: '364px',
    height: '80px',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    lineHeight: '40px',
    color: '#999999',
    fontSize: '26px',
    fontWeight: 300,
  },
  wrap: {
    display: 'flex',
    position: 'relative',
    alignItems: 'center',
    alignSelf: 'flex-end',
    flexDirection: 'row',
    marginTop: '112px',
    width: '84px',
    height: '36px',
  },
  icon: { marginRight: '9px', width: '36px', height: '36px' },
  num: { opacity: 1, lineHeight: '28px', whiteSpace: 'nowrap', color: '#22aaff', fontSize: '24px', fontWeight: 400 },
};

• 我们跑在React实际项目中打开，看看效果

• 布局和样式都没问题，事件绑定也是正常，运行无报错

已经实现一键生成代码，它的原理是什么？

• 底层实现:Pipcook

https://github.com/alibaba/pipcook

Pipcook的介绍

• 旨在使JavaScript工程师能够在没有任何先决条件的前提下利用机器学习的力量，并拥有将前端技术领域引领至智能化的愿景。Pipcook将成为机器学习和前端交互的跨领域领域的JavaScript应用程序框架。
• 我们确实是为前端和机器学习应用程序设计Pipcook的API，并专注于前端领域并从JavaScript工程师的角度进行开发。本着对JavaScript友好的原则，我们将推动机器学习工程的发展。因此，我们开设了一个有关 机器学习应用程序API的问题，并期待您的参与。

什么是Pipcook

• Pipcook可以从上到下分为以下3层。
• Pipcook应用，它定义了灵活而直观的API，以构建机器学习应用程序，即使您不了解算法的细节。
• Pipcook核心，它用来表示由Pipcook插件组成的ML管道。该层确保整个系统的稳定性和可伸缩性，并使用插件机制来支持丰富的功能，包括：数据集，培训，验证和部署。
• Pipcook桥接至Python，对于JavaScript工程师而言，最困难的部分是生态系统中缺少成熟的机器学习工具集。为此，我们在底部打开了Python和Node.js之间的交互，可以轻松地调用一些缺少的API。
• Pipcook年度计划

评价imgcook

• 对于快速生成代码的场景，需要考虑，什么时候你需要快速生成代码？
• 代码质量是没有问题的，样式布局还原度非常高
• 目前代码智能化生成还属于内测阶段？ 相信未来会越来越好
• 对于重复低难度的前端开发任务，应该会被智能化取代

往期精彩推荐:

• 从零手写一个websocket协议
• 从零手写微前端框架
• 从零手写一个React框架
• 从零实现webpack热更新

最后

• 欢迎加我微信(CALASFxiaotan)，拉你进技术群，长期交流学习...
• 欢迎关注「前端巅峰」公众号,认真学前端，做个有专业的技术人...
• 点个在看/赞支持我吧，转发就更好了

本文使用 mdnice 排版