一款相亲的微信小程序

用户37747 · 2026 年4 月 27 日 06:20

农村相亲小程序 - 产品需求文档（PRD）

1. 项目概述

1.1 项目背景

针对农村及乡镇地区婚恋交友需求，开发一款基于微信小程序的相亲交友平台。考虑到农村地区用户特点，支持家长代子女发布相亲信息，并提供完善的隐私保护机制。

1.2 产品定位

目标用户：农村及乡镇地区的单身青年及其家长
核心场景：相亲信息发布、条件筛选匹配、安全沟通交流
产品特色：家长代发布、亲密度隐私保护、爱情树互动养成

1.3 技术架构

开发框架：微信小程序原生框架
UI 组件库：Vant Weapp v1.11.7
数据存储：微信小程序本地 Storage
地图服务：腾讯地图 API（可选）

2. 功能模块

2.1 底部导航（TabBar）

| Tab 名称 | 图标 | 功能说明 |

|---------|------|---------|

| 相亲广场 | wap-home-o / wap-home | 浏览相亲信息列表 |

| 聊天室 | chat-o / chat | 查看聊天会话列表 |

| 朋友圈 | friends-o / friends | 浏览好友动态 |

| 我的 | user-o / user | 个人中心 |

交互要求：

使用自定义 TabBar，图标使用 Vant 图标库
当前页面高亮显示，切换时同步更新高亮状态
点击切换页面时使用 wx.switchTab

2.2 相亲广场模块

2.2.1 信息列表展示

展示相亲信息卡片列表
支持分页加载（每页 10 条）
支持下拉刷新、上拉加载更多
卡片展示内容：头像、姓名、性别标签、年龄、所在地区、身高、学历、职业、月收入、住房、车辆、自我介绍、择偶要求

2.2.2 搜索功能

顶部搜索栏，支持按姓名、职业、地区搜索
实时搜索或点击搜索按钮触发

2.2.3 筛选功能（侧边栏弹窗）

点击"筛选条件"按钮，从右侧滑出筛选面板：

| 筛选维度 | 选项内容 |

|---------|---------|

| 性别 | 不限、男、女 |

| 年龄范围 | 最小年龄 ~ 最大年龄（数字输入） |

| 职业 | 不限、教师、医生/护士、公务员、工程师、司机、个体经营、务农、其他 |

| 月收入 | 不限、3000以下、3000-5000、5000-8000、8000-12000、12000以上 |

| 住房情况 | 不限、已购房、与父母同住、租房 |

| 车辆情况 | 不限、已购车、无车 |

| 婚姻状况 | 不限、未婚、离异、丧偶 |

| 所在地区 | 省-市-区/县三级联动选择（Vant Area 组件） |

交互要求：

筛选面板宽度占屏幕 80%
选项使用标签式按钮，选中高亮显示
底部固定"重置"和"确定"按钮
确定后关闭面板并刷新列表
重置清空所有筛选条件

2.2.4 定位功能

页面加载时自动获取用户当前位置
将当前城市填充到筛选条件中
定位失败默认使用"郑州市"
使用 wx.getLocation + 腾讯地图逆地址解析

2.2.5 发布入口

顶部"发布相亲"按钮
点击进入发布页面

2.3 发布相亲信息模块

2.3.1 表单字段

| 字段 | 类型 | 必填 | 说明 |

|-----|------|------|------|

| 姓名 | 文本 | 是 | - |

| 昵称 | 文本 | 否 | - |

| 性别 | 单选 | 是 | 男/女 |

| 年龄 | 数字 | 是 | - |

| 身高 | 数字 | 否 | 单位 cm |

| 体重 | 数字 | 否 | 单位 kg |

| 学历 | 选择器 | 否 | 高中、大专、本科、硕士、博士 |

| 职业 | 文本 | 是 | - |

| 月收入 | 选择器 | 否 | 2000以下 ~ 20000以上 |

| 住房情况 | 选择器 | 否 | 与父母同住、已购房、租房、单位宿舍 |

| 车辆情况 | 选择器 | 否 | 无、已购车、打算购车 |

| 婚姻状况 | 选择器 | 否 | 未婚、离异、丧偶 |

| 微信号 | 文本 | 否 | - |

| 手机号 | 文本 | 否 | - |

| 爱好 | 文本 | 否 | - |

