七夕到了，我讓AI用Kuikly寫了個“孤寡青蛙“App，一碼五端真絲滑！
引子
又是一年七夕，朋友圈裡充滿了戀愛的"酸臭味"，而你，是不是又一次"孤寡"在家？
別怕，今年七夕，我們來點不一樣的！與其刷著手機吃狗糧，不如動手寫個"孤寡青蛙"App，讓它陪你一起"呱呱呱"，解壓又好玩！
這個專案的靈感，就來源於七夕節的"孤寡青蛙"熱潮。作為一個熱愛技術的開發者，我尋思著，能不能用一種全新的方式，來"孤寡"得更有創意一點？
於是，我把目光投向了騰訊今年開源的跨端框架——Kuikly。聽說它能用Kotlin一套代碼，同時搞定Android、iOS、鴻蒙、Web甚至小程序，這不就是為我這種"懶人"量身定做的嗎？
不過，真有說的那麼好？我決定把它拉出來遛遛～
說幹就幹！我決定，今年的七夕，就讓AI當我的"結對編程"夥伴，用Kuikly來打造一個"孤寡青蛙"App，看看我們能碰撞出怎樣的火花！
Kuikly框架介紹
在正式開搞之前，我們先來簡單認識一下今天的主角——Kuikly。
簡單來說，Kuikly是騰訊開源的一套基於Kotlin Multiplatform (KMP) 技術的跨端開發框架。它的核心思想是一套代碼，多端運行，讓開發者可以用熟悉的Kotlin語言，一次性開發出能在Android、iOS、鴻蒙、Web、小程序等多個平台上運行的應用。
官方資源：
- Github倉庫: github.com/Tencent-TDS…
- 文檔地址: kuikly.tds.qq.com/Introductio…
為什麼選擇Kuikly？
- Kotlin語言優勢: 對於我們這些Android開發者來說，Kotlin簡直就是“親兒子”，學習成本幾乎為零。而且Kotlin本身也是一門非常現代化、非常優雅的語言。
- 性能接近原生: Kuikly利用了Kotlin Multiplatform的優勢，將代碼編譯成多個平台的Native代碼，所以性能相比RN等JS執行方案就非常有保障，不會有“卡頓”的煩惱。
- 跨端能力強大: 一套代碼，五端復用，這誘惑力誰能頂得住啊！
- 使用方便: 可以無縫對接騰訊自家的Shiply和Bugly全家桶，提供了完整的應用發布和管理方案。
如何指導AI生成設計圖
在動手寫代碼之前，我們得先有個像樣的設計圖。作為一個"審美有限"的程序員，我果斷把這個任務交給了AI。
我給AI的提示詞大概是這樣的：
"你是一位全棧開發工程師，同時精通產品規劃和UI設計。我現在想要開發一個 "孤寡青蛙" 應用，需要輸出一套完整的APP原型圖，請按照下面的要求執行:
· 這是一個極簡的應用，核心功能是用戶點擊青蛙圖片播放音效並計數..."
一開始我並沒抱太大希望，畢竟AI畫畫這事，有時候挺"抽象"的。但結果出來的那一刻，我驚了！
這是我在AI基礎上簡單微調（僅僅補充了首頁一些點綴元素），最終得到的設計稿：
這質感、這配色、這構圖，簡直是專業設計師的水準！它甚至還幫我貼心的寫好了"孤寡青蛙"App的產品功能規劃！！！
必須給AI點個大大的讚！
開發環境搭建
萬事俱備，只欠東風。接下來，我們開始搭建Kuikly的開發環境。
整個過程還是比較順利的，Kuikly的官方文檔寫得非常詳細。這裡我簡單總結一下步驟：
- 安裝Android Studio: 這是我們主要的開發工具。
- 安裝Kuikly插件: 在Android Studio的插件市場裡搜索"Kuikly"，一鍵安裝。
- 創建新專案: 使用Kuikly插件提供的模板，可以快速創建一個新的Kuikly專案。
- 安裝Xcode、鴻蒙DevEco-Studio和小程序開發環境
具體的安裝步驟，大家可以參考官方文檔，這裡就不再贅述了。
簡單展示下Kuikly hello world在三大移動端的運行效果：
AI開發 踩坑記錄
作為一個"懶人"，自然是繼續讓AI給我們打工了，開始編碼吧！
得益於Kuikly支持使用廣泛的Compose語法，加上比較詳實的文檔，AI編碼的還是比較順利的，整個生成首頁代碼的過程只在最後出現了一點小的編譯問題：
這很明顯是因為生成導入的包名時，AI產生了一點小幻覺。問題不大，我把錯誤信息直接丟給AI，它馬上就識別出了問題所在，並給出了修復方案。
還有在鴻蒙平台編譯時，也遇到了一个報錯，這看起來是我本地的鴻蒙環境配置的有點問題：
同樣丟給AI，它也迅速定位問題並給出了解決方案，並且還貼心的給出了細致的原因分析：
不得不說，AI在解決這類編譯問題時，簡直是"效率神器"，大大節省了我查閱文檔和到處搜索的時間。
代碼示例：核心點擊計數功能
這裡展示一下AI生成的Kuikly Compose代碼中的核心點擊計數功能：
@Composable
internal fun FrogMainPageContent() {
// 狀態管理
var clickCount by remember { mutableStateOf(0) }
var isAnimating by remember { mutableStateOf(false) }
// 動畫狀態
val frogScale by animateFloatAsState(
targetValue = if (isAnimating) 1.2f else 1.0f,
animationSpec = tween(durationMillis = 200),
finishedListener = { isAnimating = false }
)
// 青蛙點擊處理
Box(
modifier = Modifier
.size(160.dp)
.scale(frogScale)
.background(
brush = Brush.horizontalGradient(
colors = listOf(Color(0xFF4CAF50), Color(0xFF388E3C))
),
shape = CircleShape
)
.clickable {
// 點擊處理
clickCount = clickCount + 1
isAnimating = true
// 播放音效提示
Utils.currentBridgeModule().toast("孤寡~ 🐸")
},
contentAlignment = Alignment.Center
) {
Text(text = "🐸", fontSize = 80.sp)
}
}這段代碼展示了Kuikly Compose的幾個核心特性，和使用compose官方沒有太大區別：
- 狀態管理：使用
mutableStateOf管理點擊計數 - 動畫效果：使用
animateFloatAsState實現點擊縮放動畫 - UI組件：使用Compose風格的Box、Text等組件
Kuikly 運行效果
最後，經過一番小小折騰，我們的"孤寡青蛙"App的首頁終於在五個端上都跑起來了！（保險起見，我先只讓AI生成了首頁的代碼看看效果，其餘代碼後續小步迭代吧）
😐咋說呢，整體結構和功能基本是OK了，但在UI的還原度上還差的比較遠。不過瑕不掩瑜，還是讓我們先看看各個端上的運行效果如何吧：
看到一套代碼，在這麼多平台上都完美運行，而且UI的一致性還是挺高的，我只想說：Kuikly，牛啊！
這開發效率，簡直起飛！
總結
第一天的開發體驗，可以說是相當震撼。
AI的設計能力和編碼輔助，讓我這個"單兵作戰"的開發者，體驗到了"團隊協作"的快感。
而Kuikly框架，也讓我對國產的跨端框架有了很大改觀。它不僅用一套代碼就實現了五個端的覆蓋，而且開發體驗極其順滑，幾乎沒有遇到什麼難以解決的"天坑"。對於我們這種追求效率的開發者來說，Kuikly無疑是一個極具吸引力的選擇，真心希望未來國產框架做得越來越好！
當然，我們的"孤寡青蛙"App現在還只是一個非常初級的版本，很多功能都還沒有完善。
在下一篇文章中，我將繼續讓AI億點點改進它，分享vibe coding過程中的一些經驗。同時繼續學習下Kuikly，深入對比一下Kuikly、Flutter和React Native這三大主流跨端框架，看看它們各自都有哪些優缺點。
最後，祝天下有情人終成眷屬，暫時單身的也每天瀟灑幸福，七夕快樂！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式