使用 TRAE / VS Code + DeepSeek V4 开发微信小程序、网页并实现变现：CSDN 技术教程

本文适合发布到 CSDN。全文采用 CSDN 兼容 Markdown 写法：标题、目录、表格、引用、代码块均使用基础 Markdown 语法，不使用复杂 HTML、Mermaid 或不稳定扩展语法。

文章信息

  • 适用对象：个人开发者、学生团队、实验室项目负责人、小程序创业者、AI 编程初学者。
  • 技术路线一：TRAE + DeepSeek V4 + 微信开发者工具。
  • 技术路线二：VS Code + Claude Code 插件 + DeepSeek V4 + 微信开发者工具。
  • 目标：快速完成微信小程序、网页后台、后端接口 Demo，并梳理测试发布与变现路径。
  • 安全提醒：不要在截图、Git 仓库、前端代码、小程序端代码中公开 API Key、AppSecret 或数据库密码。若 Key 已经出现在截图或公开文档中，建议立即删除并重新生成。

文章目录

0. 总体开发思路

0.1 工具分工

工具 主要作用 适合场景
TRAE CN AI 原生 IDE，可直接生成、修改、解释代码 新手快速做 Demo、小程序页面生成、网页后台搭建
VS Code 通用代码编辑器，插件生态成熟 工程化项目开发、Git 管理、前后端协同
Claude Code for VS Code 在 VS Code 内以 Agent 方式读取项目、修改代码、运行命令 跨文件重构、Bug 定位、接口联调、代码审查
DeepSeek V4 API 大模型后端能力 作为 AI 编程工具模型后端，也可用于小程序 AI 功能
微信开发者工具 微信小程序官方开发、预览、真机调试、上传工具 小程序调试、体验版、代码上传、审核发布

0.2 推荐开发闭环

需求描述
  ↓
AI 工具生成或修改代码
  ↓
微信开发者工具打开 miniprogram 项目
  ↓
模拟器预览 + Console / Network / AppData 调试
  ↓
回到 AI 工具定位问题并修改代码
  ↓
真机预览 / 体验版测试
  ↓
上传代码 → 提交审核 → 发布上线

0.3 推荐项目目录结构

my-product/
├─ miniprogram/              # 微信小程序源码
│  ├─ app.js
│  ├─ app.json
│  ├─ app.wxss
│  ├─ pages/
│  ├─ components/
│  ├─ utils/
│  └─ project.config.json
├─ web-admin/                # 网页后台，可选 Vue / React / Vite
├─ server/                   # 后端服务，可选 FastAPI / Express / NestJS
├─ docs/                     # 产品文档、接口文档、提示词模板
├─ .env.example              # 环境变量示例，不放真实 Key
└─ README.md

第一部分：使用 TRAE + 微信开发者工具进行小程序、网页开发和变现

1. 准备工作：下载和安装 TRAE + 微信开发者工具

1.1 安装 TRAE CN

操作步骤如下：

  1. 打开 TRAE 官网或 TRAE CN 下载入口。
  2. 选择 Windows 或 macOS 对应安装包。
  3. 安装完成后登录账号。
  4. 新建一个工作目录，例如：
D:\AI-Projects\wechat-miniapp-demo
  1. 在 TRAE 中打开该目录，后续代码统一放在这个目录下。

1.2 安装微信开发者工具

操作步骤如下：

  1. 打开微信开发者工具官方下载页面。
  2. 选择 Stable Build 稳定版。
  3. 安装后使用微信扫码登录。
  4. 第一次可以选择“无 AppID”创建测试项目；正式发布前必须使用真实小程序 AppID。

安装完成后建议先验证以下流程：

微信开发者工具 → 新建小程序项目 → 选择目录 → 选择 JavaScript / TypeScript → 创建成功 → 模拟器正常启动

1.3 安装基础开发环境

建议同时安装以下工具：

Node.js LTS        # 前端构建、包管理
Git                # 版本管理
pnpm 或 npm        # 包管理器
微信开发者工具 CLI  # 可选，后续可做自动上传

检查命令如下：

node -v
npm -v
git --version

1.4 创建第一个小程序项目

推荐先用微信开发者工具创建项目，再让 TRAE 接管代码修改。

  1. 打开微信开发者工具。
  2. 选择“小程序”。
  3. 项目名称填写：miniapp-demo。
  4. 目录选择：my-product/miniprogram。
  5. AppID：初学阶段可选择测试号，正式上线时填写微信公众平台后台获取的 AppID。
  6. 开发语言选择 JavaScript 或 TypeScript。
  7. 创建后确认 app.json、pages/index/index.wxml 等文件存在。
  8. 在 TRAE 中打开上一级目录 my-product/。

