我封装了一个方法,之后可以直接使用
在此之前,先用class封装一个Toast提示框
class Toast{
constructor(title,icon="success",duration=1300,mask=true) {
this.title = title
this.icon = icon
this.duration = duration
this.mask = mask
}
// 消息提示框:自动消失
showtoast(){
uni.showToast({
title: this.title,
icon:this.icon,
duration: this.duration,
mask:this.mask
});
}
// 消息提示框,手动消失
showloading(){
uni.showLoading({
title: this.title,
mask:true
});
}
// 轻提示
}
export default Toast
然后就开始封装我们的downloadImg.js了
import toast from './toast.js'
export default function downloadImg(url){
uni.showLoading({
title: '正在下载',
mask: true
})
console.log(url)
let that = this;
uni.getImageInfo({
src: url,
success(res) {
console.log(res.path)
uni.saveImageToPhotosAlbum({
filePath: res.path,
success(res) {
new toast("已保存至相册").showtoast()
},
fail(err) {
console.log(err);
uni.hideLoading();
uni.showModal({
title: '保存图片至相册',
content: '需要获取您的相册权限,请确认授权',
success: function(res) {
if (res.cancel) {
uni.showToast({
title: '获取相册权限失败',
icon: 'none',
duration: 2000
})
} else if (res.confirm) {
uni.showLoading({
title: '打开设置',
mask: true
})
uni.openSetting({
success: function(data) {
uni.hideLoading();
new toast("请重新点击下载原图").showloading()
}
})
}
}
})
}
})
},
fail(err) {
console.log(err);
new toast("下载失败,请重试").showloading()
}
})
}
然后最好把它挂载到原型上面,这样就能全局使用了
import previewLogic from './public/previewImg.js'
Vue.prototype.$previewLogic = previewLogic
之后项目中如何使用呢?
previewImg(index,imgArray){
new this.$previewLogic(index, imgArray).previewImg()
}
index就是图片的下标
imgArray是包含图片的数组。例如:[‘图片1’,‘图片2’…]
previewImg,index,imgArray是自定义的,不是标准