我是如何用 ChatGPT 和 Copilot 高效开发微信小程序的

作为一名全栈开发者，我始终对能提升开发效率的新工具和技术充满好奇。最近，我接手了一个名为“每日待办清单”（Daily Todo）的微信小程序项目。这次，我决定全程引入 AI 工具作为我的编程伙伴，记录下这场人机协作的真实体验。

协作目标与技术选型

• 项目目标：开发一个功能简洁的待办小程序，核心功能包括：任务的增删改查、完成状态切换、以及简单的数据本地存储。
• 技术栈：微信小程序原生框架 (WXML, WXSS, JS)、云开发（可选）。
• AI 伙伴：
  1. ChatGPT (GPT-4): 主要用于需求分析、生成初始代码框架、解释技术难点和提供优化建议。它是一个强大的“技术顾问”。
  2. GitHub Copilot: 在 VS Code 中作为实时代码补全工具。它更像一个“敏捷的副驾驶”，根据我的代码上下文和注释，快速生成代码片段。

协作开发全过程记录

阶段一：项目初始化与框架搭建 (AI 作为项目顾问)

协作场景：项目开发（初始搭建）

我的需求：我不想手动创建每个页面文件和配置文件，希望快速生成项目基础结构。

AI 提供的帮助：

我向 ChatGPT 发出指令：

“我正在开发一个微信小程序项目，项目名为‘DailyTodo’。请为我生成一个标准的小程序项目结构，包括 app.js, app.json, app.wxss，以及一个名为 ‘index’ 的页面页面，并包含该页面的 .js, .json, .wxml, .wxss 文件的基本模板代码。”

ChatGPT 迅速回复了一个结构清晰的代码块，包括：

• app.json 中已注册了 index 页面和基本配置。
• app.js 中的 App() 函数模板。
• index.js 中的 Page() 函数模板，包含了基本的 data 数据。
• 甚至给出了 index.wxml 的一个简单视图框架。

关键步骤与思考：

1. 我将 ChatGPT 生成的代码复制到项目中。
2. 经验总结：AI 生成的代码是“通用模板”，不能直接满足复杂业务逻辑。但它完美地完成了所有重复性的初始化工作，节省了至少15-20分钟的手动创建和配置时间。我的角色是审核和调整这些代码，使其符合我的具体需求。

阶段二：核心功能开发 (AI 作为代码生成器)

协作场景：代码开发（功能实现）

我的需求：实现“添加待办事项”的功能。需要在 index.js 中编写数据处理逻辑，并在 index.wxml 中构建对应的视图。

AI 提供的帮助：

在 index.js 中，当我开始输入函数名 addNewTodo 时，GitHub Copilot 根据我定义的 data 中的 todos 数组和函数名，自动补全了整个函数！

// 我刚开始输入 addNew
addNewTodo() {
    // Copilot 自动补全了以下代码
    const newTodo = {
        id: Date.now(), // 使用时间戳作为唯一ID
        title: this.data.newTodoText,
        completed: false
    };
    this.setData({
        todos: [...this.data.todos, newTodo],
        newTodoText: '' // 清空输入框
    });
}

同时，在 index.wxml 中，当我输入 bindtap 时，Copilot 也准确地建议了 bindtap="addNewTodo"。

关键步骤与思考：

1. Copilot 的补全速度极快，几乎是我刚有想法，它就给出了实现。
2. 经验总结：Copilot 极大地减少了查阅文档和记忆API的时间。但它生成的代码有时并非最优解（例如这里没有对输入为空的情况做校验）。我的角色是审查逻辑、添加边界条件处理和确保代码质量。我随后手动添加了输入验证：

if (!this.data.newTodoText.trim()) {
    wx.showToast({ title: '请输入内容', icon: 'none' });
    return;
}

阶段三：代码优化与性能 (AI 作为审查员)

协作场景：代码优化

我的需求：我使用 Array.prototype.splice 来删除一个待办项，但感觉这种方式在小程序的 setData 中显得有些笨拙，且可能引发渲染性能问题。

AI 提供的帮助：

我将代码片段发给 ChatGPT 并提问：

