AI技能轻松生成微信小程序：从需求到运行全流程

我开发了一个 Skill：用 AI 完成微信小程序从需求到首次运行的完整流程

微信小程序开发的门槛，远比你想象的高。这不是指技术难度，而是指“从零到一”的繁琐程度。

注册账号、填写资料、了解组件规范、配置域名、理解Page和Component的生命周期、处理用户授权……这些步骤对于新手来说，每一步都可能卡住半小时。对于有经验的后端或前端开发者来说，切换过来也需要适应微信的那套独特规则。

过去，我们试图用模板来解决这个问题。但模板是静态的，它解决不了业务逻辑的差异。你拿到一个电商模板，想改成预约系统，改代码的时间可能比重新写还长。

最近我做了一个 Skill，专门用来解决这个痛点。它不是一个简单的代码生成器，而是一个完整的 AI 工作流。你只需要输入自然语言描述的需求，它能自动生成微信小程序的项目结构、页面代码、逻辑代码，甚至帮你配置好项目文件，最终输出一个可以直接在微信开发者工具中运行的项目。

这篇文章，我会把这个 Skill 的实现思路、核心原理、操作步骤，以及在实际使用中遇到的坑，全部拆开讲清楚。如果你正在尝试用 AI 辅助小程序开发，或者想自己做一个类似的 Skill，这篇文章值得收藏。

1. 这个 Skill 真正要解决的问题

1.1 微信小程序开发的重复性痛点

让我先列举几个真实场景，看看你是不是也遇到过：

• 场景一：你接了一个外包项目，客户想要一个“来访登记”小程序。你发现这个需求其实很标准：表单提交、列表展示、状态管理。但你还是得从零搭建项目，写页面、写逻辑、调样式，至少需要半天。
• 场景二：你想做一个“个人记账”小程序给自己用。需求很简单，但你需要花时间研究微信小程序的 API 规范，比如云开发怎么用、用户信息怎么获取。等你搞清楚这些，热情已经消磨了一半。
• 场景三：你是一个 AI 开发者，想快速验证一个想法，比如“AI 生成的小程序能不能跑起来”。你不想自己写代码，希望 AI 直接生成一个能运行的项目。

这些场景的共同特点是什么？核心逻辑不复杂，但工程化步骤繁琐。微信小程序开发中，真正消耗时间的不是业务逻辑，而是那些“框架规矩”：注册页面、配置路由、处理生命周期、管理数据状态。

1.2 传统 AI 编码工具的局限

现在市面上有很多 AI 编程助手，比如 Cursor、GitHub Copilot、Codex。它们能帮你写代码，但面对微信小程序开发，有几个明显的短板：

• 缺乏上下文意识：AI 不知道你正在开发一个微信小程序，它可能生成 Web 端的代码，比如使用document.getElementById，这在微信小程序里根本不存在。
• 无法处理项目结构：微信小程序有严格的目录结构要求，app.json里必须注册页面，组件必须放在components目录下。AI 单独生成文件时，经常忽略这些全局配置，导致项目跑不起来。
• 输出不可直接运行：AI 生成的代码片段，即使语法正确，也需要你手动整合到项目中。对于新手来说，这一步的难度可能比写代码还大。

1.3 这个 Skill 的解决思路

我的 Skill 目标很明确：输入需求，输出一个可直接运行的微信小程序项目。

它不是让你一步步写代码，而是替代你完成“从需求到首次运行”这个环节中的所有重复操作。具体来说，它解决了三个核心问题：

1. 项目结构自动化：自动生成符合微信规范的目录结构，包括页面、组件、样式、配置文件。
2. 代码完整性：生成的代码不是片段，而是完整的页面和逻辑，包含生命周期函数、事件绑定、数据绑定。
3. 配置一致性：自动更新app.json、project.config.json等配置文件，确保所有页面注册正确，项目参数配置正确。

