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