腾讯QClaw 实战：从需求文档到微信小程序代备案网站的完整开发记录

大家好，我是小悟

前言

作为一名开发者，你是否曾经为接一个新项目而头疼？需要从零开始写代码、搭框架、设计页面......往往还没开始正式开发，光是搭建项目骨架就要耗费大半天时间。

最近，我接到一个项目：要开发一个微信小程序代备案 PC 端网站。客户给了一份详细的需求文档。技术栈要求很明确------原生 HTML5 + CSS3 + JavaScript（ES6），不使用任何第三方框架（Vue/React/jQuery）。

说实话，面对这样一个"复古"的开发任务，不擅长前端的我有些犯愁。但是现在不是AI时代吗，还需要自己手搓代码吗，于是想到了 QClaw ，一个基于 AI 的办公助手，可以直接从需求文档生成完整代码。于是我决定用QClaw帮我完成前端代码，看看 AI 编程到底能帮上多少忙。

接下来，让我详细记录这次完整的开发过程，包括中途遇到的 Bug 以及我是如何解决的。

一、项目需求分析

需求文档非常详细，明确了以下要求：

技术栈约束：

原生 HTML5 + CSS3 + JavaScript（ES6）
❌ 不使用任何第三方框架（Vue/React/jQuery）
运行环境：现代浏览器（Chrome/Edge）
样式要求：简洁专业，B 端管理后台风格，主色调使用微信品牌色 #07C160

功能模块：

登录页（login.html） - 用户登录入口
控制台首页（index.html） - 展示概览数据
小程序备案申请页（apply.html） - 分步表单，需要填写三步信息
备案记录页（records.html） - 列表展示已提交的备案
备案详情页（detail.html） - 查看单条备案的详细信息

表单字段要求：

步骤	字段名称
Step 1 主体信息	企业名称、统一社会信用代码、营业执照上传、法定代表人姓名、法定代表人身份证号
Step 2 小程序信息	小程序名称、AppID、服务类目（需下拉选择）、小程序截图（最多5张）
Step 3 负责人信息	负责人姓名、身份证号、手机号、人脸核验说明

二、AI 一键生成项目

我将这份详细的需求文档丢给 QClaw，告诉它："请严格按照这份文档生成一个完整的微信小程序代备案 PC 前端项目源码，一次性给出所有页面代码。代码必须是可运行的，可以在本地浏览器预览。"

几分钟后，QClaw 交出了答卷。它一次性生成了完整的项目结构和所有代码文件：

复制代码

wechat-record-pc/
├── login.html          # 登录页
├── index.html          # 控制台首页
├── apply.html          # 备案申请（分步表单）
├── records.html        # 备案记录列表
├── detail.html         # 备案详情
├── css/
│   └── common.css     # 通用样式表（包含所有组件样式）
└── js/
    ├── common.js       # 通用函数（登录检查、消息提示等）
    ├── login.js        # 登录逻辑
    ├── apply.js        # 申请表单逻辑（分步切换、表单验证）
    ├── records.js      # 记录列表逻辑（分页加载）
    └── detail.js       # 详情页逻辑

生成时间 ：约 5 分钟
文件数量 ：11 个文件
代码行数：约 1500+ 行

效率确实惊人！如果是人工手写，这些代码估计要花上一两天时间。

QClaw 一次性生成多个文件，效率惊人

三、本地服务器部署与初步测试

代码生成后，启动本地服务器进行测试：

然后在浏览器中访问 http://localhost:8080/login.html，开始逐个页面测试。

登录页 login.html 打开正常，界面风格简洁专业，表单验证也有做。

控制台首页 index.html 也没问题，仪表盘样式清晰，数据展示美观。

B 端管理后台风格，微信品牌色 #07C160

但当我测试时，问题出现了。

四、第一个 Bug：语法错误

打开 records.html 测试备案记录列表，结果控制台直接报红：

复制代码

Uncaught SyntaxError: Unexpected token '='
  at records.js:15

F12 打开控制台，发现 records.js 报语法错误

QClaw 生成的代码里有一个箭头函数语法错误。检查了 records.js 第 15 行，发现了问题：

javascript 复制代码

// ❌ QClaw 生成的错误代码（箭头函数用法错误）
window.changePage = function(page) => {
  currentPage = page;
  loadRecords();
};

// ✅ 正确的写法（普通函数，不需要箭头）
window.changePage = function(page) {
  currentPage = page;
  loadRecords();
};

function 关键字后面不能直接跟箭头函数语法。应该是 => 直接跟在参数后面（如 page => {}），或者用 function 时直接用花括号包裹函数体。

我让 QClaw 修复后，备案列表正常显示了。

五、第二个 Bug：表单"消失"了

最重要的一个页面，新建备案------表单字段完全不显示。

页面只看到标题"小程序备案申请"和上方的步骤条，但下面的表单内容区域完全是空白的。步骤条上的"主体信息"显示为激活状态，但对应的表单字段去哪了？

页面只有标题和步骤条，下方表单内容区域空白

怀疑是 JavaScript 初始化出了问题。检查 apply.js 的初始化代码：

