uniApp下载图片到手机相册，适配Android、Ios、微信小程序、H5
uniapp下载图片到手机，适配Android、Ios、微信小程序、H5
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多端下载图片