# 中老年人陪伴咨询小程序

基于 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 版本
- 保持视觉和功能一致性