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

引言

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

一. 前提条件

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

安装node

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

nvm(推荐)

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

安装Taro

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

安装vscode(推荐)

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

安装微信开发者工具

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

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

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

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

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

任意AI工具

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

二. 有话要问

为什么选择Taro?

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

为什么开发微信小程序?

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

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

更多问题整理中…

三. 需求分析

项目背景

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

目标用户

恋爱中或已结婚的情侣；
需要共同管理支出的室友、朋友；
想要建立“共享记账习惯”的小群体（2人为主）。

核心需求

用户账户与绑定
- 支持微信登录；
- 用户可以通过邀请码/二维码绑定另一半；
- 绑定后自动形成一个“共同账本”；
- 支持解绑、更换搭档等操作。
记账功能
- 支持快速添加账单（金额、分类、日期、备注）；
- 支持选择「谁支付」「谁消费」；
- 可设为「共同支出」或「个人支出」；
- 支持图片上传（如小票）。
数据统计与可视化
- 查看当月支出总额；
- 自动计算双方“结余”与“平摊”金额；
- 支持分类统计（餐饮、出行、礼物、房租等）；
- 图表展示（饼图、折线图）。
情侣特色功能
- 每月结算提醒；
- 「甜蜜语」模式（添加账单时可附加一句小情话或表情）；
- 纪念日账单或特殊标签（如“恋爱100天晚餐”）；
- 支持自定义封面与情侣头像。
安全与隐私
- 数据仅双方可见；
- 重要操作（解绑、删除账本）需双方确认；
- 云端存储数据，防止误删丢失。

非功能性需求

简洁美观：界面风格清新、情侣主题；
操作流畅：记账操作≤3步；
跨设备同步：双方实时同步账单；
隐私保护：不公开、不社交化。

后续规划（可选）

添加「情侣预算」功能；
月度结算报告自动生成；
多人模式扩展（家庭账本）；
AI智能账单分析与建议。

项目目标

打造一款：

轻量级、操作简单；
聚焦情侣场景；
兼具情感互动与实用功能的微信小程序。

四.产品分析

用户流程图（简易）

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

功能模块

用户模块

功能	描述	备注
微信登录	通过 openid 获取用户身份	必需
创建账本	单方创建后生成邀请码/二维码	账本ID自动生成
加入账本	输入邀请码或扫码加入	限制一对一
解绑功能	双方同意后解绑	防误操作
用户信息	用户昵称、头像	从微信获取

记账模块

功能	描述	备注
添加账单	金额、分类、支付者、消费方、备注、时间	支持快速输入
账单类型	共同支出 / 个人支出	默认共同支出
图片上传	上传消费凭证或照片	微信云存储
编辑/删除账单	支持修改与删除	权限控制：任意一方均可
情感元素	可添加“甜蜜语”或表情	可选功能

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

账单模块

功能	描述	备注
列表展示	按日期分组展示账单	支持上拉加载
筛选功能	按分类、月份、支付者筛选	可选多条件
搜索功能	按备注关键字搜索	模糊匹配
账单详情	显示账单所有字段 + 图片	支持编辑

统计模块

功能	描述	备注
支出汇总	本月/自定义时间区间总支出	自动更新
平摊计算	计算双方结余与应补差额	共同支出时按 1:1 分摊
分类统计	饼图显示各类支出比例	图表组件
时间趋势	折线图展示支出变化	支持月份切换
每月结算	一键生成结算报告	可导出/分享

情侣模块

功能	描述	备注
甜蜜语记账	每笔账单可添加一句“甜言蜜语”	自带模板
纪念日提醒	自动生成纪念日账单	支持自定义日期
封面主题	不同配色（粉色系、极简系）	按情侣风格选
情侣头像	双人圆环头像显示	从绑定信息中取

系统模块

功能	描述	备注
数据加密	云端存储加密	使用微信云开发数据库
权限控制	仅绑定双方可见数据	不可分享账本
数据备份	自动每日备份	可手动导出JSON
推送提醒	账单添加、月结算提醒	微信模板消息

页面设计（初版）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


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

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

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

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

数据结构（示例）

用户表Users

字段	类型	说明
userId	string	用户ID（openid）
nickname	string	昵称
avatarUrl	string	头像
coupleId	string	绑定账本ID
joinDate	date	加入时间

账本表 couples

字段	类型	说明
coupleId	string	账本唯一ID
userA	string	用户A ID
userB	string	用户B ID
createTime	date	创建时间
status	string	active / unbind

账单表 records

字段	类型	说明
recordId	string	账单ID
coupleId	string	所属账本ID
payer	string	支付者ID
consumer	string	消费方ID
type	string	共同/个人
category	string	消费类别
amount	number	金额
remark	string	备注
sweetNote	string	甜蜜语
image	string	图片URL
createTime	date	创建时间

技术方案（建议）

项目	建议技术栈
前端框架	Taro + React
后端	CloudFlare Workers
数据库	CloudFlare D1 SQL数据库
图表	AntV F2
文件存储	CloudFlare R2 对象存储
登录	微信 openid 授权登录

