Claude Code 开发微信小程序：先搭好项目，再用微信官方的开发者工具 Skills 和 Skyline Skills 提效

本文根据微信开放文档《目录结构》《工具 Skills》《Skyline Skills》《Skill / MCP 辅助开发》《命令行调用》，以及 Claude Code 官方文档《Connect Claude Code to tools via MCP》整理，资料核对于 2026-11-05。配图为本站整理的示意图，不是界面截图。本站（bigolab.com）不是 Anthropic 官方网站，也不是微信官方网站。

适用于谁

• 搜「claude code 微信小程序开发」，想知道怎么让 Claude Code 写小程序的人；
• 已经会用 Claude Code，但没做过小程序，不清楚项目要长什么样的人；
• 用微信开发者工具，想让 AI 自己编译、截图、看日志的人。

结论先说

1. Claude Code 负责写代码，微信开发者工具负责运行和发布。 小程序要在开发者工具里编译预览，上传审核走微信平台，这些 Claude Code 不能替代。
2. 先把项目骨架搭对：官方规定一个小程序主体由 app.js、app.json 必需文件加可选的 app.wxss 组成，每个页面由 js、wxml 必需，json、wxss 可选，同一页面的文件必须同名同路径。
3. 微信官方已经为 AI 编程工具出了几套 Skills：开发者工具 Skills、Skyline 渲染引擎的 Skills、云开发的 Skill 和 MCP。用得上的先装，不装也能写。
4. AI 写的代码一定要在开发者工具里跑一遍，再用手机预览；涉及登录、支付、用户数据的部分，务必人工审查。

图：本站根据 微信开放文档 整理的示意图

一、先认识小程序的项目结构

按微信开放文档《目录结构》：

• 小程序主体，放在项目根目录：app.js（逻辑，必需）、app.json（公共配置，必需）、app.wxss（公共样式，可选）；
• 每个页面：.js（逻辑，必需）、.wxml（结构，必需）、.json（页面配置，可选）、.wxss（样式，可选），四个文件必须有相同的路径与文件名；
• 官方还说明：.js、app.json、.wxml、.wxss 会被编译；只有后缀在白名单里的文件才能上传，白名单包括 wxs png jpg jpeg gif svg json cer mp3 aac m4a mp4 wav ogg silk wasm br cert 等。

这些信息可以直接放进项目的 CLAUDE.md，让 Claude Code 每次都遵守「新页面要同时建四个同名文件，并在 app.json 里登记」这样的规则。CLAUDE.md 怎么写见 /guides/claude-md-agents-md。

另一个关键文件是 project.config.json。微信的工具 Skills 文档说，项目根目录需要有效的 project.config.json，其中 appid 字段为空字符串或 "touristappid" 都视为无效。文档给的最小配置示例包含 appid、projectname、compileType、libVersion 和 setting。AppID 要在微信公众平台注册小程序后获得，申请账号的步骤以微信开放文档为准。

二、最朴素的配合方式

不装任何 Skills 也能用：

1. 用开发者工具新建项目（或让 Claude Code 按上面的结构建文件）；
2. 在项目目录启动 claude，一次只让它做一件事，例如「新增 pages/list 页面，展示一个列表，数据先写死」；
3. 回到开发者工具点击编译，看控制台有没有报错；
4. 把报错原文贴回 Claude Code，让它改；
5. 手机预览确认后，再上传、提审。

复杂需求建议先用计划模式讨论方案，见 /guides/claude-code-plan-mode；会话变长时注意上下文，见 /guides/claude-code-context-compact。

三、微信官方的 AI 辅助入口

图：本站根据 微信开放文档：工具 Skills 等页面整理的示意图

1. 开发者工具 Skills（微信文档页最后编辑于 2026-09-10）

官方说它为编程 Agent 开放一套可操作、可调试、可验证的小程序开发 Skills，能力范围包括：项目窗口的打开与关闭、页面自动化（点击、输入、滚动、截图、断言）、运行时诊断（console、network）、编译相关（单文件编译、构建 npm、刷新模拟器）、预览与发布（推送手机预览、生成二维码、上传体验版），以及云开发操作。

安装条件（官方写法）：

• 在开发者工具下载页下载 Nightly Electron Build 2.02.2607032 及以上版本；
• 安装后在终端执行 wechatide，把输出的 Skill 路径交给你的 Agent；或在开发者工具菜单栏选择「导出开发者工具 Skill」导出后导入 Agent；
• 必须先登录微信开发者工具，项目需有有效的 appid；
• Agent 首次连接时会弹窗要求授权。

用 MCP 连接（官方文档点名了 Cursor、Claude、Inspector 等）时，必须带独立的 MCP Token：到开发者工具「设置 → 安全」复制 MCP 配置，其中 args 必须含 --token。官方给的配置形如 "command": "wechatide"，"args": ["mcp", "--token", "<MCP_TOKEN>"]。

