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