【持续更新中...】【全流程】使用React的Taro和Cloudflare Workers免费创建部署微信小程序！

WARNING

引言

Cloudflare人称"赛博活佛", 其中的workers更是能够作为代码初学者的一个练手工具, 其免费功能便足以支撑一个微小型的程序运行.
本篇文章旨在给大家分享: 使用Taro(React框架)和Cloudflare workers 来完成一个微信小程序.
预计文章会很长, 持续更新中…

一. 前提条件

这里先贴一下各个官网链接, 后续看情况给出详细步骤.

1. 安装node

这个是必须的, 当然, 推荐也安装上nvm, 这样切换版本更方便.

2. nvm(推荐)

node的版本管理工具, 推荐安装.

3. 安装Taro

前端框架, 你也可以选择使用Vue, 或者直接在微信开发者工具中编写代码.

4. 安装vscode(推荐)

代码编辑器, 主要用来写后端代码.

5. 安装微信开发者工具

用来展示程序界面、发布微信小程序的必需工具.

6. Cloudflare注册并开启存储和数据库功能

一切的根源, 因为有它, 笔者才打算写此篇文章.

7. 注册一个域名(推荐spaceship)并在Cloudflare解析

推荐6-9位数纯数字的xyz域名,每年不到10块钱的价格,非常香的域名了.(毕竟咱们只用在后端, 页面展示选择的是微信小程序)

8. 任意AI工具

编写代码的时候将会用到, 你可以根据自身情况选择chatgpt、豆包之类的.

二. 有话要问

• 为什么选择Taro?

因为我个人觉得React比Vue更好. 当然, 你也可以去选择使用Vue之类的代码, 甚至你还可以直接使用微信开发者工具来直接写!

• 为什么开发微信小程序?

有比较重要的一点, 就是免费版的Cloudflare D1数据库每天支持的读次数仅仅才500万, UV稍微高一点就会超出限制, 但是对于一个微小型程序来说足够日常使用了.

当然, 由于咱们的域名是纯数字的, 并且不方便将域名公开给大众, 所以就选择了微信小程序, 如果你有网站需求, taro框架也可以直接编译成网站, 只需要自己打包一下就行了.

• 更多问题整理中…

三. 需求分析

项目背景

随着情侣、伴侣之间的日常开销增多，许多人希望能更方便地记录、共享和统计两人共同的花费情况。传统的记账应用多为个人使用，不支持双人协作或互动。本项目旨在打造一款专为情侣设计的双人共享记账小程序，帮助双方轻松记录、查看和管理共同开销，提升沟通与财务透明度。

目标用户

• 恋爱中或已结婚的情侣；

• 需要共同管理支出的室友、朋友；

• 想要建立“共享记账习惯”的小群体（2人为主）。

核心需求

• 用户账户与绑定

• • 支持微信登录；
• • 用户可以通过邀请码/二维码绑定另一半；
• • 绑定后自动形成一个“共同账本”；
• • 支持解绑、更换搭档等操作。

• 记账功能

• • 支持快速添加账单（金额、分类、日期、备注）；
• • 支持选择「谁支付」「谁消费」；
• • 可设为「共同支出」或「个人支出」；
• • 支持图片上传（如小票）。

• 数据统计与可视化

• • 查看当月支出总额；
• • 自动计算双方“结余”与“平摊”金额；
• • 支持分类统计（餐饮、出行、礼物、房租等）；
• • 图表展示（饼图、折线图）。

• 情侣特色功能

• • 每月结算提醒；
• • 「甜蜜语」模式（添加账单时可附加一句小情话或表情）；
• • 纪念日账单或特殊标签（如“恋爱100天晚餐”）；
• • 支持自定义封面与情侣头像。

• 安全与隐私

• • 数据仅双方可见；
• • 重要操作（解绑、删除账本）需双方确认；
• • 云端存储数据，防止误删丢失。

非功能性需求

