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

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

获取用户权限 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_