2. 模型配置：TRAE CN 自定义接入 DeepSeek V4

说明：TRAE 的界面名称可能随版本变化，通常入口为“设置 / Settings → 模型 / Models → 添加模型 / Add Model → 自定义配置 / Custom”。如果实际界面略有不同，以当前版本实际入口为准。

2.1 获取 DeepSeek API Key

操作步骤如下：

  1. 打开 DeepSeek 开放平台。
  2. 注册并登录账号。
  3. 进入 API Keys 页面。
  4. 新建一个专用于 AI 编程工具的 Key。
  5. 复制后只保存到本机安全位置，不要放入项目源码。

建议按用途命名 Key：

TRAE_DEV_2026
VSCODE_CLAUDE_CODE_DEV_2026

这样后续发现泄露时，可以快速定位并删除对应 Key。

2.2 在 TRAE 中添加 DeepSeek V4 模型

在 TRAE CN 中按如下路径配置：

设置 → 模型 → 添加模型 → 自定义配置

推荐参数如下：

参数 推荐值 说明
Provider / 协议类型 OpenAI Compatible 多数 IDE 自定义模型入口支持 OpenAI 兼容协议
Base URL https://api.deepseek.com DeepSeek OpenAI 兼容 API 地址
API Key YOUR_DEEPSEEK_API_KEY 使用你自己的 Key，不要公开
Model ID deepseek-v4-pro 适合复杂代码生成、重构、推理
备用 Model ID deepseek-v4-flash 适合快速问答、简单修改、低成本调用
Temperature 0.2 到 0.6 代码任务建议偏低，减少随机性
Max Tokens 视工具支持设置 复杂重构可适当提高

如果服务商或网关要求模型名带后缀，例如：

deepseek-v4-pro[lm]
deepseek-v4-flash

则以服务商后台“模型列表 / Model ID”为准。通用技术文档中不要写死个人 Token、本机路径或不确定的私有网关参数。

2.3 测试模型是否可用

在 TRAE 对话框输入：

请读取当前项目目录，说明这是一个微信小程序、网页项目还是普通前端项目。只输出：项目类型、主要目录、下一步建议。

如果模型能正确读取项目并给出建议，说明接入基本成功。

继续测试代码生成能力：

请在当前微信小程序项目中新增一个 pages/todo 页面，包含：
1. 输入框：输入待办事项；
2. 添加按钮：点击后加入列表；
3. 列表展示：显示事项内容和完成状态；
4. 本地存储：使用 wx.setStorageSync / wx.getStorageSync 保存数据；
5. 修改 app.json，加入页面路径。
请直接修改文件，并说明修改了哪些文件。

2.4 常见错误排查

现象 可能原因 处理方式
401 / Unauthorized API Key 错误、已失效、复制时多了空格 重建 Key，重新粘贴
404 / model not found Model ID 写错，或服务商不支持该模型 到模型列表复制准确名称
连接超时 网络或代理问题 检查代理、DNS、公司或校园网限制
能问答但不能改文件 TRAE 权限不足或工作区未打开 确认打开的是项目根目录，并允许文件修改
生成大量无关代码 提示词不够明确 明确“只修改哪些文件”“不要重构无关部分”

3. 实战操作：从小程序 Demo 开始熟悉提示词和界面交互

3.1 选择适合变现的 Demo 方向

初学阶段不要直接做“大而全平台”，建议从低复杂度、高刚需的小工具切入。

方向 小程序功能 变现方式
预约 / 报名工具 活动报名、实验室仪器预约、课程预约 B 端定制、SaaS 年费
库存 / 台账工具 试剂库存、耗材出入库、设备台账 单位采购、私有化部署
资料 / 题库工具 课程资料、专业题库、面试题库 会员、付费资料、广告
本地生活工具 校园跑腿、维修登记、二手信息 信息服务费、商家入驻
AI 工具小程序 文案生成、论文润色、图片说明 次数包、会员、企业版

建议第一个 Demo 做“任务清单 + 数据统计”，因为它包含小程序常用能力：页面、组件、状态、缓存、表单、列表和调试。

3.2 通用提示词结构

在 TRAE 中推荐使用下面的提示词结构：

你是一个资深微信小程序前端工程师。

【项目背景】
当前项目是微信小程序原生项目，使用 JavaScript + WXML + WXSS。

【目标】
请实现一个“待办事项 Demo”，用于熟悉小程序页面、事件绑定、本地缓存和调试流程。

【功能要求】
1. 首页展示今日待办数量、已完成数量；
2. 新增 pages/todo 页面；
3. 支持新增、完成、删除待办；
4. 使用本地缓存保存数据；
5. 页面样式简洁，适合手机端；
6. 修改 app.json 注册页面。