• 简洁美观：界面风格清新、情侣主题；

• 操作流畅：记账操作≤3步；

• 跨设备同步：双方实时同步账单；

• 隐私保护：不公开、不社交化。

后续规划（可选）

• 添加「情侣预算」功能；

• 月度结算报告自动生成；

• 多人模式扩展（家庭账本）；

• AI智能账单分析与建议。

项目目标

打造一款：

• 轻量级、操作简单；

• 聚焦情侣场景；

• 兼具情感互动与实用功能的微信小程序。

四.产品分析

用户流程图（简易）

首次使用 → 微信授权登录 → 创建/加入情侣账本 → 记账/查看记录 → 统计分析 → 月结算提醒

功能模块

• 用户模块

• 记账模块

分类示例： 餐饮、交通、娱乐、购物、日用品、房租、礼物、其他（支持自定义）。

• 账单模块

• 统计模块

• 情侣模块

• 系统模块

页面设计（初版）

首页（账本概览）
├── 当月总支出
├── 双方支出比例图
├── 快速记账按钮
└── 最近账单预览

账单页
├── 添加账单（表单）
├── 图片上传
├── 甜蜜语选择

统计页
├── 分类统计饼图
├── 趋势折线图
├── 平摊计算结果

情侣页（个人中心）
├── 我的信息
├── 绑定状态
├── 纪念日设置
├── 解绑操作
├── 设置（主题风格）

数据结构（示例）

• 用户表Users

• 账本表 couples

• 账单表 records

技术方案（建议）

五.UI原型结构描述

Figma 结构稿文字描述版

🌈总体风格方向

• 主题：温馨简约风（粉色/奶白/淡蓝为主色调）

• 设计语言：极简卡片式布局 + 轻圆角（12–16px）

• 图标风格：线性图标（lucide 或 iconfont）

• 主要字体：苹方 / HarmonyOS Sans

• 交互感受：柔和动效、轻点击反馈

🏠首页（账本总览页）

页面名称：首页 / 我的账本

路径：/pages/home/index

主要结构

[顶部栏]
- 左：情侣头像圆环（两人头像并列）
- 中：账本名称（例如：“我们的账本❤️”）
- 右：设置图标（⚙️）

[数据概览卡片]
- 当月总支出（￥xxxx.xx）
- A 支出 / B 支出 / 平摊差额
- 小饼图（展示比例）

[快捷操作区]
- + 新建账单（主按钮，粉色）
- 本月趋势图（折线图卡片）
- 最近3条账单列表（卡片式展示）
  - 图标（类别）+ 金额 + 备注 + 日期
  - 点击进入账单详情

动效建议

• 新建账单按钮采用悬浮+阴影；

• 列表滑动时轻微弹性。

💰记账页（添加账单）

页面名称：添加账单

路径： /pages/add/index

主要结构

[顶部]
- 返回 ←
- 标题：添加账单

[输入区（卡片样式）]
- 金额输入框（大字号）
- 分类选择（icon + 名称）
- 谁支付（A / B 头像单选按钮）
- 消费类型（共同支出 / 个人支出）
- 备注输入框
- 图片上传（最多3张）
- 日期选择（默认当天）

[甜蜜语区]
- 文本框：“今天也要开心花钱呀~”
- ❤️ 表情可选 3–5 个模板（点击随机切换）

[底部按钮]
- 保存账单（粉色主按钮）

交互说明

• 金额输入完成后自动聚焦到分类；

• 上传图片采用微信原生选择；

• 提交成功后显示动画：“记好了~ ❤️”。

📋账单列表页

页面名称：账单记录

路径： /pages/records/index

主要结构

[顶部筛选栏]
- 时间选择（本月 ▼）
- 分类筛选（全部 ▼）
- 支付者筛选（全部 ▼）

[账单分组列表]
- 每月或每日分组标题（如 “10月15日”）
- 账单卡片：
  [图标] [分类] [金额右对齐]
   小字：备注 + 谁支付
