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 图片显示
<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 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 < 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 = permission7. 注释：在使用微信小程序的时候，下载需要将域名配置一下白名单，否则没效果哦~~~
最后就可以实现Android、Ios、微信小程序、H5多端下载图片
