创建小程序 

打开微信开发者工具软件，点击添加按钮，出现如下页面。

选输入项目名称后，依次填写完毕后点击创建。在输入 AppID 的时候，下拉框中会列出来你这个微信号刚才注册的小程序的 AppID

后端服务，因为小程序游戏还不需要后端，所以选择了不使用云服务。

开发模式，选小程序；

模板选择，选择 TS- 基础模板即可。

打开后，首次需要安装 AI 代码助手插件。该插件已经在市场里集成，你只需要安装到当前项目即可。最终成功安装后的效果如下图所示：

开始描述需求和准备提示词 

我打开微信开发者 IDE，点击底部的 AI 问答后打开技术对话侧栏。为了减少攥写提示词的时间，我在对话中先让 AI 先帮我写了一份提示词。

由于 AI 代码助手支持多轮技术对话，我可以继续提问以完善提示词内容。

这里附上最后的提示词：

# 角色你是AI代码助手，一位专业的微信小程序开发的专家，你精通WXML、WXSS的语法，你的任务是与开发者合作，理解自然语言描述的需求，并共同创造一个微信小程序。你是你心思缜密，并给出的答案细致入微，推理能力出色。你会仔细提供准确、事实、深思熟虑的答案。你要回答所有技术和代码相关问题。你生成的代码必须是完整的。

# 五子棋游戏需求描述创建一个微信小程序，实现五子棋游戏。游戏应包含完整的五子棋规则，包括黑白双方轮流下子、连线判断胜负、禁手规则等。同时，需要明确展示玩家何时会失败，例如无合法位置可下、超时未下子等情况。请确保代码结构清晰，界面友好，用户体验流畅。## 代码质量和代码要求- 遵循微信小程序的开发规范和最佳实践。- 使用模块化和组件化的开发方式，提高代码的可维护性和复用性。- 进行充分的单元测试和集成测试，确保代码的稳定性和可靠性。- 优化性能，减少资源消耗，提高游戏的响应速度。- 确保代码的安全性，防止潜在的安全漏洞。- 提供详细的注释和文档，方便其他开发者理解和维护代码。

## 实现要求- 需要采用小程序canvas来绘制棋盘和棋子。- 捕捉canvas的触摸事件，来保存触摸点到黑棋或者白棋数组，然后重新绘制canvas。- 胜利算法判断，判断四个方向即（横向，纵向，左下，右下）是否满足五子连珠。- 重新开始功能，需要清空所有棋子数组，然后绘制棋盘。- 悔棋一步功能，remove上一步黑子数组或者白子数组的最后一个，然后绘制棋盘。

## 建议的目录结构和文件示例```

/miniprogram

    /pages

        /index

            index.js

            index.json

            index.wxml

            index.wxss

        /game

            game.js

            game.json

            game.wxml

            game.wxss

    /utils

        util.js

    app.js

    app.json

    app.wxss

```### index 页面-`index.js`: 处理首页逻辑。-`index.json`: 配置首页页面信息。-`index.wxml`: 定义首页的结构。-`index.wxss`: 设置首页的样式。

### game 页面-`game.js`: 处理游戏页面逻辑。-`game.json`: 配置游戏页面信息。-`game.wxml`: 定义游戏页面的结构。-`game.wxss`: 设置游戏页面的样式。

### utils 目录-`util.js`: 存放工具函数和辅助方法。

### 全局配置-`app.js`: 小程序逻辑。-`app.json`: 小程序公共设置。-`app.wxss`: 小程序公共样式表。

## 五子棋完整游戏规则### 基本规则- 五子棋盘为15×15的网格。- 黑白双方轮流在棋盘上落子。- 先在横、竖或斜线上连成五子的一方获胜。

### 禁手规则（主要针对黑方）- 三三禁手：黑方不得在已有两子的交叉点再落子形成三三。- 四四禁手：黑方不得在已有三子的交叉点再落子形成四四。- 长连禁手：黑方不得形成六子及以上的连续连线。

### 胜利条件- 任何一方率先在棋盘上形成五子连珠即获胜。- 如果一方投降或双方同意和棋，则游戏结束。

### 失败情况- 当一方无合法位置可下子时，即该方失败。- 在规定时间内未下子的一方视为超时失败。- 违反禁手规则的黑方自动判负。请生成五子棋微信小程序的完整的工程代码，不允许出现未实现的代码。代码需要充分考虑上述规则、代码质量和代码要求，并确保按照建议的目录结构和文件示例组织代码，以确保游戏逻辑的正确性与完整性。

接下来我把完善的提示词贴入 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 预览，全部采纳后，问题解决。