在微信小程序中保存网络图片

微信代码片断点这里, 该功能须要添加appid才能进行正常的测试。

---

在小程序的文档中咱们得知，wx.saveImageToPhotosAlbum 是用来保存图片到相册的。

可是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径，不支持网络图片路径，意味着咱们不能直接调用这个接口。。

所以先须要把该文件下载至本地，使用 wx.downloadFile 。

但值得注意的是小程序只能够跟指定的域名与进行网络通讯，也就是说下载图片以前，咱们须要先去微信公众者平台的开发设置里设置uploadFile合法域名。

示例代码以下：

<!-- index.wxml -->
<image class="qr-code" src="{{url}}" mode="aspectFill" />
<button class="text" bindtap="saveImage">保存图片</button>

// index.js
const app = getApp()

Page({
  data: {
    url: 'https://avatars3.githubusercontent.com/u/23024075?s=460&v=4'
  },

  // 保存图片
  saveImage() {
    this.wxToPromise('downloadFile', {
        url: this.data.url
      })
      .then(res => this.wxToPromise('saveImageToPhotosAlbum', {
        filePath: res.tempFilePath
      }))
      .then(res => {
        // do something
        wx.showToast({ title: '保存成功~',icon: 'none' });
      })
      .catch(err) => {
        console.log(err);

        // 若是是用户本身取消的话保存图片的话
        // if (~err.errMsg.indexOf('cancel')) return;
      })
  },

  /**
   * 将 callback 转为易读的 promise
   * @returns [promise]
   */
  wxToPromise(method, opt) {
    return new Promise((resolve, reject) => {
      wx[method]({
        ...opt,
        success(res) {
          opt.success && opt.success();
          resolve(res)
        },
        fail(err) {
          opt.fail && opt.fail();
          reject(err)
        }
      })
    });
  },
})

而后理论上就能够保存图片了... 用户第一次在咱们的小程序使用保存图片这个功能是会弹出一个受权弹框，若是用户手滑点了拒绝受权后再点一次保存图片，而后就会发现什么反应都没有了。。。

出现这样的缘由是由于这个受权弹框只会出现一次，因此咱们得想办法再让用户从新受权一次。这时就想到使用 wx.authorize .

可是通过测试后发现，使用 wx.authorize 后，会报 authorize:fail auth deny 的错误。而后通过查阅资料得知：

• 若是用户未接受或拒绝过此权限，会弹窗询问用户，用户点击赞成后方可调用接口；
• 若是用户已受权，能够直接调用接口；
• 若是用户已拒绝受权，则不会出现弹窗，而是直接进入接口 fail 回调。请开发者兼容用户拒绝受权的场景。

emmm... 那这样效果固然不符合咱们预期，只能在换一种方式。这时就想到了使用<button open-type="openSetting"/>，在交互上作一个提示弹框，引导用户从新受权：

<image class="qr-code" src="{{url}}" mode="aspectFill" />
<button class="text" bindtap="saveImage">保存图片</button>

<!-- 简陋版提示 -->
<view wx:if="{{showDialog}}" class="dialog-wrap">
  <view class="dialog">
    这是一段提示用户受权的提示语
    <view class="dialog-footer">
      <button
        class="btn"
        open-type="openSetting"
        bindtap="confirm" >
         受权
      </button>
      <button class="btn" bindtap="cancel">取消</button>
    </view>
  </view>
</view>

const app = getApp()

Page({
  data: {
    url: 'https://avatars3.githubusercontent.com/u/23024075?s=460&v=4',
    showDialog: false,
  },

  saveImage() {
    this.wxToPromise('downloadFile', {
        url: this.data.url
      })
      .then(res => this.wxToPromise('saveImageToPhotosAlbum', {
        filePath: res.tempFilePath
      }))
      .then(res => {
        console.log(res);
        // this.hide();
        wx.showToast({
          title: '保存成功~',
          icon: 'none',
        });
      })
      .catch(({ errMsg }) => {
        console.log(errMsg)
        // if (~errMsg.indexOf('cancel')) return;
        if (!~errMsg.indexOf('auth')) {
          wx.showToast({ title: '图片保存失败，稍后再试', icon: 'none' });
        } else {
          // 调用受权提示弹框
          this.setData({
            showDialog: true
          })
        };
      })
  },

  // callback to promise
  wxToPromise(method, opt) {
    return new Promise((resolve, reject) => {
      wx[method]({
        ...opt,
        success(res) {
          opt.success && opt.success();
          resolve(res)
        },
        fail(err) {
          opt.fail && opt.fail();
          reject(err)
        }
      })
    });
  },

  confirm() {
    this.setData({
      showDialog:false
    })
  },

  cancel() {
    this.setData({
      showDialog: false
    })
  }
})

最后这样就完成啦~

---

https://anran758.github.io/bl...