Skip to Content
帮助文档开发者集成Vibe Coding 搭建微信小程序

Vibe Coding + Zion 全自动搭建你的微信小程序

💡

Vibe Coding 看不懂后端业务逻辑？数据只能在自己电脑上看？还要自己买服务器和域名部署后端？

👋 欢迎使用 Zion 开发套件！

使用 Zion Plugin（开发套件）即可让 Coding Agent 为你交付可视化的后端业务逻辑和前端页面，黑盒业务逻辑从此说拜拜向前迈一步，你会打开新世界的大门🚪

网页搭建教程：Vibe Coding + Zion 全自动搭建你的网站

Vibe coding x Zion 交流群：飞书搜索群「AI Coding x Zion」加入。

用户案例

「小笼 AI」小程序码

「小笼 AI」：两分钟生成网页，蒸馏这个世界

「HAIFOSS」小程序码

「HAIFOSS」：测一测，即刻调配你专属的护肤精华

注册 Zion 账户

  1. Zion 账户注册：点此注册 ，「默认会进入新手引导项目，可点击左上角 Logo 退出」

配置微信小程序私钥发布

温馨提示：如果你之前已经在 Zion 中授权绑定过，请先完成平台解绑，解绑会导致你已经在运营的小程序暂不可用，解绑后前往微信公众平台 - 版本管理 - 取消 Zion 授权再进行私钥发布配置。

如果你从未在 Zion 中授权发布过，你可以先完成授权，再取消授权（在 Zion 平台解除绑定以及在微信公众平台 - 版本管理取消授权），这样可以快速绑定下方文档中的各种业务域名，加速准备工作。

  1. 使用私钥发布：Zion 小程序如何私钥发布 | Zion 帮助中心 

Zion 平台使用私钥发布微信小程序

下载微信开发者工具

  1. 前往微信开发者工具下载 稳定版本的开发者工具（借助微信开发者工具完成小程序预览打包发布）

下载稳定版本的微信开发者工具

安装 Zion Plugin（开发套件）

安装指引见本文末尾「工具安装入口指引」。

Zion Plugin 地址

国内镜像：https://gitee.com/functorz/zion-nocode-plugin 

全球地址：https://github.com/functorz-tech/zion-nocode-plugin 

开始让 AI 搭建项目

  1. 新建一个微信小程序项目文件夹
  2. 选择这个文件夹，使用 Coding Agent 进行自然语言开发，参考提示词（务必告诉 Cursor 你要制作微信小程序，后端用 Zion BaaS，前端使用微信小程序原生开发）
通过 Zion Plugin，开发一个 AI饮食助手 微信原生小程序，后端用 Zion BaaS，前端使用微信小程序原生开发，设计风格选择 wabi-sabi 风格，用户通过微信静默登录
支持用户上传餐食图片并调用AI Agent 分析餐食卡路里，并输出结果，用户可以保存结果至历史记录内，并支持修改、删除历史记录。 用 Plugin 直接创建项目
初始化设计风格建议：
# 微信小程序设计指令 · 人文书籍风格（v3）

## 一、设计隐喻（先理解气质）
把页面当作"一本精装人文社科书籍的内页"来设计。它应该是温暖的、哑光的、安静的、有文化感的，而不是科技感或塑料感。

## 二、色彩推导（不要抄色号，按感觉生成）
- 背景：旧纸张或棉麻布料的颜色——温暖、哑光、带暖灰调，不能是纯白或冷白。
- 主文字：印刷油墨的颜色——深但柔和，接近深灰棕，不能是纯黑。
- 强调色：朱砂印泥的感觉——温暖、低饱和度红橙色，只用于主按钮和关键数字。
- 辅助色：褪色便签纸或铅笔画线——浅灰、中灰、带暖意。

## 三、字体与排版
- 长文段落：用衬线字体（Georgia / Times），行高 1.8 以上，让阅读像翻书。
- 标题/导航：用无衬线字体（PingFang SC），保持现代感。
- 留白：区块之间留出"沉默"空间（至少正文行高的 2-3 倍），用留白代替阴影来分区。

