CodeFun是一款可以幫助我們只能生成UI的源代碼工具，很多設(shè)計(jì)師都是先設(shè)計(jì)后端然后在設(shè)計(jì)前端，其實(shí)這有一些本末倒置了，因?yàn)槲覀冃枰?jīng)過(guò)前端的排版和設(shè)計(jì)在設(shè)計(jì)后臺(tái)代碼才會(huì)更好看，今天小編帶來(lái)的這款軟件可以幫助我們進(jìn)行意見(jiàn)是生成后臺(tái)代碼，快來(lái)試試吧！

軟件功能

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

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

CodeFun 的使用流程只有 3 個(gè)步驟：

在 Sketch 插件中上傳設(shè)計(jì)稿

在 CodeFun 工具中查看代碼

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

上傳設(shè)計(jì)稿

加載一份 Sketch 設(shè)計(jì)稿，然后插件菜單中打開(kāi) CodeFun 插件界面。

Sketch 菜單 > 插件 > CodeFun > 上傳設(shè)計(jì)稿

在插件上登錄賬號(hào)

通過(guò)插件創(chuàng)建一個(gè)項(xiàng)目

然后選擇項(xiàng)目和上傳頁(yè)面。

選中賬號(hào)，選擇需要上傳到哪個(gè)團(tuán)隊(duì)中

選擇項(xiàng)目空間，表示當(dāng)前上傳的頁(yè)面將放置到指定項(xiàng)目空間，這里選擇默認(rèn)的個(gè)人空間

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

選擇上傳的頁(yè)面，可以選擇單張或上傳全部頁(yè)面

例子中有 3 個(gè)頁(yè)面，這里選擇【該頁(yè)面全部畫板】。 上傳完成后，點(diǎn)擊【查看項(xiàng)目】按鈕。

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

查看代碼

選擇一張?jiān)O(shè)計(jì)稿，進(jìn)入詳情頁(yè)

詳情頁(yè)總體分為左中右三部分

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

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

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

點(diǎn)擊頂部工具欄右上角的查看代碼按鈕，打開(kāi)代碼面板

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

第一次打開(kāi)時(shí)，會(huì)默認(rèn)展示設(shè)置面板，如果不做任何修改，那么查看到的是小程序平臺(tái)的原生代碼。

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

得到 v-for 代碼

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

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

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

接下來(lái)為需要 v-for 的區(qū)域打上 List 標(biāo)簽，選中 List 最外層的 View 節(jié)點(diǎn)。

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

確保打標(biāo)簽時(shí) List View 節(jié)點(diǎn)應(yīng)該是被選中的狀態(tài)。

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

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

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

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

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

首先，打開(kāi)代碼設(shè)置面板，開(kāi)啟 DataBinding 輸出模式

由于【CSS】面板和【全局樣式】面板暫時(shí)不需要用到，所以先關(guān)掉對(duì)應(yīng)的選項(xiàng)隱藏它們。

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

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

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

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

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

填寫完畢后，點(diǎn)擊右下角保存按鈕。