新增:分享、下载图片、视频功能登
This commit is contained in:
134
功能实现说明.md
Normal file
134
功能实现说明.md
Normal 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. 确保有足够的存储空间
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
该功能为房源详情页面提供了完整的媒体文件下载和分享解决方案,支持:
|
||||
- 单张/批量图片下载和视频下载
|
||||
- 多种分享方式(微信好友、朋友圈、海报、复制链接)
|
||||
- 良好的用户体验和错误处理机制
|
||||
- 方便同行保存和分享房源媒体资料
|
||||
|
||||
通过这些功能,用户可以轻松地保存房源图片和视频到本地,也可以快速分享房源信息给其他人,大大提升了小程序的实用性和用户体验。
|
||||
Reference in New Issue
Block a user