AI 聯動!現在前端都流行這樣開發~ 效率提升 100%

語言: CN / TW / HK

大家好,我是 零一 ,在你的業務中有沒有遇到很多跟 營銷活動 相關的需求,一般這種需求有以下幾個特點:

  1. 頁面邏輯簡單

  2. 頁面樣式風格不統一

  3. 反覆性

儘管這些需求頁面結構簡單、邏輯不復雜,但也扛不住一星期寫一個這樣的需求,因為是個人都會覺得沒有挑戰性,畢竟只是 切圖寫樣式加個跳轉按鈕 的事情

其實像這樣的開發流程,已經有一套成熟的方案去解決了,那就是 設計稿智能生成源代碼 ,它幫你省去了 切圖寫樣式 的流程,你僅僅只需要關注頁面中一些按鈕點擊後要幹什麼即可。甚至連 UI走查 的步驟都可以省去了,因為頁面本身就是根據 UI 提供的設計稿還原生成的

這種開發方式在我們公司內部也已經推行很久了,確實節省了不少時間,今天給大家來演示一下這整套流程,一步步帶你們體驗~

因為沒辦法拿公司內的平台給大家演示,所以給大家推薦一個業界的設計稿智能生成源代碼工具 —— CodeFun ,本文也用該工具給大家演示

先放一下該工具的網址,感興趣的可以跟着我一步步嘗試

CodeFun:https://code.fun/

前置工作

進到該網站並進行登錄以後,可以先創建一個項目

然後選擇一種方式導入我們的設計稿,CodeFun 支持通過插件將一些 UI設計平台 的設計稿導入。因為我平時用 Fgima 比較多,所以我在社區找了一套設計稿來做演示

安裝好插件後,我們進入到設計稿中,選擇我們想要生成的頁面,然後點擊菜單中的 Plugin,找到 CodeFun 插件

然後選擇將該設計稿生成的頁面導入到剛才我們創建好的項目中

2s 就上傳好了

然後我們點擊 "查看項目" 去看看。可以看到剛才設計稿中頁面幾乎是 1:1 還原出來了,而且從左側的 DOM 結構來看,層級也非常清晰

藉助 CodeFun 提供的 預覽功能 ,我們看下放到瀏覽器裏是什麼樣的效果

生成以後就會得到一個預覽鏈接,點擊後即可查看

整體看下來一點問題都沒有,還原度非常得高~

開始使用

不是説設計稿還原代碼嗎?怎麼還原出來的是個頁面?別急,這個頁面背後對應的代碼也早已經自動生成了,我們可以點擊右上角的 "查看代碼"

我們也可以自己的技術棧選擇不同框架的代碼,目前支持的有 微信小程序uni-appVueTaroReact原生html

本文就以 React 的為例,我們將該頁面對應的代碼下載下來,添加一些額外的邏輯

因為頁面中還有一個 " Buy " 的按鈕,點擊以後我們希望直接跳轉到蘋果官網的 iPhone14 購買頁,因此我們在按鈕元素上加個跳轉邏輯

然後本地再跑一下頁面,看下邏輯有沒有問題

漂亮!沒問題了,然後該咋上線就咋上線!

像這樣的簡化流程,全程不需要寫切圖、佈局、寫樣式,上線營銷頁面不就是 有手就行 嗎?

進階使用

大家可能覺得剛才的頁面比較簡單,沒法體現這個工具的優勢,接下來拿個稍微複雜一些的頁面給大家舉例子,並展示一些其它功能。

我隨便在 Figma 社區找了一個列表頁面,接下來用 CodeFun 插件將它生成代碼

循環列表

查看左側的 DOM 結構,發現 CodeFun 在還原設計稿時,還通過 AI 只能識別了列表元素,並對其進行了標記,這種結構在我們代碼裏就是通過一個數組去遍歷渲染的,看看它生成的代碼是否也是這樣

果然是通過 map 遍歷生成的,不過有個問題就是當前生成的數據都是靜態的

所以我們可以手動對列表元素裏的單一內容命名一下,使其變成動態數據

點擊上方工具欄裏的 " 數據綁定 "

我們能看到 List 列表內的每個小元素都可以對其進行命名,因為 ListItem 結構統一,所以我們只需要對 ListItem-1 進行命名即可

命名完成並保存後,我們來看下對應的代碼變成了什麼樣子

這樣一來,數據就全變成動態的,是不是非常智能?

行為

另外,我看到這個頁面頂部有一個 " 返回 " 的按鈕,點擊以後的行為肯定是返回上一個頁面,對此 CodeFun 也提供了對應的行為給我們,可以直接在這個元素上添加返回到上一個頁面的行為

組件化

在預覽頁面時,我發現頁面中按鈕的點擊非常生硬,比如點擊以後一點反饋都沒有

我們知道很多組件庫都有交互反饋,比如按鈕組件,點擊以後會有點擊了的效果,CodeFun 其實也給我們提供了組件化的功能,既支持我們自定義組件,也支持使用 npm 包的組件庫

而且默認也支持了一些原生組件和三方組件,這裏我們就拿 Vue 框架的 vant2 組件庫來舉例子吧

在將對應的元素標記了 vant2 的 Button 組件後,右側就可以對組件的各種屬性進行設置了,屬性的使用方式就跟 vant2 組件庫的一致,因此我們可以去官網看使用方式

簡單填寫了一下組件屬性

看下標記組件後的效果吧

可以看到,我們的按鈕已經有交互的反饋效果了

總結

相信做前端的同學,哪一個也不想一直只做切圖仔,如果本文介紹的 UI 設計稿智能生成代碼 有戳中你的痛點,可以嘗試引入到自己的工作中,看看是否能幫你釋放大量的人力,讓你有更多的時間聚焦到業務邏輯中,把大部分的頁面都交給AI工具。

市面上已經有很多的同學都開始嘗試 UI 設計稿智能生成代碼了(包括我),如果你對這套方案還有什麼疑問,想跟大家交流的,可以進羣跟大家進行互動~ :point_down:

註冊鏈接 :https://ide.code.fun/u/6u16QeO0

優惠券鏈接 :https://ide.code.fun/coupon/63295a92e39132001169072e

兑換碼 :QDYX0920

  趕緊點擊體驗吧!