【限制】
1. 不要引入第三方 UI 库；
2. 不要修改 project.config.json；
3. 不要删除已有页面；
4. 每次修改后说明改动文件和测试方式。

【验收标准】
微信开发者工具中可以正常编译；控制台无 JS 报错；新增、完成、删除、刷新后数据保留。

3.3 让 TRAE 生成页面后如何检查

重点检查以下文件：

app.json
pages/todo/todo.wxml
pages/todo/todo.wxss
pages/todo/todo.js
pages/todo/todo.json

app.json 中应包含类似内容：

{
  "pages": [
    "pages/index/index",
    "pages/todo/todo"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  }
}

todo.js 中应至少包含：

Page({
  data: {
    inputValue: '',
    todos: []
  },
  onLoad() {
    const todos = wx.getStorageSync('todos') || []
    this.setData({ todos })
  },
  onInput(e) {
    this.setData({ inputValue: e.detail.value })
  }
})

如果 TRAE 生成的代码无法运行，直接复制报错给 TRAE：

微信开发者工具报错如下：
【粘贴完整错误】
请判断是 WXML、JS 还是 app.json 的问题。只修改必要文件，不要重写整个项目。

3.4 网页开发 Demo：管理后台

如果产品未来需要后台管理，可以在同一项目中新建 web-admin/：

npm create vite@latest web-admin -- --template vue
cd web-admin
npm install
npm run dev

让 TRAE 生成后台页面：

请在 web-admin 中实现一个简单管理后台：
1. 左侧菜单：仪表盘、用户、订单、设置；
2. 仪表盘展示 4 个统计卡片；
3. 用户页展示表格、搜索框、新增按钮；
4. 仅使用 Vue + CSS，不引入复杂 UI 库；
5. 生成清晰的组件结构。

网页端常用于：

管理员审核数据
商家管理订单
学校 / 实验室导入 Excel
查看统计报表
配置小程序内容

4. 前端调试：微信开发者工具 Debug + TRAE 优化代码

4.1 微信开发者工具常用调试面板

面板 用途 常见问题
Console 查看 console.log 和 JS 报错 变量未定义、事件函数不存在
Network 查看请求、响应、状态码 域名未配置、接口 404、HTTPS 问题
Sources 断点调试 JS 数据流复杂、异步请求异常
AppData 查看页面 data 状态 setData 未生效、字段名写错
Storage 查看本地缓存 缓存 Key 写错、数据结构不一致
WXML 查看节点结构和样式 样式不生效、元素层级问题
Performance 分析性能 首屏慢、长列表卡顿

4.2 推荐 Debug 流程

1. 微信开发者工具编译
2. 看 Console 第一条报错
3. 看报错文件和行号
4. 回到 TRAE 让模型定位
5. 只允许模型修改相关文件
6. 再次编译验证
7. 真机预览确认

4.3 常用调试提示词

修复编译错误：

微信开发者工具编译报错如下：
【粘贴错误信息】

请你：
1. 判断错误原因；
2. 指出涉及文件；
3. 只修改必要代码；
4. 修改后给出验证步骤。

修复接口请求错误：

小程序 Network 面板显示接口请求失败：
URL：xxx
状态码：xxx
响应：xxx

请检查小程序端请求代码和 server 目录后端接口是否一致。不要改变接口语义，只修复路径、参数或返回结构不一致的问题。

优化页面交互：

请优化 pages/todo 页面交互：
1. 输入为空时点击添加，显示 toast；
2. 删除前弹出确认框；
3. 完成事项增加视觉区分；
4. 页面顶部显示统计数据；
5. 不要引入第三方库。

4.4 后端继续在 TRAE 工作目录下优化

如果项目有后端，推荐结构如下：

server/
├─ app.py                 # FastAPI 入口
├─ models.py              # 数据模型
├─ routes/
├─ services/
├─ requirements.txt
└─ .env.example

小程序请求后端时需要注意：

  1. 正式环境必须使用 HTTPS。
  2. 请求域名需要在微信公众平台后台配置。
  3. AppSecret、数据库密码、DeepSeek API Key 必须只放后端，不能放小程序前端。
  4. 小程序端只调用自己的后端接口，由后端再调用 DeepSeek。

错误示例：

// 不推荐：不要在小程序端写 DeepSeek Key
const apiKey = 'sk-xxxx'

正确架构：

小程序前端 → 你的后端 API → DeepSeek API

5. 测试发布：注册微信小程序开发者、上传、备案、审核全流程

5.1 注册微信小程序账号

基础流程：

微信公众平台 → 立即注册 → 小程序 → 填写邮箱 → 邮箱激活 → 选择主体类型 → 填写主体/管理员信息 → 完成认证 → 获取 AppID

主体类型建议：

