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

原创

悟空码字

发布于 2026-05-18 16:49:47

2020

文章被收录于专栏：编程技术编程技术

大家好，我是小悟

前言

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

最近，我接到一个项目：要开发一个微信小程序代备案 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 行，发现了问题：

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

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

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

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

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

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

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

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

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

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。

<!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 文件中，不依赖任何外部文件。这样做的好处是：