跳到主要内容

微信开发者工具+AI,我从写代码到部署上线没离开过这个窗口

CloudBase TeamCloudBase Team
阅读需 9 分钟

上周摸微信开发者工具,发现它悄悄变了。

扩展市场里多了个 CodeBuddy,装上之后 IDE 右边多了一个 AI 对话窗。我本来就想试试在微信开发者工具里直接用 AI 写小程序,顺便部署到 CloudBase,全程不跳出这个窗口。

跑了一遍,记录一下真实体验。能跑通,但也有坑。

先搞清楚三样东西

在动手之前,有三个概念得理一下,不然后面操作会懵。

CodeBuddy 扩展——微信开发者工具 2.0 以上版本,扩展市场里搜"CodeBuddy"就能装。装完之后工具栏多一个图标,点开就是 AI 对话窗口。它能读你的代码上下文,能帮你写代码、改代码、解释报错。本质上就是把 AI 编程助手嵌进了微信开发者工具。

CloudBase MCP——这个是连接 AI 和云开发服务的桥梁。装了它之后,AI 不光能帮你写代码,还能直接帮你操作云端资源:建数据库表、部署云函数、配置静态托管,这些都能在对话里完成。安装方式也简单,CodeBuddy 设置里有个 MCP 市场,搜"CloudBase MCP"一键装。

CloudBase Skills——可以理解成给 AI 装上的"经验包"。比如小程序 SDK 怎么用、数据库权限怎么配、云函数的最佳实践是什么,这些领域知识 AI 本身不一定知道,Skills 把它们打包好了。安装命令:

npx skills add tencentcloudbase/cloudbase-skills

或者直接在 CodeBuddy 对话里说"安装 CloudBase Skills",它会帮你跑这条命令。

三者的关系说白了:CodeBuddy 负责对话和执行,MCP 负责连接和权限,Skills 负责让 AI 懂行。

动手:做一个待办小程序

说了半天,不如直接跑一个案例。

我选了一个最经典的场景——待办小程序。功能很简单:添加待办、标记完成、删除。数据存在 CloudBase 云数据库里。

环境准备

需要的东西不多:

  1. 微信开发者工具 2.0 以上版本——去微信官方下载页下载最新稳定版
  2. Node.js v18.15+——安装 Skills 需要
  3. 已开通 CloudBase 云开发环境——新用户有免费额度,去云开发控制台开通

安装 CodeBuddy 扩展的步骤:

  • 打开微信开发者工具,快捷键 Shift + Command + X(Mac)或 Ctrl + Shift + X(Windows)打开扩展面板
  • 搜索"CodeBuddy"
  • 安装"腾讯云代码助手 CodeBuddy"

装完之后,点工具栏上的 CodeBuddy 图标,进设置,在 MCP 市场里搜索安装"CloudBase MCP"。

到这一步,AI 对话窗口底下应该能看到 MCP 工具列表了。如果显示工具数量为 0,重启一下微信开发者工具。

让 AI 帮忙搭项目

打开 CodeBuddy 对话窗,我是这么说的:

创建一个待办事项小程序,功能:添加待办、标记完成、删除待办。数据存在 CloudBase 云数据库。用微信小程序原生开发,不用框架。

AI 几秒后开始输出。它做了这些事:

  1. 在云数据库里创建了一个 todos 集合
  2. 生成了小程序的页面结构——首页是列表页,有一个输入框和待办列表
  3. 写了云函数用来做增删改查
  4. 把页面的事件绑定和数据库操作都串好了

输出的代码结构大概长这样:

miniprogram/
├── pages/
│ └── index/
│ ├── index.wxml # 页面结构
│ ├── index.wxss # 样式
│ ├── index.js # 逻辑
│ └── index.json # 配置
├── app.js
├── app.json
└── app.wxss

cloudfunctions/
├── addTodo/
│ └── index.js
├── getTodos/
│ └── index.js
├── updateTodo/
│ └── index.js
└── deleteTodo/
└── index.js

说实话,第一版代码的完成度挺高的。基本的 CRUD 逻辑没什么问题,页面布局也算合理。

需要自己动手的地方

不过也不是拿来就能用。我改了几个地方:

样式微调。AI 生成的样式偏保守,间距、字号、颜色都比较"安全",但看起来有点素。我自己调了一下 wxss,加了点圆角、阴影,让它看着不像模板。

云函数的环境 ID。AI 生成的云函数代码里,cloud.init() 有时候没带环境 ID,需要手动补上:

wx.cloud.init({
env: 'your-env-id' // 换成你自己的环境 ID
})

