|
導(dǎo)讀微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一... 微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一項(xiàng)門檻非常高的創(chuàng)新,經(jīng)過(guò)將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。 本篇文章主要介紹了微信小程序之多文件下載的簡(jiǎn)單封裝示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧需求 需要生成一個(gè)宣傳的圖片分享到朋友圈,這個(gè)宣傳圖片包含二維碼,包含不同的背景圖片和不同的文字。對(duì)于這種圖片生成,我們考慮過(guò)使用服務(wù)端生成,但是這樣會(huì)比較耗服務(wù)器性能,所以最終決定使用本地生成。 首先小程序有一個(gè)限制,包不能大于2m,而且我們可能多個(gè)背景圖,所以計(jì)劃把背景圖和二維碼圖片放在服務(wù)端,這樣可以減少小程序包的大小,也可以靈活的切換背景圖。 在繪制分享圖的時(shí)候,可以直接使用互聯(lián)網(wǎng)地址,但是遇到了一個(gè)問(wèn)題,有可能不能生成圖片,所以我們需要把這個(gè)圖片文件下載下來(lái)。 下載文件的方法微信有API,但是返回的是文件的臨時(shí)路徑,只在小程序本次啟動(dòng)期間可以正常使用,如需持久保存,需在主動(dòng)調(diào)用 wx.saveFile,才能在小程序下次啟動(dòng)時(shí)訪問(wèn)得到。 所以我們先把下載文件和保存文件封裝 封裝下載并且保存一個(gè)文件 這個(gè)方法比較簡(jiǎn)單 參數(shù):一個(gè)對(duì)象,包含
/**
* 下載保存一個(gè)文件
*/
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("保存一個(gè)文件失敗");
if (fail) {
fail(e);
}
}
})
},
fail: function (e) {
console.info("下載一個(gè)文件失敗");
if (fail) {
fail(e);
}
}
})
}使用下載方法(wx.downloadFile(obj))需要在微信小程序配置服務(wù)器域名,服務(wù)器域名請(qǐng)?jiān)?小程序后臺(tái)-設(shè)置-開發(fā)設(shè)置-服務(wù)器域名 中進(jìn)行配置 ,具體請(qǐng)參考 微信官方文檔 封裝多文件下載并且保存 多文件下載并且保存,強(qiáng)制規(guī)定,必須所有文件下載成功才算返回成功 參數(shù):一個(gè)對(duì)象,包含
/**
* 多文件下載并且保存,強(qiáng)制規(guī)定,必須所有文件下載成功才算返回成功
*/
function downloadSaveFiles(obj) {
// console.info("準(zhǔn)備下載。。。");
let that = this;
let success = obj.success; //下載成功
let fail = obj.fail; //下載失敗
let urls = obj.urls; //下載地址 數(shù)組,支持多個(gè) url下載 [url1,url2]
let savedFilePaths = new Map();
let urlsLength = urls.length; // 有幾個(gè)url需要下載
for (let i = 0; i < urlsLength; i++) {
downloadSaveFile({
url: urls[i],
success: function (res) {
//console.dir(res);
//一個(gè)文件下載保存成功
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.
*/
/**
* 下載保存一個(gè)文件
*/
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("保存一個(gè)文件失敗");
if (fail) {
fail(e);
}
}
})
},
fail: function (e) {
console.info("下載一個(gè)文件失敗");
if (fail) {
fail(e);
}
}
})
}
/**
* 多文件下載并且保存,強(qiáng)制規(guī)定,必須所有文件下載成功才算返回成功
*/
function downloadSaveFiles(obj) {
// console.info("準(zhǔn)備下載。。。");
let that = this;
let success = obj.success; //下載成功
let fail = obj.fail; //下載失敗
let urls = obj.urls; //下載地址 數(shù)組,支持多個(gè) url下載 [url1,url2]
let savedFilePaths = new Map();
let urlsLength = urls.length; // 有幾個(gè)url需要下載
for (let i = 0; i < urlsLength; i++) {
downloadSaveFile({
url: urls[i],
success: function (res) {
console.dir(res);
//一個(gè)文件下載保存成功
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
}使用 首先導(dǎo)入 import download from "download.js" 之后調(diào)用 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("下載失敗");
}
);以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)! 相關(guān)推薦: 以上就是微信小程序之多文件下載的簡(jiǎn)單封裝的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章! 小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或者搜一下即可打開應(yīng)用。 |
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!