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

圆咕噜咕噜  论坛元老 | 2024-6-19 20:28:49 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1043|帖子 1043|积分 3129

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
1.根据不同设备展示不同的按钮

1.1 图片显示

  1.         <view class="image">
  2.                 <image :src="url" mode="widthFix"></image>
  3.         </view>
复制代码
1.2 微信小步伐显示的按钮

  1.         <!-- #ifdef MP-WEIXIN -->
  2.                         <view class="uni-flex align-items justify-align-center download backgroundColor" v-if="openSettingBtnHidden"
  3.                                 @click="saveEwm">下 载</view>
  4.                         <button class="uni-flex align-items justify-align-center download backgroundColor" v-else hover-class="none"
  5.                                 open-type="openSetting" @opensetting="handleSetting">下 载</button>
  6.         <!-- #endif -->
复制代码
1.3 h5显示的按钮

  1.         <!-- #ifdef H5 -->
  2.                         <view class="uni-flex align-items justify-align-center btn backgroundColor" @click="saveImgToLocal">下 载
  3.                         </view>
  4.         <!-- #endif -->
复制代码
1.4 app显示的按钮

  1.         <!-- #ifdef APP-PLUS -->
  2.        
  3.                         <!-- ios按钮 -->
  4.                         <button class=" uni-flex align-items justify-align-center  btn backgroundColor" v-if="isIos"
  5.                                 @click.stop="judgeIosPermission('photoLibrary')">下 载</button>
  6.                                
  7.                         <!-- Android按钮 -->
  8.                         <button class="uni-flex align-items justify-align-center btn backgroundColor" v-if="!isIos"
  9.                                 @click.stop="requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE')">
  10.                                 下 载
  11.                         </button>
  12.                        
  13.         <!-- #endif -->
复制代码
2. 引入需要用到的文件

  1. //获取手机相册的访问权限文件
  2. import permision from '@/common/permission.js'
  3. //封装的接口
  4. import Api from '@/api/apply.js'
复制代码
3. data中需要的数据

  1.         data() {
  2.                         return {
  3.                                 url: '',// 下载图片
  4.                                 openSettingBtnHidden: true, //是否授权
  5.                                 isIos:false,//判断app系统
  6.                         }
  7.                 },
复制代码
4. onload方法

  1.         // 判断是Android 还是 ios
  2.        
  3.                 // #ifdef APP-PLUS
  4.                 if (plus.os.name === 'Android') {
  5.                         this.isIos = false
  6.                 } else {
  7.                         this.isIos = true
  8.                 }
  9.                 // #endif
  11.         //获取接口返回的数据（图片）
  12.                 Api.getImage().then(res => {
  13.                         if (res.code == 200) {
  14.                                         this.url = res.data
  15.                                 }
  16.                 })