在 Claude Code 里，stdio 类 MCP 服务器的添加语法是 claude mcp add --transport stdio <名字> -- <命令> <参数>（Claude Code 官方 MCP 文档）。把两者组合，大致是下面这样（这是本站的组合写法，微信文档没有直接给 Claude Code 命令，请对照开发者工具里复制的配置）：

text
claude mcp add --transport stdio wechat-devtools -- wechatide mcp --token <你复制的MCP_TOKEN>

Token 属于敏感信息，别发给别人、别提交到仓库。MCP 的整体用法和作用范围见 /guides/claude-code-mcp-setup。

官方还列出了安全相关的说明：危险操作（云函数部署、体验版发布）会弹出确认对话框，获取 AppID、云环境等敏感信息前需要你授权；写操作需用户确认。官方同时说明所有 Skill 调用均在本地开发者工具内完成。

2. Skyline Skills（页面最后编辑于 2026-06-16）

如果项目用 Skyline 渲染引擎，官方有一组 Agent Skills，安装命令是：

text
npx skills add wechat-miniprogram/skyline-skills

更新用 npx skills update wechat-miniprogram/skyline-skills。官方列出的 Skills 包括：skyline-overview（概览与迁移）、skyline-config（JSON 配置）、skyline-components（组件）、skyline-wxss（样式）、skyline-worklet（动画）、skyline-route（自定义路由与转场）、skyline-scroll-api（滚动控制）。npx skills add 这个命令本身的说明见 /guides/npx-skills-add-cli-install-skills。

3. 云开发 Skill 与 MCP

如果后端用微信云开发，官方文档（最后编辑于 2026-07-28）给了两种方式：在开发者工具里装 CodeBuddy 扩展再装 CloudBase MCP；或在项目根目录执行 npx skills add tencentcloudbase/cloudbase-skills，官方说装完后 Skill 会出现在 .cursor/skills、.claude/skills 等目录（以所用工具为准）。官方举的用法包括查云函数日志报错、创建和部署云函数、梳理数据库权限规则。官方的使用建议是：涉及生产环境、计费资源、权限策略或批量数据操作时，保留人工确认。

4. 命令行（CLI）

开发者工具自带命令行，官方说要使用它，先在「设置 → 安全设置」中开启服务端口；Windows 上命令行工具是安装路径下的 cli.bat。官方列出的命令包括 cli preview（预览）、cli upload（上传）、cli build-npm（构建 npm）等。

四、给 Claude Code 的提示词示例

text
这是一个微信小程序项目，目录结构按微信官方规则：
每个页面由同名的 .js/.wxml/.json/.wxss 四个文件组成，页面必须在 app.json 的 pages 里登记。
请新增 pages/order-list 页面：顶部是搜索框，下面是订单列表，
数据先用本地假数据，不要调用任何网络接口，也不要改 project.config.json。
改完告诉我需要在开发者工具里检查哪几项。

text
开发者工具控制台报错如下（原文）：……
请先说明可能的原因，只改与报错直接相关的文件，不要顺手重构。

五、容易踩的坑

• 别让它改 project.config.json 里的 appid：写错会导致项目无法打开或上传到错误的账号；
• 不要把密钥写进代码：这是本站补充的常识：小程序前端代码会被打包发布，AppSecret、支付密钥这类应放在服务端；微信开放文档的「安全指引」里有专门章节，具体以官方为准；
• 提审是人工流程：代码跑通不等于能通过审核，规则以微信平台为准；
• 想长期使用 Claude Code、了解订阅与额度，可看 /chongzhi/claude-code；通用的使用习惯见 /guides/claude-code-best-practices。

常见问题

Q：不装微信的 Skills，Claude Code 能写小程序吗？

能写文件，但看不到运行效果。需要你自己在开发者工具里编译并把报错贴回去。

Q：必须用 Nightly 版开发者工具吗？

只有「开发者工具 Skills」这一项官方写了 Nightly 版本要求；普通开发不需要。

Q：支持 uni-app、Taro 吗？

本文所依据的微信开放文档页面没有讲这些框架，请参考各框架官方文档。

相关教程

• /guides/claude-code-mcp-setup：MCP 怎么配
• /guides/claude-md-agents-md：CLAUDE.md 怎么写
• /guides/claude-code-plan-mode：计划模式

参考资料

• 微信开放文档：目录结构 — https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html
• 微信开放文档：工具 Skills — https://developers.weixin.qq.com/miniprogram/dev/devtools/Skills.html
• 微信开放文档：Skyline Skills — https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/skills.html
• 微信开放文档：Skill / MCP 辅助开发 — https://developers.weixin.qq.com/miniprogram/dev/wxcloudservice/wxcloud/guide/development-assistant.html
• 微信开放文档：命令行调用 — https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html
• Claude Code 官方文档：MCP — https://code.claude.com/docs/en/mcp