大家好，我是若川。在這充滿網絡促銷活動的幾個月，倍感壓力的，除了你的口袋，是否還有程序員的發量呢？每年的雙十一、雙十二購物狂歡節，各大電商平臺都會上線讓消費者充滿購買欲望的活動頁面，而這些活動頁面大多都是靜態頁面，只是為一些商品提供一個入口，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運行項目
項目順利運行，并且底部的tabbar也都正常定位
我用十分鐘完成了上面的操作，解決一百張頁面的代碼全部生成完畢！在用剩下的3天完成一些邏輯部分，怎么樣？有沒有被這個強大的智能代碼生成震撼到呢？從此，前端工程師再也不用寫無聊的靜態樣式代碼啦！
效率
整體來說，從生成活動頁面，和商城頁面來說，基礎樣式布局是很完美的，節約了大量的時間成本，讓開發者專注于業務邏輯的處理，將后端獲取的數據直接渲染在頁面上即可，不再因為UI小姐姐的繁瑣布局而頭疼，真正的提升了開發者的效率。
感受
面對如今活動平凡，花樣繁雜的需求，配合使用codefun真正可以做到 部門領導 們要求的低成本、高效率、高產出。將前端工程師的時間花在刀刃上！重要的是codefun不管是針對UI設計師還是前端開發者都是零成本使用，設計師在設計時并不需要使用什么特別標注或者規范以供codefun識別，只需要根據自己的設計習慣將界面設計完成就好，codefun會根據其AI算法將設計文稿智能編組。前端工程師也只需要將生成代碼復制或者下載使用即可。
團隊使用codefun之后也降低了開發和UI的溝通成本。設計文稿完成后直接用codefun上傳，然后將項目跑起來和UI進行確定即可，而不是項目做了一半才發現布局的不合適。
更多詳情和疑問，可以加群獲取技術支持哦！
)