- 点击进入账单详情页
- 长按：弹出编辑/删除选项

辅助功能

• 搜索框：输入备注关键字；

• 上拉加载更多账单；

• 空状态：可爱插画“还没有账单哦~”。

📈统计页

页面名称：统计分析

路径： /pages/statistics/index

模块结构

[顶部月份选择]
- 左右箭头切换月份（< 10月 >）

[图表区]
- 饼图：分类支出比例
- 折线图：支出趋势

[明细卡片]
- 总支出：￥xxxx.xx
- A 支出：￥xxx.xx
- B 支出：￥xxx.xx
- 平摊后差额提示

[结算提醒按钮]
- “生成月度结算报告” → 弹窗显示差额 + 分享图（可选）

💞情侣中心页

页面名称：情侣中心 / 我的

路径： /pages/profile/index

页面结构

[顶部]
- 双人头像展示（圆形并列）
- 昵称与绑定状态（“与 某某 已绑定”）

[信息卡片]
- 纪念日：恋爱100天 💕
- 上次结算日期：10月1日
- 当前账本ID：#ABC123
- 邀请码 / 扫码绑定（若未绑定）

[功能区]
- 编辑纪念日
- 更换主题（粉色 / 极简灰）
- 导出数据（JSON）
- 解绑（红字，需双重确认）

[页脚]
- “我们的小账本，让爱更有秩序 ❤️”

⚙️系统与弹窗交互

🎨配色建议

🧩交互动效建议

• 按钮点击轻缩放 0.95 → 1.0；

• 图表加载渐入；

• 新建账单后出现小心形粒子动效；

• 页面切换使用滑入动画；

• 解绑操作加入倒计时确认。

🪄Figma 结构层级

Page: 首页
  ├── Header
  ├── OverviewCard
  ├── QuickActions
  └── RecentRecords

Page: 添加账单
  ├── InputForm
  ├── SweetNoteSection
  └── SubmitButton

Page: 账单记录
  ├── FilterBar
  ├── RecordList
  └── EmptyState

Page: 统计分析
  ├── ChartContainer
  ├── SummaryCards
  └── ReportButton

Page: 情侣中心
  ├── ProfileHeader
  ├── InfoCards
  └── SettingOptions

Figma文本形式

# Figma Structure: 情侣双人记账小程序

## Page: 首页（账本总览）
Frame: Home
  Header
    - Left: [AvatarGroup] 情侣头像（双人并列）
    - Title: “我们的账本 ❤️”
    - Right: [IconButton] ⚙️ 设置
  OverviewCard
    - Label: “本月支出总额”
    - Value: ￥1,234.56
    - SubInfo: “你：￥600 | TA：￥634 | 平摊差：-￥34”
    - Chart: [PieChart] 支出比例
  QuickActions
    - ButtonPrimary: “+ 新建账单”
  TrendCard
    - Title: “支出趋势”
    - Chart: [LineChart]
  RecentList
    - Title: “最近账单”
    - RecordItem x3
      - Icon (分类)
      - Text: “咖啡 - ￥28.00”
      - SubText: “你支付 · 10月12日”
  FloatingButton: “+ 记账”

---

## Page: 添加账单
Frame: AddRecord
  Header
    - BackButton ←
    - Title: “添加账单”
  InputForm
    - AmountInput: “输入金额（大号字体）”
    - CategoryPicker: “选择分类 → 餐饮 / 出行 / 礼物 / 其他”
    - PayerSelect: “谁支付 → [头像A] [头像B]”
    - TypeSelect: “共同支出 / 个人支出”
    - RemarkInput: “备注（可选）”
    - ImageUpload: “添加图片（+）”
    - DatePicker: “选择日期（默认今日）”
  SweetNoteSection
    - Title: “甜蜜语 ❤️”
    - TextField: “今天也要开心花钱呀~”
    - IconSet: ❤️ 😘 🌸 🍰 💌
  SubmitArea
    - ButtonPrimary: “保存账单”
    - SuccessAnimation: “心形粒子动画”

