助手
扣子 AI 帮助与支持
你好,我是 扣子 文档问答助手 🎉 你在阅读当前文档的过程中,无论对文档概念的解释,还是文档内容方面的疑问,都可以随时向我提问,我会全力为你解答
推荐问题
如何快速了解这个空间的核心内容?
有哪些近期更新的重点文档?
我应该从哪些文档开始阅读?
文档反馈

制作小程序

更新于: 2026-06-25 17:47:58

通过与编程 Agent 对话,你可以快速开发微信小程序。无需编写代码、无需搭建开发环境,只需提出明确的开发需求即可从零开始完成小程序的代码编写、部署上线。本文档介绍如何使用编程 Agent 开发小程序。

功能概述

扣子已将扣子编程平台封装为编程 Agent,提供了一个 AI 编程开发环境,你可以直接与编程 Agent 对话,描述你想要开发的小程序的功能、界面、逻辑等需求,编程 Agent 会自动完成小程序的开发、测试、迭代和发布。

说明

目前仅支持开发微信小程序。

费用说明

开发、测试、线上使用小程序时,以下操作将消耗你的扣子积分。

  • 编程任务:与编程 Agent 的每轮对话。
  • 内置集成:调用大语言模型、联网搜索、图像生成等内置集成服务。

配额与限制

开发小程序时,存在可创建的项目数量、可回滚版本数、可部署的次数等配额限制,详细说明,请参考配额与限制

准备工作

在开始开发之前,你需要在微信公众平台完成小程序的注册和基础配置。

  • 注册小程序:前往 微信公众平台,按照官方小程序注册指引完成小程序账号的注册。
  • 获取 AppID:在微信公众平台左侧导航栏单击管理 > 开发管理,在开发设置页签的开发者 ID 区域找到并复制 AppID。这是小程序的唯一标识,后续步骤将会用到。

Image

步骤一:创建编程项目

  1. 在扣子左侧导航栏中,单击 + >新建编程项目
  2. (可选)团队版或企业版需要选择项目所属的工作空间,然后单击确认
    Image
  1. 在扣子 App 顶部,单击 + >新建编程项目
    Image
  2. (可选)团队版或企业版需要选择项目所属的工作空间,然后单击确认
    Image

步骤二:需求澄清

  1. 创建编程项目并输入你的需求。

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

    Image

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

    • 上传附件
      酌情上传一些图片或文件,作为附加信息提供给编程 Agent,以便编程 Agent 能更理解你的需求。例如上传一张你想参考的网站截图、想要的风格示例图片等,这些都能帮助编程 Agent 更精准地把握细节要求。
    • 选择协作模式
      默认情况下为 Agent 模式,如果你对需求不确定,可以先切换到问答模式讨论方案,待方案确认后,再切换到Agent 模式,由编程 Agent 根据此前的讨论结论执行开发任务。更多信息,请参考如何选择协作模式?
    • 添加技能
      在执行编程任务时,编程 Agent 可以按需加载技能,从而具备相应的专业领域知识和能力。例如,前端设计技能可以有效指导模型如何排版、设计配色和动画效果、处理背景等等,能显著提升模型的 UI 生成能力,减少产物视觉效果的“AI 味”。 【加上参考文档】
    • 选择编程模型
      编程 Agent 已集成 GLM 4.7、GLM 5、Kimi K2.5 等主流的编程模型,用于开发应用。为了达到较好的开发效果,系统会自动为你选择适合当前场景的模型,你也可以根据模型的官方介绍自行选择
  3. 单击运行图标,开始开发你的项目。
    编程 Agent 会根据你输入的提示词来开始设计小程序、创建项目,并自动为项目设置小程序名称。

  1. 创建编程项目并输入你的需求。
    1. 在编程项目中,单击小程序选项卡。

    2. 在文本框输入你的提示词。
      你需要尽可能清晰且详细地描述小程序的功能、界面设计、业务逻辑等方面的要求。例如,你可以输入以下提示:

      帮我制作一个小程序,用于学习普通话情景对话
      1. 模型随机生成并展示 3 个不同主题,例如买菜、问路、面试等,用户进入页面时,选择一个主题,模型根据主题生成一段对话数据,并展示给用户
      2. 类似聊天气泡的布局展示对话,每个汉字上方标注拼音,点击气泡可以朗读语句,整体有个录音按钮,用户可以跟读并录音,跟读完听回放
      

      Image

  2. (可选)进阶配置:通过上传附件、选择协作模式、添加技能、选择编程模型,让编程 Agent 生成的结果更精准、更符合你的预期。
    Image
    • 上传附件和添加技能
      • 酌情上传一些图片或文件,作为附加信息提供给编程 Agent,以便编程 Agent 能更理解你的需求。例如上传一张你想参考的网站截图、想要的风格示例图片等,这些都能帮助编程 Agent 更精准地把握细节要求。
      • 在执行编程任务时,编程 Agent 可以按需加载技能,从而具备相应的专业领域知识和能力。例如,前端设计技能可以有效指导模型如何排版、设计配色和动画效果、处理背景等等,能显著提升模型的 UI 生成能力,减少产物视觉效果的“AI 味”。 更多信息,请参考在扣子编程中使用技能
    • 选择协作模式
      默认情况下为 Agent 模式,如果你对需求不确定,可以先切换到问答模式讨论方案,待方案确认后,再切换到Agent 模式,由编程 Agent 根据此前的讨论结论执行开发任务。更多信息,请参考如何选择协作模式?
    • 选择编程模型
      编程 Agent 已集成 GLM 4.7、GLM 5、Kimi K2.5 等主流的编程模型,用于开发应用。为了达到较好的开发效果,系统会自动为你选择适合当前场景的模型,你也可以根据模型的官方介绍自行选择。
  3. 单击运行图标,开始开发你的项目。
    编程 Agent 会根据你输入的提示词来开始设计小程序、创建项目,并自动为项目设置小程序名称。