## 四、允许的装饰（为了不变成 Word 文档）
- 圆角：允许 8-12rpx 的极小圆角，但不能超过 16rpx。
- 图标：使用 SVG 格式，单色线性风格（1.5px 线宽），随文字颜色变化（使用 currentColor），不能有填充色块。**必须考虑缺省（占位）效果**：当 SVG 加载失败或未加载时，应显示一个与背景色协调的纯色占位块（尺寸与图标相同），或显示简洁的文字 alt，确保缺省状态下界面依旧整洁、不失美观。
- Slogan：允许居中营造仪式感，但列表和长文必须左对齐。
- 分割线：允许使用，但必须极浅（接近背景色）。

## 五、绝对红线
- 深色模式 / 暗黑背景
- 渐变色或霓虹色
- 毛玻璃效果（backdrop-filter）
- 厚重阴影（blur 超过 20rpx）
- 大圆角（超过 16rpx）
- 彩色图标或装饰插图
- 使用位图（PNG/JPG）作为图标

## 六、代码约束
- 单位：全部用 rpx（750 基准）
- 标签：用 view / text，不用 div / span
- 按钮 hover 效果：仅改变透明度
- 页面配置：navigationBarBackgroundColor 和背景色保持一致

- **图标实现（二选一，必须用 SVG）**：
  A. **调用图标库**：优先使用 Lucide、Heroicons 或 Feather Icons 等开源库，通过 CDN 或 npm 引入，选择单色线性图标，用 `color` 或 `stroke` 控制颜色。
  B. **自绘 SVG**：如果图标库中没有合适的图标（如品牌定制符号），或图标过于简单（如箭头、关闭、加号），直接在代码中手写 SVG 标签，使用 `fill="none"` 和 `stroke="currentColor"` 保证单色可着色。

  **通用要求**：
  - 所有图标容器必须设置明确的 `width` 和 `height`（单位 rpx）。
  - 必须添加备选占位背景色（`background-color` 与页面背景协调），防止加载失败时出现空白或破碎图。
  - 可配合 `alt` 属性（或小程序 `aria-label`）提供文字描述。

## 七、自查标准（生成后验证）
- 如果把颜色去掉只看布局，它看起来像"一本杂志的内页"还是"一个 Excel 表格"？如果是后者，重写。
- 检查所有图标位置：加载失败时是否出现了难看的破碎图或空白？缺省占位是否与整体色调一致？不通过则重写。
- 检查图标是否全部为 SVG（无 PNG/JPG 引用）？是否单色可着色？不通过则重写。
  1. 首先需要登录 Zion 账户以获取你的账户控制权限，登录成功后等待 Coding Agent 自行完成前端、Zion 可视化后端的搭建

Coding Agent 中完成 Zion 认证

登录成功后 MCP 服务器认证通过

在微信开发者工具内预览小程序

  1. 前往「微信开发者工具」，点击导入按钮

微信开发者工具中点击导入

  1. 选择开发微信小程序的项目文件夹，选择你注册的微信小程序 APPID、选择「不使用云服务」

部署、发布你的微信小程序

  • 前端：通过微信开发者工具一键上传到微信官方服务器内，通过微信公众平台 提交审核并发布

小程序版本管理与发布

  • 后端：通过 Zion 无代码平台一站式托管配置，一键发布

Zion 平台可视化的后端数据表结构

Zion 是什么？

Zion 是一款不用写代码也可以开发出微信小程序、WEB、AI Agent 的全栈无代码开发工具。

  1. Zion 拥有全栈无代码开发的能力，你可以在 Zion 上通过可视化的配置完成一个包含前后端的完整项目。
  2. 作为一个高自由度的开发工具，Zion 的服务端接口也拥有标准的规范（包括不限于用户鉴权、支付服务、AI Agent 服务、对象存储服务、数据库服务），结合用户在 Zion 上的自定义配置（数据库配置、AI Agent 配置、支付配置）以及各项服务的规范，无需在 Zion 上搭建前端页面即可让 Cursor 结合 Zion 的后端开发一个可商用的完整软件产品！

Zion 后端可视化配置能力介绍

以下服务仅为 Zion 能力的一部分，如果你想体验 Zion 的无代码开发能力，可以前往 Zion 帮助文档  或 Zion B站视频讲解  进一步了解。