权限规则。AI 创建的数据库集合默认权限是"仅创建者可读写",对待办应用来说够用了。但如果你的场景需要其他权限配置,得自己改。

部署上线

写完代码,部署这步也交给 AI。

继续在 CodeBuddy 对话窗里说:

把云函数部署到 CloudBase,然后帮我预览小程序

MCP 会帮你干这几件事:

  1. 部署云函数——AI 通过 MCP 调用云函数部署接口,把 addTodogetTodosupdateTododeleteTodo 四个云函数推到云端。不用你右键点菜单,也不用手动选"上传并部署"
  2. 确认部署结果——AI 会在对话里告诉你每个函数的部署状态,成功了就继续,失败了它会尝试排查原因

如果你想把前端也托管到 CloudBase(比如做 H5 版),再跟 AI 说一句"把前端部署到 CloudBase 静态托管"就行。

小程序本身的预览和上传,微信开发者工具的"预览"和"上传"按钮还是得点一下——这步是微信平台的流程,MCP 管不到。但从写代码到云函数部署,全程都是在对话里完成的,没有手动操作云端资源。

整个流程下来,你的手只在两个地方动过鼠标:装扩展的时候,和最后点预览/上传的时候。中间所有的代码生成、数据库创建、云函数部署,都是 AI 干的。

踩坑记录

跑完一遍,说说真实感受。

AI 搞得定的

  • 基础的 CRUD 逻辑——增删改查写得挺标准
  • 页面布局——wxml 结构清晰,数据绑定写得对
  • 数据库设计——字段命名和索引建议都合理
  • 云函数骨架——基本功能能直接跑

AI 搞不太定的

  • 复杂的交互动画——比如滑动删除、下拉刷新的手感调优,AI 给的方案能用但不够细腻
  • 微信特有 API 的参数细节——有些 API 的参数在不同版本有变化,AI 不一定跟上了
  • 样式精调——AI 写的样式能看,但离"好看"有距离,设计感还是得自己来

MCP 偶尔断连——大概跑了两个小时碰到一次,重启微信开发者工具就好了。不算大问题,但如果你正在跑一个比较长的 AI 生成任务,断连会比较烦。

Skills 的覆盖面——目前主要覆盖了数据库、云函数、身份认证这些核心场景。如果你要做微信支付、订阅消息、客服消息这种偏业务的功能,Skills 帮不上太多忙,得自己翻文档。

算笔账

这事,咱们拿数据说话。

时间账

环节传统方式AI 辅助方式
环境搭建30 分钟(翻文档、建项目、配云开发)10 分钟(装扩展、装 MCP)
写前端页面2 小时15 分钟(AI 生成 + 微调)
写云函数1.5 小时10 分钟(AI 生成 + 补环境 ID)
调试部署1 小时20 分钟(AI 部署云函数 + 手动预览上传)
合计约 5 小时约 55 分钟

这个对比有水分吗?有一点。传统方式的 5 小时包含了查文档的时间,一个熟手可能 3 小时搞定。但 AI 辅助把最枯燥的"搭骨架"环节从小时级压到了分钟级,这个提升是实实在在的。

适用场景

  • ✅ 原型验证、MVP 快速搭建——最适合
  • ✅ 功能简单的工具类小程序——增删改查为主的,AI 能覆盖 80% 的代码量
  • ⚠️ 复杂业务逻辑的项目——AI 能搭骨架,但业务细节还是得自己填
  • ❌ 已有大型项目的改造——AI 对大项目的上下文理解有限,不如从零开始

学习成本

如果你已经有小程序开发经验,上手成本几乎为零——就是装两个扩展的事。

如果你是新手,我建议先不用 AI,手动跑一遍微信云开发的基础流程。微信官方文档也是这么建议的:先手动完成一遍基础流程,再引入 MCP/Skill。

最后说两句

微信开发者工具把 AI 编程能力内置进来这件事,方向是对的。对小程序开发者来说,不用在多个工具之间跳来跳去,这个体验确实省心。

但它目前不是最强的 AI 编程工具。如果你只看 AI 编程的丝滑程度,Cursor 现阶段体验更好。微信开发者工具的优势在于"一站式"——小程序模拟器、真机调试、上传审核都在同一个窗口。

加上前两天刚发布的 CloudBase CLI V3(详情),15 个顶层命令模块,专门为 AI Agent 设计,未来 AI 能做的事还会更多。

你的场景适不适合,自己跑一遍就知道了。


参考链接

用 CloudBase 构建下一款应用

一站式后端云服务,覆盖数据库、云函数、静态托管与 AI 能力。