用 AI 快速开发一款小程序

你好，我是悟空。

背景

之前我自己开源的一款产品 PassJava，它是帮助程序员进行 Java 面试的开源系统，采用流行的技术，如 SpringBoot、MyBatis、Redis、 MySql、 MongoDB、 RabbitMQ、Elasticsearch，采用 Docker 容器化部署。

小程序界面如下图所示：

这次我想通过 CodeBuddy 代码助手来实现一个简易版的面试刷题小程序。

微信开发者工具安装 CodeBuddy 插件

微信开发者工具已经支持安装插件了，我们在插件市场搜索腾讯云代码助手，就能看到 CodeBuddy 插件了，点击安装，就能直接使用了。

生成一个小程序模版

现在微信开发者工具在创建项目的时候，可以选择很多模版，有功能简单的，也有功能复杂的比如电商小程序。如下图所示：

这次我们选择一个最简单的模版，看看 CodeBuddy 能帮我们做到什么程度。如下图所示，只有一个获取头像和昵称的界面。

让 CodeBuddy 搓个小程序

提示语：帮我将这个小程序改成一个 面试刷题的小程序。

如下图所示：CodeBuddy 会尝试将上面的模版小程序改写成一个面试刷题小程序。

image-20250512202349136

首先 CodeBuddy 会读取根目录的文件，然后会提示我这个需求太简单了，还需要加一些需求它才能继续干活。比如哪些面试题，包含哪些功能，比如题目收藏，错题本，还有数据来源是从后端获取还是小程序本地存储的静态数据，最后是 UI 风格是什么样的。如下图所示：

了解这些信息后，CodeBuddy 就可以制定一个更加详细的改造计划。等个几分钟后，所有的代码都会生成完成，如下图所示：

编译后，并不能直接运行，会报一些错误：

代码语言：SH

AI 代码解释

[ pages/question-list/question-list.json 文件内容错误] pages/question-list/question-list.json: According to the configuration of the page or app.json, the value of "renderer" in pages/question-list/question-list.json page is "skyline", the "navigationStyle" configuration for the page should be set to "custom"(env: macOS,mp,1.06.2503290; lib: 3.8.3)

复制代码

复制代码

将这个错误丢给 CodeBuddy，它会帮我们解决这些错误。

注意：如果它没有应用这些改动，我们可以手动修改。

实际效果和调整页面

我们来看下效果，如下图所示：首页包含了这些模块功能：搜索、题目分类、每日推荐、最近做题，还有底部的导航栏也修改， 但是首页的样式不太对。

那我们手动来微调下首页的样式，其他也比较简单。最后效果如下：

其他页面也有很多样式问题，这里就不再一一列举了。

总结

整体来说 CodeBuddy 还是挺给力的，比自己手搓要快很多。我们只需要输入需求，等待 CodeBuddy 自动编写代码，然后运行小程序，如果有异常，丢给 CodeBuddy 帮我们解决。最后再调整下样式，验证下功能是否正常，有问题的我们自己调整下就行。