CodeFun是一款相當優(yōu)秀的UI設計稿智能生成源代碼的工具，CodeFun可以精準還原設計稿，不再需要反復UI走查，節(jié)省您大量的繁瑣工作如像扣像素、調(diào)布局等，歡迎需要此款工具的朋友前來下載使用。

基本簡介

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

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

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

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

功能介紹

　　在準備完環(huán)境后，接下來為大家介紹如何在 1 分鐘內(nèi)將設計稿轉(zhuǎn)換為小程序源代碼。

　　快速上手的教程將以上傳 Sketch 設計稿的流程作為范本介紹。Photoshop使用插件上傳之后流程與Sketch一樣。

　　CodeFun 的使用流程只有 3 個步驟：

　　在 Sketch 插件中上傳設計稿

　　在 CodeFun 工具中查看代碼

　　將生成的代碼拷貝到自己已有的工程中即可

　　上傳設計稿

　　加載一份 Sketch 設計稿，然后插件菜單中打開 CodeFun 插件界面。

　　Sketch 菜單 > 插件 > CodeFun > 上傳設計稿

　　在插件上登錄賬號

　　通過插件創(chuàng)建一個項目

　　然后選擇項目和上傳頁面。

　　選中賬號，選擇需要上傳到哪個團隊中

　　選擇項目空間，表示當前上傳的頁面將放置到指定項目空間，這里選擇默認的個人空間

　　選擇項目，表示當前上傳的頁面將放置到指定的項目空間中具體項目下，這里選擇剛剛創(chuàng)建的 演示案例 項目

　　選擇上傳的頁面，可以選擇單張或上傳全部頁面

　　例子中有 3 個頁面，這里選擇【該頁面全部畫板】。 上傳完成后，點擊【查看項目】按鈕。

　　回到 CodeFun 工具界面，看到剛才上傳的頁面。

　　查看代碼

　　選擇一張設計稿，進入詳情頁

　　詳情頁總體分為左中右三部分

　　左邊欄顯示文檔樹，后文稱 DOM Tree，該樹結(jié)構跟 HTML 的樹結(jié)構保持一致

　　中間是畫布區(qū)域，可以用于選擇元素對象

　　右邊欄是被選節(jié)點的屬性面板，用于展示樣式屬性、交互配置和組件配置

　　點擊頂部工具欄右上角的查看代碼按鈕，打開代碼面板

　　代碼面板中默認展示 4 列，分別展示 HTML、CSS、JS 和全局樣式的代碼。

　　第一次打開時，會默認展示設置面板，如果不做任何修改，那么查看到的是小程序平臺的原生代碼。

　　依次點擊復制按鈕，很方便地將代碼拷貝到系統(tǒng)的粘貼板中。

　　得到 v-for 代碼

　　對于 List、Grid 而言，我們希望得到的代碼遵循一種可循環(huán)的模式，能夠根據(jù)數(shù)據(jù)的長度而自動變化，而不是靜態(tài)元素的重復拼湊，所以它們在 HTML 上應該是類似 VUE 中 v-for 的寫法。

　　CodeFun 可以支持輸出 v-for 模式，以頁面中下方的 List 為例，講解如何得到循環(huán)代碼。

　　首先，在代碼面板中點擊右上角的【設置】按鈕，打開【輸出為循環(huán)列表】的選項，打開這個全局選項后，頁面中被打上 List、Grid 這類循環(huán)列表標簽的元素，都將翻譯成 v-for 的模式。

　　接下來為需要 v-for 的區(qū)域打上 List 標簽，選中 List 最外層的 View 節(jié)點。

　　點擊 Viewport 右上角的【標簽】按鈕，打開標簽面板，然后選擇 【List】 標簽。 目的是將區(qū)域標記為 List。

　　確保打標簽時 List View 節(jié)點應該是被選中的狀態(tài)。

　　標記完成后，List 區(qū)域的代碼變?yōu)榛?v-for 的寫法。

　　數(shù)據(jù)綁定

　　一個正常的列表由于其數(shù)據(jù)是從后端讀取得到的，所以在 HTML 中的代碼通常是需要用變量去綁定，當變量內(nèi)容更新時，頁面展示的效果也同時更新。

　　現(xiàn)在的代碼雖然是基于 v-for 風格的，但里面的圖片、文本的數(shù)據(jù)依然還是靜態(tài)的。

　　接下來，我們把這些靜態(tài)元素替換成 JS 中的動態(tài)變量。

　　首先，打開代碼設置面板，開啟 DataBinding 輸出模式

　　由于【CSS】面板和【全局樣式】面板暫時不需要用到，所以先關掉對應的選項隱藏它們。

　　選中 List 的最外層 View，然后點擊 Viewport 右上角的【數(shù)據(jù)綁定】按鈕，

　　頁面右邊出現(xiàn)數(shù)據(jù)綁定面板，面板展示的是 JS 中變量的名字，默認情況下頁面中的元素都是靜態(tài)的，并非取自 JS 變量，所以面板中的內(nèi)容都是空的。

　　這里對 List 區(qū)域中的變量進行命名。

　　在 List 右邊的輸入框中填寫 dataList，表示列表的數(shù)據(jù)來源于一個叫 dataList 的變量。

　　列表成員中都有一個圖片，這里只需要填寫第一個成員即可，這里填寫它的變量名叫 iconImg。每個成員的上方都有一行文字，變量命名為 title，最后關于折扣的元素命名為 discount。

　　填寫完畢后，點擊右下角保存按鈕。

更新日志

　　組件化 & 功能優(yōu)化

　　- 微信小程序核心場景樣式還原

　　- 新增文字換行清除工具

　　- 新增顏色單位支持配置

　　- 新增元素寬高選中顯示

　　- 算法優(yōu)化 & 問題修復

　　- PS Plugin 0.4.3

　　- Figma Plugin 0.2.2

　　- 即時設計 Plugin 0.2.2

　　- Sketch Plugin 0.9.56