大家好，我是若川。在這充滿網絡促銷活動的幾個月，倍感壓力的，除了你的口袋，是否還有程序員的發量呢？每年的雙十一、雙十二購物狂歡節，各大電商平臺都會上線讓消費者充滿購買欲望的活動頁面，而這些活動頁面大多都是靜態頁面，只是為一些商品提供一個入口，UI設計小姐姐設計完頁面之后交給前端程序員，然后程序員就開始無聊繁瑣的搬磚。如果有一款神器，可以直接將UI小姐姐的設計稿轉換成頁面代碼，是否能讓廣大前端開發者大呼萬歲？

---

神器來了！

正常項目流程

使用神器之后

CodeFun是什么？

CodeFun 是一款 UI 設計稿智能生成源代碼的工具，可以將 Sketch、Photoshop 的設計稿智能轉換為前端源代碼。它最大的特色是：

• 精準還原設計稿，不再需要反復 UI 走查

• 可以生成如工程師手寫一般的代碼

在日常工作中，諸如像扣像素、調布局這些繁瑣、枯燥的體力活都將得到極大的削減，原來 8 小時的工作量只需要 10 來分鐘即可完成。

官網鏈接掃碼識別進入

掃碼一鍵注冊產品，限時免費體驗

設計稿格式與輸出平臺

目前主流的 UI 設計軟件有 Sketch、Photoshop、XD 和 Figma，目前 Sketch和PS 版本已完美支持，XD和Figma插件正在開發。

設計稿格式操作方式支持程度備注

Sketch	插件上傳	? 完美支持
PSD	插件上傳	? 完美支持
SVG	Web 端文件上傳	? 技術預覽版	可以將 PSD / XD 先導出為 SVG 再上傳
XD	插件上傳	🕜 后續支持
Figma	插件上傳	🕜 后續支持	目前可以導出為SVG格式再上傳

設備終端和平臺

設備平臺支持程度框架/語言

微信小程序	? 支持	原生 / uni-app/taro
移動端 H5	? 支持	vue /react
混合 App	? 支持	uni-app / taro
桌面 Web	🕜 后續支持	vue / react
原生iOS	? 暫不支持
原生Android	? 暫不支持

安裝插件

PS插件安裝使用

CodeFun的ps插件最低支持到PS2018版本，所以大家在安裝之前，要檢查一下自己的ps版本哦！

進入官網下載 ?ps插件

雙擊下載的codefun.psplugin.v0.3.3.exe（Windows）或者codefun.psplugin.v0.3.3.pkg（macOS）安裝包

重啟ps

PS菜單欄 -> 窗口 -> 擴展 -> CodeFun

根據上操作，看到下圖，說明PS插件安裝成功啦！

然后掃碼登陸，選中要上傳的頁面，點擊上傳就能在CodeFun的操作面板上看到剛剛上傳的設計稿了

進入CodeFun的操作面板

Sketch插件安裝使用

CodeFun的sketch插件最低支持到55版本，所以大家在安裝之前，也要檢查一下自己的sketch版本哦！

進入官網下載 ?sketch插件

解壓下載的codefun.sketchplugin.v0.8.8.zip

雙擊codefun.sketchplugin安裝插件

重啟sketch

sketch菜單欄 -> 插件 -> CodeFun

代碼智能生成！！

上面已經將CodeFun插件安裝好了，接下來讓我們感受一下CodeFun帶來的神奇體驗！我們準備了有接近100個頁面的設計稿，來嘗試一下生成這么多頁面的效果如何！

• 上傳完畢后，查看一下控制面板

• 我們選擇一張個人中心的頁面， 這個頁面的組成元素有grid網格布局，下面展示一下CodeFun的代碼生成質量

• Grid網格布局代碼：

<view?class="grid"><view?class="grid-item?flex-col?items-center"><image?src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613cb91e630da20011c12dc4/61863a440163bf0011e2b27b/16361874744191462784.png"?class="image_6"?/><text?decode="decode"?class="text_5">訂單管理</text></view><view?class="flex-col?grid-item_1"><view?class="flex-col?items-center?group_11"><image?src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613cb91e630da20011c12dc4/61863a440163bf0011e2b27b/16361874745742912089.png"?class="image_6"?/><view?class="flex-col?items-center?badge"><text?decode="decode">2</text></view></view><text?decode="decode"?class="text_8">報告管理</text></view><view?class="grid-item?flex-col?items-center"><image?src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613cb91e630da20011c12dc4/61863a440163bf0011e2b27b/16361874752451304870.png"?class="image_6"?/><text?decode="decode"?class="text_5">發票管理</text></view>………… </view>