| 照片 | 图片上传 | 否 | 最多 9 张 |

| 视频 | 视频上传 | 否 | 最多 1 个 |

| 自我介绍 | 多行文本 | 否 | - |

| 择偶要求 | 多行文本 | 否 | - |

2.3.2 地区选择

使用 Vant Area 组件
默认定位当前位置，失败使用"郑州市"
支持手动修改

2.3.3 发布成功

弹出成功提示
1.5 秒后自动返回相亲广场

2.4 相亲详情模块

2.4.1 信息展示

顶部：头像、姓名、性别、年龄、发布者关系
基本信息：昵称、年龄、身高、体重、学历、婚姻状况、爱好
家庭条件：月收入、住房、车辆
照片墙（可预览）
视频播放
自我介绍
择偶要求

2.4.2 隐私保护机制

敏感信息默认隐藏，满足以下条件之一才可查看：

亲密度 >= 50%
聊天天数 >= 14 天
已成为好友

敏感信息包括：微信号、手机号、照片、视频

2.4.3 操作按钮

收藏/取消收藏：底部左侧按钮
发起聊天：底部右侧按钮，点击进入聊天室
分享：支持分享给微信好友

2.5 聊天室模块

2.5.1 会话列表

展示所有聊天会话
显示：头像、姓名、最后一条消息、时间、未读数
显示亲密度和好友状态
支持左滑删除会话
点击进入单聊页面

2.5.2 单聊页面

消息展示：

左右气泡式对话布局
自己发送的消息在右侧（红色气泡）
对方发送的消息在左侧（白色气泡）
显示发送时间
文字支持长按选中

输入区域：

语音/文字切换按钮
文字输入框（textarea，支持多行）
表情按钮（展开表情面板）
更多按钮（+，展开功能面板）
发送按钮（有内容时显示）

功能面板：

| 功能 | 说明 |

|-----|------|

| 图片 | 从相册选择发送 |

| 拍照 | 调用相机拍照发送 |

| 视频通话 | 发起视频通话（需好友权限） |

| 语音通话 | 发起语音通话（需好友权限） |

表情面板：

展示常用 Emoji 表情
点击插入到输入框

语音输入：

按住说话，松开发送
显示录音状态提示

2.5.3 亲密度系统

每次发送消息增加 2% 亲密度
亲密度上限 100%
亲密度 >= 50% 或聊天 >= 14 天自动成为好友
成为好友时弹出提示

2.5.4 好友权限控制

非好友状态下：

视频通话按钮禁用，点击提示"亲密度达到50%或聊天2周后可使用"
语音通话按钮禁用，同上
无法查看对方敏感信息

2.5.5 自动回复

发送消息后，对方 2 秒后自动回复
回复内容从预设语料库随机选择

2.6 朋友圈模块

2.6.1 动态列表

展示所有好友的动态
支持下拉刷新、上拉加载
每条动态展示：头像、昵称、内容、图片、位置、时间、点赞数、评论数

2.6.2 互动功能

点赞/取消点赞：点击点赞按钮
图片预览：点击图片查看大图
进入个人主页：点击头像或昵称

2.6.3 发布动态

点击顶部"发布"按钮进入发布页面
支持发布文字内容
支持上传多张图片（最多 9 张）
自动定位当前位置（省市区）
支持手动修改位置（省-市-区选择器）
发布成功后返回朋友圈列表

2.7 我的模块

2.7.1 用户信息

微信登录（getUserProfile）
展示头像、昵称
未登录显示默认头像和"点击登录"

2.7.2 数据统计

收藏数
好友数
爱情树伴侣（如有）

2.7.3 功能菜单

| 功能 | 说明 |

|-----|------|

| 我的收藏 | 查看收藏的相亲对象 |

| 爱情树 | 进入爱情树互动页面 |

| 发布相亲 | 跳转发布相亲信息页面 |

| 设置 | 应用设置（预留） |

2.8 爱情树模块

2.8.1 树木展示

展示当前树木等级和名称
显示成长进度条（0-100%）
展示伴侣信息

2.8.2 互动操作

| 操作 | 效果 | 冷却时间 |

|-----|------|---------|

| 浇水 | 成长值 +5 | 5 分钟 |

| 捉虫 | 成长值 +10 | 10 分钟 |

| 施肥 | 成长值 +15 | 30 分钟 |

2.8.3 操作日志

