前端摸魚神器，設計稿一鍵導出 「小程序/Vue/Uni-app」代碼

2021 年過一半了，各位切圖還開心嗎？

最近我遇到這個事情。

emmm，這位產品小兄弟，說好只加 3 個頁面，最後硬是讓產品加了 6 個頁面，差點湊齊七個小矮人了，後面的 UI 稿就像這樣（考慮到公司利益，本文采用網上案例做爲參考）：

（資源出自網絡，百度雲盤連接: pan.baidu.com/s/1aaPwQevg… 提取碼: z2w7）

打工人何須爲難打工人。面對這兩排頁面，對於 CSS 比較弱的我來講，簡直噩夢。

正當我苦惱着，忽然想起上次同事推薦給個人一款切圖神器看來能夠用起來了。

這款神器究竟是啥？

這款神器就是「CodeFun」，它號稱「UI 設計稿智能生成源代碼，10 分鐘完成 8 小時工做量」，讓咱們作前端，不搬磚。

那就試試看~

體驗一把一鍵生成代碼

說幹就幹，我按照官網介紹的三個步驟，順利將 UI 稿件，並轉換爲 Vue.js 代碼了，看下最終效果：

從導入文件到導出代碼，先後只花了三分鐘，簡直不要太爽了

說說使用方法吧~

「CodeFun」官網上介紹的快速上手流程，只需 3 個步驟便可從 UI 稿到生成項目代碼。（該不會吹牛吧）

依葫蘆畫瓢，首先我按照官網說明，安裝好「CodeFun」插件，而後準備好 sketch 素材（也支持 PS 素材）：

而後開始三個步驟（省略安裝插件過程）：

直接打開 sketch 文件後，在頂部「插件」菜單，選擇「CodeFun」的「上傳設計稿」菜單：

而後在彈框中登陸帳號，並選擇建立的「項目」和「畫板」：

而後點擊「上傳」，等待上傳完成後，後臺便立刻能看到咱們導入的項目，而且每一個頁面整齊擺放，咱們隨便打開一個頁面看看：

熟悉的代碼，熟悉的 HTML/CSS/JavaScript 映入眼簾。 而後試試導出項目代碼，能夠自行選擇導出「微信小程序」或者「Vue.js」項目，還有選擇導出的是 rpx 單位仍是 px 單位，簡直太貼心了！

說說簡單體驗後的感覺

太香了，咱們能夠根據項目須要，選擇生成 H5 或者小程序代碼，還原度極高，很符合官網介紹的特色「精準還原設計稿，生成如工程師手寫通常的代碼」。

固然，畢竟是自動生成，可能存在部分不完美的地方（爲CodeFun加🍗），在實際項目部署前，咱們花點時間作樣式微調，而後加上本身的業務處理邏輯，就能夠啦。

這給我省下太多切圖時間了！

固然，這裏只是簡單介紹，你們能夠體驗下（官網：code.fun），而後結合文檔，相信你會頗有收穫~

CodeFun 還有哪些強大功能？

在我翻閱「CodeFun」文檔時，發現它居然還有好多強大的功能。

1.強大的 List 標籤組件

List 標籤組件用於循環列表，它的強大之處在於，能夠自動將類似的列表內容，並自動識別爲 List 標籤，生成 v-for 風格的代碼。那麼咱們眼見爲實，如下面頁面評論列表爲例，試試看：

紅色框內容設置爲 List 標籤後，生成代碼以下（須要開啓「將 List 標籤輸出爲循環列表」）：

<div class="flex-col list">
  <template v-for="(item, i) in listJWuhbbAm">
    <div class="list-item flex-col" :key="'item' + i">
      <div class="top-group flex-row">
        <img class="image_15" :src="item.avatar" />
        <div class="right-group flex-col">
          <span class="text_20">{{item.name}}</span>
          <span class="text_22">{{item.date}}</span>
        </div>
      </div>
      <span class="text_24">{{item.desc}}</span>
    </div>
  </template>
</div>
複製代碼

其 JS 代碼以下（須要開啓「數據綁定輸出模式」）：