复制代码
5. methods需要用到的方法

  1.                         //ios端保存到相册
  2.                         judgeIosPermission(permisionID) {
  3.                                 let _this = this;
  4.                                 let result = permision.requestIOS(permisionID);
  5.                                 let strStatus = result ? '已' : '未';
  6.                                 if (strStatus == '已') {
  7.                                         if (!uni.getStorageSync('IosPHPhotoLibraryPermission')) {
  8.                                                 uni.showModal({
  9.                                                         content: permisionID + '权限' + strStatus + '获得授权',
  10.                                                         showCancel: false
  11.                                                 });
  12.                                                 uni.setStorageSync('IosPHPhotoLibraryPermission', true);
  13.                                         }
  14.                                         _this.saveImgToLocal(_this.url);
  15.                                 } else {
  16.                                         uni.showModal({
  17.                                                 content: permisionID + '权限' + strStatus + '获得授权',
  18.                                                 showCancel: false
  19.                                         });
  20.                                 }
  21.                         },
  22.                         //android端保存到相册
  23.                         async requestAndroidPermission(permisionID) {
  24.                                 let _this = this;
  25.                                 let result = await permision.requestAndroid(permisionID);
  26.                                 let strStatus;
  27.                                 if (result == 1) {
  28.                                         strStatus = '已获得授权';
  29.                                         if (!uni.getStorageSync('AndroidPHPhotoLibraryPermission')) {
  30.                                                 uni.showModal({
  31.                                                         content: permisionID + strStatus,
  32.                                                         showCancel: false
  33.                                                 });
  34.                                                 uni.setStorageSync('AndroidPHPhotoLibraryPermission', true);
  35.                                         }
  36.                                         _this.saveImgToLocal(_this.url);
  37.                                 } else if (result == 0) {
  38.                                         strStatus = '未获得授权';
  39.                                         uni.showModal({
  40.                                                 content: permisionID + strStatus,
  41.                                                 showCancel: false
  42.                                         });
  43.                                 } else {
  44.                                         strStatus = '被永久拒绝权限';
  45.                                         uni.showModal({
  46.                                                 content: permisionID + strStatus,
  47.                                                 showCancel: false
  48.                                         });
  49.                                 }
  50.                         },
  51.                         //微信小程序保存到相册
  52.                         handleSetting(e) {
  53.                                 if (!e.detail.authSetting['scope.writePhotosAlbum']) {
  54.                                         this.openSettingBtnHidden = false;
  55.                                 } else {
  56.                                         this.openSettingBtnHidden = true;
  57.                                 }
  58.                         },
  59.                         saveEwm(e) {
  60.                                 //获取相册授权
  61.                                 let _this = this;
  62.                                 uni.getSetting({
  63.                                         success(res) {
  64.                                                 if (!res.authSetting['scope.writePhotosAlbum']) {
  65.                                                         uni.authorize({
  66.                                                                 scope: 'scope.writePhotosAlbum',
  67.                                                                 success() {
  68.                                                                         _this.saveImgToLocal(_this.url);
  69.                                                                 },
  70.                                                                 fail() {
  71.                                                                         //这里是用户拒绝授权后的回调
  72.                                                                         _this.openSettingBtnHidden = false;
  73.                                                                 }
  74.                                                         });
  75.                                                 } else {
  76.                                                         //用户已经授权过了
  77.                                                         _this.saveImgToLocal(_this.url);
  78.                                                 }
  79.                                         }
  80.                                 });
  81.                         },
  82.                         saveImgToLocal(e, num) {
  83.                                 if (num == 1) {
  84.                                         uni.showModal({
  85.                                                 title: '提示',
  86.                                                 content: '确定保存到相册吗',
  87.                                                 success: res => {
  88.                                                         if (res.confirm) {
  89.                                                                 uni.downloadFile({
  90.                                                                         url: e.replace('http', 'https'), //图片地址
  91.                                                                         success: res => {
  92.                                                                                 if (res.statusCode === 200) {
  93.                                                                                         uni.saveImageToPhotosAlbum({
  94.                                                                                                 filePath: res.tempFilePath,
  95.                                                                                                 success: function() {
  96.                                                                                                         uni.showToast({
  97.                                                                                                                 title: '保存成功到相册',
  98.                                                                                                                 icon: 'none'
  99.                                                                                                         });
  100.                                                                                                 },
  101.                                                                                                 fail: function() {
  102.                                                                                                         uni.showToast({
  103.                                                                                                                 title: '保存失败',
  104.                                                                                                                 icon: 'none'
  105.                                                                                                         });
  106.                                                                                                 }
  107.                                                                                         });
  108.                                                                                 }
  109.                                                                         }
  110.                                                                 });
  111.                                                         } else if (res.cancel) {}
  112.                                                 }
  113.                                         });
  114.                                 } else {
  115.                                         uni.downloadFile({
  116.                                                 url: e.replace('http', 'https'), //图片地址
  117.                                                 success: res => {
  118.                                                         if (res.statusCode === 200) {
  119.                                                                 uni.saveImageToPhotosAlbum({
  120.                                                                         filePath: res.tempFilePath,
  121.                                                                         success: function() {
  122.                                                                                 uni.showToast({
  123.                                                                                         title: '保存成功到相册',
  124.                                                                                         icon: 'none'
  125.                                                                                 });
  126.                                                                         },
  127.                                                                         fail: function() {
  128.                                                                                 uni.showToast({
  129.                                                                                         title: '保存失败',
  130.                                                                                         icon: 'none'
  131.                                                                                 });
  132.                                                                         }
  133.                                                                 });
  134.                                                         }
  135.                                                 }
  136.                                         });
  137.                                 }
  138.                         },
  139.                         previewFile() {
  141.                                 // #ifdef  APP || MP
  142.                                 uni.downloadFile({
  143.                                         url: this.url , //后端返回的文件地址
  144.                                         success: function(res) {
  145.                                                 console.log(res, '下载成功')
  146.                                                 if (res.code === 200) {
  147.                                                         // 打开文件
  148.                                                         uni.saveFile({
  149.                                                                 tempFilePath: res.tempFilePath, //临时路径
  150.                                                                 success: function(res) {
  151.                                                                         uni.showToast({
  152.                                                                                 icon: 'none',
  153.                                                                                 mask: true,
  154.                                                                                 title: '文件已保存：' + res.savedFilePath, //保存路径
  155.                                                                                 duration: 3000,
  156.                                                                         });
  157.                                                                         setTimeout(() => {
  158.                                                                                 //打开文档查看
  159.                                                                                 uni.openDocument({
  160.                                                                                         filePath: res.savedFilePath,
  161.                                                                                         success: function(res) {
  162.                                                                                                 console.log('打开文档成功');
  163.                                                                                         }
  164.                                                                                 });
  165.                                                                         }, 3000)
  166.                                                                 }
  167.                                                         });
  168.                                                 } else {
  169.                                                         uni.showToast({
  170.                                                                 title: '打开文件失败请重试',
  171.                                                                 icon: 'none'
  172.                                                         })
  173.                                                 }
  174.                                                 uni.hideLoading()
  175.                                         },
  176.                                         fail: (err) => {
  177.                                                 uni.hideLoading()
  178.                                                 console.log(err, '下载失败')
  179.                                                 uni.showToast({
  180.                                                         title: '加载失败请重试',
  181.                                                         icon: "none"
  182.                                                 })
  183.                                         }
  184.                                 })
  185.                                 // #endif
  186.                         }