主体 适合场景 注意事项
个人 个人工具、非商业 Demo 支付、部分接口和类目可能受限
企业 / 个体工商户 商业化、支付、广告、SaaS 需要营业执照、对公或法人信息
政府 / 媒体 / 组织 特定机构服务 审核和材料更严格

5.2 发布前后台配置

在微信公众平台后台完成：

基本信息：名称、头像、简介
服务类目：选择与功能一致的类目
开发管理：配置服务器域名、业务域名、上传密钥
用户隐私保护：填写隐私协议
小程序备案：按后台入口填写备案信息
成员管理：添加开发者、体验者
支付与交易：如需支付，配置微信支付商户号

5.3 上传代码

在微信开发者工具中操作：

右上角“上传” → 填写版本号 → 填写项目备注 → 上传

建议版本号规范如下：

0.1.0  内测 Demo
0.2.0  功能完善
1.0.0  首次正式发布
1.0.1  Bug 修复

项目备注示例：

新增待办事项页面，支持本地缓存、统计、删除确认，修复首页跳转问题。

5.4 设置体验版

上传后进入微信公众平台：

版本管理 → 开发版本 → 设为体验版 → 添加体验成员 → 生成体验二维码

体验版重点测试以下内容：

首页能否打开
所有页面能否跳转
真机网络请求是否正常
登录授权是否正常
表单提交是否正常
支付流程是否正常
隐私弹窗是否合规
弱网 / 无网提示是否友好

5.5 提交审核与发布

发布流程如下：

版本管理 → 开发版本 → 提交审核 → 填写功能页面和服务类目 → 等待审核 → 审核通过 → 发布上线

审核前检查：

  1. 小程序名称、简介、类目与实际功能一致。
  2. 不要出现“未开放页面”“测试按钮”“假数据购买”等明显测试痕迹。
  3. 用户登录、手机号、定位、相册等权限必须有合理用途说明。
  4. 如果收集用户信息，需要配置隐私保护指引。
  5. 如果涉及内容、医疗、金融、教育、新闻等敏感行业，需要提前确认资质要求。
  6. 如果涉及支付，商品、退款、客服、售后说明需要清晰。

5.6 小程序备案流程提示

常见流程如下：

微信公众平台后台 → 小程序备案 → 验证主体 → 填写主体信息 → 填写负责人信息 → 填写小程序信息 → 平台初审 → 短信核验 → 管局审核 → 获得备案号

注意事项：

  1. 备案主体应与小程序主体保持一致。
  2. 手机号要能接收工信部短信核验。
  3. 小程序备注要写清楚实际服务内容。
  4. 涉及前置审批的行业不要随意选择普通类目。
  5. 备案周期因地区和材料质量不同而变化，以后台提示为准。

6. 小程序和网页的变现路径

6.1 常见变现方式

方式 适合项目 关键条件
微信广告 / 流量主 工具、内容、题库、资讯 有稳定访问量，体验不能被广告破坏
微信支付卖实物 电商、本地生活、课程资料实物 企业或个体资质、商户号、售后能力
会员 / 次数包 AI 工具、资料库、题库、效率工具 注意虚拟支付规则和平台要求
B 端定制 实验室管理、学校工具、企业表单 线下销售、需求沟通、私有化部署
SaaS 年费 预约、库存、CRM、台账 后台管理、数据安全、持续维护
引流到服务 咨询、课程、科研工具、设计服务 内容可信、转化路径清楚

6.2 初学者最推荐的三条路线

路线 A：工具型小程序 + 广告

适合：计算器、资料检索、效率工具、校园工具。

特点：开发简单，收入依赖访问量。

重点：SEO、分享裂变、用户留存。

路线 B：小程序 + 后台 + B 端定制

适合：实验室试剂管理、设备预约、课题组资料库、会议报名。

特点：访问量不一定大，但单客户价值高。

重点：稳定、可导出 Excel、权限管理、售后。

路线 C：AI 功能 + 次数包 / 会员

适合：AI 文案、AI 简历、AI 论文润色、AI 题库讲解。

特点：技术门槛适中，但合规和成本控制重要。

重点：后端代理调用大模型，限制频率，记录用量，不在前端暴露 API Key。

第二部分：使用 VS Code + Claude Code 插件 + DeepSeek V4 + 微信开发者工具进行小程序、网页开发和变现

7. 准备工作：安装 VS Code、Claude Code 插件、微信开发者工具

7.1 安装 VS Code

安装 VS Code 后，推荐安装以下插件：

Chinese Language Pack
ESLint
Prettier
GitLens
WXML / WXSS 支持插件，可选
Claude Code for VS Code

7.2 安装 Claude Code for VS Code

在 VS Code 扩展市场搜索：

Claude Code for VS Code
发布者：Anthropic
扩展 ID：anthropic.claude-code