这篇文章适合谁？如果你正在学习微信小程序开发，或者想了解如何用 AI 提升开发效率，或者想自己做一个类似的小程序自动生成工具，那么这篇文章的内容会对你有直接的帮助。

2. 核心概念与设计原理

2.1 什么是 Skill

在 AI 编程领域，Skill 通常指的是一组预设的、可复用的提示词和逻辑组合。它比简单的 prompt 更复杂，包含多个步骤和决策点。

你可以把 Skill 理解为一个“AI 工作流”。它定义了：

• 输入：用户需要提供什么信息（比如需求的自然语言描述）。
• 处理流程：AI 如何理解需求、拆解任务、生成代码、整合项目。
• 输出：最终交付给用户的是什么（一个完整的项目文件夹）。

我的这个 Skill 专门针对微信小程序开发，输入是“需求描述”，输出是“可直接运行的小程序项目”。

2.2 与传统开发流程的对比

为了让你更清楚地理解这个 Skill 的价值，我们对比一下传统开发流程和 AI 辅助开发流程：

从表格可以看出，这个 Skill 主要替代的是“架构搭建”和“代码生成”两个环节，让开发者能更快地进入“业务逻辑验证”阶段。

2.3 技术实现的核心机制

这个 Skill 的实现基于以下几个关键设计：

1. 需求解析引擎

AI 首先会解析用户输入的自然语言需求，提取出关键信息：

• 页面数量：需求描述中提到了几个主要功能模块。
• 页面类型：列表页、详情页、表单页、个人中心页等。
• 数据模型：用户、商品、订单等核心实体。
• 交互方式：按钮点击、表单提交、页面跳转、下拉刷新等。

2. 微信小程序模板库

Skill 内置了微信小程序的标准组件模板，包括：

• 页面模板：包含Page()的完整生命周期，数据初始化、事件处理函数封装。
• 组件模板：包含Component()的完整结构，支持属性传递和事件触发。
• 样式模板：基于微信小程序的 Flex 布局，响应式设计。
• 配置模板：根据页面数量自动生成对应的app.json路由配置。

3. 代码生成器

生成代码时，AI 遵循以下规则：

• 变量命名：使用有意义的英文单词，遵循驼峰命名法。
• 数据绑定：使用微信小程序的数据绑定语法，如{{}}、wx:for、wx:if。
• 事件处理：生成对应的事件处理函数，并绑定到页面元素。
• API 调用：使用微信小程序提供的 API，如wx.request、wx.showToast、wx.navigateTo。

4. 项目整合器

生成所有文件后，Skill 会自动：

• 创建目录结构：pages/、components/、utils/、images/。
• 生成app.js、app.json、app.wxss三个核心文件。
• 确保app.json中注册了所有页面。
• 生成project.config.json用于开发者工具识别。

3. 环境准备与前置条件

在使用这个 Skill 之前，需要确保你的开发环境满足以下条件。这不是一个孤立的工具，它依赖于 AI 编程平台，以及微信小程序的官方开发工具。

3.1 AI 编程平台选择

这个 Skill 需要运行在支持自定义 Skill 的 AI 编程平台上，比如 Cursor、Codex 或类似的可扩展 AI 编程工具。目前比较推荐的是 Cursor，因为它支持创建自定义的.cursorrules文件，可以定义 AI 的行为模式。

Cursor 的基本要求：

• 版本：建议 0.30 以上，支持自定义规则。
• 模型：推荐使用 GPT-4 或 Claude 3.5 系列，代码生成质量更高。
• 工作区：需要打开一个空文件夹作为项目目录。

3.2 微信开发者工具

AI 生成的代码最终需要落地运行，所以微信开发者工具是必须的。

下载与安装：

1. 访问微信官方文档，下载对应系统的开发者工具版本。
2. 安装后，使用你的微信扫码登录。
3. 创建一个新项目，填写 AppID（如果没有，可以先使用测试号，但部分功能受限）。

版本要求：

