一次偶然的机会,我发现了腾讯云 AI 代码助手,支持微信开发者 并且在代码辅助开发的效率上有很大提升,还可以通过自然语言描述完成最终应用!那么我今天要来试试看用腾讯云 AI 代码助手来快速开发一个微信小程序游戏五子棋
打开微信开发者工具软件,点击添加按钮,出现如下页面。
选输入项目名称后,依次填写完毕后点击创建。在输入 AppID 的时候,下拉框中会列出来你这个微信号刚才注册的小程序的 AppID
打开后,首次需要安装腾讯云 AI 代码助手插件。该插件已经在市场里集成,你只需要安装到当前项目即可。最终成功安装后的效果如下图所示:
我打开微信开发者 IDE,点击底部的 AI 问答后打开技术对话侧栏。为了减少攥写提示词的时间,我在对话中先让 AI 先帮我写了一份提示词。
由于腾讯云 AI 代码助手支持多轮技术对话,我可以继续提问以完善提示词内容。
这里附上最后的提示词:
接下来我把完善的提示词贴入腾讯云 AI 代码助手,看看它给我生成了怎么样的小程序。
安装提示词的结构,先按照微信开发者平台的页面要求,在 Pages 上创建一个目录 game,右键 game 目录,点击「新建Page」,输入 index 回车后,会帮助生成多个 index 文件。
接下来,我们打开腾讯云 AI 代码助手,把刚才录入的提示词输入进去,腾讯云 AI 代码助手为我生成了每一段的代码。部分代码可能会省略,我保持着耐心,因为后面可以让它继续生成
腾讯云 AI 代码助手已经内置了微信小程序知识库,我们可以把微信小程序开发的所有技术文档和规范都录入进去了,这样生成的会话中的代码内容会更好。
我来试试,首先先输入 # ,然后选择微信小程序,然后输入刚刚的提示词,回车。如下图:
小技巧:对于我这种不喜欢用鼠标的,可以直接一口气输入 # 微信,然后省略后面的文字,通过上下键选中后直接回车就选上了,非常的方便。
我根据对话中的代码依次插入依次插入到工程中,然后点击顶部条的编译按钮后便可以在左边看到预览效果。
第一次运行效果中只有棋盘,并没有办法插入棋子,于是我打开了核心代码 game.js 文件,我发现函数还没有绘制棋子。
凭借对话中的代码描述,棋子可能需要独立绘制。那么这里可能有两种办法,一种是 canvas 绘制,一种是插入图片。那么我来试试腾讯云 AI 代码助手的内联对话给我怎么样的修复方法。
圈选代码后,通过快捷键(我是 mac 电脑)我用的是 Cmd+I,如果是
在顶部条出现输入框后输入需求,如下图所示
他给了我一个路径,让我自己准备白棋子和黑棋子的图片。我按目录的位置存放进去了之后,再次运行程序,运行后成功了!✌️
运行的效果如下图所示。当然代码还不够好,我接下来继续完善一下。
当前应用只是可以运行,还不够好。我需要增加代码注释和文档,并生成一个项目工程的 Readme.md 文档,然后把核心逻辑解读后进行下重构。
腾讯云 AI 代码助手贴心的给出了三种方法生成文档注释:
第一种,通过圈选核心代码,右键,选择腾讯云 AI 代码助手下的生成文档,如下:
第二种,进入插件的高级设置,如下图「圈1」开启「圈2」和「圈3」
返回代码后,可以在函数头或者鼠标悬浮后出现蓝色提示,点击「生成文档」,如下图
第三种是直接使用快捷键,按键如下:
看了一下生成文档的效果,还不错,同时腾讯云 AI 代码助手还增强了一些示例方法描述。觉得满意的话直接点击「采纳」就可以应用上去了。
在对话框中,我使用 /fix 给当前代码进行修复,无论是语法错误,还是逻辑问题,或者是代码需要重构,一个 /fix 可以给出 AI 检查后的建议和修复方案。
腾讯云 AI 代码助手提供了智能插入的方法,通过大模型为其生成合并的 Diff View 预览效果,如下图,清晰很多了。腾讯云 AI 代码助手在如下视图下可以选择部分采纳或者全部采纳。
我在开发中有时会发现如下图的错误,我的做法是把错误直接复制给到腾讯云 AI 代码助手,他能正确的给我结合当前工程代码进行分析,给出正确的解决方案。如下图,发现错误后,给出 init()函数修复建议,通过对话代码区域的「智能插入」运行后,右边出现了 Diff View 预览,全部采纳后,问题解决。
1. 腾讯云 AI 代码助手,已经内置在小程序开发者平台内了,只需要开启一下就可以。在微信开发者平台,点击编辑器内的插件扩展,找到「腾讯云 AI 代码助手」,点击安装即可。
2. 其他版本的 IDE,如 VSCode,也可以在下面的地址下载并安装使用
1. 小程序后台登录注册地址https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
个人就可以进行注册并且完成小程序开发者认证。
2. 微信开发者工具下载地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
⚠️这里需要下载1.06.2409140以上的版本哦。该工具可用于开发小程序、小游戏和插件。
3. 小程序开发微信官方文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/
不用细看,因为腾讯云 AI 助手已经贴心的帮助你集成到对话里了。只需要的时候引用 #微信小程序 然后输入你的问题即可帮你回答并附上代码示例。
采用腾讯云 AI 代码助手插件是可以很好的解决自然语言需求生成代码工程的能力,结合微信开发者平台和混元 AI 大模型,确实可以大大帮助非专业人群生成所需的应用和小程序。同时编码辅助上丝毫不差于国外产品,它还能帮我在编辑代码的时候快速生成代码,优化当前代码,甚至自动生成开发者头疼的注释和代码文档。
在实践过程中,有时会出现编译出错展示不出效果,或者模型偷懒问题导致函数没有实现的,我可以利用对话进一步多轮对话「强迫」
腾讯云 AI 代码助手继续完成项目工程。
如果你开始有能力给出一些正确的反问,代表你开始对代码有一定的认知。那么接下来你需要写出更好的提示词。让 AI 懂你的描述,这是一个循序渐进的过程。通过提示词强化和扩写,快速完成一个描述清晰的提示词,节省时间,同时也强化腾讯云 AI 助手对于生成结果质量。