WeChat applet saves pictures to the system album

Recently, I was working on a WeChat applet. Since it was also completed while studying, I recorded some problems that I encountered at ordinary times, which is convenient for future reference, and it is also convenient for others to learn from.

Now there is a requirement: to do a function of sharing the circle of friends in the applet. Since WeChat API does not support sharing Moments for now, I thought of another solution. First generate an image on the WeChat applet page, this image contains a QR code, and then use this image to send it to Moments, and other friends can share it in the WeChat Mini Program page. The QR code is recognized in the circle. Some of the problems encountered:

1. Image generation

2. Download pictures

3. Save the picture

 

solve:

1. Image generation: This is relatively simple, just pass in some parameters to the server, and the server returns an image URL address.

 

2. Image download: This API uses the WeChat applet: wx.downloadFile(OBJECT)

This api is a download file, which belongs to a network service. WeChat stipulates that when using network-related APIs, the server domain name needs to be configured. Simply put, it is to log in to the WeChat background, and configure the download domain name in the background.

 

3. Save the picture, this picture is saved in the system album, use WeChat API: wx.saveImageToPhotosAlbum(OBJECT)

User authorization is required to save pictures to the system album

 

Go directly to the code:

1. The code to download and save the picture to the system album:

function downloadImage(imageUrl) {
  // download file
  wx.downloadFile({
    url: imageUrl,
    success: function (res) {
      console.log("Download file: success");
      console.log(res);

      // Save the picture to the system album
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success(res) {
          console.log("Save image: success");
          wx.showToast({
            title: 'Save successfully',
          });
        },
        fail(res) {
          console.log("Save image: fail");
          console.log(res);
        }
      })
    },
    fail: function (res) {
      console.log("Download file: fail");
      console.log(res);
    }
  })
}

 

2. Save the authorization code for the album:

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

    if (!wx.saveImageToPhotosAlbum) {
      wx.showModal({
        title: 'Tips',
        content: 'The current WeChat version is too low to use this function, please upgrade to the latest WeChat version and try again. '
      })
      return;
    }

    // You can first query whether the user has authorized the scope "scope.writePhotosAlbum" through wx.getSetting
    wx.getSetting({
      success(res) {
        console.log("getSetting: success");
        if (!res.authSetting['scope.writePhotosAlbum']) {
          console.log("1-The "Save Picture" permission is not authorized");
          
          // interface call query
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success(){
              console.log("2-Authorization of "Save Picture" permission succeeded");
               util.downloadImage(downloadUrl);
            },
            fail(){
              // user denied authorization
              console.log("2-Failed to authorize the "Save Picture" permission");
              // open the settings page
              wx.openSetting({
                success: function(data) {
                  console.log("openSetting: success");
                },
                fail: function(data) {
                  console.log("openSetting: fail");
                }
              });
            }
          })
        } else {
          console.log("1-"Save Picture" permission has been authorized");
          util.downloadImage(downloadUrl)
        }
      },
      fail(res) {
        console.log("getSetting: success");
        console.log(res);
      }

    })
  
  },