uniApp下载图片到手机相册，适配Android、Ios、微信小程序、H5

桃雾..2024-01-14 12:51

uniapp下载图片到手机，适配Android、Ios、微信小程序、H5

  • 1.根据不同设备展示不同的按钮
    • [1.1 图片显示](#1.1 图片显示)
    • [1.2 微信小程序显示的按钮](#1.2 微信小程序显示的按钮)
    • [1.3 h5显示的按钮](#1.3 h5显示的按钮)
    • [1.4 app显示的按钮](#1.4 app显示的按钮)
  • [2. 引入需要用到的文件](#2. 引入需要用到的文件)
  • [3. data中需要的数据](#3. data中需要的数据)
  • [4. onload方法](#4. onload方法)
  • [5. methods需要用到的方法](#5. methods需要用到的方法)
  • [6. 获取手机相册的访问权限文件](#6. 获取手机相册的访问权限文件)
  • [7. 注释：在使用微信小程序的时候，下载需要将域名配置一下白名单，否则没效果哦~~~](#7. 注释：在使用微信小程序的时候，下载需要将域名配置一下白名单，否则没效果哦~~~)

1.根据不同设备展示不同的按钮

1.1 图片显示

复制代码 
	<view class="image">
		<image :src="url" mode="widthFix"></image>
	</view>

1.2 微信小程序显示的按钮

复制代码 
	<!-- #ifdef MP-WEIXIN -->
			<view class="uni-flex align-items justify-align-center download backgroundColor" v-if="openSettingBtnHidden"
				@click="saveEwm">下 载</view>
			<button class="uni-flex align-items justify-align-center download backgroundColor" v-else hover-class="none"
				open-type="openSetting" @opensetting="handleSetting">下 载</button>
	<!-- #endif -->

1.3 h5显示的按钮

复制代码 
	<!-- #ifdef H5 -->
			<view class="uni-flex align-items justify-align-center btn backgroundColor" @click="saveImgToLocal">下 载
			</view>
	<!-- #endif -->

1.4 app显示的按钮

复制代码 
	<!-- #ifdef APP-PLUS -->
	
			<!-- ios按钮 -->
			<button class=" uni-flex align-items justify-align-center  btn backgroundColor" v-if="isIos"
				@click.stop="judgeIosPermission('photoLibrary')">下 载</button>
				
			<!-- Android按钮 -->
			<button class="uni-flex align-items justify-align-center btn backgroundColor" v-if="!isIos"
				@click.stop="requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE')">
				下 载
			</button>
			
	<!-- #endif -->

2. 引入需要用到的文件

复制代码 
//获取手机相册的访问权限文件
import permision from '@/common/permission.js'
//封装的接口
import Api from '@/api/apply.js'

3. data中需要的数据

复制代码 
	data() {
			return {
				url: '',// 下载图片
				openSettingBtnHidden: true, //是否授权
				isIos:false,//判断app系统
			}
		},

4. onload方法

复制代码 
	// 判断是Android 还是 ios
	
		// #ifdef APP-PLUS
		if (plus.os.name === 'Android') {
			this.isIos = false
		} else {
			this.isIos = true
		}
		// #endif

	//获取接口返回的数据（图片）
		Api.getImage().then(res => {
			if (res.code == 200) {
					this.url = res.data
				}
		})

5. methods需要用到的方法

复制代码 
			//ios端保存到相册
			judgeIosPermission(permisionID) {
				let _this = this;
				let result = permision.requestIOS(permisionID);
				let strStatus = result ? '已' : '未';
				if (strStatus == '已') {
					if (!uni.getStorageSync('IosPHPhotoLibraryPermission')) {
						uni.showModal({
							content: permisionID + '权限' + strStatus + '获得授权',
							showCancel: false
						});
						uni.setStorageSync('IosPHPhotoLibraryPermission', true);
					}
					_this.saveImgToLocal(_this.url);
				} else {
					uni.showModal({
						content: permisionID + '权限' + strStatus + '获得授权',
						showCancel: false
					});
				}
			},
			//android端保存到相册
			async requestAndroidPermission(permisionID) {
				let _this = this;
				let result = await permision.requestAndroid(permisionID);
				let strStatus;
				if (result == 1) {
					strStatus = '已获得授权';
					if (!uni.getStorageSync('AndroidPHPhotoLibraryPermission')) {
						uni.showModal({
							content: permisionID + strStatus,
							showCancel: false
						});
						uni.setStorageSync('AndroidPHPhotoLibraryPermission', true);
					}
					_this.saveImgToLocal(_this.url);
				} else if (result == 0) {
					strStatus = '未获得授权';
					uni.showModal({
						content: permisionID + strStatus,
						showCancel: false
					});
				} else {
					strStatus = '被永久拒绝权限';
					uni.showModal({
						content: permisionID + strStatus,
						showCancel: false
					});
				}
			},
			//微信小程序保存到相册
			handleSetting(e) {
				if (!e.detail.authSetting['scope.writePhotosAlbum']) {
					this.openSettingBtnHidden = false;
				} else {
					this.openSettingBtnHidden = true;
				}
			},
			saveEwm(e) {
				//获取相册授权
				let _this = this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									_this.saveImgToLocal(_this.url);
								},
								fail() {
									//这里是用户拒绝授权后的回调
									_this.openSettingBtnHidden = false;
								}
							});
						} else {
							//用户已经授权过了
							_this.saveImgToLocal(_this.url);
						}
					}
				});
			},
			saveImgToLocal(e, num) {
				if (num == 1) {
					uni.showModal({
						title: '提示',
						content: '确定保存到相册吗',
						success: res => {
							if (res.confirm) {
								uni.downloadFile({
									url: e.replace('http', 'https'), //图片地址
									success: res => {
										if (res.statusCode === 200) {
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.showToast({
														title: '保存成功到相册',
														icon: 'none'
													});
												},
												fail: function() {
													uni.showToast({
														title: '保存失败',
														icon: 'none'
													});
												}
											});
										}
									}
								});
							} else if (res.cancel) {}
						}
					});
				} else {
					uni.downloadFile({
						url: e.replace('http', 'https'), //图片地址
						success: res => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: '保存成功到相册',
											icon: 'none'
										});
									},
									fail: function() {
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										});
									}
								});
							}
						}
					});
				}
			},
			previewFile() {

				// #ifdef  APP || MP
				uni.downloadFile({
					url: this.url , //后端返回的文件地址
					success: function(res) {
						console.log(res, '下载成功')
						if (res.code === 200) {
							// 打开文件
							uni.saveFile({
								tempFilePath: res.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										duration: 3000,
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												console.log('打开文档成功');
											}
										});
									}, 3000)
								}
							});
						} else {
							uni.showToast({
								title: '打开文件失败请重试',
								icon: 'none'
							})
						}
						uni.hideLoading()
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err, '下载失败')
						uni.showToast({
							title: '加载失败请重试',
							icon: "none"
						})
					}
				})
				// #endif
			}

