在开始之前，请确认你的电脑满足以下要求：
| 项目 | 最低要求 |
|---|
| 操作系统 | Windows 10 / macOS 10.15 / Ubuntu 20.04 或更新 |
| 内存 | 8 GB（推荐 16 GB） |
| 硬盘 | 至少 5 GB 可用空间 |
| 网络 | 需要稳定的互联网连接 |
提示：本教程会同时提供 Windows 和 macOS 的安装步骤，请根据你的系统选择对应的操作。
Node.js 是 JavaScript 的运行环境，也是后续安装 Claude Code 的前置依赖。我们推荐安装 LTS（长期支持）版本。
1.1 下载 Node.js
前往 Node.js 官方网站下载安装包：
https://nodejs.org/zh-cn
点击页面上的 LTS（长期维护版） 按钮下载。
注意：请务必下载 LTS 版本（版本号为偶数，如 20.x、22.x），不要下载 Current（最新尝鲜版），LTS 版本更加稳定。
1.2 安装步骤
- 双击下载的
.msi 安装包
- 点击 Next，勾选 "I accept the terms..." 同意协议
- 安装路径建议保持默认（
C:\Program Files\nodejs）
- 在功能选择页面，确保 Add to PATH 选项被勾选（默认已勾选）
- 点击 Install 开始安装，等待完成后点击 Finish
- 双击下载的
.pkg 安装包
- 按照安装向导点击 继续，同意许可协议
- 选择安装位置（建议保持默认），点击 安装
- 输入电脑密码授权安装
- 等待安装完成，点击 关闭
也可以使用 Homebrew 安装（推荐）：
brew install node@22
1.3 验证安装
安装完成后，打开 终端（Windows: 按 Win + R 输入 cmd；macOS: 打开"终端"应用），输入以下命令：
node -v
npm -v
如果能看到版本号输出（如 v22.x.x 和 10.x.x），说明安装成功。
成功标志：两个命令都输出了版本号，表示 Node.js 和 npm 都已正确安装。
Claude Code 是 Anthropic 推出的 AI 编程助手命令行工具，可以帮你在终端中直接与 Claude 交互，编写和修改代码。
2.1 安装 Claude Code
确保 Node.js 已安装好之后，打开终端执行：
npm install -g @anthropic-ai/claude-code
提示：macOS / Linux 用户如果提示权限不足，请在命令前加上 sudo：
sudo npm install -g @anthropic-ai/claude-code
2.2 验证安装
安装完成后执行：
claude --version
看到版本号输出即表示安装成功。
2.3 登录认证
首次使用需要登录 Anthropic 账号：
- 在终端中输入
claude 启动 Claude Code
- 首次运行时会提示你选择认证方式，按提示操作即可
- 在浏览器中完成登录授权
- 回到终端，看到欢迎信息说明登录成功
2.4 基本配置
登录后可以进行一些基本设置：
# 查看当前配置
claude config list
# 设置主题（可选）
claude config set theme dark
安装完成！现在你可以在任何项目目录下运行 claude 来启动 AI 编程助手了。
微信开发者工具是开发微信小程序的官方 IDE，支持代码编辑、预览、调试和发布。
3.1 下载开发者工具
前往微信官方下载页面：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
根据你的操作系统选择对应版本下载 稳定版 Stable Build。
3.2 安装步骤
- 双击下载的
.exe 安装包
- 选择安装路径（建议保持默认或选择一个容易找到的路径）
- 点击 安装，等待安装完成
- 安装完成后会自动创建桌面快捷方式
- 双击下载的
.dmg 文件
- 将"微信开发者工具"图标拖入 Applications 文件夹
- 首次打开时如果提示"无法打开"，前往 系统设置 → 隐私与安全性，点击"仍要打开"
3.3 登录和创建项目
- 打开微信开发者工具，使用 微信扫码 登录
-
点击 + 号创建新项目，填写以下信息：
- 项目名称：随意填写，如 "my-miniapp"
- 目录：选择一个空文件夹作为项目目录
- AppID：如果还没有，可以点击"测试号"使用测试 AppID
- 选择 不使用模板 或选择一个模板快速开始
- 点击 确定 创建项目
注意：如果需要正式发布小程序，需要到
微信公众平台 注册小程序账号并获取正式 AppID。测试号仅用于本地开发。
3.4 了解界面布局
| 区域 | 功能 |
|---|
| 左侧 - 模拟器 | 实时预览小程序在手机上的效果 |
| 中间 - 编辑器 | 编写代码（WXML、WXSS、JS、JSON） |
| 底部 - 调试器 | 查看日志、调试网络请求、审查元素 |
| 顶部 - 工具栏 | 编译、预览（手机扫码预览）、上传代码 |
4.1 使用 Claude Code 辅助开发小程序
以下是推荐的工作流程，让 Claude Code 帮你更高效地开发微信小程序：
-
在项目目录下启动 Claude Code
# 进入你的小程序项目目录
cd /path/to/your/miniapp
# 启动 Claude Code
claude
-
用自然语言描述你想做的事
# 在 Claude Code 中输入：
> 帮我创建一个小程序首页，包含一个搜索框和一个商品列表
Claude 会自动分析项目结构，生成对应的 WXML、WXSS、JS 文件代码。
-
回到微信开发者工具查看效果
Claude Code 修改文件后，微信开发者工具会自动检测文件变化并刷新预览。
-
继续迭代优化
# 继续向 Claude 提出修改需求：
> 把商品列表改成两列网格布局，加上价格标签
> 给搜索框添加搜索功能，可以按名称过滤商品
4.2 Claude Code 常用命令
| 命令 | 说明 |
|---|
claude | 启动交互式对话 |
claude "你的问题" | 直接提问，不进入交互模式 |
claude --help | 查看帮助信息 |
/help | 在交互模式中查看帮助 |
/clear | 清除当前对话上下文 |
/cost | 查看当前会话的 token 使用情况 |
4.3 小程序开发实战示例
下面是一些你可以直接在 Claude Code 中尝试的指令：
# 创建新页面
> 帮我创建一个"个人中心"页面，包含头像、昵称和设置列表
# 添加网络请求
> 帮我写一个请求 API 获取商品列表的函数，使用 wx.request
# 添加本地存储
> 帮我实现用户登录状态的本地缓存，使用 wx.setStorageSync
# 修复 Bug
> 页面跳转后数据没有刷新，帮我排查一下 onShow 的逻辑
# 优化样式
> 帮我把这个页面适配 iPhone 和 Android 不同屏幕尺寸
4.4 开发调试技巧
实用技巧：
- 在微信开发者工具中按
Ctrl/Cmd + B 可以快速打开/关闭模拟器
- 使用 真机调试 功能（工具栏）可以在手机上调试
- 调试器的 AppData 面板可以实时查看和修改页面数据
- 开启 热重载（编译旁边的下拉菜单）可以保留页面状态刷新
Q: 安装 Node.js 后，终端提示 "node 不是内部或外部命令"
A: 这通常是环境变量未配置。请尝试：
- 关闭当前终端窗口，重新打开一个新的
- 如果仍然不行，检查安装时是否勾选了 "Add to PATH"
- 手动添加 Node.js 安装路径到系统环境变量 PATH 中
Q: npm install 速度很慢怎么办？
A: 可以使用国内镜像加速：
# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com
# 验证是否设置成功
npm config get registry
Q: Claude Code 提示认证失败？
A: 请检查以下几点：
- 确保网络连接正常，能访问外部网站
- 尝试重新运行
claude 重新登录
- 检查是否需要配置代理
Q: 微信开发者工具打不开或白屏？
A: 常见解决方法：
- 确保系统版本符合最低要求
- 尝试以管理员身份运行（Windows）
- 清除缓存：删除
~/.config/wechat-devtools 目录后重新打开
- 重新下载最新版安装包覆盖安装
Q: 小程序预览时报错 "AppID 不合法"？
A: 创建项目时选择 "测试号" 即可绕过这个问题进行本地开发和测试。如果要发布上线，则需要到微信公众平台注册并获取正式 AppID。