中老年人陪伴咨询小程序

基于 React 版本转换的微信小程序，保持样式和功能完全一致。

项目结构

miniprogram/
├── app.js                    # 小程序入口
├── app.json                  # 全局配置
├── app.wxss                  # 全局样式
├── project.config.json       # 项目配置
├── sitemap.json              # 站点地图
├── images/                   # 图标资源
│   ├── icon-*.svg            # 页面图标
│   └── tab-*.png             # TabBar 图标（需手动添加）
└── pages/
    ├── index/                # 首页 - 遇见（卡片滑动匹配）
    ├── square/               # 广场 - 社交动态
    ├── chat/                 # 消息 - 倾听师列表
    ├── chat-detail/          # 聊天详情
    └── profile/              # 我的 - 个人中心

功能说明

1. 首页（遇见）

• 好友故事横向滚动列表
• 卡片堆叠展示用户资料
• 左右滑动切换（左滑跳过，右滑喜欢）
• 喜欢、语音、选择操作按钮
• VIP 解锁弹窗

2. 广场

• 社交动态列表
• 发布动态（文字+图片）
• 点赞、评论功能
• 图片预览

3. 消息（倾听师）

• 倾听师列表展示
• 搜索和筛选功能
• 倾听师详情页
• 立即咨询功能

4. 聊天详情

• 实时聊天界面
• 文字/语音输入切换
• 表情面板
• 自动回复模拟

5. 我的

• 用户信息展示
• 青草余额和充值
• 功能菜单（喜欢、访客、礼物、订单）
• 设置和帮助

使用说明

1. 导入项目

1. 打开微信开发者工具
2. 选择「导入项目」
3. 选择 miniprogram 目录
4. 填写 AppID（可使用测试号）

2. 添加 TabBar 图标

TabBar 需要 PNG 格式图标，请参考 images/README.md 说明手动添加。

3. 编译运行

点击「编译」按钮即可预览小程序。

技术说明

样式转换

• React Tailwind CSS → 小程序 WXSS
• 使用 rpx 单位适配不同屏幕
• CSS 变量转换为具体颜色值

组件转换

• React 组件 → 小程序 Page
• useState → Page data
• useEffect → onLoad/onShow
• onClick → bindtap

动画实现

• Framer Motion → CSS Animation
• 卡片滑动使用 touch 事件 + transform

注意事项

1. 图片资源使用网络图片（Unsplash），需要在小程序后台配置域名白名单
2. TabBar 图标需要手动添加 PNG 格式文件
3. 部分功能为模拟实现（如支付、语音识别）

域名白名单配置

在小程序后台「开发」→「开发设置」→「服务器域名」中添加：

request合法域名：
- https://images.unsplash.com

downloadFile合法域名：
- https://images.unsplash.com

版本信息

• 小程序基础库：2.25.0+
• 转换自 React 版本
• 保持视觉和功能一致性