CodeBuddy 助力小程序开发,一款面试答题小程序诞生
我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
你好,我是悟空。
背景
之前我自己开源的一款产品 PassJava,它是帮助程序员进行Java面试的开源系统,采用流行的技术,如 SpringBoot、MyBatis、Redis、 MySql、 MongoDB、 RabbitMQ、Elasticsearch,采用Docker容器化部署。
小程序界面如下图所示:
这次我想通过 CodeBuddy 代码助手来实现一个简易版的面试刷题小程序。
微信开发者工具安装 CodeBuddy 插件
微信开发者工具已经支持安装插件了,我们在插件市场搜索腾讯云代码助手,就能看到 CodeBuddy 插件了,点击安装,就能直接使用了。
生成一个小程序模版
现在微信开发者工具在创建项目的时候,可以选择很多模版,有功能简单的,也有功能复杂的比如电商小程序。如下图所示:
这次我们选择一个最简单的模版,看看 CodeBuddy 能帮我们做到什么程度。如下图所示,只有一个获取头像和昵称的界面。
让 CodeBuddy 搓个小程序
提示语:帮我将这个小程序改成一个 面试刷题的小程序。
如下图所示:CodeBuddy 会尝试将上面的模版小程序改写成一个面试刷题小程序。
首先 CodeBuddy 会读取根目录的文件,然后会提示我这个需求太简单了,还需要加一些需求它才能继续干活。比如哪些面试题,包含哪些功能,比如题目收藏,错题本,还有数据来源是从后端获取还是小程序本地存储的静态数据,最后是 UI 风格是什么样的。如下图所示:
了解这些信息后,CodeBuddy 就可以制定一个更加详细的改造计划。等个几分钟后,所有的代码都会生成完成,如下图所示:
编译后,并不能直接运行,会报一些错误:
[ 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 帮我们解决。最后再调整下样式,验证下功能是否正常,有问题的我们自己调整下就行。