cykj/hzdyjs

0 Fork 0

Files

T

zlwu 600f0c621c 提交代码

2025-08-08 20:35:17 +08:00

5.3 KiB

Raw Blame History

移动端微信图片保存功能改进 - 变更记录

变更日期: 2025-01-03
变更人员: system-assistant
变更类型: 功能改进
影响模块: 移动端微信SDK测试页面

变更概述

修复了微信JS-SDK测试页面中图片下载功能的问题，原有的"下载图片"按钮只是将图片下载到微信缓存中，而不是保存到手机相册。现在添加了真正的保存到相册功能。

问题描述

问题现象: 用户点击【下载图片】按钮后，显示"图片下载成功"的日志，但图片没有保存到手机图片库中
根本原因: 原有功能使用的是 wx.downloadImage API，该API只是将服务器上的图片下载到微信的本地缓存中，并不会自动保存到手机的相册里
用户期望: 能够将图片真正保存到手机的相册中

具体变更内容

1. 功能按钮调整

文件: mobile/src/pages/wechat/js-sdk-test.vue
位置: 图片功能测试区域的按钮组

变更前:

<button class="test-btn" @click="downloadImage" :disabled="!uploadedServerIds.length">
    下载图片
</button>

变更后:

<button class="test-btn" @click="downloadImage" :disabled="!uploadedServerIds.length">
    下载到缓存
</button>
<button class="test-btn" @click="saveImageToAlbum" :disabled="!selectedImages.length">
    保存到相册
</button>

说明:

将原有按钮文字改为"下载到缓存"，明确其功能范围
新增"保存到相册"按钮，使用已选择的图片作为数据源

2. 下载功能说明优化

变更内容: 在 downloadImage() 方法中添加功能说明

主要改进:

// 成功回调中添加提示信息
this.addLog(`图片下载到缓存成功: ${res.localId}`, 'success');
this.addLog('💡 此功能只下载到微信缓存，如需保存到相册请使用【保存到相册】按钮', 'info');

3. 新增保存到相册功能

方法名: saveImageToAlbum()
位置: mobile/src/pages/wechat/js-sdk-test.vue - methods部分

核心功能:

使用 uni-app 的 uni.saveImageToPhotosAlbum API
支持批量保存多张图片
完善的错误处理和权限提示
详细的进度日志显示

关键代码:

async saveImageToAlbum() {
    // 批量保存已选择的图片
    for (let i = 0; i < this.selectedImages.length; i++) {
        const imageUrl = this.selectedImages[i];
        await new Promise((resolve, reject) => {
            uni.saveImageToPhotosAlbum({
                filePath: imageUrl,
                success: (res) => {
                    this.addLog(`第${i + 1}张图片保存成功 ✅`, 'success');
                    resolve(res);
                },
                fail: (err) => {
                    // 权限检查和错误处理
                    if (err.errMsg && err.errMsg.includes('auth')) {
                        this.addLog(`第${i + 1}张图片保存失败：需要相册权限`, 'error');
                        this.addLog('💡 请在设置中允许应用访问相册权限', 'info');
                    }
                    reject(err);
                }
            });
        });
    }
}

技术细节

API选择说明

微信 wx.downloadImage:
- 功能：从微信服务器下载图片到本地缓存
- 返回：微信内部localId (如: wxLocalResource://7763393193219)
- 限制：只存储在微信缓存中，不会保存到系统相册
uni-app uni.saveImageToPhotosAlbum:
- 功能：将图片保存到设备相册
- 支持：跨平台(H5、小程序、App)
- 权限：需要用户授权相册访问权限

权限处理

自动检测权限相关错误
提供用户友好的权限提示信息
支持调试模式下的详细错误信息显示

用户体验优化

批量保存时显示进度信息
每张图片保存间隔500ms，避免过快操作
详细的成功/失败日志记录
清晰的功能按钮命名

测试建议

基础功能测试:
- 选择图片 → 点击"保存到相册" → 检查手机相册
- 测试单张和多张图片保存
权限测试:
- 首次使用时的权限请求
- 拒绝权限后的错误提示
- 权限允许后的正常保存
错误处理测试:
- 网络异常情况
- 存储空间不足
- 无效图片格式
跨端测试:
- 微信H5环境
- 微信小程序环境
- 原生App环境

影响范围

正面影响: 解决了用户无法将图片保存到相册的核心需求
兼容性: 保留原有下载功能，新增功能不影响现有流程
用户体验: 按钮功能更加明确，操作更加直观

后续优化建议

功能扩展: 考虑添加图片质量选择(原图/压缩图)
批量操作: 添加全选/取消全选功能
进度显示: 考虑添加保存进度条
存储管理: 添加相册空间检查功能

5.3 KiB Raw Blame History