AI 编程/制作小程序
更新于: 2026-06-25 17:47:58
通过与编程 Agent 对话,你可以快速开发微信小程序。无需编写代码、无需搭建开发环境,只需提出明确的开发需求即可从零开始完成小程序的代码编写、部署上线。本文档介绍如何使用编程 Agent 开发小程序。
功能概述
扣子已将扣子编程平台封装为编程 Agent,提供了一个 AI 编程开发环境,你可以直接与编程 Agent 对话,描述你想要开发的小程序的功能、界面、逻辑等需求,编程 Agent 会自动完成小程序的开发、测试、迭代和发布。
费用说明
开发、测试、线上使用小程序时,以下操作将消耗你的扣子积分。
- 编程任务:与编程 Agent 的每轮对话。
- 内置集成:调用大语言模型、联网搜索、图像生成等内置集成服务。
配额与限制
开发小程序时,存在可创建的项目数量、可回滚版本数、可部署的次数等配额限制,详细说明,请参考配额与限制。
准备工作
在开始开发之前,你需要在微信公众平台完成小程序的注册和基础配置。
- 注册小程序:前往 微信公众平台,按照官方小程序注册指引完成小程序账号的注册。
- 获取 AppID:在微信公众平台左侧导航栏单击管理 > 开发管理,在开发设置页签的开发者 ID 区域找到并复制 AppID。这是小程序的唯一标识,后续步骤将会用到。

步骤一:创建编程项目
- 在扣子左侧导航栏中,单击 + >新建编程项目。
- (可选)团队版或企业版需要选择项目所属的工作空间,然后单击确认。

- 在扣子 App 顶部,单击 + >新建编程项目。

- (可选)团队版或企业版需要选择项目所属的工作空间,然后单击确认。

步骤二:需求澄清
-
创建编程项目并输入你的需求。
- 在编程项目中,单击小程序选项卡。
- 在文本框输入你的提示词。
你需要尽可能清晰且详细地描述小程序的功能、界面设计、业务逻辑等方面的要求。例如,你可以输入以下提示:
帮我制作一个小程序,用于学习普通话情景对话
1. 模型随机生成并展示 3 个不同主题,例如买菜、问路、面试等,用户进入页面时,选择一个主题,模型根据主题生成一段对话数据,并展示给用户
2. 类似聊天气泡的布局展示对话,每个汉字上方标注拼音,点击气泡可以朗读语句,整体有个录音按钮,用户可以跟读并录音,跟读完听回放

-
(可选)进阶配置:通过上传附件、选择协作模式、添加技能、选择编程模型,让编程 Agent 生成的结果更精准、更符合你的预期。

- 上传附件
酌情上传一些图片或文件,作为附加信息提供给编程 Agent,以便编程 Agent 能更理解你的需求。例如上传一张你想参考的网站截图、想要的风格示例图片等,这些都能帮助编程 Agent 更精准地把握细节要求。
- 选择协作模式
默认情况下为 Agent 模式,如果你对需求不确定,可以先切换到问答模式讨论方案,待方案确认后,再切换到Agent 模式,由编程 Agent 根据此前的讨论结论执行开发任务。更多信息,请参考如何选择协作模式?。
- 添加技能
在执行编程任务时,编程 Agent 可以按需加载技能,从而具备相应的专业领域知识和能力。例如,前端设计技能可以有效指导模型如何排版、设计配色和动画效果、处理背景等等,能显著提升模型的 UI 生成能力,减少产物视觉效果的“AI 味”。 【加上参考文档】
- 选择编程模型
编程 Agent 已集成 GLM 4.7、GLM 5、Kimi K2.5 等主流的编程模型,用于开发应用。为了达到较好的开发效果,系统会自动为你选择适合当前场景的模型,你也可以根据模型的官方介绍自行选择
-
单击运行图标,开始开发你的项目。
编程 Agent 会根据你输入的提示词来开始设计小程序、创建项目,并自动为项目设置小程序名称。
- 创建编程项目并输入你的需求。
-
在编程项目中,单击小程序选项卡。
-
在文本框输入你的提示词。
你需要尽可能清晰且详细地描述小程序的功能、界面设计、业务逻辑等方面的要求。例如,你可以输入以下提示:
帮我制作一个小程序,用于学习普通话情景对话
1. 模型随机生成并展示 3 个不同主题,例如买菜、问路、面试等,用户进入页面时,选择一个主题,模型根据主题生成一段对话数据,并展示给用户
2. 类似聊天气泡的布局展示对话,每个汉字上方标注拼音,点击气泡可以朗读语句,整体有个录音按钮,用户可以跟读并录音,跟读完听回放