安装后建议：

  1. 重启 VS Code。
  2. 打开一个真实项目文件夹。
  3. 点击左侧 Claude 图标或在命令面板搜索 Claude Code。
  4. 如果使用官方 Claude，需要登录 Anthropic；如果使用 DeepSeek Anthropic 兼容接口，则按下一节配置环境变量。

7.3 打开工作目录

推荐打开项目根目录：

my-product/
├─ miniprogram/
├─ web-admin/
└─ server/

不要只打开 pages/ 或某个子目录，否则 Claude Code 无法理解项目全局结构。

8. 模型配置：Claude Code 插件接入 DeepSeek V4

关键点：Claude Code 可以读取环境变量来决定 API 地址、认证方式和模型。DeepSeek 提供 Anthropic 兼容接口，因此可通过 ANTHROPIC_BASE_URL 指向 DeepSeek 的 Anthropic API 地址。以下配置只给出通用字段，真实 Key 使用占位符。

8.1 在 VS Code 插件设置中填写 Environment Variables

按截图对应路径：

VS Code → 扩展 → Claude Code for VS Code → 齿轮 → 设置 → Claude Code: Environment Variables → 在 settings.json 中编辑

重点说明：

  1. 通用教程只修改 claude-code.environmentVariables 对应的中括号 [] 内部内容。
  2. 不要覆盖你本机 settings.json 中中括号外的其他配置。
  3. 不要把真实 API Key 写进公开教程或上传到 Git 仓库。

推荐把下面数组内容填入 claude-code.environmentVariables：

[
  {
    "name": "ANTHROPIC_BASE_URL",
    "value": "https://api.deepseek.com/anthropic"
  },
  {
    "name": "ANTHROPIC_AUTH_TOKEN",
    "value": "YOUR_DEEPSEEK_API_KEY"
  },
  {
    "name": "ANTHROPIC_MODEL",
    "value": "deepseek-v4-pro"
  },
  {
    "name": "ANTHROPIC_DEFAULT_OPUS_MODEL",
    "value": "deepseek-v4-pro"
  },
  {
    "name": "ANTHROPIC_DEFAULT_SONNET_MODEL",
    "value": "deepseek-v4-pro"
  },
  {
    "name": "ANTHROPIC_DEFAULT_HAIKU_MODEL",
    "value": "deepseek-v4-flash"
  },
  {
    "name": "CLAUDE_CODE_SUBAGENT_MODEL",
    "value": "deepseek-v4-flash"
  },
  {
    "name": "CLAUDE_CODE_EFFORT_LEVEL",
    "value": "max"
  }
]

如果你的 settings.json 中需要完整写法，可以参考下面格式。注意：下面只是示例，不要删除你原本的其他设置项。

{
  "claude-code.environmentVariables": [
    {
      "name": "ANTHROPIC_BASE_URL",
      "value": "https://api.deepseek.com/anthropic"
    },
    {
      "name": "ANTHROPIC_AUTH_TOKEN",
      "value": "YOUR_DEEPSEEK_API_KEY"
    },
    {
      "name": "ANTHROPIC_MODEL",
      "value": "deepseek-v4-pro"
    },
    {
      "name": "ANTHROPIC_DEFAULT_OPUS_MODEL",
      "value": "deepseek-v4-pro"
    },
    {
      "name": "ANTHROPIC_DEFAULT_SONNET_MODEL",
      "value": "deepseek-v4-pro"
    },
    {
      "name": "ANTHROPIC_DEFAULT_HAIKU_MODEL",
      "value": "deepseek-v4-flash"
    },
    {
      "name": "CLAUDE_CODE_SUBAGENT_MODEL",
      "value": "deepseek-v4-flash"
    },
    {
      "name": "CLAUDE_CODE_EFFORT_LEVEL",
      "value": "max"
    }
  ]
}

变量说明如下：

变量 作用
ANTHROPIC_BASE_URL 将 Claude Code 请求路由到 DeepSeek Anthropic 兼容接口
ANTHROPIC_AUTH_TOKEN 作为认证 Token 使用，填自己的 DeepSeek Key
ANTHROPIC_MODEL 默认主模型
ANTHROPIC_DEFAULT_OPUS_MODEL Opus 档位映射到 DeepSeek Pro
ANTHROPIC_DEFAULT_SONNET_MODEL Sonnet 档位映射到 DeepSeek Pro 或 Flash
ANTHROPIC_DEFAULT_HAIKU_MODEL Haiku 档位映射到更快、更低成本的 Flash
CLAUDE_CODE_SUBAGENT_MODEL 子 Agent 使用模型，建议用 Flash 控制成本
CLAUDE_CODE_EFFORT_LEVEL 推理努力程度，复杂重构可设为 max