五.UI原型结构描述

Figma 结构稿文字描述版

🌈总体风格方向

主题：温馨简约风（粉色/奶白/淡蓝为主色调）
设计语言：极简卡片式布局 + 轻圆角（12–16px）
图标风格：线性图标（lucide 或 iconfont）
主要字体：苹方 / HarmonyOS Sans
交互感受：柔和动效、轻点击反馈

🏠首页（账本总览页）

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

路径：/pages/home/index

主要结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


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

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

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

动效建议

新建账单按钮采用悬浮+阴影；
列表滑动时轻微弹性。

💰记账页（添加账单）

页面名称：添加账单

路径： /pages/add/index

主要结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

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

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

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

交互说明

金额输入完成后自动聚焦到分类；
上传图片采用微信原生选择；
提交成功后显示动画：“记好了~ ❤️”。

📋账单列表页

页面名称：账单记录

路径： /pages/records/index

主要结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


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

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

辅助功能

搜索框：输入备注关键字；
上拉加载更多账单；
空状态：可爱插画“还没有账单哦~”。

📈统计页

页面名称：统计分析

路径： /pages/statistics/index

模块结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


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

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

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

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

💞情侣中心页

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

路径： /pages/profile/index

页面结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


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

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

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

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

⚙️系统与弹窗交互

弹窗	触发场景	内容说明
绑定邀请弹窗	生成邀请码后	显示二维码 + 链接说明
解绑确认弹窗	点击解绑时	双方必须同时确认
保存成功	添加账单后	“记录成功~ ❤️”
错误提示	网络或输入异常	Toast 弹窗提醒

🎨配色建议

元素	主色	辅色	说明
主色调	#FF7DA3	#FFF1F5	甜蜜粉
文本主色	#333333		主要文字
次级文字	#999999		辅助说明
背景	#FAFAFA		通用背景
成功色	#5DD39E		保存成功动画
警示色	#FF6363		删除 / 解绑警告

🧩交互动效建议

按钮点击轻缩放 0.95 → 1.0；
图表加载渐入；
新建账单后出现小心形粒子动效；
页面切换使用滑入动画；
解绑操作加入倒计时确认。

🪄Figma 结构层级

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


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

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

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

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

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

Figma文本形式

在 Figma 中使用「Wireframe / Builder / Autoflow」类插件导入，即可快速生成页面框架。 (点击展开收缩)

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130


# 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功能来自动生成页面.

自然语言描述 (点击展开收缩)

这是一个情侣双人记账小程序的界面结构设计描述。整个应用包含五个主要页面和一些共用组件。

首页（账本总览）

这是应用的主页面，顶部有情侣的双人头像和标题“我们的账本”，以及设置按钮。页面中间显示本月总支出金额，并细分了你和TA各自的支出及平摊差额，还用一个饼图展示了支出比例。页面有醒目的“新建账单”按钮，下方提供了支出趋势折线图和最近的三条账单记录，如“咖啡-￥28.00”。页面右下角还有一个悬浮的“+”记账按钮。

添加账单页面

这个页面用于记录新账单。顶部有返回按钮和标题。主体是一个表单，需要填写金额、选择消费分类（如餐饮、出行）、选择由谁支付、确定是共同还是个人支出，还可以添加备注、图片和日期。页面还有一个特色的“甜蜜语”区域，可以输入温馨话语并选择表情。最后有“保存账单”按钮，成功后会有心形动画效果。

账单记录页面 这个页面展示所有历史账单。顶部可以搜索备注，下面有按月份、分类、支付者进行筛选的选项。账单列表按日期分组显示，每条记录都包含消费图标、名称、金额和支付详情。

统计分析页面

这个页面用图表展示消费数据。顶部可以切换月份。页面包含展示消费分类比例的饼图、显示支出变化的趋势图，以及总结总支出、双方各自支出和平摊差额的数据卡片。还可以一键生成月度结算报告。

情侣中心页面

这是管理双方账户的页面。显示情侣头像、昵称和绑定状态。主要信息区展示纪念日、上次结算日期和账本ID。功能列表包括编辑纪念日、更换应用主题、导出数据，以及需要双方确认的解绑功能。

共用组件

设计中使用了一套统一的组件库，包括主要按钮、图标按钮、饼图、折线图、账单卡片、空状态提示、双人头像组、筛选栏和甜蜜语输入区等，以保证整个应用体验的一致性。总的来说，这是一个功能清晰、注重情侣共同理财和情感互动体验的记账小程序设计。

输出效果图（可参考）

这是我生成的图：

六.小程序页面开发

新建并初始化项目

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


? 请输入项目介绍                         情侣账本微信小程序
? 请选择框架                             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 [email protected] postcss autoprefixer

附录

参考

版权信息

本文原载于彩虹兔の博客，遵循 CC BY-NC-SA 4.0 协议，复制请保留原文出处。