You need to generate a publicity picture to share in moments, which contains two-dimensional code, different background pictures and different text. For this type of image generation, we considered using server-side generation, but this would be too costly for the server, so we decided to use local generation.

First of all, the package cannot be larger than 2m, and we may have multiple background images, so we plan to put the background image and two-dimensional code image on the server side, so as to reduce the size of the package and flexibly switch the background image.

We can directly use the Internet address when drawing the shared picture, but we have encountered a problem that the picture may not be generated, so we need to download the picture file.

Wechat has API to download the file, but it returns the temporary path of the file, which can only be used normally during the startup of the small program. If you want to save the file permanently, you need to actively call wx.saveFile to access it at the next startup of the small program.

So we first download the file and save the file package

Encapsulate the download and save a file

This is the easy way

Parameter: an object containing

  • Id Specifies the ID of the downloaded file. If you do not upload the downloaded URL by default, the id is required because we need to download multiple files to distinguish one file from the other
  • Url Network address for downloading files (wechat applet background configuration is required, please refer to wechat official documents for specific configuration methods)
  • The success callback returns an object containing the id,savedFilePath
  • Fail A callback, a download, or a save
/** * Download and save a file */function downloadSaveFile(obj) {
 let that = this;
 let success = obj.success;
 let fail = obj.fail;
 let id = "";
 let url = obj.url;
 if (obj.id){
 id = obj.id;
 }else{
 id = url;
 }
 // console.info("%s start downloading...", obj.url);
 wx.downloadFile({
 url: obj.url,
 success: function (res) {
 wx.saveFile({
 tempFilePath: res.tempFilePath,
 success: function (result) {
 result.id = id;
 if (success) {
 success(result);
 }
 },
 fail: function (e) {
 console.info("Failed to save a file");
 if (fail) {
 fail(e);
 }
 }
 })
 },
 fail: function (e) {
 console.info("Failed to download a file");
 if(fail) { fail(e); }}})}Copy the code

To use the download method (wx.downloadfile (obj)), you need to configure the server domain name in the wechat applet. Configure the server domain name in the applet background – Setup – Development Settings – Server domain name. For details, refer to the official wechat document

Package multiple files to download and save

Download and save multiple files. It is mandatory that all files must be downloaded successfully before success is returned

Parameter: an object containing

  • Array of urls, supporting multiple urls [URL1, urL2]
  • Map, key(id) -> value ({id,savedFilePath})
  • Fail The download fails. If one method fails, the call fails
/** * Multiple files downloaded and saved, mandatory, all files downloaded successfully to return success */function downloadSaveFiles(obj) {
 // console.info("Ready to download...");
 let that = this;
 letsuccess = obj.success; // Download succeededletfail = obj.fail; // Download failedleturls = obj.urls; [urL1,url2]let savedFilePaths = new Map();
 leturlsLength = urls.length; // There are several urls to downloadfor (let i = 0; i < urlsLength; i++) {
 downloadSaveFile({
 url: urls[i],
 success: function(res) { //console.dir(res); // A file was successfully downloaded and savedlet savedFilePath = res.savedFilePath;
 
 savedFilePaths.set(res.id, res);
 console.info("savedFilePath:%s", savedFilePath);
 if(savedFilePaths. Size == urlsLength) {// All urls are successfulif (success){
 success(savedFilePaths)
 }
 
 }
 },
 fail: function (e) {
 console.info("Download failed");
 if(fail) { fail(e); }})}}Copy the code

The complete download.js file

/** * Download manager * Created by universal on 2018/1/27. */ ** * Download save a file */function downloadSaveFile(obj) {
 let that = this;
 let success = obj.success;
 let fail = obj.fail;
 let id = "";
 let url = obj.url;
 if (obj.id){
 id = obj.id;
 }else{
 id = url;
 }
 // console.info("%s start downloading...", obj.url);
 wx.downloadFile({
 url: obj.url,
 success: function (res) {
 wx.saveFile({
 tempFilePath: res.tempFilePath,
 success: function (result) {
 result.id = id;
 if (success) {
 success(result);
 }
 },
 fail: function (e) {
 console.info("Failed to save a file");
 if (fail) {
 fail(e);
 }
 }
 })
 },
 fail: function (e) {
 console.info("Failed to download a file");
 if(fail) { fail(e); }}})} /** * multiple files are downloaded and saved, forcing all files to be downloaded successfully */function downloadSaveFiles(obj) {
 // console.info("Ready to download...");
 let that = this;
 letsuccess = obj.success; // Download succeededletfail = obj.fail; // Download failedleturls = obj.urls; [urL1,url2]let savedFilePaths = new Map();
 leturlsLength = urls.length; // There are several urls to downloadfor (let i = 0; i < urlsLength; i++) {
 downloadSaveFile({
 url: urls[i],
 success: function(res) { console.dir(res); // A file was successfully downloaded and savedlet savedFilePath = res.savedFilePath;
 
 savedFilePaths.set(res.id, res);
 console.info("savedFilePath:%s", savedFilePath);
 if(savedFilePaths. Size == urlsLength) {// All urls are successfulif (success){
 success(savedFilePaths)
 }
 
 }
 },
 fail: function (e) {
 console.info("Download failed");
 if (fail) {
 fail(e);
 }
 }
 })
 }
}
module.exports = {
 downloadSaveFiles: downloadSaveFiles
}
Copy the code

use

The first import

import download from "download.js"
Copy the code

After the call

 let url1 = 'https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU2Nzc0Njk3OCIsImRvbWFpbiI6InV0YW50b3V0aWFvI n0=';
 let url2 = 'https://xcx.upload.utan.com/article/coverimage/2018/01/26/eyJwaWMiOiIxNTE2OTcyNDg0NDUzOSIsImRvbWFpbiI6InV0YW50b3V0aWFvI n0=';
download.downloadSaveFiles({
 urls: [url1, url2],
 success: function (res) {
 // console.dir(res);
 
 console.info(res.get(url2).savedFilePath)
 },
 fail: function (e) {
 console.info("Download failed"); });Copy the code