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

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

现在有一个需求:要在小程序里做一个分享朋友圈的功能。由于微信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);
      }

    })
  
  },

 

猜你喜欢

转载自wengyoulong.iteye.com/blog/2397795
今日推荐