WeChat 미니 프로그램에서 다중 파일 다운로드를 구현하는 방법

이 글은 주로 WeChat 미니 프로그램에서 여러 파일을 다운로드하기 위한 간단한 캡슐화 예제를 소개합니다. 이제 이를 공유하고 참고용으로 제공합니다.

요구 사항

친구들과 공유하려면 홍보 이미지를 생성해야 합니다. 이 홍보 이미지에는 QR 코드, 다양한 배경 이미지 및 다양한 텍스트가 포함되어 있습니다. 이런 종류의 이미지 생성을 위해 우리는 서버 측 생성을 사용하는 것을 고려했지만 서버 성능이 더 많이 소모되므로 결국 로컬 생성을 사용하기로 결정했습니다.

먼저 미니 프로그램에는 제한이 있는데, 패키지가 2m를 넘을 수 없고 배경 이미지가 여러 개 있을 수 있으므로 배경 이미지와 QR 코드 이미지를 서버에 올려서 크기를 줄일 수 있도록 할 계획입니다. 미니 프로그램 패키지의 배경 이미지를 전환하여 유연하게 만듭니다.

공유된 이미지를 그릴 때 인터넷 주소를 직접 사용해도 되지만, 문제가 발생하여 이미지를 생성하지 못할 수도 있어 이미지 파일을 다운로드 받아야 합니다.

WeChat에는 파일 다운로드를 위한 API가 있지만 파일의 임시 경로를 반환하므로 현재 미니 프로그램 시작 중에만 정상적으로 사용할 수 있습니다. 지속적으로 저장해야 하는 경우 wx를 적극적으로 호출해야 합니다. 다음에 미니 프로그램이 시작되기 전에 saveFile에 액세스합니다.

그래서 먼저 다운로드한 파일과 저장된 파일을 캡슐화합니다.

다운로드를 캡슐화하고 파일을 저장합니다.

이 방법은 비교적 간단합니다.

매개변수:

1. id를 포함한 개체 통과하지 못한 경우 다운로드해야 합니다. ID가 필요한 이유는 여러 파일을 다운로드해야 하기 때문입니다.

2. url의 네트워크 주소입니다. 다운로드된 파일(WeChat 애플릿 백그라운드 구성이 필요합니다. 구체적인 구성 방법은 WeChat 공식 문서를 참조하세요.)

3. success 성공 콜백의 반환 매개변수는 id, saveFilePath를 포함하는 개체입니다.

4. fail 실패 콜백, 다운로드 실패 , 저장 모두 실패로 간주됩니다

/**
 * 下载保存一个文件
 */
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 开始下载。。。", 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("保存一个文件失败");
          if (fail) {
            fail(e);
          }
        }
      })
    },
    fail: function (e) {
      console.info("下载一个文件失败");
      if (fail) {
        fail(e);
      }
    }
  })
}

다운로드 방법(wx.downloadFile(obj))을 사용하세요. 서버 도메인 이름은 위챗 미니 프로그램에서 구성해야 합니다. 미니 프로그램 백그라운드에서 서버 도메인 이름을 구성하세요- 설정-개발 설정-서버 도메인 이름 자세한 내용은 공식 WeChat 설명서를 참조하세요

여러 파일을 캡슐화하여 다운로드 및 저장

더 보기 전에 모든 파일을 성공적으로 다운로드해야 합니다. 반환은 성공입니다

매개변수:

1. urls 다운로드 주소 배열을 포함하는 개체, 여러 URL 다운로드 지원 [url1, url2]

2. success 다운로드 성공(성공한 것으로 간주하려면 모든 파일을 성공적으로 다운로드해야 함) 콜백 매개변수 맵, 키(id) -> 값 ({id,savedFilePath})

3. fail 다운로드에 실패하면 한 가지 메소드가 실패하는 한 호출이 실패합니다

/**
 * 多文件下载并且保存，强制规定，必须所有文件下载成功才算返回成功
 */
function downloadSaveFiles(obj) {
  // console.info("准备下载。。。");
  let that = this;
  let success = obj.success; //下载成功
  let fail = obj.fail; //下载失败
  let urls = obj.urls; //下载地址 数组，支持多个 url下载 [url1,url2]
  let savedFilePaths = new Map();
  let urlsLength = urls.length; // 有几个url需要下载
  for (let i = 0; i < urlsLength; i++) {
    downloadSaveFile({
      url: urls[i],
      success: function (res) {
        //console.dir(res);
        //一个文件下载保存成功
        let savedFilePath = res.savedFilePath;
                
        savedFilePaths.set(res.id, res);
        console.info("savedFilePath:%s", savedFilePath);
        if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功
          if (success){
            success(savedFilePaths)
          }
          
        }
      },
      fail: function (e) {
        console.info("下载失败");
        if (fail) {
          fail(e);
        }

      }
    })
  }
}

download.js 파일 완료

/**
 * 下载管理器
 * Created by 全科 on 2018/1/27.
 */
/**
 * 下载保存一个文件
 */
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 开始下载。。。", 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("保存一个文件失败");
          if (fail) {
            fail(e);
          }
        }
      })

    },
    fail: function (e) {
      console.info("下载一个文件失败");
      if (fail) {
        fail(e);
      }

    }
  })
}
/**
 * 多文件下载并且保存，强制规定，必须所有文件下载成功才算返回成功
 */
function downloadSaveFiles(obj) {
  // console.info("准备下载。。。");
  let that = this;
  let success = obj.success; //下载成功
  let fail = obj.fail; //下载失败
  let urls = obj.urls; //下载地址 数组，支持多个 url下载 [url1,url2]
  let savedFilePaths = new Map();
  let urlsLength = urls.length; // 有几个url需要下载
  for (let i = 0; i < urlsLength; i++) {
    downloadSaveFile({
      url: urls[i],
      success: function (res) {
        console.dir(res);
        //一个文件下载保存成功
        let savedFilePath = res.savedFilePath;                
        savedFilePaths.set(res.id, res);
        console.info("savedFilePath:%s", savedFilePath);
        if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功
          if (success){
            success(savedFilePaths)
          }          
        }
      },
      fail: function (e) {
        console.info("下载失败");
        if (fail) {
          fail(e);
        }
      }
    })
  }
}
module.exports = {
  downloadSaveFiles: downloadSaveFiles
}

를 사용하여 먼저

import download from "download.js"

를 가져온 다음

let url1 = 'https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU2Nzc0Njk3OCIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=';
let url2 = 'https://xcx.upload.utan.com/article/coverimage/2018/01/26/eyJwaWMiOiIxNTE2OTcyNDg0NDUzOSIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=';
download.downloadSaveFiles({
  urls: [url1, url2],
  success: function (res) {
    // console.dir(res);
   
    console.info(res.get(url2).savedFilePath)
  },
  fail: function (e) {
    console.info("下载失败");
  }
);

를 호출하세요. 위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

스크롤러를 구현하여 페이지로 돌아가서 vue에서 스크롤 위치를 기억하는 방법

자바스크립트에서 일반적으로 사용되는 도구 클래스 캡슐화에 대한 자세한 소개(상세 튜토리얼)

vue의 소스코드 입력 파일 자세히 소개(자세한 튜토리얼)

위 내용은 WeChat 미니 프로그램에서 다중 파일 다운로드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!