新增:分享、下载图片、视频功能登

This commit is contained in:
2025-06-09 20:09:52 +08:00
parent 522281300f
commit 4eb8ef0f54
11 changed files with 1346 additions and 56 deletions

134
功能实现说明.md Normal file
View File

@@ -0,0 +1,134 @@
# 小程序图片视频下载和分享功能实现说明
## 🎯 功能概述
为房源详情页面添加了图片和视频下载功能以及分享功能,方便同行使用。用户可以通过点击下载按钮或长按媒体文件来保存到手机相册,也可以通过分享功能将房源信息分享给其他人。
## 📁 修改的文件
### 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. 确保有足够的存储空间
## 🎉 总结
该功能为房源详情页面提供了完整的媒体文件下载和分享解决方案,支持:
- 单张/批量图片下载和视频下载
- 多种分享方式(微信好友、朋友圈、海报、复制链接)
- 良好的用户体验和错误处理机制
- 方便同行保存和分享房源媒体资料
通过这些功能,用户可以轻松地保存房源图片和视频到本地,也可以快速分享房源信息给其他人,大大提升了小程序的实用性和用户体验。