場景
1.CodeFun是什么
CodeFun是一款UI 設計稿智能生成源代碼的工具,支持微信小程式端、移動端H5和混合APP,上傳 Sketch、PSD等形式的設計稿，通過智能化技術一鍵生成可維護的前端代碼.
2.學習成本高嗎？
對于前端工程師來說，幾乎沒有學習成本，
對于用慣了藍湖/摹客的前端工程師來說，CodeFun使用流程與前者幾乎一致：設計師上傳完稿件后，工程師打開界面，選擇任意需要的 UI 區域拷貝走想要的代碼即可，只是從原來看標注變成了直接拷貝代碼，
對于設計師來說，完全不需要遵循某些設計規范，
CodeFun 演算法的識別程序并不依賴于設計稿中任何的手工標注、特殊編組或特定規范，所以設計師按照原有的流程和設計風格正常輸出即可，零新增作業量、零學習成本，
如何使用
這部分內容將上傳 Sketch 設計稿的流程作為范本介紹，PSD設計稿還處于內測階段，
CodeFun 的使用流程只有 3 個步驟：
在 Sketch 插件中上傳設計稿
在 CodeFun 工具中查看代碼
將生成的代碼拷貝到自己已有的工程中即可
1、安裝 Sketch 插件
在CodeFun官網注冊好賬號后，登陸CodeFun后在用戶選單中下載插件，
在安裝插件之前，請確保系統中已經裝好 Sketch ，由于 Sketch 只支持 MacOs，所以插件端需要在 MacOs 中操作，使用的 Sketch 的版本建議在 60.0 以上，否則插件可能無法正常作業，
接著，打開 Sketch，插件選單中出現 CodeFun 選項，安裝完成，
上傳設計稿
加載一份 Sketch 設計稿（下載示例設計稿），然后插件選單中打開 CodeFun 插件界面
Sketch 選單 > 插件 > CodeFun > 上傳設計稿
在插件上登陸賬號,通過插件創建一個專案,然后選擇專案和上傳頁面，
- 選擇專案，表示當前上傳的頁面將放置到指定的專案中，這里選擇剛剛創建的 “前端智能化codefun” 專案
- 選擇上傳的頁面，可以選擇單張或上傳全部頁面
例子中有 3 個頁面，想選擇中間頁面作為示例，這里選擇【已選中畫板】，上傳完成后，點擊【查看專案】按鈕，可以先進行代碼的預覽，和圖片資源的查看
以上是單個沒有問題的話,可以進行簡單的跳轉互動，資料系結的操作，可以下載代碼
獲取代碼
用戶在上傳完設計稿后，有兩種獲取代碼的方式：
區域提取代碼
整站打包下載
整站打包下載的方式相對來說比較簡單，這里主要介紹區域提取代碼，這種方式也是我們比較推崇的，用戶可以根據自己的需求，拷貝任意區域的代碼到自己已有的工程專案中，
我們選擇 CodeFun 設計稿，進入詳情頁，如圖所示：
詳情頁總體分為左中右三部分
- 左邊欄顯示檔案樹，后文稱 Dom Tree，該樹結構跟 HTML 的樹結構保持一致
- 中間是畫布區域，可以用于選擇元素物件
- 右邊欄是被選節點的屬性面板，用于展示樣式屬性、互動配置和組件配置
點擊頂部工具列右上角的查看代碼按鈕，打開代碼面板
代碼面板中默認展示 4 列，分別展示 HTML、CSS、JS 和全域樣式的代碼，
第一次打開時，會默認展示設定面板，如果不做任何修改，那么查看到的是小程式平臺的原生代碼，
依次點擊復制按鈕，很方便地將代碼拷貝到系統的粘貼板中，
打開小程式開發工具，分別將這四部分代碼粘貼到小程式相應的檔案中，這樣就可以整頁提取代碼，但有時候頁面中會遇到類似“Tab 標簽頁”、“Swipe 輪播”等互動式組件時，自動生成的整頁代碼并不能支持互動，此時我們就需要區域提取代碼功能,拷貝我們想要區域的代碼到已有的工程專案中
點擊 Dom 樹或者畫布上的任意節點，可以觀察到代碼視窗的代碼會發生變化，這正是 CodeFun 最重要的區域提供功能
注意：當點擊畫布的空白區域時，Dom 樹和畫板都不再選中任何節點，此時代碼視窗將顯示整頁代碼，
官網鏈接直達
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301546.html
標籤：其他