步骤三:开发应用

编程 Agent 收到你的需求之后,将立即启动需求分析,并规划开发流程和步骤,逐步生成小程序的前后端代码。代码生成完毕后,自动构建并启动服务,以提供一个可视化的界面供你预览。
如果编程 Agent 判断你的小程序需要数据库、存储、身份认证、AI 等能力,则会自动添加和配置对应的集成,为你的小程序设计数据库表、配置存储系统,实现相关功能。

Image

Image

步骤四:预览与测试

初步生成后端代码后,编程 Agent 会自动生成测试用例并完成一轮单元测试。测试通过后编程 Agent 会提供后端代码的预览,同时提醒你对后端开发部分进行验收。

说明

录音等部分功能仅在小程序真机调试时可用,建议配置 AppID 之后通过微信扫码预览真机效果。

你可以在右侧预览页面查看实际运行效果。 应用预览界面如下:
Image

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

绑定微信小程序

为了体验小程序在手机上的效果,建议参考以下流程真机调试小程序。

  1. 在编程项目页面右下角单击 AppID 设置
    Image
  2. 在弹出页面中填写 AppID,并单击绑定
    AppID 是你在准备工作 中获取的 AppID。
    Image
  3. 完成公众平台账号授权。
    单击绑定后,系统默认打开授权页面,使用小程序的管理员微信号扫描授权二维码,并根据页面提示完成授权。
  1. 预览页面的右上角,单击二维码图标。
    Image
  2. 复制连接,前往扣子 Web 端打开项目,进行预览。
    即参考【网页端、桌面端】的操作步骤。
  1. 管理员扫描二维码
  1. 选择账号
  1. 授权确认
  1. 授权成功

Image

Image

Image

Image

真机调试小程序

成功绑定小程序之后,就可以使用管理员微信号扫描页面右侧的二维码,在手机上调试小程序。

使用管理员微信号,在预览页面右下角扫描二维码,即可在手机上预览你的小程序。
Image

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

测试项目

在预览与测试的环节中,你可以通过以下操作测试编程 Agent 为你生成的小程序。

操作

说明

示例

全面测试

全面测试你的小程序,通常建议关注以下问题:

  • 功能是否可用:验证小程序的核心链路是否完整可操作、数据的增删改查是否能成功执行。
  • 交互是否完善:检查页面元素是否完整显示、布局是否合理、样式是否符合设计要求、各个按钮是否都能正确触发。
  • AI 能力是否正常:如果你的小程序集成了 AI 能力,例如文本生成、图片生成等,验证 AI 模型的输出是否符合预期。

Image

修复故障

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

  • 网页端
    Image
  • 手机端

Image

步骤五:部署应用

完成小程序的开发与测试之后,你需要在微信开放平台完成小程序的配置和备案,然后在页面右上角单击部署,将扣子编程搭建的小程序部署成为一个公开可访问的微信小程序,将你的创意和原型,转化为服务于真实用户的产品。详细操作步骤可参考部署小程序

  1. 单击页面右上角的部署图标,然后单击开始部署
  2. 按需配置部署信息。
  3. 你可以使用默认配置,快速完成部署,也可以按需配置可见性、数据库、环境变量等配置。
  4. 单击开始部署
    Image
  1. 单击页面右上角的 ··· > 部署,然后单击开始部署
    Image

  2. 按需配置部署信息。

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

    Image

  3. 单击部署

进阶操作

关于开发应用的进阶操作,可以参考以下功能:

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