• 網格布局css代碼：

.grid-item?{color:?rgb(85,?87,?89);font-size:?24rpx;line-height:?33rpx;white-space:?nowrap;padding:?20rpx?0?20rpx; } .image_6?{width:?64rpx;height:?64rpx; } .text_5?{margin-top:?16rpx; } .grid?{padding:?28rpx?0?22rpx;background-color:?rgb(255,?255,?255);border-radius:?4rpx;height:?354rpx;display:?grid;grid-template-columns:?repeat(4,?1fr); } …… ……

可以注意到上方css中，CodeFun是生成了grid-template-columns: repeat(4, 1fr)這種仿手寫的代碼，而不是使用絕對定位去實現的頁面布局。

我們再選擇一個含有list列表的頁面，看一下CodeFun的識別情況

先上頁面圖

• CodeFun對上圖頁面智能識別的代碼：

<view class="flex-col list"><view class="list-item flex-col" wx:key="*this" wx:for-item="item" wx:for-index="i" wx:for="{{listQ1g7z4kX}}"><view class="top-group flex-col"><text decode="decode" class="text_2">這里是項目名稱</text><text decode="decode" class="text_4">河南省鄭州市新鄭市龍湖鎮紫荊山南路正商智慧城1期智</text></view><view class="bottom-group justify-end"><view class="left-group flex-row"><image src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613cb91e630da20011c12dc4/61863a440163bf0011e2b27b/16361874665570194800.png" class="image_4" /><text decode="decode" class="text_6">編輯</text></view><view class="flex-row"><image src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613cb91e630da20011c12dc4/61863a440163bf0011e2b27b/16361874698077815812.png" class="image_6" /><text decode="decode" class="text_8">刪除</text></view></view></view> </view>

• JS代碼：

Page({data:?{?listQ1g7z4kX:?[null,?null,?null,?null,?null,?null,?null]?},onShareAppMessage()?{return?{};}, });

通過上方代碼不難發現，CodeFun并沒有生成很多冗余的列表代碼，而是使用for循環去實現的。

再來體驗一下CodeFun的數據綁定功能！

• 數據綁定生成的代碼：

<text?decode="decode">{{name}}</text>//?小程序js部分 Page({data:?{?name:?'你好，張小迪'?},onShareAppMessage()?{return?{};}, });

CodeFun已經自動將數據綁定的代碼生成！怎么樣，這一套體驗下來，有沒有讓你心動呢？不要著急，我們將這接近一百個頁面的代碼選擇vue平臺全部下載下來，然后跑起來看看是什么樣的！

點擊右上角下載代碼，選擇平臺為vue，設置好首頁點擊下載

使用開發工具打開下載的項目

在項目運行npm install安裝所需要的依賴

最后使用命令npm run serve運行項目

屏幕錄制2021-11-06 下午5.47.58

項目順利運行，并且底部的tabbar也都正常定位

我用十分鐘完成了上面的操作，解決一百張頁面的代碼全部生成完畢！在用剩下的3天完成一些邏輯部分，怎么樣？有沒有被這個強大的智能代碼生成震撼到呢？從此，前端工程師再也不用寫無聊的靜態樣式代碼啦！

---

效率

整體來說，從生成活動頁面，和商城頁面來說，基礎樣式布局是很完美的，節約了大量的時間成本，讓開發者專注于業務邏輯的處理，將后端獲取的數據直接渲染在頁面上即可，不再因為UI小姐姐的繁瑣布局而頭疼，真正的提升了開發者的效率。

感受

面對如今活動平凡，花樣繁雜的需求，配合使用codefun真正可以做到 部門領導 們要求的低成本、高效率、高產出。將前端工程師的時間花在刀刃上！重要的是codefun不管是針對UI設計師還是前端開發者都是零成本使用，設計師在設計時并不需要使用什么特別標注或者規范以供codefun識別，只需要根據自己的設計習慣將界面設計完成就好，codefun會根據其AI算法將設計文稿智能編組。前端工程師也只需要將生成代碼復制或者下載使用即可。

團隊使用codefun之后也降低了開發和UI的溝通成本。設計文稿完成后直接用codefun上傳，然后將項目跑起來和UI進行確定即可，而不是項目做了一半才發現布局的不合適。

---

更多詳情和疑問，可以加群獲取技術支持哦！

總結

以上是生活随笔為你收集整理的真效率神器，UI稿智能转换成前端代码，准确率极高的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。