我让AI用Kuikly写了个“孤寡青蛙”App，一码五端真丝滑！ 引子又是一年七夕，朋友圈里充满了恋爱的"酸臭味"，而你，是不是又一次"孤寡"在家？ 别怕，今年七夕，我们来点不一样的！与其刷着手机吃狗粮，不如动手写个"孤寡青蛙"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代码中的核心点击计数功能： @ComposableinternalfunFrogMainPageContent(){ // 状态管理 varclickCountbyremember { mutableStateOf(0) } varisAnimatingbyremember { mutableStateOf(false) } // 动画状态 valfrogScalebyanimateFloatAsState( targetValue =if(isAnimating)1.2felse1.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这三大主流跨端框架，看看它们各自都有哪些优缺点。 AI编程资讯AI Coding专区指南： https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文