uniApp下载图片到手机相册，适配Android、Ios、微信小程序、H5

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-PLUSif (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 || MPuni.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多端下载图片

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/612082.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Maven报错：Malformed \uxxxx encoding 解决办法

Maven报错：Malformed \uxxxx encoding 解决办法

maven构建出现这个Malformed \uxxxx encoding问题&#xff0c;应该是maven仓库里面有脏东西进入了&#xff01; 解决&#xff1a; 将仓库中的resolver-status.properties文件全部干掉。 我使用的everything工具全局搜索resolver-status.properties文件&#xff0c;然后Ctrla,再…
阅读更多...
Nodejs 第三十一章（响应头和请求头）

Nodejs 第三十一章（响应头和请求头）

响应头 HTTP响应头&#xff08;HTTP response headers&#xff09;是在HTTP响应中发送的元数据信息&#xff0c;用于描述响应的特性、内容和行为。它们以键值对的形式出现&#xff0c;每个键值对由一个标头字段&#xff08;header field&#xff09;和一个相应的值组成。 例如…
阅读更多...
第三十九级台阶

第三十九级台阶

解题思路&#xff1a; 本题运用递归的思想&#xff0c;每走一步可以上一个或者两个台阶&#xff0c;一开始是左脚最后是右脚&#xff0c;所以走的总步数应该为偶数&#xff0c;最后跨过的台阶数应该等于39。 解题代码&#xff1a; public class disnashijiujitaijie {static i…
阅读更多...
03. BI - 详解机器学习神器 XGBoost

03. BI - 详解机器学习神器 XGBoost

本文专辑 : 茶桁的AI秘籍 - BI篇 原文链接: https://mp.weixin.qq.com/s/kLEg_VcxAACy8dH35kK3zg 文章目录 集成学习XGBoost Hi&#xff0c;你好。我是茶桁。 学习总是一个循序渐进的过程&#xff0c;之前两节课的内容中&#xff0c;咱们去了解了LR和SVM在实际项目中是如何使…
阅读更多...
ROS2学习笔记二：开发准备

ROS2学习笔记二：开发准备

目录 1 DDS介绍 2. 工程介绍 4 构建工具colcon 5 启动一个节点 1 DDS介绍 DDS&#xff0c;全称 Data Distribution Service (数据分发服务)。是由对象管理组 (OMG) 于 2003 年发布并于 2007 年修订的开分布式系统标准。通过类似于ROS中的话题发布和订阅形式来进行通信&…
阅读更多...
100V耐压 LED恒流驱动芯片 SL2516D兼容替换LN2516车灯照明芯片

100V耐压 LED恒流驱动芯片 SL2516D兼容替换LN2516车灯照明芯片

SL2516D LED恒流驱动芯片是一款专为LED照明设计的高效、高精度恒流驱动芯片。与LN2516车灯照明芯片兼容&#xff0c;可直接替换LN2516芯片&#xff0c;为LED车灯照明提供稳定、可靠的电源解决方案。 一、SL2516D LED恒流驱动芯片的特点 1. 高效率&#xff1a;SL2516D采用先进的…
阅读更多...
HarmonyOS4.0系统性深入开发17进程模型概述

HarmonyOS4.0系统性深入开发17进程模型概述

进程模型概述 HarmonyOS的进程模型&#xff1a; 应用中&#xff08;同一包名&#xff09;的所有UIAbility运行在同一个独立进程中。WebView拥有独立的渲染进程。 基于HarmonyOS的进程模型&#xff0c;系统提供了公共事件机制用于一对多的通信场景&#xff0c;公共事件发布者…
阅读更多...
深度解析-Java语言的未来

深度解析-Java语言的未来

深度解析-Java语言的未来&#xff0c;文末有我耗时一个月&#xff0c;问遍了身边的大佬&#xff0c;零基础自学Java的路线&#xff0c;适用程序员入门&进阶&#xff0c;Java学习路线&#xff0c;2024新版最新版。 文章目录 Q1 - 能否自我介绍下&#xff1f; Q2 - Java语…
阅读更多...
Python常用配置文件读取方法

Python常用配置文件读取方法

常见的应用配置方式有环境变量和配置文件，对于微服务应用，还会从配置中心加载配置，比如nacos、etcd等，有的应用还会把部分配置写在数据库中。此处主要记录从环境变量、.env文件、.ini文件、.yaml文件、.toml文件、.json文件读取配置。 ini文件 ini文件格式一般如下： [m…
阅读更多...
GBASE南大通用CreateParameter 方法

GBASE南大通用CreateParameter 方法

创建一个GBASE南大通用Parameter 对象的实例。  语法 [Visual Basic] Public Function CreateParameter As GBaseParameter [C#] public GBaseParameter CreateParameter()  返回值 创建的 GBaseParameter 对象。 执行一个 SQL 语句并返回影响的行数。  语法 […
阅读更多...
设计模式——抽象工厂模式（Abstract Factory Pattern）

设计模式——抽象工厂模式（Abstract Factory Pattern）

概述 抽象工厂模式的基本思想是将一些相关的产品组成一个“产品族”&#xff0c;由同一个工厂统一生产。在工厂方法模式中具体工厂负责生产具体的产品&#xff0c;每一个具体工厂对应一种具体产品&#xff0c;工厂方法具有唯一性&#xff0c;一般情况下&#xff0c;一个具体工厂…
阅读更多...
数据结构与算法之美学习笔记：46 | 概率统计：如何利用朴素贝叶斯算法过滤垃圾短信？

数据结构与算法之美学习笔记：46 | 概率统计：如何利用朴素贝叶斯算法过滤垃圾短信？

目录 前言算法解析总结引申 前言 本节课程思维导图&#xff1a; 上一节我们讲到&#xff0c;如何用位图、布隆过滤器&#xff0c;来过滤重复的数据。今天&#xff0c;我们再讲一个跟过滤相关的问题&#xff0c;如何过滤垃圾短信&#xff1f; 垃圾短信和骚扰电话&#xff0c;我…
阅读更多...
基于长短期神经网络LSTM的路径追踪

基于长短期神经网络LSTM的路径追踪

目录 背影 摘要 代码和数据下载：基于长短期神经网络LSTM的路径追踪（代码完整，数据齐全）资源-CSDN文库 https://download.csdn.net/download/abc991835105/88714816 LSTM的基本定义 LSTM实现的步骤 基于长短期神经网络LSTM的路径追踪 结果分析 展望 参考论文 背影 路径坐标…
阅读更多...
【MySQL】巧用 DATE_SUB 函数判断时间是否连续

【MySQL】巧用 DATE_SUB 函数判断时间是否连续

力扣题 1、题目地址 1454. 活跃用户 2、模拟表 表 Accounts&#xff1a; Column NameTypeidintnamevarchar id 是该表主键&#xff08;具有唯一值的列&#xff09;该表包含账户 id 和账户的用户名. 表 Logins&#xff1a; Column NameTypeidintlogin_datedate 该表可能…
阅读更多...
docker安装nodejs，并更改为淘宝源

docker安装nodejs，并更改为淘宝源

拉取官方 Node.js 镜像 docker pull node:latest创建 Dockerfile&#xff0c;并更改 NPM 下载源为淘宝源&#xff0c;设置为全局持久化 # 使用最新版本的Node.js作为基础镜像 FROM node:latest# 设置工作目录为/app WORKDIR /app # 更改 NPM 下载源为淘宝源&#xff0c;并设置…
阅读更多...
c++学习笔记-STL案例-机房预约系统1-需求分析

c++学习笔记-STL案例-机房预约系统1-需求分析

1 机房预约系统需求 1.1 简单介绍 学校有几个规格不同的机房&#xff0c;由于使用经常出现“撞车”现象&#xff0c;现在开发一套预约系统&#xff0c;解决这一问题。 1.2 身份介绍 分别有三种身份使用该系统 学生代表&#xff1a;申请使用机房教师&#xff1a;审核学生的…
阅读更多...
从单细胞数据分析的最佳实践看R与Python两个阵营的博弈

从单细胞数据分析的最佳实践看R与Python两个阵营的博弈

R与Python&#xff0c;在生物信息学领域的博弈异常激烈。许多生信分析&#xff0c;两个阵营都发展出了自己的方法&#xff0c;比如单细胞数据分析&#xff0c;R有Seurat&#xff0c;Python就有Scanpy。这些层出不穷的方法不断地吸引着吃瓜群众的眼球&#xff0c;同时也让人患上…
阅读更多...
Qt 6之六：Qt Designer介绍

Qt 6之六：Qt Designer介绍

Qt 6之六&#xff1a;Qt Designer介绍 Qt Designer是一个可视化的用户界面设计工具&#xff0c;用于创建Qt应用程序的用户界面&#xff0c;允许开发人员通过拖放和布局来设计和创建GUI界面。 Qt 6之一&#xff1a;简介、安装与简单使用 https://blog.csdn.net/cnds123/articl…
阅读更多...
Windows系统Copilot使用方案

Windows系统Copilot使用方案

在Windows环境中启用和使用Copilot的一般步骤和方案概述&#xff1a; 启用Windows Copilot 确保系统更新&#xff1a; 首先&#xff0c;您的设备需要运行最新的Windows 11版本&#xff0c;因为Copilot可能作为系统更新的一部分推出。 安装与激活&#xff1a; 如果Copilot是通过…
阅读更多...
Linux 文件（夹）权限查看

Linux 文件（夹）权限查看

命令 ： ls -al ls -al 是一个用于列出指定目录下所有文件和子目录的命令，包括隐藏文件和详细信息。其中，-a 选项表示显示所有文件，包括以 . 开头的隐藏文件，-l 选项表示以列表的形式显示文件的详细信息。 本例中：drwxrwxr-x 为权限细节。 权限细节（Permission detail…
阅读更多...
最新文章

Copyright @ 2022~2023