112 lines
2.8 KiB
Markdown
112 lines
2.8 KiB
Markdown
# 中老年人陪伴咨询小程序
|
||
|
||
基于 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 版本
|
||
- 保持视觉和功能一致性
|