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

  趕緊點選體驗吧!