AI 聯動!現在前端都流行這樣開發~ 效率提升 100%
大家好,我是 零一 ,在你的業務中有沒有遇到很多跟 營銷活動 相關的需求,一般這種需求有以下幾個特點:
-
頁面邏輯簡單
-
頁面樣式風格不統一
-
反覆性
儘管這些需求頁面結構簡單、邏輯不復雜,但也扛不住一星期寫一個這樣的需求,因為是個人都會覺得沒有挑戰性,畢竟只是 切圖 、 寫樣式 、 加個跳轉按鈕 的事情
其實像這樣的開發流程,已經有一套成熟的方案去解決了,那就是 設計稿智能生成源代碼 ,它幫你省去了 切圖 和 寫樣式 的流程,你僅僅只需要關注頁面中一些按鈕點擊後要幹什麼即可。甚至連 UI走查 的步驟都可以省去了,因為頁面本身就是根據 UI 提供的設計稿還原生成的
這種開發方式在我們公司內部也已經推行很久了,確實節省了不少時間,今天給大家來演示一下這整套流程,一步步帶你們體驗~
因為沒辦法拿公司內的平台給大家演示,所以給大家推薦一個業界的設計稿智能生成源代碼工具 —— CodeFun ,本文也用該工具給大家演示
先放一下該工具的網址,感興趣的可以跟着我一步步嘗試
CodeFun:http://code.fun/
前置工作
進到該網站並進行登錄以後,可以先創建一個項目
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393073ac282335746ffdd9561780a6dde7362e6e36c88f37acb22daeb449c6650c6.jpg)
然後選擇一種方式導入我們的設計稿,CodeFun 支持通過插件將一些 UI設計平台 的設計稿導入。因為我平時用 Fgima 比較多,所以我在社區找了一套設計稿來做演示
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393326d36182a4f33ac5b5087fc521d4c78e8e45fdef01d09f16157ccc9cba96774.jpg)
安裝好插件後,我們進入到設計稿中,選擇我們想要生成的頁面,然後點擊菜單中的 Plugin,找到 CodeFun 插件
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b3096d3ca59b275e75b800572a3fbcc428c2b0d88f3244aa04bc961ac5819abe0.jpg)
然後選擇將該設計稿生成的頁面導入到剛才我們創建好的項目中
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b6406b245539f31e7cf12d58fcaa07949255076a56620085d749e131950ecb29c.jpg)
2s 就上傳好了
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b46975c302e9cbda989e9002ebd6d37ec29810d291f89069dcc4772136246940c.jpg)
然後我們點擊 "查看項目" 去看看。可以看到剛才設計稿中頁面幾乎是 1:1 還原出來了,而且從左側的 DOM 結構來看,層級也非常清晰
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bd4a86b11bfeac44f66c5d8f7f4d413c9d9942c2e75eb27ba526ece6517ae8d08.jpg)
藉助 CodeFun 提供的 預覽功能 ,我們看下放到瀏覽器裏是什麼樣的效果
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b5a5b9bc955a322683a8e87764ca019ae35ad0473402303f49c36641f8882f0ba.jpg)
生成以後就會得到一個預覽鏈接,點擊後即可查看
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839371adadbcf27fbc65c39d95819d1ab292d2e451848ca78d10a2676d5bb7965655.jpg)
整體看下來一點問題都沒有,還原度非常得高~
開始使用
不是説設計稿還原代碼嗎?怎麼還原出來的是個頁面?別急,這個頁面背後對應的代碼也早已經自動生成了,我們可以點擊右上角的 "查看代碼"
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229ba2605220912c64de95586bea3c97ed12050cdc9ad6962ade97581c76220ad467.jpg)
我們也可以自己的技術棧選擇不同框架的代碼,目前支持的有 微信小程序 、 uni-app 、 Vue 、 Taro 、 React 、 原生html
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b404bccaf707a61bce0c1f383568af40d7ba383a7b096b0229594dff8b7de388b.jpg)
本文就以 React 的為例,我們將該頁面對應的代碼下載下來,添加一些額外的邏輯
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393d08b37b7cd6b14a03fbfd6f64ba927dd3c5146650ffc6011684deec848b153e5.jpg)
因為頁面中還有一個 " Buy " 的按鈕,點擊以後我們希望直接跳轉到蘋果官網的 iPhone14 購買頁,因此我們在按鈕元素上加個跳轉邏輯
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bdf790f3c864ddcf1ed48bfd28c52c2cc06646f5fc9e0d77e4fb7f01c507e74e4.jpg)
然後本地再跑一下頁面,看下邏輯有沒有問題
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bfb7e2bc995e057b9aaa74c8893dfd4134d9059408a08269280e63df5eedbbecc.jpg)
漂亮!沒問題了,然後該咋上線就咋上線!
像這樣的簡化流程,全程不需要寫切圖、佈局、寫樣式,上線營銷頁面不就是 有手就行 嗎?
進階使用
大家可能覺得剛才的頁面比較簡單,沒法體現這個工具的優勢,接下來拿個稍微複雜一些的頁面給大家舉例子,並展示一些其它功能。
我隨便在 Figma 社區找了一個列表頁面,接下來用 CodeFun 插件將它生成代碼
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229be67694d5be1e0488eab555844798fd0b9a4564e5e72af4e6ea5297fbb30d159f.jpg)
循環列表
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4be3191b09249a08848ad9028e3d008673e6890d89876f1922c36a97d41cf80d25.jpg)
查看左側的 DOM 結構,發現 CodeFun 在還原設計稿時,還通過 AI 只能識別了列表元素,並對其進行了標記,這種結構在我們代碼裏就是通過一個數組去遍歷渲染的,看看它生成的代碼是否也是這樣
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b361fc476d54697a578f01145ec12bb50c3efade579ef89c0240dfdc6c13546ab.jpg)
果然是通過 map 遍歷生成的,不過有個問題就是當前生成的數據都是靜態的
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bfa379ab119ce94880898ae54a15eb280f20e485106a96192ae1294b140897340.jpg)
所以我們可以手動對列表元素裏的單一內容命名一下,使其變成動態數據
點擊上方工具欄裏的 " 數據綁定 "
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b61df987c9fdd185488a0e38a22cf2fac58e9b74862f5c0e3a44fa316bdaaeea1.jpg)
我們能看到 List 列表內的每個小元素都可以對其進行命名,因為 ListItem 結構統一,所以我們只需要對 ListItem-1 進行命名即可
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229baa3959d77f74e5c4695d50f3a6993e5328afbb8f056faaec0665888db38768a4.jpg)
命名完成並保存後,我們來看下對應的代碼變成了什麼樣子
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b5c2904f49e509dbda858a942c4b29ec9c0bc7adbbe61c46faba20ca07ee7b222.jpg)
這樣一來,數據就全變成動態的,是不是非常智能?
行為
另外,我看到這個頁面頂部有一個 " 返回 " 的按鈕,點擊以後的行為肯定是返回上一個頁面,對此 CodeFun 也提供了對應的行為給我們,可以直接在這個元素上添加返回到上一個頁面的行為
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983931a25c5f715c05079e300a9aad0d3c57994f9c8a765b36e9b8c88dd3d2d21fa31.jpg)
組件化
在預覽頁面時,我發現頁面中按鈕的點擊非常生硬,比如點擊以後一點反饋都沒有
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b77dd56b594f23cb36a2665a5d320f68845a4439b455766d8aefdbc2fba88bf03.jpg)
我們知道很多組件庫都有交互反饋,比如按鈕組件,點擊以後會有點擊了的效果,CodeFun 其實也給我們提供了組件化的功能,既支持我們自定義組件,也支持使用 npm 包的組件庫
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b9e829be02f9dbdccd52903d68b2d522a90768a7be806243ec9ebf2fc22b2dc2d.jpg)
而且默認也支持了一些原生組件和三方組件,這裏我們就拿 Vue 框架的 vant2 組件庫來舉例子吧
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b0108209f16acce2c525b72878e0eb290fe60b6aeb57f5de5dc19f96271daea4d.jpg)
在將對應的元素標記了 vant2 的 Button 組件後,右側就可以對組件的各種屬性進行設置了,屬性的使用方式就跟 vant2 組件庫的一致,因此我們可以去官網看使用方式
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b01b719efc6fffa891452bcc15fa685c7a983fee261e3d3337d346f87a6dd3ede.jpg)
簡單填寫了一下組件屬性
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bc11be322d0262d2ad93269daf150561364f4859f2cfb41cd439480220bb9519b.jpg)
看下標記組件後的效果吧
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b174ca5f7024dd3b5d797cd2f3aadf73205178d2dd2b244520cf85c740c564fb1.jpg)
可以看到,我們的按鈕已經有交互的反饋效果了
總結
相信做前端的同學,哪一個也不想一直只做切圖仔,如果本文介紹的 UI 設計稿智能生成代碼 有戳中你的痛點,可以嘗試引入到自己的工作中,看看是否能幫你釋放大量的人力,讓你有更多的時間聚焦到業務邏輯中,把大部分的頁面都交給AI工具。
市面上已經有很多的同學都開始嘗試 UI 設計稿智能生成代碼了(包括我),如果你對這套方案還有什麼疑問,想跟大家交流的,可以進羣跟大家進行互動~ :point_down:
註冊鏈接 :http://ide.code.fun/u/6u16QeO0
優惠券鏈接 :http://ide.code.fun/coupon/63295a92e39132001169072e
兑換碼 :QDYX0920
趕緊點擊體驗吧!
- AI 聯動!現在前端都流行這樣開發~ 效率提升 100%
- Git 還沒完全會用呢,就給它貢獻了代碼!
- 如何基於 HTTP 緩存失效策略實現 Request 緩存?
- 圍觀!我國第一個推進到瀏覽器標準的 ECMaScript 提案!
- CSS 實現輪播效果,根本不需要 JS
- 2022互聯網大廠端午禮盒大比拼!
- 真的不要錯過這幾個 React 工具好嗎?
- 在國外當程序員爽不爽?
- JS 運行機制最全面的一次梳理
- JavaScript 框架發展的四個時代,以後的發展方向是什麼?
- Python 已可在瀏覽器端運行,來搶前端飯碗?
- 2022 年值得推薦的 76個 React 庫!
- 我發現 React18 文檔裏寫錯了
- 僅用一個HTML標籤,實現帶動畫的抖音Logo
- Node 12 結束維護,Node 18 來了
- 12個可能你沒見過,但非常實用的 HTML 標籤
- 不用跑項目,組件效果所見即所得,絕了!
- 86張腦圖,一口氣看完 React
- 身在上海,這個插件幫我搶了一個月的菜!感謝!
- 煥然一新的 Vue3 中文文檔來了!