• 稳定版 Stable Build 即可，不需要开发版。
• 建议 1.06.xxx 以上版本，对 ES6+ 语法支持更好。

3.3 Node.js 环境（可选）

虽然微信小程序开发不强制使用 Node.js，但如果你需要安装依赖（比如使用第三方库），或者需要运行一些构建脚本，Node.js 是必要的。

• 版本：建议 16.x 或 18.x LTS 版本。
• 安装后，在终端运行node -v确认安装成功。

3.4 基础知识储备

虽然这个 Skill 的目标是“让 AI 帮你写代码”，但你还是需要了解一些基本概念，以便在 AI 生成的代码出现问题时，能够快速定位和修复：

• 微信小程序目录结构：pages/、components/、utils/、app.js、app.json、app.wxss。
• 页面文件组成：每个页面包含四个文件：.wxml（模板）、.wxss（样式）、.js（逻辑）、.json（配置）。
• 数据绑定语法：data对象、{{}}模板语法、wx:for列表渲染、wx:if条件渲染。
• 事件系统：bindtap、bindinput、catchtap等事件绑定方式。
• 生命周期函数：onLoad、onShow、onReady、onUnload。

如果你对这些概念还不熟悉，建议先花半小时浏览微信小程序的官方文档，了解基本概念，这样在使用 AI 生成的代码时，会更有掌控感。

4. Skill 的核心流程拆解

这个 Skill 的完整工作流程分为五个步骤。下面我会详细拆解每一步，包括 AI 在做什么，以及你作为使用者需要做什么。

4.1 第一步：需求分析与功能拆解

AI 执行：

当你输入需求描述后，AI 会进行以下操作：

1. 识别核心实体：比如“一个访客登记小程序”，AI 会识别出“访客”这个核心实体。
2. 拆解功能点：登记表单、访客列表、单个访客详情、状态管理（已登记、已签到、已离开）。
3. 确定页面数量：通常表单页、列表页、详情页是三个基本页面。
4. 定义数据模型：访客的字段包括姓名、手机号、访问事由、访问时间、状态等。

你需要做：

输入清晰的需求描述。越具体越好，不要只说“做一个记账小程序”，而是说“做一个个人记账小程序，需要首页显示收支概览，点击进入记账页面，可以添加收入和支出，分类管理，还有一个历史记录页面”。

示例需求：

我需要一个“我的待办”小程序，功能包括： 1. 首页显示待办事项列表，按创建时间排序，未完成的事项置顶。 2. 点击“添加”按钮，跳转到添加页面，可以输入标题、描述、截止日期。 3. 在列表中点击一项，可以标记为已完成，或者删除。 4. 顶部有一个筛选器，可以切换查看“全部”、“未完成”、“已完成”。

4.2 第二步：项目结构生成

AI 执行：

基于上一步拆解的功能，AI 生成项目目录结构：

my-todo-app/ ├── app.js ├── app.json ├── app.wxss ├── project.config.json ├── pages/ │ ├── index/ │ │ ├── index.wxml │ │ ├── index.wxss │ │ ├── index.js │ │ └── index.json │ ├── add/ │ │ ├── add.wxml │ │ ├── add.wxss │ │ ├── add.js │ │ └── add.json │ └── detail/ │ ├── detail.wxml │ ├── detail.wxss │ ├── detail.js │ └── detail.json ├── components/ │ └── todo-item/ │ ├── todo-item.wxml │ ├── todo-item.wxss │ ├── todo-item.js │ └── todo-item.json └── utils/ └── util.js

关键点：

• app.json会自动注册pages/index、pages/add、pages/detail三个页面。
• components/todo-item是一个自定义组件，用于列表中的每一项。
• utils/util.js是一个工具文件，可以存放日期格式化等通用函数。

4.3 第三步：核心代码生成

AI 执行：

这是最关键的步骤。AI 会逐一生成每个文件的代码。以首页为例：

首页逻辑 (pages/index/index.js)：