javascript 复制代码

document.addEventListener('DOMContentLoaded', function() {
  console.log('[Apply] 页面开始加载');
  
  if (!requireLogin()) {
    console.log('[Apply] 登录检查失败');
    return;
  }
  
  console.log('[Apply] 登录检查通过，开始初始化步骤表单');
  initSteps();
  showStep(currentStep);
  console.log('[Apply] 初始化完成');
});

逻辑看起来没问题。我添加了一些 console.log 调试语句，结果发现控制台只输出了"[Apply] 页面开始加载"，后面的日志都没有。这说明代码执行被中途中断了。

但奇怪的是，没有报任何错误。

于是我让Qclaw修复。

六、创建独立测试版本

为了彻底排除外部文件加载问题，QClaw 创建了一个完全独立 的测试版本 apply-standalone.html。

html 复制代码

<!DOCTYPE html>
<html>
  <!-- 所有 CSS 内联 -->
  <style>
    body { font-family: -apple-system, sans-serif; }
    /* ... */
  </style>
  <!-- 所有 HTML 结构 -->
  <body>
    <div class="step-content" id="stepContent1">...</div>
  </body>
  <!-- 所有 JavaScript 内联 -->
  <script>
    showStep(1);
  </script>
</html>

独立版本将所有代码内联到一个文件中

这个版本把所有 CSS 和 JavaScript 都内联到单个 HTML 文件中，不依赖任何外部文件。这样做的好处是：

✅ 不依赖外部 CSS/JS 文件
✅ 排除浏览器缓存问题
✅ 方便逐步排查问题

测试后，独立版本正常工作，证明 apply-standalone.html 的逻辑是正确的。问题确实出在文件加载或初始化流程上。

七、最终验收：完整功能展示

经过多轮修复和调试，项目终于正常运行了。展示一下最终效果：

备案申请页（apply.html） 采用经典的三步表单设计：

Step 1：主体信息

企业名称（必填输入框）
统一社会信用代码（必填，18位字符限制）
营业执照上传（支持 JPG/PNG 格式，文件选择器）
法定代表人姓名 / 身份证号（两列布局）

Step 2：小程序信息

小程序名称（必填）
AppID（必填）
服务类目（下拉选择：电商平台、线上零售、餐饮、教育、医疗等12个分类）
小程序截图上传（最多 5 张，每张不超过 5MB）

Step 3：负责人信息

负责人姓名（必填）
身份证号（必填，18位字符限制）
手机号（必填，11位手机号验证）
人脸核验说明（警告提示框）

步骤条实时高亮当前步骤，已完成步骤显示绿色

交互效果：

步骤条实时高亮当前步骤，已完成的步骤显示绿色勾选
「上一步」「下一步」按钮根据当前步骤动态显示/隐藏
最后一步显示「提交备案」按钮
每一步都有完整的表单验证

八、经验总结与最佳实践

这次做这个，让我对 AI 编程有了更深的理解，也总结出几个实战经验：

有报错
无报错
是
否
发现问题
查看控制台
定位错误文件
添加日志调试
修复代码
问题定位?
创建独立测试版本
测试验证
完成

1. AI 生成代码需要人工审查

AI生成代码的速度很快，但偶尔会有语法错误或逻辑问题。这次遇到的箭头函数语法错误就是一个例子。建议生成代码后立即测试，不要等所有功能都写完再测试。

2. 添加调试日志是 Debug 的第一步

让AI在关键位置添加 console.log，可以快速定位问题所在。

3. 使用本地服务器而非 file:// 协议

直接用浏览器打开 HTML 文件可能会有跨域、缓存、Security 错误等问题。建议用 python -m http.server 启动本地服务器来测试，确保环境与正式部署一致。

4. 创建独立测试文件可以快速排查问题

当遇到复杂 Bug 时，创建一个不依赖外部文件的独立版本，可以逐步排除问题。这次创建的 apply-standalone.html 帮我确认了逻辑本身是正确的。

5. 善用 fallback 机制提高健壮性

在关键功能上添加 fallback 机制（如 5 秒后强制显示表单），可以防止某些边界情况下的页面故障。

结语

这次实战让我深刻体会到 AI 编程助手的价值。

回顾 QClaw 的表现，我认为它的价值在于：

🚀 提升效率：从 0 到 1 快速搭建项目骨架，节省大量重复性工作
💡 降低门槛：即使不熟悉某个技术栈，也能生成可运行的项目
🐛 辅助 Debug：通过对话快速定位和修复问题，效率远超传统搜索

当然，AI 生成的代码并不是完美无缺的。但通过人工审查和测试，这些问题都能一一解决。

AI 是程序员的好帮手，但不是替代品。 学会和 AI 协作，才能最大化发挥它的价值。

谢谢你看我的文章，既然看到这里了，如果觉得不错，随手点个赞、转发、在看三连吧，感谢感谢。那我们，下次再见。

您的一键三连，是我更新的最大动力，谢谢

山水有相逢，来日皆可期，谢谢阅读，我们再会

我手中的金箍棒，上能通天，下能探海