七夕到了，我让AI用Kuikly写了个“孤寡青蛙“App，一码五端真丝滑！

道友请了

已于 2025-08-29 14:42:55 修改

阅读量541

点赞数 17

CC 4.0 BY-SA版权

文章标签： kotlin html5 人工智能 android ios 小程序鸿蒙

于 2025-08-29 07:07:37 首次发布

本文链接：https://blog.csdn.net/u010887408/article/details/150970843

AI × Kuikly 孤寡青蛙系列文章

文章目录

AI × Kuikly 孤寡青蛙系列文章

引子

又是一年七夕，朋友圈里充满了恋爱的“酸臭味”，而你，是不是又一次“孤寡”在家？
在这里插入图片描述
别怕，今年七夕，我们来点不一样的！与其刷着手机吃狗粮，不如动手写个“孤寡青蛙”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的优势，将代码编译成多个平台的本地代码，所以性能上非常有保障，不会有“卡顿”的烦恼。
跨端能力强大: 一套代码，五端复用，这诱惑力谁能顶得住啊！
使用方便: 可以无缝对接腾讯自家的 Shiply 和 Bugly 全家桶（地址：https://shiply.tds.qq.com），提供了完整的应用发布和管理方案。

如何指导AI生成设计图

在动手写代码之前，我们得先有个像样的设计图。作为一个“审美有限”的程序员，我果断把这个任务交给了AI。

我给AI的提示词大概是这样的：

“你是一位全栈开发工程师，同时精通产品规划和UI设计。我现在想要开发一个 “孤寡青蛙” 应用，需要输出一套完整的APP原型图，请按照下面的要求执行:
· 这是一个极简的应用，核心功能是用户点击青蛙图片播放音效并计数…”

一开始我并没抱太大希望，毕竟AI画画这事儿，有时候挺“抽象”的。但结果出来的那一刻，我惊了！

这是我在AI基础上简单微调（仅仅补充了首页一些点缀元素），最终得到的设计稿：

AI设计稿1
AI设计稿2

这质感、这配色、这构图，简直是专业设计师的水准！
它甚至还帮我贴心的写好了“孤寡青蛙”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生成的代码片段，整体质量还是可以的：

// 青蛙主体区域
Box(
    contentAlignment = Alignment.Center
) {
    // 青蛙背景圆圈
    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
        )
    }