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

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

最近我遇到這個事情。

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

（資源出自網路，百度雲盤連結: http://pan.baidu.com/s/1aaPwQevg1o5qThvT6SidDw 提取碼: 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加🍗），在實際專案部署前，我們花點時間做樣式微調，然後加上自己的業務處理邏輯，就可以啦。

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

當然，這裡只是簡單介紹，大家可以體驗下（官網：http://code.fun），然後結合文件，相信你會很有收穫~

CodeFun 還有哪些強大功能？

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

1.強大的 List 標籤元件

List 標籤元件用於迴圈列表，它的強大之處在於，可以自動將相似的列表內容，並自動識別為 List 標籤，生成 v-for 風格的程式碼。那麼我們眼見為實，以下面頁面評論列表為例，試試看：

紅色框內容設定為 List 標籤後，生成程式碼如下（需要開啟“將 List 標籤輸出為迴圈列表”）： ```html

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

}; 和我們實際業務開發一樣，這裡的 List 列表也是共用 CSS 樣式程式碼的：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 佈局程式碼，簡單操作後，上圖轉化為下面程式碼： ```html

樣式程式碼如下：css .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 程式碼： javascript 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~!

看到這裡，是不是很激動！

點選官網馬上體驗

http://code.fun

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