6. 获取手机相册的访问权限文件

复制代码 
/// null = 未请求，1 = 已允许，0 = 拒绝|受限, 2 = 系统未开启

var isIOS
function album() {
    var result = 0;
    var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
    var authStatus = PHPhotoLibrary.authorizationStatus();
    if (authStatus === 0) {
        result = null;
    } else if (authStatus == 3) {
        result = 1;
    } else {
        result = 0;
    }
    plus.ios.deleteObject(PHPhotoLibrary);
    return result;
}
function camera() {
    var result = 0;
    var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
    var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
    if (authStatus === 0) {
        result = null;
    } else if (authStatus == 3) {
        result = 1;
    } else {
        result = 0;
    }
    plus.ios.deleteObject(AVCaptureDevice);
    return result;
}
function location() {
    var result = 0;
    var cllocationManger = plus.ios.import("CLLocationManager");
    var enable = cllocationManger.locationServicesEnabled();
    var status = cllocationManger.authorizationStatus();
    if (!enable) {
        result = 2;
    } else if (status === 0) {
        result = null;
    } else if (status === 3 || status === 4) {
        result = 1;
    } else {
        result = 0;
    }
    plus.ios.deleteObject(cllocationManger);
    return result;
}
function push() {
    var result = 0;
    var UIApplication = plus.ios.import("UIApplication");
    var app = UIApplication.sharedApplication();
    var enabledTypes = 0;
    if (app.currentUserNotificationSettings) {
        var settings = app.currentUserNotificationSettings();
        enabledTypes = settings.plusGetAttribute("types");
        if (enabledTypes == 0) {
            result = 0;
            console.log("推送权限没有开启");
        } else {
            result = 1;
            console.log("已经开启推送功能!")
        }
        plus.ios.deleteObject(settings);
    } else {
        enabledTypes = app.enabledRemoteNotificationTypes();
        if (enabledTypes == 0) {
            result = 3;
            console.log("推送权限没有开启!");
        } else {
            result = 4;
            console.log("已经开启推送功能!")
        }
    }
    plus.ios.deleteObject(app);
    plus.ios.deleteObject(UIApplication);
    return result;
}
function contact() {
    var result = 0;
    var CNContactStore = plus.ios.import("CNContactStore");
    var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
    if (cnAuthStatus === 0) {
        result = null;
    } else if (cnAuthStatus == 3) {
        result = 1;
    } else {
        result = 0;
    }
    plus.ios.deleteObject(CNContactStore);
    return result;
}
function record() {
    var result = null;
    var avaudiosession = plus.ios.import("AVAudioSession");
    var avaudio = avaudiosession.sharedInstance();
    var status = avaudio.recordPermission();
    console.log("permissionStatus:" + status);
    if (status === 1970168948) {
        result = null;
    } else if (status === 1735552628) {
        result = 1;
    } else {
        result = 0;
    }
    plus.ios.deleteObject(avaudiosession);
    return result;
}
function calendar() {
    var result = null;
    var EKEventStore = plus.ios.import("EKEventStore");
    var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
    if (ekAuthStatus == 3) {
        result = 1;
        console.log("日历权限已经开启");
    } else {
        console.log("日历权限没有开启");
    }
    plus.ios.deleteObject(EKEventStore);
    return result;
}
function memo() {
    var result = null;
    var EKEventStore = plus.ios.import("EKEventStore");
    var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
    if (ekAuthStatus == 3) {
        result = 1;
        console.log("备忘录权限已经开启");
    } else {
        console.log("备忘录权限没有开启");
    }
    plus.ios.deleteObject(EKEventStore);
    return result;
}
function requestIOS(permissionID) {
    return new Promise((resolve, reject) => {
        switch (permissionID) {
            case "push":
                resolve(push());
                break;
            case "location":
                resolve(location());
                break;
            case "record":
                resolve(record());
                break;
            case "camera":
                resolve(camera());
                break;
            case "album":
                resolve(album());
                break;
            case "contact":
                resolve(contact());
                break;
            case "calendar":
                resolve(calendar());
                break;
            case "memo":
                resolve(memo());
                break;
            default:
                resolve(0);
                break;
        }
    });
}
function requestAndroid(permissionID) {
    return new Promise((resolve, reject) => {
        plus.android.requestPermissions(
            [permissionID],
            function(resultObj) {
                var result = 0;
                for (var i = 0; i < resultObj.granted.length; i++) {
                    var grantedPermission = resultObj.granted[i];
                    console.log('已获取的权限：' + grantedPermission);
                    result = 1
                }
                for (var i = 0; i < resultObj.deniedPresent.length; i++) {
                    var deniedPresentPermission = resultObj.deniedPresent[i];
                    console.log('拒绝本次申请的权限：' + deniedPresentPermission);
                    result = 0
                }
                for (var i = 0; i < resultObj.deniedAlways.length; i++) {
                    var deniedAlwaysPermission = resultObj.deniedAlways[i];
                    console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
                    result = -1
                }
                resolve(result);
            },
            function(error) {
                console.log('result error: ' + error.message)
                resolve({
                    code: error.code,
                    message: error.message
                });
            }
        );
    });
}
function gotoAppPermissionSetting() {
    if (permission.isIOS) {
        var UIApplication = plus.ios.import("UIApplication");
        var application2 = UIApplication.sharedApplication();
        var NSURL2 = plus.ios.import("NSURL");
        var setting2 = NSURL2.URLWithString("app-settings:");
        application2.openURL(setting2);
        plus.ios.deleteObject(setting2);
        plus.ios.deleteObject(NSURL2);
        plus.ios.deleteObject(application2);
    } else {
        var Intent = plus.android.importClass("android.content.Intent");
        var Settings = plus.android.importClass("android.provider.Settings");
        var Uri = plus.android.importClass("android.net.Uri");
        var mainActivity = plus.android.runtimeMainActivity();
        var intent = new Intent();
        intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
        var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
        intent.setData(uri);
        mainActivity.startActivity(intent);
    }
}
const permission = {
    get isIOS(){
        return typeof isIOS === 'boolean' ? isIOS : (isIOS = uni.getSystemInfoSync().platform === 'ios')
    },
    requestIOS: requestIOS,
    requestAndroid: requestAndroid,
    gotoAppSetting: gotoAppPermissionSetting
}

module.exports = permission

7. 注释：在使用微信小程序的时候，下载需要将域名配置一下白名单，否则没效果哦~~~

最后就可以实现Android、Ios、微信小程序、H5多端下载图片

相关推荐
xw51 小时前
uni-app中v-if使用”异常”
前端·uni-app
！win ！2 小时前
uni-app中v-if使用”异常”
前端·uni-app
黄林晴3 小时前
如何判断手机是否是纯血鸿蒙系统
android
火柴就是我3 小时前
flutter 之真手势冲突处理
android·flutter
Emma歌小白3 小时前
如何首次运行小程序后端
微信小程序
法的空间3 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
循环不息优化不止3 小时前
深入解析安卓 Handle 机制
android
恋猫de小郭3 小时前
Android 将强制应用使用主题图标，你怎么看？
android·前端·flutter
jctech4 小时前
这才是2025年的插件化！ComboLite 2.0：为Compose开发者带来极致“爽”感
android·开源
赣州云智科技的技术铺子4 小时前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南03UV安装并设置国内源0446个Nano-banana 精选提示词，持续更新中05A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程06KGG转MP3工具|非KGM文件|解密音频07解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题08conda中设置镜像地址（附所有可换的地址）09Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用10保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）