分享好友 最新动态首页 最新动态分类 切换频道
震惊!5分钟就能开发一个微信小程序游戏!
2024-12-27 11:00

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

最新文章
高清美女写真生成神器,不可错过的AI绘图体验!
限时免费,点击体验最近超火的AI生图神器,坐拥3000美女的大男主就是你! https://ai.sohu.com/pc/generate/textToImg?_trans_=030001_yljdaimn 在这个科技迅猛发展的年代,AI正在渗透我们的生活,为我们带来诸多便利与惊喜。就拿生成美女
SEO推广优化:打造品牌,提高排名
  随着互联网的发展,越来越多的企业开始将重心转向网络营销。毕竟,在互联网时代,拥有一个良好的网站和的网络营销策略是必不可少的。而SEO(Search Engine Optimization)作为一种营销手段,被越来越多的企业所重视和采用。那么,如何
百度推广怎么优化
多维度展示多维度展示:制作图文并茂、形象直观的广告内容,便于客户理解,使产品卖点更加突出。好的创意物料能够更加吸引人眼球,为实现广告高的点击率打下扎实的基础,而广告文案创作形式上又有多种表现手法:数据分析数据分析:通过统计
第一导航——让你的上冲浪更高效
在这个信息爆炸的时代,我们每天都要面对海量的网络内容。如何在众多的网站和信息中快速找到自己需要的东西,成为了一项重要的技能。而第一导航就是为了帮助你更高效地上网冲浪而诞生的。什么是第一导航第一导航是一个集合了众多优质网站和
酒泉百度爱采购运营技巧
想要让百度等搜索引擎快速收录,实际上还要了解一下,搜索引擎是干嘛的。搜索引擎就是检索了海量的信息,让用户在搜索某些关键词时,能够快速、准确的找到结果或答案,这就是搜索引擎要做的工作。那么,要想被百度等搜索引擎收录,第一步就
越狱里面的终极BOSS是谁?
nika,捷克人,被人骗到美国做脱衣舞女,被michael所救。与michael约定好帮其越狱,因而在其入狱前一天与之结婚以便带东西进监狱给他。两人的夫妻称号有名无实,但实际上nika深深的爱上了michael,所以她才会在听到michael对sara说他对她的
生肖已解“洞百孔风行”是什么生肖动态词语
生肖字谜诗句描绘十二生肖独特韵味:洞穿岁月隐玄机百孔风行探天机。生肖轮回映乾坤鼠首潜行夜无痕。牛耕日月展宏图虎啸山林震乾坤。兔跃月影藏仙踪龙腾云汉舞风云。蛇盘洞窟藏智慧马踏飞燕踏红尘。羊踏青草春色满猴跃林间摘星辰。鸡鸣长空
晨会主持词范文【优秀20篇】
《晨会主持词范文【优秀20篇】》由白话文精心整编,希望在【爱的鼓励节拍】的写作上带给您相应的帮助与启发。伴随着新一轮的太阳冉冉升起,我们又迎来了崭新的一天,在早会开始之前,是我们的活动量管理,请各处的处长用1分钟的时光收取组
怎么看拼多多行业热搜词(拼多多现在怎么查热搜词)
发布商品的时候需要给商品取一个引人注目的标题,所以商家就要了解一下商品的热搜关键词都有哪些。那么拼多多商品热搜词该如何查看呢?下面我们就一起来了解一下吧!拼多多商品热搜词在哪里看?(商品的热搜词表明搜索人气越高搜索人数越多,
竞价区域推广费用收取明细表:公正公开,一目了然
在当今网络营销竞争激烈的市场中,竞价区域推广已成为众多企业寻求竞争优势的重要手段。为了确保公平竞争,公正公开的推广费用收取明细表是必不可少的。本文将为您介绍竞价区域推广的费用收取明细,帮助您了解整个过程。一、推广费用计算公
相关文章
推荐文章
发表评论
0评