记录最近的操作历史
显示操作时间、类型、操作人

2.8.4 升级规则

成长值达到 100% 后升级
升级后树木名称和外观变化

2.9 收藏模块

展示收藏的相亲对象列表
卡片式布局，展示基本信息
支持取消收藏
点击进入详情页

3. 数据模型

3.1 相亲信息（blindDateItem）


{

id: Number,

name: String,

nickname: String,

gender: String,

age: Number,

height: Number,

weight: Number,

education: String,

occupation: String,

city: String,

district: String,

hometown: String,

salary: String,

house: String,

car: String,

maritalStatus: String,

wechat: String,

phone: String,

hobbies: String,

avatar: String,

photos: Array,

video: String,

requirements: String,

selfIntro: String,

publishTime: String,

publisher: String,

publisherRelation: String,

intimacy: Number,

chatDays: Number,

isFriend: Boolean,

isFavorite: Boolean

}

3.2 聊天会话（chatItem）


{

id: Number,

userId: Number,

name: String,

avatar: String,

lastMessage: String,

lastTime: String,

unread: Number,

intimacy: Number,

chatDays: Number,

isFriend: Boolean

}

3.3 朋友圈动态（momentItem）


{

id: Number,

userId: Number,

name: String,

avatar: String,

content: String,

images: Array,

location: String,

time: String,

likes: Number,

comments: Number,

isLiked: Boolean

}

3.4 爱情树（treeData）


{

level: Number,

name: String,

growth: Number,

waterCount: Number,

bugCount: Number,

days: Number,

partner: Object,

logs: Array

}

4. 本地存储方案

| Key | 数据类型 | 说明 |

|-----|---------|------|

| blindDateList | Array | 相亲信息列表 |

| chatList | Array | 聊天会话列表 |

| chatRecords | Object | 聊天记录（key: userId） |

| momentsList | Array | 朋友圈动态列表 |

| treeData | Object | 爱情树数据 |

| userInfo | Object | 当前用户信息 |

5. UI 设计规范

5.1 色彩体系

主色：#ff6b6b（珊瑚红）
辅助色：#1989fa（蓝色，男性标签）
背景色：#f5f5f5（浅灰）
文字色：#333（主文字）、#666（次要文字）、#999（辅助文字）

5.2 字体规范

大标题：40rpx，bold
页面标题：36rpx，bold
卡片标题：32rpx，bold
正文：30rpx
辅助文字：26rpx
时间/标签：24rpx

5.3 间距规范

页面边距：20rpx
卡片内边距：20rpx
元素间距：16rpx
圆角：8rpx（小）、16rpx（中）、32rpx（大）

6. 交互规范

6.1 页面跳转

Tab 页面使用 wx.switchTab
普通页面使用 wx.navigateTo
返回使用 wx.navigateBack

6.2 加载状态

列表加载显示 “加载中…”
无更多数据显示 “没有更多数据了”
空列表显示 Empty 组件

6.3 操作反馈

成功操作显示 Toast 提示
错误操作显示错误提示
重要操作使用 Modal 确认

6.4 表单验证

必填项未填写时提示
手机号格式校验
年龄范围合理性校验

7. 隐私与安全

7.1 敏感信息保护

联系方式（微信、手机号）默认隐藏
照片/视频默认隐藏
亲密度达标后自动解锁

7.2 权限控制

非好友不能发起音视频通话
非好友不能查看完整联系方式

7.3 数据安全

所有数据存储在本地，不上传服务器
用户授权获取基本信息

8. 待优化项

后端服务：当前使用本地存储，后续可接入后端服务实现真实数据持久化
实时通讯：当前使用模拟回复，后续可接入 WebSocket 实现真实即时通讯
地图服务：需要申请腾讯地图 API Key 实现精确定位
图片存储：当前使用本地路径，后续可接入云存储
用户认证：完善登录注册流程，支持手机号登录
消息推送：接入微信小程序订阅消息，实现新消息提醒

9. 附录

9.1 Vant 组件清单

van-button、van-cell、van-cell-group、van-field、van-icon、van-tag、van-popup、van-search、van-loading、van-empty、van-divider、van-radio、van-radio-group、van-picker、van-area、van-uploader、van-tabbar、van-tabbar-item、van-nav-bar、van-image、van-grid、van-grid-item、van-action-sheet、van-dialog、van-toast