Skip to Content
帮助文档AI 搭建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 是一个全栈 vibe no-coding 平台，不用写代码也可以开发出微信小程序、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 搭建网站UI 搭建