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多端下载图片

相关推荐
豆 腐23 分钟前
MySQL【四】
android·数据库·笔记·mysql
DK七七24 分钟前
多端校园圈子论坛小程序，多个学校同时代理，校园小程序分展示后台管理源码
开发语言·前端·微信小程序·小程序·php
小小码神Sundayx1 小时前
三、模板与配置（下）
笔记·微信小程序
2401_852403552 小时前
整理iPhone空间：iphone怎么删除相簿
ios·iphone
公子艾2 小时前
uniapp设置tabBar高斯模糊并设置tabBar高度占位
uni-app
想取一个与众不同的名字好难2 小时前
android studio导入OpenCv并改造成.kts版本
android·ide·android studio
Jewel1053 小时前
Flutter代码混淆
android·flutter·ios
晓风伴月4 小时前
uniapp: IOS微信小程序输入框部分被软键盘遮挡问题
微信小程序·小程序·uni-app
转角羊儿4 小时前
uni-app文章列表制作⑧
前端·javascript·uni-app
Yawesh_best4 小时前
MySQL（5）【数据类型 —— 字符串类型】
android·mysql·adb
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04新版微信小程序获取用户手机号05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10智能车联网安全发展形势、挑战