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

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-PLUSif (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 || MPuni.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 isIOSfunction 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多端下载图片