如果你的服务商明确要求 ANTHROPIC_API_KEY 而不是 ANTHROPIC_AUTH_TOKEN，可改为：

{
  "name": "ANTHROPIC_API_KEY",
  "value": "YOUR_DEEPSEEK_API_KEY"
}

不要同时乱配多个认证变量，避免冲突。最终以你使用的 DeepSeek 官方文档或网关文档为准。

8.2 写入 Claude Code 用户级 settings.json

也可以写入用户级配置：

~/.claude/settings.json

示例：

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.deepseek.com/anthropic",
    "ANTHROPIC_AUTH_TOKEN": "YOUR_DEEPSEEK_API_KEY",
    "ANTHROPIC_MODEL": "deepseek-v4-pro",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "deepseek-v4-pro",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "deepseek-v4-pro",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "deepseek-v4-flash",
    "CLAUDE_CODE_SUBAGENT_MODEL": "deepseek-v4-flash",
    "CLAUDE_CODE_EFFORT_LEVEL": "max"
  }
}

用户级配置适合长期使用。项目级配置 .claude/settings.local.json 适合只对当前项目生效，并且应加入 .gitignore，避免泄露 Key。

8.3 更安全的 Key 保存方式

更安全的方式是：

  1. 系统环境变量中保存真实 Key。
  2. VS Code / Claude Code 配置只引用环境变量。
  3. 项目中只保留 .env.example。

Windows PowerShell 示例：

[Environment]::SetEnvironmentVariable("DEEPSEEK_API_KEY", "sk-xxxxxxxx", "User")

macOS / Linux 示例：

echo 'export DEEPSEEK_API_KEY="sk-xxxxxxxx"' >> ~/.zshrc
source ~/.zshrc

不同版本的 VS Code 和插件对 ${env:VAR} 的支持可能不同。如果插件不能解析变量，就退回到 ~/.claude/settings.local.json，并确保该文件不提交 Git。

8.4 验证 Claude Code 是否成功连接 DeepSeek

在 Claude Code 面板输入：

请说明当前项目的目录结构，并判断它是否包含微信小程序、网页前端和后端服务。只读项目，不要修改任何文件。

再输入：

请在不修改文件的前提下，给出把当前项目变成“微信小程序 + 网页后台 + 后端 API”的重构计划，分 5 步列出。

如果能正常返回，并且没有登录 Anthropic 官方账号的强制阻断，说明模型路由基本可用。

9. VS Code + Claude Code 实战：开发小程序 Demo

9.1 建议先建立 CLAUDE.md

在项目根目录新建：

CLAUDE.md

内容示例：

# Project Guide

本项目包含：

- miniprogram：微信小程序原生项目；
- web-admin：网页管理后台；
- server：后端 API。

## 开发规则

1. 修改小程序页面时，优先修改 miniprogram/pages 下对应文件。
2. 不要把 API Key、AppSecret、数据库密码写入前端代码。
3. 不要随意重构无关文件。
4. 每次修改后说明：改了哪些文件、如何测试、可能的风险。
5. 微信小程序端仅调用 server 提供的接口。

## 常用命令

- web-admin 启动：cd web-admin && npm run dev
- server 启动：cd server && python app.py
- 小程序预览：使用微信开发者工具打开 miniprogram 目录

CLAUDE.md 的价值是让 Agent 每次进入项目时都知道边界和规范，减少乱改代码。

9.2 第一次让 Claude Code 只读分析

请阅读 CLAUDE.md 和项目目录，只做分析，不要修改文件。请输出：
1. 当前项目结构；
2. 小程序入口文件；
3. 适合新增的 Demo 页面；
4. 可能存在的风险。

9.3 让 Claude Code 修改代码

请在 miniprogram 中新增 pages/todo 页面，实现待办事项 Demo：
1. 新增、完成、删除待办；
2. 使用 wx.setStorageSync 保存；
3. 修改 app.json 注册页面；
4. 首页增加跳转按钮；
5. 不要修改 project.config.json；
6. 修改完成后列出文件清单和测试步骤。

9.4 审查修改

每次 AI 改完代码后，不要直接上传。先做三件事：

git status
git diff
git diff --stat

然后在 VS Code 中逐文件看修改。重点检查：

  1. 是否误删已有业务代码。
  2. 是否把 Key 写进前端。
  3. 是否改了项目配置导致微信开发者工具无法识别。
  4. 是否引入了不必要依赖。

10. 前端调试：微信开发者工具 + VS Code 协同

10.1 双窗口协作方式

推荐布局：

左屏 / 左半屏：VS Code + Claude Code
右屏 / 右半屏：微信开发者工具

工作方式：

