• 全栈工程师之路-中级篇之小程序开发-第三章第五节获取用户权限、下载文件、保存到相册、用户拒绝授权重新授权


    继上一节课,我们已经简要说明了将图片保存到相册的流程和方法。
    这节课我们围绕这个问题,展开讲解获取用户权限,将网络图片下载到临时文件,最后保存到相册。

    获取用户权限 wx.authorize

    这里写图片描述
    使用方法如下:

    // 可以通过 wx.getSetting 先查询一下用户是否授权了
    wx.getSetting({
        success(res) {
          if (!res.authSetting[scope]) {
            wx.authorize({
              scope: scope,
              success() {
                  console.log('授权成功')
              }
    })}}})
    

    这里的scope有5种参数,使用中间那行接口的时候,就要获取相应的scope权限。
    这里写图片描述
    这里我们拿scope.writePhotosAlbum为例。
    这里写图片描述
    我们在小程序初始化的时候获取权限,也可以在要保存图片的时候获取权限。
    保存运行效果如下:
    这里写图片描述
    这里还有一个调试小技巧。

    调试技巧

    这里写图片描述
    清楚授权缓存,就可以不断调试授权。

    下载文件wx.downloadFile

    我们在点击图片的响应事件里面调用下载文件的方法

    showImg:function(event){
        var imgSrc = event.currentTarget.dataset.imgSrc;
        //下载文件
        wx.downloadFile({
          url:imgSrc,
          success:function (res){
            console.log(res);
          }
        })
    },
    

    保存运行,点击图片。可以在console中查看日志。
    这里写图片描述
    这里的tempFilePath就是下载到本地的临时文件。
    可以进一步的调用wx.saveFile将临时文件保存为永久文件。
    注意这个文件大小限制了10M。

    保存到相册wx.saveImageToPhotosAlbum

    接下来我们将本地的临时文件,保存到相册里。

    wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success:function(data){
            console.log(data);
          },
          fail:function(err){
            console.log(err);
          }
    })
    

    这里的res就是我们调用下载文件的回调数据,实际代码结构如下:
    这里写图片描述
    保存运行,点击图片。
    这里写图片描述
    在工具上调试,会弹出保存窗口。
    可以点击确定、取消。
    到这里我们的功能就都完成了。
    接下来我们来看几种错误情况。
    1、最开始用户点击了拒绝授权。(使用上面的调试技巧,清空一下授权记录)
    错误码:errMsg:”saveImageToPhotosAlbum:fail auth deny”
    这里写图片描述
    2、用户点击了取消。
    错误码:errMsg:”saveImageToPhotosAlbum:fail cancel”
    这里写图片描述
    3、如果一开始用户点击了拒绝授权,那就一直是拒绝的。
    我们在保存错误回调中加入一下测试代码
    这里写图片描述
    运行结果
    这里写图片描述

    用户拒绝授权重新授权

    但是我们有很多小程序的设计都是在用户同意授权的情况下,才能正常使用的。
    这里我们可以通过调用wx.openSetting的方法打开授权设置页面。
    修改我们的测试代码。
    这里写图片描述
    保存运行。点击图片。
    这里写图片描述
    就会打开授权管理页面。
    用户设置完成点击确定,会响应success函数。
    但是不管用户是否重新打开都是响应同一个函数。
    所以我们可以判断我们需要的权限是否打开,
    然后分别给出提示。
    我们修改wx.openSetting函数,保存运行。点击图片。

    wx.openSetting({
        success(settingdata){
            console.log(settingdata)
            if (settingdata.authSetting.scope.writePhotosAlbum){
                console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
            }else{
                console.log('获取权限失败,给出不给权限就无法正常使用的提示')
            }
        }
    })
    

    这里写图片描述
    这里有一个报错,我们的代码里settingdata.authSetting.scope.writePhotosAlbum这样的取值猛地一看并没有错误,这也是一个比较容易犯的一个错误,可能觉得没有错,后面的scope.writePhotosAlbum对应图中红框中的属性名。但是按程序理解的话,上面的数据结构如下:

    settingdata:{
      authSetting:{
        scope:{
          writePhotosAlbum:false
        }
      }  
    }
    

    所以这里我们修改一下settingdata.authSetting.scope.writePhotosAlbum,改成settingdata.authSetting[‘scope.writePhotosAlbum’]。这里就是js中的两种取值方式了,点取值和中括号取值,中括号有一个最大的有点就是中括号内可以写一个变量。
    保存运行,点击图片。先直接点击关闭,再点击图片,勾选权限,再点击关闭。日志如下:
    这里写图片描述
    源代码:百度云 链接:http://pan.baidu.com/s/1dFgtiHN 密码:77yw
    这节课的内容就到这里结束了。
    感谢您的阅读。
    我是莽夫,希望你开心。
    如果你觉得本文对你有帮助,请扫描文末二维码,支持博主原创。
    希望大家关注我的个人公众号ionic_
    这里写图片描述

  • 相关阅读:
    P3384 【模板】树链剖分
    AW136 邻值查找 (【模板】set)
    android布局自适应
    android HttpClient接口实现网络通信
    android加载html,以及js通讯
    mktime 和strtotime获取今日、昨日、上周、本月的起始时间戳和结束时间戳,
    mysql查询今天,昨天,近7天,近30天,本月,上一月数据方法
    瀑布流(masonry和infinitescroll)、(grid-a-licious)
    使用 JavaScript 修改浏览器 URL 地址栏
    测试UTF8编码的文件是不是加了BOM
  • 原文地址:https://www.cnblogs.com/xiaohuoni/p/7642258.html
Copyright © 2020-2023  润新知