Zion AI 智能体搭建器

Zion 内置 AI 能力，开发者可创建高度定制化的 Agent，灵活定义 Prompt、RAG、工具调用等，结合 Zion 的前端编排与后端数据处理，快速搭建商业级 AI 应用。

Zion 支付服务

Zion 集成了微信小程序支付、微信 H5 支付、支付宝电脑网站支付三类支付服务。

  1. 帮助文档入口：Zion 支付配置全解：微信支付与支付宝接入与优化指南 | Zion 帮助中心 
  2. Zion 支付宝支付服务在本次方案中的调用流程
  3. 通过 Cursor 调用 Zion 支付服务的优势：
    • 可视化配置支付回调逻辑
    • 无需进行繁琐的加签、验签流程

Zion 权限管理

权限系统是商业化软件的核心基础设施，通过精细化权限控制，有效防止数据泄露和未授权访问，保障系统和数据的完整性与安全性。Zion 提供基于角色（RBAC）和属性（ABAC）的权限管理体系，支持灵活、细粒度的权限配置。

  1. 帮助文档入口：权限管理系统 | Zion 帮助中心 
  2. 通过 Zion 实现权限管理的优势：
    • 可视化的配置 RBAC + ABAC

Zion 算力升级服务

Zion 在不同的版本项目之间存在 RPS 的不同限制，你可以在以下三个帮助文档中查看 Zion 平台不同版本项目的资源赠送额度和服务器算力升级指引，当你在 Zion 的后端服务遇到高并发请求场景，可通过 Zion 平台的算力升级服务完成当前项目后端所在服务器的资源配置升级。

  1. 升级项目和算力购买 | Zion 帮助中心 
  2. 付费版本服务器升级与迁移指南 | Zion 帮助中心 
  3. RPS（每秒请求数）详解 | Zion 部署与运维 | Zion 帮助中心 

最佳实践

我的 ICON 素材如何上传？

  1. 在 Zion 中创建「媒体资源表」or 你自己命名
  2. 创建 type / tag 字段、图片字段
  3. 在 Zion 数据库上传你的 icon 名称以及图片
  4. 告诉 Cursor 你 xx 地方的按钮图片用的是这个表里的 tag = xx 的图片

懒人必备：如果你不想自己找各种按钮、icon 图片，你可以让 cursor 设计一些符合主题风格的 svg 图片并上传到你的媒体资源表并引用。

如何排查微信小程序错误？

  1. 在微信开发者工具内，找到调试器 - Console，如果 Cursor 写出了一些前端的 Bug，会在此处有一些红色的 Error 信息（黄色警告可暂时忽略），复制你遇到的红色报错信息，粘贴给 Cursor 修复。

微信开发者工具调试控制台

如何接入微信支付？

  1. 首先在「微信商户平台」，完成商户注册，获取商户号、API V2 密钥、证书
  2. 创建「订单表」（必须）
  3. 前往 Zion 项目内-小程序编辑模式-设置-支付设置-激活微信支付-关联订单表（必须）
  4. 前往 Zion 项目内-行为流配置-微信支付/退款回调-完成可视化回调配置
  5. 前往 Cursor 告诉 Cursor 你在 Zion 平台上的微信支付已经配置完毕，在小程序端接入

工具安装入口指引

Workbuddy 接入指南

Workbuddy 中添加市场并填入 Git 地址

在推荐 SkillHub 套件中找到 zion-nocode

在技能管理中完成接入

Codex 接入指南

添加：在聊天框内输入：安装 Zion Plugin，Git 地址是：https://github.com/functorz-tech/zion-nocode-plugin 

更新：在聊天框输入：更新 Zion Plugin 到最新版本，Git 地址是：https://github.com/functorz-tech/zion-nocode-plugin 

Cursor 接入指南

左下角小齿轮 Settings - Plugin - 粘贴 Plugin 地址 - 点击查询到的 Zion Plugin - Add to Cursor

Cursor 中找到 Settings 入口

在 Plugins 中粘贴套件地址

点击 Add to Cursor 完成安装

Last updated on
Vibe Coding 搭建网站开发代码组件