VS Code 修改 → 微信开发者工具自动编译 → 看报错 → 复制报错给 Claude Code → Claude Code 修复 → 再验证

10.2 Claude Code 调试提示词

微信开发者工具 Console 报错如下：
【粘贴报错】

请你只检查 miniprogram 目录，找出报错对应文件和原因。先给分析，不要立即修改。

确认原因后再输入：

同意按你的方案修改。请只修改必要文件，不要做额外重构。

这样可以减少 AI 一次性大改项目的风险。

10.3 后端联调提示词

当前小程序请求 /api/todos 失败，Network 面板显示 404。
请检查 miniprogram/utils/request.js 和 server/routes 下接口定义，修复路径不一致问题。
要求：
1. 不改变前端页面功能；
2. 不改变返回字段语义；
3. 修改后给出 curl 测试命令。

11. 测试、上传、审核与发布

VS Code 和 TRAE 只是开发入口，正式发布仍然必须经过微信开发者工具和微信公众平台。

11.1 发布前 Git 检查

git status
git diff
git add .
git commit -m "feat: add todo mini program demo"

推荐每次上传前打标签：

git tag v0.1.0-miniapp-demo
git push origin main --tags

11.2 发布前代码检查

小程序端不要包含：

真实 API Key
真实 AppSecret
数据库密码
测试二维码
未授权图片 / 字体 / 图标
console.log 大量敏感数据
无用测试页面

后端要确认：

HTTPS 可访问
接口鉴权清楚
频率限制存在
错误处理友好
日志不打印密钥
数据库备份策略明确

11.3 上传审核流程

微信开发者工具上传 → 微信公众平台版本管理 → 设为体验版 → 体验测试 → 提交审核 → 审核通过 → 发布

如果审核不通过，把审核反馈完整复制给 Claude Code 或 TRAE：

小程序审核不通过，原因如下：
【粘贴审核反馈】

请判断是功能问题、类目问题、隐私协议问题、内容合规问题还是页面引导问题。先给整改清单，不要直接改代码。

12. TRAE 与 VS Code + Claude Code 的选择建议

场景 更推荐
零基础快速做 Demo TRAE
已有 VS Code 工作流 VS Code + Claude Code
想让 AI 大范围改项目 Claude Code，但必须配合 Git 审查
只做简单页面 TRAE 或微信开发者工具自带编辑器
要做网页后台 + 后端 + 小程序 VS Code + Claude Code 更适合工程化
想降低模型成本 DeepSeek V4 Flash 做日常，Pro 做复杂任务
想稳定上线商业项目 两者都可，但必须人工代码审查与合规检查

13. 产品化与变现落地清单

13.1 从 Demo 到产品的最小闭环

1. 找一个明确人群：学生、实验室、商家、课程老师、企业行政
2. 找一个高频痛点：预约、统计、库存、资料、提醒、报名
3. 做一个最小功能：只解决一个问题
4. 加后台：可查看、导出、管理
5. 加数据闭环：用户留存、使用次数、转化路径
6. 加变现点：广告、会员、定制、SaaS、服务费
7. 做合规：隐私、支付、备案、资质

13.2 推荐第一款产品：实验室 / 小团队库存管理小程序

推荐理由：

  1. 需求真实，科研实验室、小团队经常存在耗材、试剂、设备管理问题。
  2. 技术复杂度适中，适合 AI 编程快速开发。
  3. 可以做小程序端给普通成员使用，网页后台给管理员使用。
  4. 变现可走 B 端定制或年费，不依赖海量流量。

最小功能：

成员扫码登录
物品列表
入库 / 出库 / 校正
库存预警
操作记录
Excel 导入导出
管理员后台

变现方式：

基础版免费
高级版按实验室 / 团队年费
私有化部署单独报价
定制报表和审批流程额外收费

13.3 AI 功能的成本控制

如果小程序接入 DeepSeek 做 AI 功能，要注意：

用户每日次数限制
接口调用日志
失败重试限制
敏感词和内容审核
长文本截断
缓存重复问题答案
不同模型分层：简单任务用 flash，复杂任务用 pro

推荐架构：

小程序 → 你的后端 → 权限 / 次数判断 → DeepSeek → 结果脱敏 / 过滤 → 返回小程序

14. 常用提示词模板

14.1 需求拆解

你是产品经理 + 微信小程序技术负责人。请把下面需求拆解为：
1. 用户角色；
2. 核心页面；
3. 数据表；
4. API 接口；
5. 小程序端功能；
6. 网页后台功能；
7. 第一版 MVP 范围。

需求：
【粘贴你的想法】

14.2 生成小程序页面

请基于微信小程序原生语法实现页面：
页面路径：pages/xxx/xxx
功能：xxx
要求：
1. WXML 结构清晰；
2. WXSS 适合手机端；
3. JS 中事件函数完整；
4. 使用模拟数据；
5. 修改 app.json；
6. 不引入第三方库。

