微信小程序保存图片到系统相册

阅读更多

最近在做微信小程序，由于也是一边学习一边完成，把一些平时遇到的问题记录一下，方便以后查阅，也方便后面的人借鉴。

现在有一个需求：要在小程序里做一个分享朋友圈的功能。由于微信API暂时不支持分享朋友圈，于是想到另外一种方案，在微信小程序页面里先生成一个图片，这个图片里带二维码，然后再用这个图片发朋友圈，其他朋友就可以在朋友圈里识别这个二维码了。其中遇到的一些问题：

1.图片的生成

2.图片的下载

3.图片的保存

 

解决：

1.图片生成：这个比较简单，给服务端传入一些参数，服务端返回一个图片URL地址就可以了。

 

2.图片的下载：这个用到微信小程序的API：wx.downloadFile(OBJECT)

这个api是下载文件，属于网络服务，微信规定在用到网络相关的API时需要进行服务器域名配置，简单说就是登录微信后台，把这个下载域名配置在后台中就可以了。

 

3.图片的保存，这个图片保存在系统相册中，用到微信API：wx.saveImageToPhotosAlbum(OBJECT)

保存图片到系统相册需要用户授权

 

直接上代码：

1.下载和保存图片到系统相册中的代码：

function downloadImage(imageUrl) {
  // 下载文件
  wx.downloadFile({
    url: imageUrl,
    success: function (res) {
      console.log("下载文件：success");
      console.log(res);

      // 保存图片到系统相册
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success(res) {
          console.log("保存图片：success");
          wx.showToast({
            title: '保存成功',
          });
        },
        fail(res) {
          console.log("保存图片：fail");
          console.log(res);
        }
      })
    },
    fail: function (res) {
      console.log("下载文件：fail");
      console.log(res);
    }
  })
}

 

2.保存相册的授权代码：

onSavePicClick: function(){
    console.log("onSavePicClick");
    var downloadUrl = this.data.imageUrl;
    console.log("downloadUrl=" + downloadUrl);

    if (!wx.saveImageToPhotosAlbum) {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
      return;
    }

    // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope
    wx.getSetting({
      success(res) {
        console.log("getSetting: success");
        if (!res.authSetting['scope.writePhotosAlbum']) {
          console.log("1-没有授权《保存图片》权限");
          
          // 接口调用询问
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success(){
              console.log("2-授权《保存图片》权限成功");
               util.downloadImage(downloadUrl);
            },
            fail(){
              // 用户拒绝了授权
              console.log("2-授权《保存图片》权限失败");
              // 打开设置页面
              wx.openSetting({
                success: function(data) {
                  console.log("openSetting: success");
                },
                fail: function(data) {
                  console.log("openSetting: fail");
                }
              });
            }
          })
        } else {
          console.log("1-已经授权《保存图片》权限");
          util.downloadImage(downloadUrl)
        }
      },
      fail(res) {
        console.log("getSetting: success");
        console.log(res);
      }

    })
  
  },