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

2024-06-04 6320阅读

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

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

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

      1.1 图片显示

      1.2 微信小程序显示的按钮

      	
			下 载
			下 载

      1.3 h5显示的按钮

      	
			下 载

      1.4 app显示的按钮

      	
	
			
			下 载
				
			
			
				下 载

      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  

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

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

相关阅读：

1、搬瓦工VPS最佳操作系统选择，Windows系统成首选？

2、VPS极速下载百度资源，使用Wget工具的实用指南

3、VPS主机使用指南，轻松上手，一步步教你如何操作！

4、VPS极速安装网站管理系统，高效建站轻松实现！

5、揭秘流量矿石，正确使用VPS姿势大解密！

    高速稳定云服务器25元起
    免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    相关阅读

    目录[+]