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端保存到相册
a