震惊!5分钟就能开发一个微信小程序游戏!

   日期:2024-12-27    作者:shbaisheng23 移动:http://3jjewl.riyuangf.com/mobile/quote/70697.html

一次偶然的机会,我发现了腾讯云 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 助手对于生成结果质量。


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号