---

## Page: 账单记录
Frame: Records
  Header
    - Title: “账单记录”
    - SearchBar: “搜索备注...”
  FilterBar
    - Filter1: “月份 ▼”
    - Filter2: “分类 ▼”
    - Filter3: “支付者 ▼”
  RecordList
    - Section: “10月15日”
      - RecordCard:
        - Icon: 🍜
        - Title: “晚餐”
        - Amount: ￥85.00
        - SubText: “共同支出 · 你支付”
    - Section: “10月14日”
      - RecordCard:
        - Icon: 🚌
        - Title: “地铁交通”
        - Amount: ￥6.00
        - SubText: “TA 支付”
  EmptyState
    - Illustration: “暂无账单插画”
    - Text: “还没有记录哦~”

---

## Page: 统计分析
Frame: Statistics
  Header
    - Title: “统计分析”
  MonthSwitcher
    - LeftArrow < 9月
    - Label: “10月”
    - RightArrow > 11月
  ChartSection
    - PieChart: “支出分类比例”
    - LineChart: “支出趋势变化”
  SummaryCards
    - Card1: “总支出 ￥1234.56”
    - Card2: “你支出 ￥600”
    - Card3: “TA 支出 ￥634”
    - Card4: “平摊差额 -￥34”
  ReportButton
    - Button: “生成月度结算报告”

---

## Page: 情侣中心
Frame: Profile
  Header
    - AvatarGroup: 双人头像
    - Title: “情侣中心”
    - Subtitle: “已绑定：小王 ❤️ 小李”
  InfoSection
    - Card: “纪念日：恋爱100天 💕”
    - Card: “上次结算：10月1日”
    - Card: “账本ID：#A1B2C3”
  FunctionList
    - Item: “编辑纪念日”
    - Item: “更换主题（粉色 / 极简灰）”
    - Item: “导出数据 JSON”
    - ItemDanger: “解绑情侣（需双方确认）”
  Footer
    - Text: “让爱与账本都更有秩序 ❤️”

---

## Common Components
Component: ButtonPrimary（主按钮）
Component: IconButton（图标按钮）
Component: PieChart
Component: LineChart
Component: RecordCard
Component: EmptyState
Component: AvatarGroup
Component: FilterBar
Component: SweetNoteSection

📘导入说明：

• 如果你会使用figma，那么只需要导入以上文本，即可生成页面

• 如果你在国内，并且没用过figma，那么可以用AI将上述文本转成自然语言，然后通过墨刀设计、mastergo等国内设计平台的AI功能来自动生成页面.

输出效果图（可参考）

这是我生成的图：

六.小程序页面开发

新建并初始化项目

在你的文件夹下打开CMD, 然后输入taro init couple-ledger

项目介绍、框架之类的可以参考我的选择：

防止图片失效，这里给出文字版：

? 请输入项目介绍                         情侣账本微信小程序
? 请选择框架                             React
? 是否需要使用 TypeScript ？              Yes
? 是否需要编译为 ES5 ？                   No
? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass
? 请选择包管理工具                        npm
? 请选择编译工具                          Webpack5
? 请选择模板源                            Gitee（最快）
✔ 拉取远程模板仓库成功！
? 请选择模板                              默认模板

最后,cd couple-ledger进入项目目录,输入npm install即初始化完毕.

引入tailwindcss、antd-f2

在项目目录下, cmd中输入npm install -D tailwindcss@3.4.17 postcss autoprefixer

附录

参考

• Cloudflare 官网 |“赛博活佛”地址

• AntV-F2 文档 | 适配移动端的图表方案

• 手摸手教你用 Taro + React 封装一个antv-f2 | 稀土掘金