집 >웹 프론트엔드 >JS 튜토리얼 >WeChat 애플릿의 다중 파일 다운로드 캡슐화 사용

WeChat 애플릿의 다중 파일 다운로드 캡슐화 사용

php中世界最好的语言원래의: 2018-03-23 09:54:422412검색

이번에는 WeChat 미니 프로그램의 다중 파일 다운로드 패키징 사용에 대해 알려 드리겠습니다. WeChat 미니 프로그램의 다중 파일 다운로드 패키징 사용 시 주의 사항 은 무엇입니까?

요구사항

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

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

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

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

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

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

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

매개변수:

id를 포함한 개체 통과하지 못한 경우 다운로드해야 합니다. ID가 필요한 이유는 여러 파일을 다운로드해야 하기 때문입니다.
url의 네트워크 주소입니다. 다운로드된 파일(WeChat 애플릿 백그라운드 구성이 필요합니다. 구체적인 구성 방법은 WeChat 공식 문서를 참조하세요.)
success 성공 콜백의 반환 매개변수는 id, saveFilePath를 포함하는 개체입니다.
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 mini 프로그램에서 서버 도메인 이름을 구성해야 합니다. 미니 프로그램 백그라운드에서 서버 도메인 이름을 구성하세요. 설정-개발 설정-서버 도메인 이름 자세한 내용은 공식 WeChat 설명서를 참조하세요

여러 파일 다운로드 패키지 및 저장

복수 파일을 다운로드하고 저장하기 전에 반드시 모든 파일을 성공적으로 다운로드해야 합니다. 반환 성공

매개변수:

urls 다운로드 주소 배열을 포함하는 개체, 여러 URL 다운로드 지원 [url1, url2]
다운로드 성공 성공(성공한 것으로 간주되려면 모든 파일을 성공적으로 다운로드해야 함) 콜백 매개변수 map, key(id) -> value ({id,savedFilePath})
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("下载失败");
  }
);

를 호출하세요. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요.