零基础用自然语言发布微信小程序

微信小程序现在是承载轻量 AI 创意的绝佳载体：即扫即用、不需要用户安装，微信生态内分享传播极其方便。

然而，传统的微信小程序开发包含一堆繁杂的流程：去微信后台配各种设置、本地配微信开发者工具、写微信特有的 WXML/WXSS 小程序代码、还要自己搭后端数据接口 API……这几乎把绝大多数非技术人员都劝退了。

但在扣子的 AI 编程里，你可以直接用大白话向 Agent 描述你的小程序需求，AI 会帮你全部写好，甚至帮你直接打包上传到微信小程序官方后台的开发版本。

今天这篇实操教程，我就带大家把微信小程序开发的完整流程走一遍。

---

准备工作：获取你的微信小程序通行证（AppID）

在开始开发之前，我们需要做两项简单的准备工作：

1. 注册小程序：前往 微信公众平台，根据官方指引注册一个微信小程序账号。
2. 获取 AppID：登录微信公众平台后，点击左侧的 “管理” > “开发管理”，切换到 “开发设置” 页签，在 “开发者 ID” 中复制你的 AppID（这是小程序的唯一身份标识）。

---

建个新项目：起步工作

1. 打开扣子，点击左侧导航栏的 ➕ > 新建编程项目。
2. 确认工作空间后，点击顶部的 “小程序” 选项卡。

---

告诉 AI 助理你的功能需求

进入小程序界面后，在下方输入框写下你的应用创意。

提示词避坑指南：依旧是把你要什么界面、具体逻辑写清楚，千万别只给一句话。

例如，我们要开发一款“普通话情景对话学习小程序”：

帮我制作一个小程序，用于学习普通话情景对话：

1. 模型随机生成并展示 3 个不同主题（如买菜、问路、面试），用户选择一个后，AI 根据主题生成一段普通话对话数据展示在屏幕上。
2. 布局类似微信聊天气泡。每个汉字上方标注拼音，点击气泡可以朗读该语句。提供一个录音按钮供用户跟读，录音结束后能点击听回放。

在运行前，你也可以利用这几个进阶小按钮：

• 上传附件：如果有草图或者参考设计图直接上传。
• 开发模式：功能还没确定时先切到“问答模式”，跟大模型商量，确定了再切回“Agent 模式”直接开发。
• 开发技能：加载前端设计 Skill，提升小程序的色彩搭配与审美。

点击运行后，Agent 就会开始自动规划步骤并编写代码。

---

绑定 AppID 并进行真机调试（最关键的避坑点）

小程序生成后，右侧预览沙箱会渲染出页面。但由于小程序的录音、麦克风等底层硬件 API 在普通的网页沙箱里不可用，强烈建议大家进行真机调试。这里有几个很多新手非常容易踩的坑：

1. 绑定小程序 AppID：

1. 点击预览页面右下角的 “AppID 设置”。
2. 填写你在准备工作中获取的 AppID，点击 “绑定”。
3. 此时页面会弹出官方授权二维码，必须使用该小程序的管理员微信号扫码授权，在手机微信上确认绑定。

2. 真机扫码预览：

绑定成功后，右下角会自动生成一个预览二维码。
注意：这里必须使用微信 App 扫描此二维码，不能用扣子扫。 扫码后你就能直接在自己的手机微信里测试这个小程序的所有真实功能了。

---

测试、Bug 修复与一键发布

如果在真机测试中，你发现按钮点不动或者显示有 Bug：

• 一键修复：编程 Agent 在控制台抓到报错后会给提示，你可以直接点击 “一键修复” 授权 AI 重构解决。
• 主动报修：将具体问题发送给 Agent 促使其重新生成与微调。

调试满意后，点击右上角的 “部署” 按钮。

1. 点击“开始部署”。
2. 配置可见性、数据库和环境变量（保持默认直接下一步即可）。
3. 扣子会在云端打包，并作为开发版本自动提交到你的微信公众平台账号下。

你可以直接登录你的 微信公众平台，在“版本管理”中就能看到由扣子自动提交上来的小程序代码，点击“提交审核”即可等待发布！

---

💡 容易被忽略的两个进阶实操细节

1. 微信后台服务器域名配置：别忘了，如果你的小程序调用了扣子的后端业务接口（如云端数据库、大模型模型接口），在小程序发布上线前，必须登录微信小程序管理后台，在 “开发管理” > “开发设置” 的服务器域名中，把扣子提供的后端 API 请求域名添加进白名单，否则真机上用户会无法请求数据。
2. 多端协同：你可以直接邀请团队成员加入该项目，大家可以同时以大白话向 Agent 发指令，共同修改这个小程序并扫码预览，开发效率非常高。