脫離切圖仔,教你智能生成前端代碼 [必學]

時間 2020-05-18

標籤脫離智能生成前端代碼必學简体版

原文原文鏈接

寫在開頭

什麼是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年度計劃