开发环境搭建教程 - Node.js + Claude Code + 微信开发者工具

0

准备工作 & 系统要求

在开始之前，请确认你的电脑满足以下要求：

项目	最低要求
操作系统	Windows 10 / macOS 10.15 / Ubuntu 20.04 或更新
内存	8 GB（推荐 16 GB）
硬盘	至少 5 GB 可用空间
网络	需要稳定的互联网连接

提示：请使用页面顶部的切换按钮选择你的操作系统，教程内容会自动切换为对应系统的安装步骤。

1

安装 Node.js

Node.js 是 JavaScript 的运行环境，也是后续安装 Claude Code 的前置依赖。我们推荐安装 LTS（长期支持）版本。

1.1 下载并安装

第一步：下载 Node.js

前往清华大学开源软件镜像站下载 Node.js v22.9.0 压缩包：

https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v22.9.0/

在文件列表中找到并下载 node-v22.9.0-win-x64.zip（约 31.6 MB）：

第二步：创建安装目录

打开文件资源管理器，进入 C:\Program Files，新建一个名为 nodejs 的文件夹。

提示：如果提示需要管理员权限，请点击"继续"确认。

第三步：解压文件

右键下载的 node-v22.9.0-win-x64.zip，选择 "全部解压缩" 或使用解压工具解压
打开解压后的 node-v22.9.0-win-x64 文件夹
将文件夹内的 所有文件和文件夹（node.exe、npm、npx、node_modules 等）复制到 C:\Program Files\nodejs 目录中

第四步：配置系统环境变量

需要将 Node.js 的路径添加到系统 PATH 中，这样才能在命令行中使用 node 和 npm 命令：

按 Win + S 搜索 "环境变量"，点击 "编辑系统环境变量"
在弹出的"系统属性"窗口中，点击右下角的 "环境变量" 按钮
在下方 "系统变量" 区域中，找到名为 Path 的变量，双击打开编辑
点击 "新建"，输入：C:\Program Files\nodejs
依次点击 "确定" 关闭所有窗口

重要：配置环境变量后，必须 关闭并重新打开 命令提示符（cmd）或 PowerShell 窗口，新的环境变量才会生效。

前往 Node.js 官方网站下载安装包：https://nodejs.org/zh-cn，点击 LTS（长期维护版） 按钮下载 .pkg 文件。

双击下载的 .pkg 安装包
按照安装向导点击继续，同意许可协议
选择安装位置（建议保持默认），点击安装
输入电脑密码授权安装
等待安装完成，点击关闭

也可以使用 Homebrew 安装（推荐）：

brew install node@22

1.2 验证安装

安装完成后，按 Win + R 输入 cmd 打开命令提示符，输入以下命令：

安装完成后，打开"终端"应用，输入以下命令：

node -v npm -v

如果能看到版本号输出（如 v22.x.x 和 10.x.x），说明安装成功。

成功标志：两个命令都输出了版本号，表示 Node.js 和 npm 都已正确安装。

2

安装 Claude Code

Claude Code 是 Anthropic 推出的 AI 编程助手命令行工具，可以帮你在终端中直接与 Claude 交互，编写和修改代码。

2.1 安装 Git

Claude Code 依赖 Git 进行版本管理，Windows 需要先安装 Git for Windows。

前往清华大学镜像站下载：

https://mirrors.tuna.tsinghua.edu.cn/github-release/git-for-windows/git/

进入最新版本文件夹（如 Git for Windows v2.53.0.windows.1），下载 Git-2.53.0-64-bit.exe 安装包：

双击下载的 .exe 安装包
安装过程中所有选项 保持默认 即可，一路点击 Next
点击 Install 开始安装，完成后点击 Finish

安装完成后，重新打开命令提示符，输入以下命令验证：

git --version

2.2 安装 Claude Code

确保 Node.js 已安装好之后，打开终端执行：

npm install -g @anthropic-ai/claude-code

提示：如果提示权限不足，请在命令前加上 sudo：
sudo npm install -g @anthropic-ai/claude-code

2.3 安装并配置 CC-Switch

CC-Switch 是 Claude Code 的配置管理工具，用于便捷地切换和管理 API 供应商配置。

安装 CC-Switch

下载安装包并双击运行：

https://doc.wfspin.com/CC-Switch-v3.11.1-Windows.msi

按照安装向导提示，点击 Next，选择安装路径（建议保持默认），点击 Install 完成安装。

配置供应商

安装完成后打开 CC-Switch，按以下步骤配置：

点击 "自定义配置"，在下方填写 供应商名称（例如你的 API 服务名称）

填写 API Key（你的密钥）
填写 请求地址（API 端点地址，不要以斜杠结尾）
选择 API 格式，填写需要使用的模型名称（可选，留空使用系统默认）
点击右下角 "添加" 保存配置

提示：CC-Switch 配置完成后，Claude Code 将通过你设置的 API 端点进行通信。请确保端点地址和密钥正确无误。

2.3 安装并配置 CC-Switch

CC-Switch 是 Claude Code 的配置管理工具，用于便捷地切换和管理 API 供应商配置。

安装 CC-Switch

在终端中使用 Homebrew 安装：

brew tap farion1231/ccswitch brew install --cask cc-switch

前提：需要先安装 Homebrew，如果还没有安装请参考常见问题中的 Homebrew 安装方法。

配置供应商

安装完成后打开 CC-Switch，按以下步骤配置：

点击 "自定义配置"，在下方填写 供应商名称（例如你的 API 服务名称）

填写 API Key（你的密钥）
填写 请求地址（API 端点地址，不要以斜杠结尾）
选择 API 格式，填写需要使用的模型名称（可选，留空使用系统默认）
点击右下角 "添加" 保存配置

提示：CC-Switch 配置完成后，Claude Code 将通过你设置的 API 端点进行通信。请确保端点地址和密钥正确无误。

2.4 验证安装

安装完成后执行：

claude --version

看到版本号输出即表示安装成功。

2.5 登录认证

通过 CC-Switch 配置好 API 供应商后，Claude Code 会自动使用你设置的端点和密钥进行通信，无需额外登录。

认证完成！如果你在上一步中已通过 CC-Switch 正确配置了供应商信息，Claude Code 即可直接使用。

2.6 基本配置

登录后可以进行一些基本设置：

# 查看当前配置 claude config list # 设置主题（可选） claude config set theme dark

安装完成！现在你可以在任何项目目录下运行 claude 来启动 AI 编程助手了。

3

安装微信开发者工具

微信开发者工具是开发微信小程序的官方 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

使用教程

4.1 使用 Claude Code 辅助开发小程序

以下是推荐的工作流程，让 Claude Code 帮你更高效地开发微信小程序：

在项目目录下打开终端
在微信开发者工具的项目文件列表中，右键点击项目根目录，选择 "在内建终端中打开"：
启动 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。

Q: macOS 如何安装 Homebrew？

A: Homebrew 是 macOS 上最常用的包管理器，安装 CC-Switch 和 Node.js 都需要用到。在终端中执行以下命令即可安装：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

如果访问 GitHub 速度较慢，可以使用国内镜像源安装：

/bin/bash -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

安装完成后，执行 brew --version 验证是否安装成功。