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
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值