“在微信小程序中，我有一个待办事项数组 todos，我想根据 id 删除其中一项。以下是我的实现，有没有更优雅或性能更好的写法？”

ChatGPT 在肯定我当前方法可行的同时，提供了另一种更“函数式”且更清晰的写法：

1. 使用 Array.prototype.filter 直接创建一个新数组。
2. 明确指出这样做能避免直接操作原数组，更符合小程序数据驱动的理念。

// 原代码 (使用 splice)
removeTodo(id) {
    const index = this.data.todos.findIndex(item => item.id === id);
    if (index > -1) {
        const todos = this.data.todos;
        todos.splice(index, 1);
        this.setData({ todos });
    }
}

// ChatGPT 推荐的代码 (使用 filter)
removeTodo(id) {
    this.setData({
        todos: this.data.todos.filter(item => item.id !== id)
    });
}

关键步骤与思考：

1. 我立刻采纳了 ChatGPT 的建议。filter 的写法更简洁，意图更清晰，且直接返回新数组，完美适合 setData。
2. 经验总结：AI 工具不仅能写代码，更能作为代码审查伙伴，提供最佳实践和优化建议。这帮助我写出了更现代化、更易维护的代码。

阶段四：问题排查与调试 (AI 作为调试助手)

协作场景：问题排查

我的需求：在实现“本地缓存”功能时，我的 todos 数组无法被 wx.setStorageSync 正确存储，控制台报错。

AI 提供的帮助：

我将错误信息直接抛给 ChatGPT：

“微信小程序 wx.setStorageSync:fail parameter error: parameter should be string instead of object 是什么意思？”

ChatGPT 迅速解释：wx.setStorageSync 的 data 参数必须是字符串类型。如果我试图直接存储一个对象，就会报这个错。它提供了解决方案：

1. 使用 JSON.stringify() 将对象转换为字符串再存储。
2. 读取时使用 JSON.parse() 再解析回来。

// 存储
wx.setStorageSync('todos_cache', JSON.stringify(this.data.todos));

// 读取
const todosStr = wx.getStorageSync('todos_cache');
if (todosStr) {
    this.setData({ todos: JSON.parse(todosStr) });
}

关键步骤与思考：

1. 这个问题如果靠我自己查文档或搜索，可能需要5-10分钟。而 ChatGPT 在10秒内就精准定位了问题根源并给出了解决方案。
2. 经验总结：AI 在排查这种常见的、有明确错误信息的“纸老虎”问题时，效率极高，堪称“bug粉碎机”。但对于复杂的、需要深入理解项目业务逻辑的bug，仍需开发者主导分析。

最终效果与总结

在 AI 工具的辅助下，这个原本需要一天左右的迷你项目，我在3小时内就完成了开发和测试，效率提升非常显著。

最终效果：

• ✅ 任务增删改查
• ✅ 完成状态切换
• ✅ 数据本地持久化
• ✅ 简洁的UI界面

核心经验总结：

1. 效率的质变：AI 将我从重复劳动、记忆API和查阅基础文档中解放出来，让我能更专注于核心业务逻辑和用户体验设计。
2. 人机协作的正确模式：AI 是“副驾驶”（Copilot），而非“自动驾驶”。开发者必须是主导者，负责提出正确的问题、审查AI的输出、把握整体架构和代码质量。盲从AI是危险的。
3. 提示词（Prompt）是关键：与 AI 协作的本质是沟通。对 ChatGPT 提出清晰、具体、包含上下文的需求，才能获得高质量的答案。这是一个需要练习的技能。
4. 局限性：AI 工具的答案基于训练数据，可能不是最新（如小程序最新API）或最优。它缺乏对项目全局架构的理解能力。批判性思维至关重要。

总而言之，这次与 ChatGPT 和 GitHub Copilot 的结对编程体验非常愉快。它们已经不再是噱头，而是真正能融入开发流程、切实提升生产效率的强大工具。我强烈推荐每一位开发者都尝试将 AI 纳入你的工作流，找到最适合你的协作节奏，让人机协作成为你新的超能力。