携手AI与Kuikly，打造七夕“孤寡青蛙”App

原创在下历飞雨 2025-09-20 09:02 重庆

点击关注公众号，技术干货及时达。

引子又是一年七夕，朋友圈里充满了恋爱的"酸臭味"，而你，是不是又一次"孤寡"在家？

别怕，今年七夕，我们来点不一样的！与其刷着手机吃狗粮，不如动手写个"孤寡青蛙"App，让它陪你一起"呱呱呱"，解压又好玩！

这个项目的灵感，就来源于七夕节的"孤寡青蛙"热潮。作为一个热爱技术的开发者，我寻思着，能不能用一种全新的方式，来"孤寡"得更有创意一点？

于是，我把目光投向了腾讯今年开源的跨端框架——Kuikly。听说它能用Kotlin一套代码，同时搞定Android、iOS、鸿蒙、Web甚至小程序，这不就是为我这种"懒人"量身定做的吗？

不过，真有说的那么好？我决定把它拉出来遛遛～

说干就干！我决定，今年的七夕，就让AI当我的"结对编程"伙伴，用Kuikly来打造一个"孤寡青蛙"App，看看我们能碰撞出怎样的火花！

Kuikly框架介绍在正式开搞之前，我们先来简单认识一下今天的主角——Kuikly。

简单来说，Kuikly是腾讯开源的一套基于Kotlin Multiplatform (KMP) 技术的跨端开发框架。它的核心思想是"一套代码，多端运行"，让开发者可以用熟悉的Kotlin语言，一次性开发出能在Android、iOS、鸿蒙、Web、小程序等多个平台上运行的应用。

「官方资源：」

「Github仓库:」

https://github.com/Tencent-TDS/KuiklyUI

「文档地址: 」

https://kuikly.tds.qq.com/Introduction/arch.html

「为什么选择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)
    }
}