微信小程序——保存图片到手机相册（代码详解）

前言：

首先我们要知道，如果小程序首次发起授权被拒绝之后，再次点击同一个按钮执行的wx.authorize(...)不会再弹出授权窗口。所以我们需要到引导用户到设置页面进行手动授权。
引导用户到设置页面授权的方式有两种：
第一种：使用小程序api ：wx.openSetting(...)打开设置页面
第二种：使用button按钮，并写上如下代码，点击此按钮打开设置页面

<button bindopensetting="onOpenSetting" open-type="openSetting" > 
	保存图片到手机
</button>

业务思路：

1、保存图片到相册的api：wx.saveImageToPhotosAlbum()需要用户授权scope.writePhotosAlbum，所以我们一开始就要先判断用户是否已经授予这个权限了。wx.getSetting(...)来获取用户授予了哪些权限，再进行判断。
2、如果用户没有授予这个权限
情况一：首次打开小程序，那么就调用
wx.authorize({scope: 'scope.writePhotosAlbum'})
来发起授权弹窗请求；
情况二：首次已经发起授权弹框了，但是用户拒绝授权了。我们就需要引导用户到设置页面进行手动授权。
3、用户已经授权了之后就可以使用wx.downloadFile(...)获取临时本地保存路径，然后调用wx.saveImageToPhotosAlbum(...)保存图片到临时路径相册中了。

详细代码：

1、saveImg.wxml

<view class="box">
    <image class="img" src="{
    {photoUrl}}" bindtap='onPreviewImage'></image>
    <view class="btn">
      <button wx:if="{
    {!isAuthSavePhoto}}" bindtap="onSaveToPhone"  class="btn button-hover" >
        保存图片到手机
      </button>
      <button wx:else bind:tap="showModal"  class="btn button-hover" >            
        保存图片到手机
      </button>
      <!-- 我们不使用点击按钮即打开设置页面的方式，而是使用上面那种先显示提示框让用户点确定按钮后再打开设置页面 -->
      <!-- <button wx:else bind:opensetting="onOpenSetting" open-type="openSetting"  class="btn button-hover" >  
        保存二维码到手机
      </button> -->