이 글은 주로 WeChat 애플릿에서 여러 파일을 다운로드하기 위한 간단한 캡슐화 예제를 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다
Requirements
친구들과 공유하려면 홍보 이미지를 생성해야 합니다. 이 홍보 이미지에는 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 애플릿에서 서버 도메인 이름을 구성해야 합니다. 애플릿 백그라운드에서 서버 도메인 이름을 구성하세요. -settings-development settings-server 도메인 이름 자세한 내용은 WeChat 공식 문서를 참조하세요
여러 파일 다운로드를 캡슐화하여 저장하세요.
여러 파일을 다운로드하고 저장하기 전에 모든 파일을 성공적으로 다운로드해야 합니다. 반환이 성공했습니다
매개변수:
urls 다운로드 주소 배열을 포함하는 개체, 여러 URL 다운로드 지원 [url1, url2]
성공 다운로드가 성공했습니다(성공한 것으로 간주하려면 모든 파일을 성공적으로 다운로드해야 함) 콜백 매개변수 맵, 키(id) -> 값 ({id,savedFilePath})
fail 다운로드가 실패하면 한 메서드가 실패하는 한 호출됩니다. Failed
/**
* 多文件下载并且保存，强制规定，必须所有文件下载成功才算返回成功
*/
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);
}
}
})
}
}Full download.js file
/**
* 下载管理器
* 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 중국어 홈페이지를 주목해주세요!
관련 추천:
WeChat 애플릿 공유 페이지 홈페이지로 돌아가는 방법
위 내용은 WeChat 미니 프로그램에서 여러 파일을 다운로드하기 위한 간단한 패키지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