14.3 接口联调

请根据 server 目录中的接口，生成小程序端 utils/api.js：
1. 封装 request 方法；
2. 统一 baseURL；
3. 统一错误提示；
4. 支持 GET / POST；
5. 不在前端写任何密钥。

14.4 代码审查

请审查本次 git diff，重点检查：
1. 是否泄露 API Key / AppSecret；
2. 是否误删功能；
3. 是否有明显运行错误；
4. 是否影响小程序审核；
5. 是否有性能问题。
只给问题清单，不要修改代码。

14.5 审核不通过整改

微信小程序审核反馈如下：
【粘贴反馈】

请输出：
1. 不通过原因分类；
2. 需要修改的页面 / 文案 / 配置；
3. 是否需要补充资质；
4. 重新提交审核前检查清单。

15. 安全与合规底线

  1. 不要在小程序前端保存任何大模型 API Key。
  2. 不要在 GitHub、Gitee、截图、教程中公开 Token。
  3. AppSecret 只能放后端。
  4. 用户手机号、位置、身份证、健康、支付等敏感数据要最小化收集。
  5. 隐私协议要与实际功能一致。
  6. AI 生成内容要有免责声明和内容安全过滤。
  7. 涉及医疗、金融、教育培训、新闻、出版、药品、直播等行业，先确认资质再开发。
  8. 商业化前确认微信支付、虚拟支付、广告、备案规则的最新要求。

16. 参考资料与官方入口

以下链接用于核对最新版本和规则。工具界面、模型名称、审核政策可能随时间变化，以官方页面和后台提示为准。

  1. TRAE 自定义模型文档：https://docs.trae.ai/ide/models?_lang=zh
  2. TRAE 官网：https://www.trae.ai/ / https://www.trae.cn/
  3. DeepSeek API Quick Start：https://api-docs.deepseek.com/
  4. DeepSeek Anthropic API：https://api-docs.deepseek.com/guides/anthropic_api
  5. Claude Code VS Code IDE Integrations：https://code.claude.com/docs/en/ide-integrations
  6. Claude Code Environment Variables：https://code.claude.com/docs/en/env-vars
  7. 微信开发者工具下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
  8. 微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
  9. 微信公众平台：https://mp.weixin.qq.com/
  10. 小程序备案：以微信公众平台后台“小程序备案”入口和管局短信核验要求为准。

17. 最短执行路线

如果只想最快跑通，按这 10 步执行：

1. 安装 TRAE CN 或 VS Code + Claude Code
2. 安装微信开发者工具
3. 注册 / 获取小程序 AppID，或先用测试号
4. 创建 miniprogram 项目
5. 配置 DeepSeek V4 API
6. 让 AI 生成 todo Demo
7. 微信开发者工具预览并调试
8. 加一个后台 web-admin
9. 做体验版测试
10. 上传审核发布

18. CSDN 发布建议

18.1 推荐标题

使用 TRAE / VS Code + Claude Code + DeepSeek V4 开发微信小程序和网页：从配置到发布变现

18.2 推荐摘要

本文系统介绍两条 AI 编程开发路线：TRAE + DeepSeek V4 + 微信开发者工具，以及 VS Code + Claude Code 插件 + DeepSeek V4 + 微信开发者工具。内容覆盖环境安装、模型配置、小程序 Demo 开发、前端调试、后端联调、上传审核、备案发布和产品变现路径，适合希望快速开发微信小程序、网页后台和轻量 SaaS 产品的个人开发者与学生团队参考。

18.3 推荐标签

微信小程序
TRAE
VS Code
Claude Code
DeepSeek
AI 编程
前端开发
小程序变现

18.4 发布前最后检查

  1. 检查全文是否包含真实 API Key。
  2. 检查截图是否包含 Token、邮箱、个人路径或隐私信息。
  3. 检查代码块是否全部闭合。
  4. 检查标题层级是否连续。
  5. 检查表格分隔行是否为 | ---- | ---- | 形式。
  6. 检查 CSDN 预览中 [TOC] 是否正常生成目录。
# 微信小程序
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

多件装组合SKU图的批量生产效率分析：从PS手工到AI自动化的工作流改造

avatar 2048 AI社区

航空复合材料人工智能AI选材与结构优化大模型系统平台软件

航空复合材料人工智能AI选材与结构优化大模型系统平台软件

avatar 2048 AI社区

Code designs Harness 还是 Model drives Harnesses？

现代语言模型智能体已经成为多步执行系统。它们使用工具、保持状态、从失败中恢复、校验中间结果，有时还会把工作委派给其他智能体。

avatar 2048 AI社区