Claude Code 国内使用基础教程
本教程将指导你从零开始安装并配置 Claude Code CLI，使其通过 GLM 模型 或 中转代理服务 正常运行。
1. 安装 Node.js
Claude Code CLI 是基于 Node.js 的命令行工具，因此首先需要安装 Node.js。
步骤：
- 访问 Node.js 官网，下载 LTS（长期支持）版本。
- 根据你的操作系统（Windows / macOS / Linux）完成安装。
- 验证是否安装成功：
node -v # 查看 Node.js 版本
npm -v # 查看 npm（包管理器）版本
✅ 如果输出类似
v20.10.0和10.2.3，说明安装成功。
📚 更详细安装指南可参考：掘金 Node.js 基础教程
2. 安装 Claude Code CLI
在终端中执行以下命令，全局安装 Claude Code：
npm install -g @anthropic-ai/claude-code
⏳ 安装完成后，你就可以在任何目录下使用
claude命令了。
3. 配置模型（二选一）
Claude Code 默认调用 Anthropic 官方 API，但你可以通过配置使其使用 GLM 模型 或 第三方中转代理。
方案一：使用 GLM 模型（智谱 AI）
3.1 申请 API Key
- 访问 GLM Coding 页面
- 注册/登录后，在控制台获取你的 API Key
- 选择适用于自己的套餐【这里尝个鲜，买了Lite套餐季度版，买完关闭自动续费即可，首季度50元RMB，也可以购买月度的首月20元RMB】
- 获取api key
3.2 配置 settings.json
在你的用户主目录下创建 .claude/ 文件夹（如果不存在），并在其中新建 settings.json 文件。
- Windows 路径示例：
C:\Users<你的用户名>.claude\settings.json - macOS/Linux 路径示例：
~/.claude/settings.json
文件内容如下：
{
"env": {
"ANTHROPIC_AUTH_TOKEN": "paste your api key here",
"ANTHROPIC_BASE_URL": "https://open.bigmodel.cn/api/anthropic",
"API_TIMEOUT_MS": "3000000",
"CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": 1
}
}
🔑 将
"paste your api key here"替换为你从 GLM 获取的真实 API Key。
方案二：使用中转代理（Code Relay）【白嫖-推荐】
如果你无法直接访问 GLM 或 Anthropic，可使用中转服务。
3.1 申请 API Key
- 访问 Code Relay 注册页
- 注册账号（新用户默认赠送 30 美元额度）
- 在 Dashboard 中获取你的 API Key
- 复制上图中的秘钥即可
3.2 配置 settings.json
同样在 ~/.claude/settings.json 中写入如下内容，配置完成后，需要重启命令行窗口。
{
"env": {
"ANTHROPIC_BASE_URL": "https://api.code-relay.com/",
"ANTHROPIC_AUTH_TOKEN": "paste your api key here"
}
}
🔑 同样替换为你的实际 API Key。
4. 验证配置是否成功
注意，此处验证的是中转服务版本，GLM版本自行验证【关键词：帮我写一个科技感十足的科技技术公司企业官网】，此处省略。
步骤：
- 关闭当前终端窗口
- 重新打开一个新的终端（重要！确保环境变量生效）
- 输入以下命令启动 Claude Code：
claude
预期结果：
-
成功进入交互式对话界面（类似 REPL）
-
你可以输入自然语言指令，例如：
帮我写一个微信打卡小程序，需要支持定位 -
效果如下
其他图片省略,总而言之，一个字牛逼。
- 项目结构代码
实现规划写的很详细，即生成了小程序代码，同时也生成了一个js版本的服务端。
wechat-checkin/
├── miniprogram/ # 小程序前端
│ ├── app.js
│ ├── app.json
│ ├── app.wxss
│ └── pages/
│ ├── index/ # 首页(打卡页面)
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── history/ # 打卡记录页面
│ ├── history.js
│ ├── history.json
│ ├── history.wxml
│ └── history.wxss
└── server/ # 后端服务
├── package.json
├── index.js # 入口文件
└── database.js # 数据库操作
- 规划过程详情
微信考勤打卡小程序实现计划
项目概述
开发一个支持定位的上下班考勤打卡微信小程序，包含前端小程序和后端API服务
。
技术选型
- 前端: 微信小程序原生开发
- 后端: Node.js + Express
- 数据库: SQLite (轻量级，便于演示)
项目结构
wechat-checkin/
├── miniprogram/ # 小程序前端
│ ├── app.js
│ ├── app.json
│ ├── app.wxss
│ └── pages/
│ ├── index/ # 首页(打卡页面)
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── history/ # 打卡记录页面
│ ├── history.js
│ ├── history.json
│ ├── history.wxml
│ └── history.wxss
└── server/ # 后端服务
├── package.json
├── index.js # 入口文件
└── database.js # 数据库操作
核心功能
1. 小程序前端
- 打卡首页: 显示当前时间、位置信息、打卡按钮
- 定位功能: 使用 wx.getLocation 获取GPS位置
- 打卡记录: 查看历史打卡记录列表
2. 后端API
- POST /api/checkin - 提交打卡记录
- GET /api/records - 获取打卡记录列表
- GET /api/today - 获取今日打卡状态
实现步骤
步骤1: 创建小程序项目结构
- 创建 miniprogram/ 目录和基础配置文件
- 配置 app.json 页面路由和权限
步骤2: 实现打卡首页
- 显示实时时间
- 调用定位API获取当前位置
- 上班/下班打卡按钮
- 显示今日打卡状态
步骤3: 实现打卡记录页面
- 按日期展示打卡历史
- 显示每条记录的时间和位置
步骤4: 创建后端服务
- Express服务器搭建
- SQLite数据库初始化
- 实现打卡和查询API
关键代码说明
定位API调用
wx.getLocation({
type: 'gcj02', // 返回国测局坐标
success: (res) => {
// res.latitude, res.longitude
}
})
数据库表结构
CREATE TABLE checkin_records (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id TEXT NOT NULL,
type TEXT NOT NULL, -- 'checkin' 或 'checkout'
latitude REAL,
longitude REAL,
address TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
验证方式
1. 使用微信开发者工具导入 miniprogram/ 目录
2. 启动后端服务: cd server && npm install && node index.js
3. 在开发者工具中测试打卡功能
4. 检查打卡记录是否正确保存和显示
注意事项
- 小程序需要在 app.json 中声明位置权限
- 真机调试时需要开启手机GPS
- 后端API地址需要配置到小程序的合法域名列表中（开发时可关闭校验）
⏺ 计划已批准，开始实现。
⏺ Bash(mkdir -p wechat-checkin/miniprogram/pages/index
wechat-checkin/miniprogram/pages/history wechat-checkin/server)
⎿ (No content)
⏺ Write(wechat-checkin/miniprogram/app.js)
⎿ Wrote 23 lines to wechat-checkin/miniprogram/app.js
App({
globalData: {
userInfo: null,
baseUrl: 'http://localhost:3000' // 后端服务地址，生产环境需修改
},
onLaunch() {
// 获取用户信息
this.getUserId()
},
… +13 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/miniprogram/app.json)
⎿ Wrote 34 lines to wechat-checkin/miniprogram/app.json
{
"pages": [
"pages/index/index",
"pages/history/history"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#4A90D9",
"navigationBarTitleText": "考勤打卡",
"navigationBarTextStyle": "white"
… +24 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/miniprogram/app.wxss)
⎿ Wrote 44 lines to wechat-checkin/miniprogram/app.wxss
/* 全局样式 */
page {
background-color: #f5f5f5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
font-size: 28rpx;
color: #333;
}
.container {
padding: 30rpx;
… +34 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/miniprogram/pages/index/index.js)
⎿ Wrote 176 lines to wechat-checkin/miniprogram/pages/index/index.js
const app = getApp()
Page({
data: {
currentTime: '',
currentDate: '',
location: null,
locationText: '正在获取位置...',
todayCheckin: null, // 今日上班打卡
todayCheckout: null, // 今日下班打卡
… +166 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/miniprogram/pages/index/index.json)
⎿ Wrote 4 lines to wechat-checkin/miniprogram/pages/index/index.json
{
"navigationBarTitleText": "考勤打卡"
}
⏺ Write(wechat-checkin/miniprogram/pages/index/index.wxml)
⎿ Wrote 52 lines to wechat-checkin/miniprogram/pages/index/index.wxml
<view class="container">
<!-- 时间显示区域 -->
<view class="time-section">
<view class="current-time">{{currentTime}}</view>
<view class="current-date">{{currentDate}}</view>
</view>
<!-- 位置信息 -->
<view class="location-section">
<view class="location-header">
… +42 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/miniprogram/pages/index/index.wxss)
⎿ Wrote 125 lines to wechat-checkin/miniprogram/pages/index/index.wxss
/* 时间显示区域 */
.time-section {
background: linear-gradient(135deg, #4A90D9 0%, #357ABD 100%);
border-radius: 20rpx;
padding: 60rpx 40rpx;
text-align: center;
margin-bottom: 30rpx;
box-shadow: 0 8rpx 30rpx rgba(74, 144, 217, 0.3);
}
… +115 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/miniprogram/pages/history/history.js)
⎿ Wrote 102 lines to wechat-checkin/miniprogram/pages/history/history.js
const app = getApp()
Page({
data: {
records: [],
loading: false,
empty: false
},
onShow() {
… +92 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/miniprogram/pages/history/history.json)
⎿ Wrote 5 lines to wechat-checkin/miniprogram/pages/history/history.json
{
"navigationBarTitleText": "打卡记录",
"enablePullDownRefresh": true
}
⏺ Write(wechat-checkin/miniprogram/pages/history/history.wxml)
⎿ Wrote 40 lines to wechat-checkin/miniprogram/pages/history/history.wxml
<view class="container">
<!-- 加载中 -->
<view wx:if="{{loading}}" class="loading-box">
<text>加载中...</text>
</view>
<!-- 空状态 -->
<view wx:elif="{{empty}}" class="empty-box">
<text class="empty-text">暂无打卡记录</text>
<text class="empty-hint">快去打卡吧~</text>
… +30 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/miniprogram/pages/history/history.wxss)
⎿ Wrote 104 lines to wechat-checkin/miniprogram/pages/history/history.wxss
.container {
padding: 20rpx;
}
/* 加载中 */
.loading-box {
display: flex;
justify-content: center;
align-items: center;
height: 400rpx;
… +94 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/server/package.json)
⎿ Wrote 15 lines to wechat-checkin/server/package.json
{
"name": "checkin-server",
"version": "1.0.0",
"description": "考勤打卡小程序后端服务",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "^4.18.2",
… +5 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/server/database.js)
⎿ Wrote 72 lines to wechat-checkin/server/database.js
const Database = require('better-sqlite3')
const path = require('path')
const dbPath = path.join(__dirname, 'checkin.db')
const db = new Database(dbPath)
// 初始化数据库表
db.exec(`
CREATE TABLE IF NOT EXISTS checkin_records (
id INTEGER PRIMARY KEY AUTOINCREMENT,
… +62 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/server/index.js)
⎿ Wrote 133 lines to wechat-checkin/server/index.js
const express = require('express')
const cors = require('cors')
const db = require('./database')
const app = express()
const PORT = process.env.PORT || 3000
// 中间件
app.use(cors())
app.use(express.json())
… +123 lines (ctrl+o to expand)
⏺ Write(wechat-checkin/miniprogram/project.config.json)
⎿ Wrote 45 lines to wechat-checkin/miniprogram/project.config.json
{
"description": "考勤打卡小程序",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"bundle": false,
"userConfirmedBundleSwitch": false,
"urlCheck": false,
… +35 lines (ctrl+o to expand)
⏺ 微信打卡小程序已创建完成。项目结构如下：
wechat-checkin/
├── miniprogram/ # 小程序前端
│ ├── app.js # 全局配置
│ ├── app.json # 页面路由和权限
│ ├── app.wxss # 全局样式
│ ├── project.config.json # 项目配置
│ └── pages/
│ ├── index/ # 打卡首页
│ └── history/ # 打卡记录
└── server/ # 后端服务
├── package.json
├── index.js # Express服务
└── database.js # SQLite数据库
功能特性
小程序前端：
- 实时显示当前时间和日期
- 调用 wx.getLocation 获取GPS定位
- 上班/下班打卡按钮
- 显示今日打卡状态
- 查看历史打卡记录
后端API：
- POST /api/checkin - 提交打卡
- GET /api/today - 获取今日状态
- GET /api/records - 获取打卡记录
使用方法
1. 启动后端服务：
cd wechat-checkin/server
npm install
npm start
2. 导入小程序：
- 打开微信开发者工具
- 选择「导入项目」
- 目录选择 wechat-checkin/miniprogram
- AppID 使用测试号或填入您自己的 AppID
3. 开发调试：
- 在开发者工具中关闭「不校验合法域名」选项
- 真机调试需开启手机GPS权限
5. 启动项目验证
1、前端代码加载
将小程序代码导入微信开发者工具运行后效果如下：
2、后端代码启动
cd wechat-checkin/server
npm install
npm start
3、功能验证
点击上班打卡，下班打卡功能正常
6.✅ 恭喜！你已成功配置 Claude Code！
现在你可以：
- 在终端中直接与 AI 编程助手对话
- 快速生成代码、解释错误、优化逻辑
- 结合本地项目进行智能辅助开发
💡 提示：首次使用建议在网络畅通环境下测试，确保 API 调用正常。
7.常见问题排查
| 问题 | 可能原因 | 解决方案 |
|---|---|---|
command not found: claude | CLI 未正确安装 | 重新运行 npm install -g @anthropic-ai/claude-code |
报错 Invalid API key | API Key 错误或未生效 | 检查 settings.json 是否保存、Key 是否正确 |
| 无响应或超时 | 网络不通或代理不可用 | 检查 ANTHROPIC_BASE_URL 是否可访问 |
📘 附录
- Claude Code 官方文档（如有）：暂未公开
- GLM Coding：www.bigmodel.cn/glm-coding
- Code Relay：api.code-relay.com