复制代码
6. 获取手机相册的访问权限文件

  1. /// null = 未请求，1 = 已允许，0 = 拒绝|受限, 2 = 系统未开启
  3. var isIOS
  4. function album() {
  5.     var result = 0;
  6.     var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
  7.     var authStatus = PHPhotoLibrary.authorizationStatus();
  8.     if (authStatus === 0) {
  9.         result = null;
  10.     } else if (authStatus == 3) {
  11.         result = 1;
  12.     } else {
  13.         result = 0;
  14.     }
  15.     plus.ios.deleteObject(PHPhotoLibrary);
  16.     return result;
  17. }
  18. function camera() {
  19.     var result = 0;
  20.     var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
  21.     var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
  22.     if (authStatus === 0) {
  23.         result = null;
  24.     } else if (authStatus == 3) {
  25.         result = 1;
  26.     } else {
  27.         result = 0;
  28.     }
  29.     plus.ios.deleteObject(AVCaptureDevice);
  30.     return result;
  31. }
  32. function location() {
  33.     var result = 0;
  34.     var cllocationManger = plus.ios.import("CLLocationManager");
  35.     var enable = cllocationManger.locationServicesEnabled();
  36.     var status = cllocationManger.authorizationStatus();
  37.     if (!enable) {
  38.         result = 2;
  39.     } else if (status === 0) {
  40.         result = null;
  41.     } else if (status === 3 || status === 4) {
  42.         result = 1;
  43.     } else {
  44.         result = 0;
  45.     }
  46.     plus.ios.deleteObject(cllocationManger);
  47.     return result;
  48. }
  49. function push() {
  50.     var result = 0;
  51.     var UIApplication = plus.ios.import("UIApplication");
  52.     var app = UIApplication.sharedApplication();
  53.     var enabledTypes = 0;
  54.     if (app.currentUserNotificationSettings) {
  55.         var settings = app.currentUserNotificationSettings();
  56.         enabledTypes = settings.plusGetAttribute("types");
  57.         if (enabledTypes == 0) {
  58.             result = 0;
  59.             console.log("推送权限没有开启");
  60.         } else {
  61.             result = 1;
  62.             console.log("已经开启推送功能!")
  63.         }
  64.         plus.ios.deleteObject(settings);
  65.     } else {
  66.         enabledTypes = app.enabledRemoteNotificationTypes();
  67.         if (enabledTypes == 0) {
  68.             result = 3;
  69.             console.log("推送权限没有开启!");
  70.         } else {
  71.             result = 4;
  72.             console.log("已经开启推送功能!")
  73.         }
  74.     }
  75.     plus.ios.deleteObject(app);
  76.     plus.ios.deleteObject(UIApplication);
  77.     return result;
  78. }
  79. function contact() {
  80.     var result = 0;
  81.     var CNContactStore = plus.ios.import("CNContactStore");
  82.     var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
  83.     if (cnAuthStatus === 0) {
  84.         result = null;
  85.     } else if (cnAuthStatus == 3) {
  86.         result = 1;
  87.     } else {
  88.         result = 0;
  89.     }
  90.     plus.ios.deleteObject(CNContactStore);
  91.     return result;
  92. }
  93. function record() {
  94.     var result = null;
  95.     var avaudiosession = plus.ios.import("AVAudioSession");
  96.     var avaudio = avaudiosession.sharedInstance();
  97.     var status = avaudio.recordPermission();
  98.     console.log("permissionStatus:" + status);
  99.     if (status === 1970168948) {
  100.         result = null;
  101.     } else if (status === 1735552628) {
  102.         result = 1;
  103.     } else {
  104.         result = 0;
  105.     }
  106.     plus.ios.deleteObject(avaudiosession);
  107.     return result;
  108. }
  109. function calendar() {
  110.     var result = null;
  111.     var EKEventStore = plus.ios.import("EKEventStore");
  112.     var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
  113.     if (ekAuthStatus == 3) {
  114.         result = 1;
  115.         console.log("日历权限已经开启");
  116.     } else {
  117.         console.log("日历权限没有开启");
  118.     }
  119.     plus.ios.deleteObject(EKEventStore);
  120.     return result;
  121. }
  122. function memo() {
  123.     var result = null;
  124.     var EKEventStore = plus.ios.import("EKEventStore");
  125.     var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
  126.     if (ekAuthStatus == 3) {
  127.         result = 1;
  128.         console.log("备忘录权限已经开启");
  129.     } else {
  130.         console.log("备忘录权限没有开启");
  131.     }
  132.     plus.ios.deleteObject(EKEventStore);
  133.     return result;
  134. }
  135. function requestIOS(permissionID) {
  136.     return new Promise((resolve, reject) => {
  137.         switch (permissionID) {
  138.             case "push":
  139.                 resolve(push());
  140.                 break;
  141.             case "location":
  142.                 resolve(location());
  143.                 break;
  144.             case "record":
  145.                 resolve(record());
  146.                 break;
  147.             case "camera":
  148.                 resolve(camera());
  149.                 break;
  150.             case "album":
  151.                 resolve(album());
  152.                 break;
  153.             case "contact":
  154.                 resolve(contact());
  155.                 break;
  156.             case "calendar":
  157.                 resolve(calendar());
  158.                 break;
  159.             case "memo":
  160.                 resolve(memo());
  161.                 break;
  162.             default:
  163.                 resolve(0);
  164.                 break;
  165.         }
  166.     });
  167. }
  168. function requestAndroid(permissionID) {
  169.     return new Promise((resolve, reject) => {
  170.         plus.android.requestPermissions(
  171.             [permissionID],
  172.             function(resultObj) {
  173.                 var result = 0;
  174.                 for (var i = 0; i < resultObj.granted.length; i++) {
  175.                     var grantedPermission = resultObj.granted[i];
  176.                     console.log('已获取的权限：' + grantedPermission);
  177.                     result = 1
  178.                 }
  179.                 for (var i = 0; i < resultObj.deniedPresent.length; i++) {
  180.                     var deniedPresentPermission = resultObj.deniedPresent[i];
  181.                     console.log('拒绝本次申请的权限：' + deniedPresentPermission);
  182.                     result = 0
  183.                 }
  184.                 for (var i = 0; i < resultObj.deniedAlways.length; i++) {
  185.                     var deniedAlwaysPermission = resultObj.deniedAlways[i];
  186.                     console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
  187.                     result = -1
  188.                 }
  189.                 resolve(result);
  190.             },
  191.             function(error) {
  192.                 console.log('result error: ' + error.message)
  193.                 resolve({
  194.                     code: error.code,
  195.                     message: error.message
  196.                 });
  197.             }
  198.         );
  199.     });
  200. }
  201. function gotoAppPermissionSetting() {
  202.     if (permission.isIOS) {
  203.         var UIApplication = plus.ios.import("UIApplication");
  204.         var application2 = UIApplication.sharedApplication();
  205.         var NSURL2 = plus.ios.import("NSURL");
  206.         var setting2 = NSURL2.URLWithString("app-settings:");
  207.         application2.openURL(setting2);
  208.         plus.ios.deleteObject(setting2);
  209.         plus.ios.deleteObject(NSURL2);
  210.         plus.ios.deleteObject(application2);
  211.     } else {
  212.         var Intent = plus.android.importClass("android.content.Intent");
  213.         var Settings = plus.android.importClass("android.provider.Settings");
  214.         var Uri = plus.android.importClass("android.net.Uri");
  215.         var mainActivity = plus.android.runtimeMainActivity();
  216.         var intent = new Intent();
  217.         intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
  218.         var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
  219.         intent.setData(uri);
  220.         mainActivity.startActivity(intent);
  221.     }
  222. }
  223. const permission = {
  224.     get isIOS(){
  225.         return typeof isIOS === 'boolean' ? isIOS : (isIOS = uni.getSystemInfoSync().platform === 'ios')
  226.     },
  227.     requestIOS: requestIOS,
  228.     requestAndroid: requestAndroid,
  229.     gotoAppSetting: gotoAppPermissionSetting
  230. }
  232. module.exports = permission
复制代码
7. 注释：在利用微信小步伐的时候，下载需要将域名设置一下白名单，否则没效果哦~~~

最后就可以实现Android、Ios、微信小步伐、H5多端下载图片

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

圆咕噜咕噜

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表