// pages/index/index.js Page({ data: { todos: [], filter: 'all', // 'all', 'uncompleted', 'completed' filteredTodos: [] }, onLoad() { this.loadTodos(); }, onShow() { this.loadTodos(); }, loadTodos() { const todos = wx.getStorageSync('todos') || []; this.setData({ todos }); this.applyFilter(); }, applyFilter() { const { todos, filter } = this.data; let filteredTodos = []; if (filter === 'all') { filteredTodos = todos; } else if (filter === 'uncompleted') { filteredTodos = todos.filter(item => !item.completed); } else if (filter === 'completed') { filteredTodos = todos.filter(item => item.completed); } this.setData({ filteredTodos }); }, onFilterChange(e) { const filter = e.currentTarget.dataset.filter; this.setData({ filter }, () => { this.applyFilter(); }); }, onToggleComplete(e) { const id = e.currentTarget.dataset.id; const todos = this.data.todos; const index = todos.findIndex(item => item.id === id); if (index !== -1) { todos[index].completed = !todos[index].completed; wx.setStorageSync('todos', todos); this.loadTodos(); } }, onDeleteTodo(e) { const id = e.currentTarget.dataset.id; const todos = this.data.todos.filter(item => item.id !== id); wx.setStorageSync('todos', todos); this.loadTodos(); wx.showToast({ title: '已删除', icon: 'success' }); }, onAddTodo() { wx.navigateTo({ url: '/pages/add/add' }); } });

首页模板 (pages/index/index.wxml)：