- (可选)进阶配置:通过上传附件、选择协作模式、添加技能、选择编程模型,让编程 Agent 生成的结果更精准、更符合你的预期。
- 上传附件和添加技能
- 酌情上传一些图片或文件,作为附加信息提供给编程 Agent,以便编程 Agent 能更理解你的需求。例如上传一张你想参考的网站截图、想要的风格示例图片等,这些都能帮助编程 Agent 更精准地把握细节要求。
- 在执行编程任务时,编程 Agent 可以按需加载技能,从而具备相应的专业领域知识和能力。例如,前端设计技能可以有效指导模型如何排版、设计配色和动画效果、处理背景等等,能显著提升模型的 UI 生成能力,减少产物视觉效果的“AI 味”。 更多信息,请参考在扣子编程中使用技能。
- 选择协作模式
默认情况下为 Agent 模式,如果你对需求不确定,可以先切换到问答模式讨论方案,待方案确认后,再切换到Agent 模式,由编程 Agent 根据此前的讨论结论执行开发任务。更多信息,请参考如何选择协作模式?。
- 选择编程模型
编程 Agent 已集成 GLM 4.7、GLM 5、Kimi K2.5 等主流的编程模型,用于开发应用。为了达到较好的开发效果,系统会自动为你选择适合当前场景的模型,你也可以根据模型的官方介绍自行选择。
- 单击运行图标,开始开发你的项目。
编程 Agent 会根据你输入的提示词来开始设计小程序、创建项目,并自动为项目设置小程序名称。
步骤三:开发应用
编程 Agent 收到你的需求之后,将立即启动需求分析,并规划开发流程和步骤,逐步生成小程序的前后端代码。代码生成完毕后,自动构建并启动服务,以提供一个可视化的界面供你预览。
如果编程 Agent 判断你的小程序需要数据库、存储、身份认证、AI 等能力,则会自动添加和配置对应的集成,为你的小程序设计数据库表、配置存储系统,实现相关功能。
步骤四:预览与测试
初步生成后端代码后,编程 Agent 会自动生成测试用例并完成一轮单元测试。测试通过后编程 Agent 会提供后端代码的预览,同时提醒你对后端开发部分进行验收。
说明
录音等部分功能仅在小程序真机调试时可用,建议配置 AppID 之后通过微信扫码预览真机效果。
你可以在右侧预览页面查看实际运行效果。 应用预览界面如下:

你可以在页面中单击预览查看实际运行效果。 网页应用预览界面如下:

绑定微信小程序
为了体验小程序在手机上的效果,建议参考以下流程真机调试小程序。
- 在编程项目页面右下角单击 AppID 设置。

- 在弹出页面中填写 AppID,并单击绑定。
AppID 是你在准备工作 中获取的 AppID。

- 完成公众平台账号授权。
单击绑定后,系统默认打开授权页面,使用小程序的管理员微信号扫描授权二维码,并根据页面提示完成授权。
- 在预览页面的右上角,单击二维码图标。

- 复制连接,前往扣子 Web 端打开项目,进行预览。
即参考【网页端、桌面端】的操作步骤。
真机调试小程序
成功绑定小程序之后,就可以使用管理员微信号扫描页面右侧的二维码,在手机上调试小程序。
使用管理员微信号,在预览页面右下角扫描二维码,即可在手机上预览你的小程序。

单击二维码图标,然后扫码预览。

测试项目
在预览与测试的环节中,你可以通过以下操作测试编程 Agent 为你生成的小程序。
|
操作
|
说明
|
示例
|
|
全面测试
|
全面测试你的小程序,通常建议关注以下问题:
- 功能是否可用:验证小程序的核心链路是否完整可操作、数据的增删改查是否能成功执行。
- 交互是否完善:检查页面元素是否完整显示、布局是否合理、样式是否符合设计要求、各个按钮是否都能正确触发。
- AI 能力是否正常:如果你的小程序集成了 AI 能力,例如文本生成、图片生成等,验证 AI 模型的输出是否符合预期。
|

|
|
修复故障
|
如果页面报错,编程 Agent 会自动识别并提示你修复故障,你可以根据页面提示,单击一键修复,允许编程 Agent 尝试修复这些问题。
如果你在体验小程序的过程中触发页面报错,或者页面交互、生成结果不符合你的预期,你也可以主动复制报错信息、描述预期的结果,并粘贴到左侧输入框中,要求编程 Agent 修复故障。
|
- 网页端

- 手机端

|
步骤五:部署应用
完成小程序的开发与测试之后,你需要在微信开放平台完成小程序的配置和备案,然后在页面右上角单击部署,将扣子编程搭建的小程序部署成为一个公开可访问的微信小程序,将你的创意和原型,转化为服务于真实用户的产品。详细操作步骤可参考部署小程序。
- 单击页面右上角的部署图标,然后单击开始部署。
- 按需配置部署信息。
- 你可以使用默认配置,快速完成部署,也可以按需配置可见性、数据库、环境变量等配置。
- 单击开始部署。

-
单击页面右上角的 ··· > 部署,然后单击开始部署。

-
按需配置部署信息。
你可以使用默认配置,快速完成部署,也可以前往扣子网页版进行配置。

-
单击部署。
进阶操作
关于开发应用的进阶操作,可以参考以下功能:
- 迭代应用:通过自然语言或直接修改代码,持续优化应用的功能、页面和交互。更多信息,请参考迭代小程序。
- 集成服务:为应用接入 AI 模型、联网搜索、数据库、对象存储、用户登录等能力。更多信息,请参考集成能力。
- 回滚开发版本:当生成结果不符合预期、修复失败或应用状态异常时,可以在版本历史中将应用恢复到之前的正常版本,再继续迭代。更多信息,请参考回滚开发版本。
- 多人协作:邀请同一工作空间下的其他成员加入项目,共同与 Agent 对话、查看开发进度、修改代码和调试应用。更多信息,请参考多人协作 AI 编程。