135 lines
4.8 KiB
Markdown
135 lines
4.8 KiB
Markdown
# 小程序图片视频下载和分享功能实现说明
|
||
|
||
## 🎯 功能概述
|
||
为房源详情页面添加了图片和视频下载功能以及分享功能，方便同行使用。用户可以通过点击下载按钮或长按媒体文件来保存到手机相册，也可以通过分享功能将房源信息分享给其他人。
|
||
|
||
## 📁 修改的文件
|
||
|
||
### 1. utils/util.js
|
||
新增了两个下载工具函数：
|
||
- `downloadImage(imageUrl, successCallback, failCallback)` - 下载图片到相册
|
||
- `downloadVideo(videoUrl, successCallback, failCallback)` - 下载视频到相册
|
||
|
||
### 2. sub_pages/house/detail.vue
|
||
在房源详情页面添加了下载功能：
|
||
|
||
#### 模板修改：
|
||
- 为图片轮播添加了下载按钮和长按事件
|
||
- 为视频播放器添加了下载按钮和长按事件
|
||
- 添加了下载按钮的样式
|
||
|
||
#### 脚本修改：
|
||
- `onImageLongPress()` - 图片长按事件处理
|
||
- `onVideoLongPress()` - 视频长按事件处理
|
||
- `downloadCurrentImage()` - 下载当前图片
|
||
- `downloadAllImages()` - 下载所有图片
|
||
- `batchDownloadImages()` - 批量下载图片实现
|
||
- `updateBatchProgress()` - 更新批量下载进度
|
||
- `downloadCurrentVideo()` - 下载当前视频
|
||
- `onShare()` - 分享功能处理
|
||
|
||
#### 样式修改：
|
||
- `.download-btn` - 下载按钮样式，半透明圆形按钮
|
||
|
||
## 🚀 功能特性
|
||
|
||
### 图片下载
|
||
1. **单张下载**：点击右下角下载按钮
|
||
2. **长按选择**：长按图片弹出选择菜单
|
||
3. **批量下载**：可选择下载所有图片
|
||
4. **进度显示**：批量下载时显示进度
|
||
|
||
### 视频下载
|
||
1. **点击下载**：点击右下角下载按钮
|
||
2. **长按下载**：长按视频弹出下载选项
|
||
|
||
### 分享功能
|
||
1. **分享按钮**：在操作栏中点击分享按钮
|
||
2. **分享选项**：支持分享给微信好友、朋友圈、生成海报、复制链接等
|
||
3. **智能分享**：自动获取房源标题、图片作为分享内容
|
||
|
||
### 用户体验
|
||
1. **加载提示**：下载过程中显示加载动画
|
||
2. **成功反馈**：下载成功后显示成功提示
|
||
3. **错误处理**：下载失败时显示错误信息
|
||
4. **权限引导**：相册权限被拒绝时提供设置引导
|
||
|
||
## 🔧 技术实现
|
||
|
||
### 下载流程
|
||
1. 使用 `uni.downloadFile()` 下载文件到临时目录
|
||
2. 使用 `uni.saveImageToPhotosAlbum()` 或 `uni.saveVideoToPhotosAlbum()` 保存到相册
|
||
3. 处理各种异常情况和用户反馈
|
||
|
||
### 批量下载优化
|
||
- 使用 `setTimeout()` 控制下载间隔，避免并发过多
|
||
- 实时更新下载进度
|
||
- 统计成功和失败数量
|
||
|
||
### 权限处理
|
||
- 自动检测相册访问权限
|
||
- 权限被拒绝时提供友好的引导提示
|
||
|
||
## 📱 使用方法
|
||
|
||
### 对于用户：
|
||
1. **下载单张图片**：在图片轮播界面点击右下角下载按钮
|
||
2. **下载所有图片**：长按图片，选择"下载所有图片"
|
||
3. **下载视频**：切换到视频模式，点击下载按钮或长按视频
|
||
4. **分享房源**：点击操作栏中的分享按钮，选择分享方式
|
||
|
||
### 对于开发者：
|
||
1. 可以直接调用 `Util.downloadImage(url)` 下载图片
|
||
2. 可以直接调用 `Util.downloadVideo(url)` 下载视频
|
||
3. 支持成功和失败回调函数
|
||
|
||
## 🔒 权限要求
|
||
|
||
### 小程序权限
|
||
- 需要用户授权访问相册权限
|
||
- 首次使用时会自动申请权限
|
||
|
||
### App权限
|
||
- Android: WRITE_EXTERNAL_STORAGE
|
||
- iOS: 相册访问权限
|
||
|
||
## 🎨 界面展示
|
||
|
||
下载按钮位于图片/视频的右下角，采用半透明圆形设计：
|
||
- 背景：黑色半透明 (rgba(0, 0, 0, 0.5))
|
||
- 图标：白色下载图标
|
||
- 文字：白色"下载图片"/"下载视频"文字
|
||
|
||
## 🐛 错误处理
|
||
|
||
1. **网络错误**：下载失败时显示"下载失败"提示
|
||
2. **权限错误**：相册权限被拒绝时显示设置引导
|
||
3. **文件错误**：无效的图片/视频地址时显示相应提示
|
||
4. **批量下载**：显示成功和失败的统计信息
|
||
5. **分享链接**：H5地址获取失败时使用当前页面路径作为备选方案
|
||
6. **海报生成**：没有图片时使用默认占位图或文字海报
|
||
|
||
## 🔄 兼容性
|
||
|
||
- ✅ 微信小程序
|
||
- ✅ 支付宝小程序
|
||
- ✅ App (Android/iOS)
|
||
- ✅ H5 (部分功能受限)
|
||
|
||
## 📝 注意事项
|
||
|
||
1. H5端的下载功能可能受浏览器限制
|
||
2. 批量下载时建议控制并发数量，避免性能问题
|
||
3. 大文件下载时注意网络状况和用户流量
|
||
4. 确保有足够的存储空间
|
||
|
||
## 🎉 总结
|
||
|
||
该功能为房源详情页面提供了完整的媒体文件下载和分享解决方案，支持：
|
||
- 单张/批量图片下载和视频下载
|
||
- 多种分享方式（微信好友、朋友圈、海报、复制链接）
|
||
- 良好的用户体验和错误处理机制
|
||
- 方便同行保存和分享房源媒体资料
|
||
|
||
通过这些功能，用户可以轻松地保存房源图片和视频到本地，也可以快速分享房源信息给其他人，大大提升了小程序的实用性和用户体验。
|