<!-- pages/index/index.wxml --> <view class="container"> <view class="header"> <text class="title">我的待办</text> <button class="add-btn" bindtap="onAddTodo">+ 添加</button> </view> <view class="filter-bar"> <view class="filter-item {{filter === 'all' ? 'active' : ''}}" >/* pages/index/index.wxss */ .container { display: flex; flex-direction: column; height: 100vh; background-color: #f5f5f5; } .header { display: flex; justify-content: space-between; align-items: center; padding: 30rpx; background-color: #fff; border-bottom: 1rpx solid #eee; } .title { font-size: 36rpx; font-weight: bold; color: #333; } .add-btn { background-color: #07c160; color: #fff; font-size: 28rpx; padding: 10rpx 30rpx; border-radius: 40rpx; } .filter-bar { display: flex; padding: 20rpx; background-color: #fff; border-bottom: 1rpx solid #eee; } .filter-item { padding: 10rpx 30rpx; margin-right: 20rpx; border-radius: 30rpx; font-size: 28rpx; color: #666; background-color: #f0f0f0; } .filter-item.active { color: #fff; background-color: #07c160; } .list { flex: 1; padding: 20rpx; } .empty { display: flex; justify-content: center; align-items: center; height: 200rpx; color: #999; font-size: 28rpx; } .todo-item { display: flex; justify-content: space-between; align-items: center; padding: 30rpx; margin-bottom: 20rpx; background-color: #fff; border-radius: 16rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); } .todo-item.completed { opacity: 0.6; } .todo-item.completed .todo-title { text-decoration: line-through; color: #999; } .todo-content { flex: 1; } .todo-title { font-size: 32rpx; color: #333; font-weight: 500; } .todo-desc { display: block; font-size: 26rpx; color: #999; margin-top: 10rpx; } .todo-date { display: block; font-size: 24rpx; color: #bbb; margin-top: 10rpx; } .todo-actions { display: flex; flex-direction: column; } .action-btn { padding: 10rpx 20rpx; margin-bottom: 10rpx; border-radius: 20rpx; font-size: 24rpx; text-align: center; } .complete-btn { background-color: #e8f5e9; color: #07c160; } .delete-btn { background-color: #fce4ec; color: #e53935; }

4.4 第四步：配置文件生成

AI 执行：

生成app.json和project.config.json。

app.json：

{ "pages": [ "pages/index/index", "pages/add/add", "pages/detail/detail" ], "window": { "navigationBarTitleText": "我的待办", "navigationBarBackgroundColor": "#07c160", "navigationBarTextStyle": "white" }, "style": "v2", "sitemapLocation": "sitemap.json" }

project.config.json：

{ "description": "项目配置文件", "packOptions": { "ignore": [], "include": [] }, "setting": { "bundle": false, "userConfirmedBundleSwitch": false, "urlCheck": true, "scopeDataCheck": false, "coverView": true, "es6": true, "postcss": true, "compileHotReLoad": false, "lazyloadPlaceholderEnable": false, "preloadBackgroundData": false, "minified": true, "autoAudits": false, "newFeature": false, "uglifyFileName": false, "uploadWithSourceMap": true, "useIsolateContext": true, "nodeModules": false, "enhance": true, "useMultiFrameRuntime": true, "useApiHook": true, "useApiHostProcess": true, "showShadowRootInWxmlPanel": true, "packNpmManually": false, "enableEngp": false, "packNpmRelationList": [], "minifyWXSS": true, "showES6CompileOption": false, "minifyWXML": true, "babelSetting": { "ignore": [], "disablePlugins": [], "outputPath": "" } }, "compileType": "miniprogram", "libVersion": "3.3.4", "appid": "your_appid_here", "projectname": "my-todo-app", "condition": {}, "editorSetting": { "tabIndent": "insertSpaces", "tabSize": 2 } }

关键点：

• app.json中的pages数组必须包含所有页面路径，否则运行时会报错。
• project.config.json中的appid需要替换为你自己的 AppID。
• libVersion指定了基础库版本，建议使用较新的版本。

4.5 第五步：输出与整合

AI 执行：

所有文件生成后，AI 会输出一个完整的项目结构，并提示你：

1. 将生成的文件保存到本地文件夹。
2. 在微信开发者工具中打开该文件夹。
3. 修改project.config.json中的appid为你的 AppID。
4. 点击编译运行。

你需要做：

• 检查文件结构是否完整，确保没有遗漏任何文件。
• 修改appid为你自己的 AppID。如果使用测试号，可以暂时留空，但部分功能（如云开发、订阅消息）无法使用。
• 运行项目，查看效果。

5. 完整示例：从零生成一个“我的待办”小程序

下面我会用这个 Skill，完整演示如何生成一个“我的待办”小程序，并成功运行。我会以实际操作为主线，展示每一步的输入和输出。

5.1 输入需求

在 AI 编程平台中，我输入以下内容：

请使用微信小程序开发一个“我的待办”应用，需求如下： 1. 首页展示待办事项列表，按创建时间倒序排列，未完成的事项置顶显示。 2. 首页顶部有一个筛选器，可以切换查看“全部”、“未完成”、“已完成”。 3. 列表中的每一项显示标题、描述（如果有）、截止日期，以及完成和删除按钮。 4. 点击“添加”按钮，跳转到添加页面。 5. 添加页面包含标题输入框、描述输入框、截止日期选择器，点击保存后返回首页并刷新列表。 6. 数据使用微信小程序的本地缓存 wx.setStorageSync / wx.getStorageSync 存储。 7. 页面风格简洁，使用绿色主题，符合微信小程序的设计规范。 8. 组件化：将列表项封装为一个自定义组件 TodoItem。

5.2 AI 生成的项目结构

AI 根据需求生成了以下文件：

my-todo-app/ ├── app.js ├── app.json ├── app.wxss ├── project.config.json ├── sitemap.json ├── pages/ │ ├── index/ │ │ ├── index.wxml │ │ ├── index.wxss │ │ ├── index.js │ │ └── index.json │ └── add/ │ ├── add.wxml │ ├── add.wxss │ ├── add.js │ └── add.json ├── components/ │ └── todo-item/ │ ├── todo-item.wxml │ ├── todo-item.wxss │ ├── todo-item.js │ └── todo-item.json └── utils/ └── util.js

5.3 关键代码解读

组件components/todo-item/todo-item.js：

// components/todo-item/todo-item.js Component({ properties: { todo: { type: Object, value: {} } }, methods: { onToggleComplete() { this.triggerEvent('togglecomplete', { id: this.properties.todo.id }); }, onDelete() { this.triggerEvent('delete', { id: this.properties.todo.id }); } } });

组件使用方式（在首页 wxml 中）：

<todo-item todo="{{item}}" bind:togglecomplete="onToggleComplete" bind:delete="onDeleteTodo" />

添加页面pages/add/add.js：

// pages/add/add.js Page({ data: { title: '', description: '', dueDate: '', minDate: this.getTodayDate() }, getTodayDate() { const date = new Date(); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; }, onTitleInput(e) { this.setData({ title: e.detail.value }); }, onDescInput(e) { this.setData({ description: e.detail.value }); }, onDateChange(e) { this.setData({ dueDate: e.detail.value }); }, onSave() { const { title, description, dueDate } = this.data; if (!title.trim()) { wx.showToast({ title: '请输入标题', icon: 'none' }); return; } const newTodo = { id: Date.now().toString(), title: title.trim(), description: description.trim(), dueDate: dueDate || this.getTodayDate(), completed: false, createdAt: new Date().toISOString() }; const todos = wx.getStorageSync('todos') || []; todos.unshift(newTodo); wx.setStorageSync('todos', todos); wx.showToast({ title: '保存成功', icon: 'success' }); setTimeout(() => { wx.navigateBack(); }, 1500); } });

5.4 运行效果

在微信开发者工具中打开项目文件夹，修改appid后，点击编译。你会看到：

1. 首页显示一个绿色的标题栏“我的待办”，右侧有一个“+ 添加”按钮。
2. 下方是筛选器，三个选项“全部”、“未完成”、“已完成”，默认选中“全部”。
3. 列表区域为空，显示“暂无待办事项”的提示。
4. 点击“+ 添加”，跳转到添加页面，可以输入标题、描述、选择日期。
5. 点击保存后，自动返回首页，列表显示刚刚添加的待办事项。
6. 点击“完成”按钮，事项状态切换，列表自动刷新。
7. 点击“删除”按钮，事项被删除，并弹出提示“已删除”。

6. 运行结果与效果验证

6.1 验证步骤

1. 基础功能验证：

   • 添加一个待办事项，输入标题“测试事项”，点击保存。
   • 返回首页，确认列表中出现“测试事项”。
   • 点击“完成”按钮，确认事项状态变为已完成（文字出现删除线，透明度降低）。
   • 点击“删除”按钮，确认事项被删除。

2. 筛选功能验证：

   • 添加三个事项，分别标记为“未完成”、“已完成”、“未完成”。
   • 切换筛选器到“未完成”，确认只显示两个未完成事项。
   • 切换筛选器到“已完成”，确认只显示一个已完成事项。
   • 切换回“全部”，确认三个事项都显示。

3. 数据持久化验证：

   • 添加一些事项后，关闭开发者工具，重新打开。
   • 确认数据仍然存在，没有被清空。

4. 边界情况验证：

   • 尝试添加一个空标题的事项，确认会弹出提示“请输入标题”。
   • 尝试添加一个超长标题的事项，确认页面布局没有错乱。
   • 在列表为空时，确认显示“暂无待办事项”的提示。

6.2 常见问题排查

如果运行过程中遇到问题，按以下顺序排查：

7. 常见问题与排查思路

7.1 AI 生成代码不完整

问题描述：AI 生成的代码可能缺少某个页面，或者某个文件为空。

原因分析：

• 需求描述不够详细，AI 没有识别出所有页面。
• 生成过程中上下文丢失，AI 只生成了部分文件。

解决方案：

• 在需求描述中明确列出所有页面的功能。
• 可以使用“请先生成项目结构，再生成每个页面”的分步指令。
• 如果缺少文件，可以单独要求 AI 补充。

7.2 生成的代码无法运行

问题描述：在微信开发者工具中编译报错，提示语法错误或未定义的变量。

原因分析：

• AI 使用了微信小程序不支持的语法，比如 ES6+ 的某些特性。
• 变量名拼写错误，导致引用未定义。
• 组件引用路径错误。

解决方案：

• 在 Skill 的规则中明确要求使用微信小程序支持的语法（ES5/ES6 子集）。
• 检查project.config.json中的es6设置是否为true。
• 人工检查代码中的拼写错误，特别是函数名和变量名。

7.3 样式不符合预期

问题描述：生成的页面布局错乱，或者颜色风格不符合需求。

原因分析：

• AI 对微信小程序的样式规范理解不够深入。
• 没有在需求中明确指定样式风格。

解决方案：

• 在需求描述中提供参考样式，比如“参考微信小程序官方示例的样式”。
• 生成后手动调整样式，微信小程序的 wxss 和 CSS 类似，调整门槛不高。
• 可以在 Skill 中预设一套样式模板，减少 AI 的自由发挥。

7.4 数据存储问题

问题描述：数据不持久化，或者数据在不同页面间不共享。

原因分析：

• 使用了wx.setStorage但读取时使用了wx.getStorageSync。
• 存储键名在不同页面不一致。
• 数据更新后没有及时同步到页面。

解决方案：

• 统一使用同步 API（wx.setStorageSync/wx.getStorageSync）或异步 API，不要混用。
• 定义全局常量存储键名，比如在app.js中定义STORAGE_KEY。
• 在页面显示时重新加载数据（onShow生命周期中调用数据加载函数）。

7.5 组件通信问题

问题描述：父子组件间的数据传递或事件触发不工作。

原因分析：

• 组件属性定义错误。
• 事件名称不匹配。

解决方案：

• 检查组件的properties定义，确保属性名和类型正确。
• 检查父组件中的事件绑定，bind:xxx和子组件中的triggerEvent('xxx')必须一致。
• 微信小程序中，组件事件使用triggerEvent触发，父组件用bind:事件名监听。

8. 最佳实践与工程建议

8.1 如何写出高质量的 Skill 需求描述

AI 生成代码的质量，很大程度上取决于你的需求描述。以下是一些提高生成质量的建议：

1. 结构化描述

不要用一段话描述所有需求，而是分点列出：

首页： - 功能1：展示列表 - 功能2：筛选器 - 功能3：添加按钮 添加页面： - 功能1：输入标题 - 功能2：选择日期 - 功能3：保存操作

2. 明确技术选型

如果对技术方案有要求，一定要在需求中说明：

- 使用本地缓存存储数据，不要使用云开发。 - 使用自定义组件实现列表项。 - 使用 Flex 布局，不使用 Float。

3. 提供样式参考

可以简单描述风格，比如：

- 颜色主题：主色 #07c160，辅色 #e8f5e9。 - 字体：使用系统默认字体。 - 风格：简洁、卡片式布局。

4. 指定边界条件

告诉 AI 如何处理异常情况：

- 标题不能为空，保存时校验。 - 列表为空时显示占位提示。 - 删除操作需要二次确认。

8.2 如何让 Skill 稳定输出高质量代码

1. 预设模板

在 Skill 中预设一套“微信小程序项目模板”，包括：

• 标准的app.json配置。
• 常用的工具函数（日期格式化、防抖、节流）。
• 统一的样式变量（颜色、间距、字体大小）。

这样 AI 生成代码时，会基于模板进行扩展，风格一致，质量更高。

2. 分步生成

不要让 AI 一次性生成所有代码。可以采用分步策略：

1. 第一步：生成项目结构和配置文件。
2. 第二步：生成核心页面（首页、列表页）。
3. 第三步：生成功能页面（添加、编辑、详情）。
4. 第四步：生成组件和工具函数。

分步的好处是，每一步都可以检查结果，及时调整，避免到最后才发现问题。

3. 代码审查清单

生成代码后，建议按以下清单进行审查：

• [ ] 所有页面是否在app.json中注册？
• [ ] 组件路径是否正确？
• [ ] 数据绑定语法是否正确？
• [ ] 生命周期函数是否完整？
• [ ] 事件绑定名称是否匹配？
• [ ] 存储键名是否一致？
• [ ] 样式是否响应式？
• [ ] 是否存在未定义的变量？

8.3 生产环境注意事项

1. 数据安全

如果小程序涉及用户数据，不要使用本地缓存存储敏感信息（如密码、身份证号）。本地缓存数据不具备加密保护，存在安全风险。

2. 数据清理

本地缓存有大小限制（单个 key 不超过 1MB，总大小不超过 10MB）。如果数据量较大，需要定期清理旧数据，或者考虑使用云开发。

3. 用户权限

如果小程序需要获取用户信息（昵称、头像）、地理位置等，需要：

• 在app.json中声明所需权限。
• 使用微信官方提供的授权 API（wx.authorize）。
• 处理用户拒绝授权的情况。

4. 版本更新

在微信开发者工具中配置app.json中的version和appid，确保版本号正确。发布到微信公众平台时，需要提交审核。

8.4 团队协作建议

1. 代码规范

在 Skill 中预设代码规范，包括：

• 命名规范：camelCase命名变量和函数，PascalCase命名组件。
• 注释规范：关键函数和复杂逻辑添加注释。
• 文件结构规范：页面和组件放在指定目录下。

2. 版本控制

使用 Git 管理项目，AI 生成的代码也需要提交到版本库。这样可以在出现问题时回滚到之前的版本。

3. 分工协作

虽然 AI 可以生成代码，但建议：

• 让 AI 负责“地基”搭建（项目结构、配置、基础页面）。
• 人工负责“核心业务”实现（复杂逻辑、性能优化、安全处理）。
• 团队其他成员负责“样式调整”和“功能测试”。

9. 总结与后续学习方向

9.1 本文的核心要点

1. 这个 Skill 的本质：它是一个 AI 工作流，输入自然语言需求，输出可直接运行的微信小程序项目，解决的是“从零到一”的繁琐搭建过程。
2. 核心价值：节省了项目结构搭建、配置编写、基础代码生成的时间，让开发者能更快进入业务逻辑验证阶段。
3. 适用场景：适合快速原型开发、个人项目、学习验证，也适合作为 AI 辅助开发的一个实践案例。
4. 局限性：AI 生成的代码质量取决于需求描述的清晰度，复杂的业务逻辑和独特的设计风格仍然需要人工调整。

9.2 下一步可以做什么

1. 扩展功能：在现有基础上，添加更多功能，如图片上传、地图定位、支付集成等。可以尝试让 AI 生成对应的代码。
2. 优化用户体验：手动调整页面样式，添加动画效果，优化交互流程。
3. 接入后端：将本地缓存替换为云开发或自建后端，实现数据同步和用户管理。
4. 完善 Skill：根据本文的实践经验，优化你的 Skill 的提示词和规则，让它生成更稳定、更高质量的代码。

9.3 值得继续深入的方向

1. 微信小程序云开发：AI 可以生成云函数和数据库操作代码，实现更复杂的功能。
2. 组件化开发：如何让 AI 生成可复用的、高质量的组件，是提升开发效率的关键。
3. AI 辅助测试：让 AI 生成测试用例和自动化测试脚本，确保小程序质量。
4. 多平台适配：将 Skill 扩展到支付宝小程序、百度小程序、H5 等平台，实现“一次需求，多端生成”。

最后，虽然 AI 能帮你生成代码，但建议你花时间理解生成的每一行代码。知其然，更知其所以然，这样才能在 AI 出现问题时，快速定位和修复。毕竟，AI 是辅助工具，真正的掌握能力，仍然在你自己的手里。