引子
又是一年七夕，朋友圈里充满了恋爱的"酸臭味"，而你，是不是又一次"孤寡"在家？
别怕，今年七夕，我们来点不一样的！与其刷着手机吃狗粮，不如动手写个"孤寡青蛙"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的UI渲染是基于各个平台的原生组件，所以性能上非常有保障，不会有"卡顿"的烦恼。
- 跨端能力强大: 一套代码，五端复用，这诱惑力谁能顶得住啊！
如何指导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代码中的核心点击计数功能：
kotlin
@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这三大主流跨端框架，看看它们各自都有哪些优缺点。
最后，最后，祝天下有情人终成眷属，暂时单身的也活的每天潇洒幸福，七夕快乐！