export default {
  data() {
    return {
      "listJWuhbbAm": [{
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016341787250137.png",
        "name": "曉曉曉",
        "date": "2019-02-26",
        "desc": "很是的好，乾淨整潔，衛生作得很到位，房東人很好，離地鐵站很近，五星好評，推薦哦！"
      }, {
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016342203168767.png",
        "name": "啦啦菇涼",
        "date": "2019-02-16",
        "desc": "很是的好，乾淨整潔，衛生作得很到位，房東人很好，很負責任，離地鐵站很近，生活方便，附近不少美食街，大型購物廣場，五星好評，推薦推薦哦，來了你就不想走的地方…"
      }, {
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016343523144906.png",
        "name": "不告訴你",
        "date": "2019-02-16",
        "desc": "西天的晚霞揮動着絢麗的紗巾，晚風吹起來，一支支狗尾草搖響一渠黃昏的抒情曲。一排排白色的小木屋出現了，像童話通常精緻，又像夢同樣美麗。"
      }]
    };
  },

};
複製代碼

和咱們實際業務開發同樣，這裏的 List 列表也是共用 CSS 樣式代碼的：

.list-item {
  padding: 27rpx 28rpx 28rpx;
  border-bottom: solid 2rpx rgb(245, 245, 245);
}

.list {
  margin-top: 15px;
}
複製代碼

是否是很香，用着還很方便~👍

2.優秀的 Grid 佈局

在業務開發中，常常會遇到如「多列操做按鈕」這種網格類的佈局需求，以下圖紅色框內容：

考慮到不一樣尺寸屏幕的適配問題，常常須要對佈局進行特殊設置，經常使用就有 Grid 佈局，在「CodeFun」中，就支持自動將設計稿中這類 UI 生成爲 Grid 佈局代碼，簡單操做後，上圖轉化爲下面代碼：

<div class="grid">
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485084464827.png" class="image_7" />
    <span class="text_9">附近</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485093876260.png" class="image_7" />
    <span class="text_9">市區</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485107042498.png" class="image_7" />
    <span class="text_9">寫字樓</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485084464827.png" class="image_7" />
    <span class="text_9">郊區</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485093876260.png" class="image_7" />
    <span class="text_9">公寓</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485107042498.png" class="image_7" />
    <span class="text_9">城中村</span>
  </div>
</div>
複製代碼

樣式代碼以下：

.grid-item {
  padding: 9px 0;
}

.grid {
  margin: 9px 12px 0 11px;
  color: rgb(51, 51, 51);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  white-space: nowrap;
  height: 162px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
複製代碼

這就很讚了。

3.靈活的組件類型

當咱們須要設置頂部 header 或者底部固定 footer 時，只需將組件類型設置成 Header 或者 Footer 標籤便可：

4.方便的路由跳轉設置

對於前端應用，常常須要在不一樣頁面進行跳轉，「CodeFun」也支持設置頁面路由跳轉：

生成了下面的 JS 代碼：

export default {
  data() {
    return {};
  },
  methods: {
    view_21OnClick() {
      this.$router.push({
        name: 'index'
      });
    }
  }
};
複製代碼

在「CodeFun」使用過程當中，加上這幾個功能，已經能知足咱們大部分的切圖場景了，節省下來的切圖時間，可讓咱們有更多時間用來處理業務邏輯。cool👍

對 CodeFun 的思考

當咱們在項目中開始使用 「CodeFun」，會發現咱們業務研發流程悄悄發生了變化，下圖對比了兩種業務研發流程：

顯然，新的研發流程搭配「CodeFun」，會更加靈活且高效~

體驗總結

體驗了幾天「CodeFun」後，說說個人一些建議：

1. 能夠增長對 React/Angular 等前端框架的支持；（爲了能照顧到更多用戶哈）
2. 「數據綁定」模塊的交互不夠直觀，對新手可能很難理解如何去進行配置。（能夠作得更直觀一點）

我認爲「CodeFun」重要的價值在於：利用高效的識別特色，大幅度幫助前端工程師從繁瑣的頁面切圖中解放出來。經過較低的學習成本，讓使用者能更加簡單且高效的完成需求。

目前「CodeFun」產品還在快速迭代，建議你們在使用過程當中，儘可能避免使用太過複雜的 UI 稿，可能會存在生成效果的誤差（相信「CodeFun」工程師們已經在努力減少這些誤差），但其實也還好，咱們能夠在生成的代碼中，適當作一些調整便可。

perfect~!

看到這裏，是否是很激動！

點擊官網立刻體驗

code.fun

點個「贊」吧，爲「CodeFun」工程師們加🍗