首頁 >web前端 >js教程 >在微信小程式中如何實現多檔案下載

在微信小程式中如何實現多檔案下載

亚连
亚连原創
2018-06-09 10:09:324843瀏覽

本篇文章主要介紹了微信小程式之多文件下載的簡單封裝範例,現在分享給大家,也給大家做個參考。

需求

需要產生一個宣傳的圖片分享到朋友圈,這個宣傳圖片包含二維碼,包含不同的背景圖片和不同的文字。對於這種圖片生成,我們考慮過使用服務端生成,但是這樣會比較耗伺服器效能,所以最終決定使用本地生成。

首先小程式有一個限制,套件不能大於2m,而且我們可能多個背景圖,所以打算把背景圖和二維碼圖片放在服務端,這樣可以減少小程式包的大小,也可以靈活的切換背景圖。

在繪製分享圖的時候,可以直接使用網路位址,但遇到了一個問題,有可能不能產生圖片,所以我們需要下載這個圖片檔案。

下載檔案的方法微信有API,但是傳回的是檔案的臨時路徑,只在小程式本次啟動期間可以正常使用,如需持久保存,需在主動呼叫wx.saveFile,才能在小程式下次啟動時存取得到。

所以我們先把下載檔案和儲存檔案封裝

封裝下載並且儲存一個檔案

這個方法比較簡單

參數:一個對象,包含

  1. id ​​需要下載檔案的id,如果不傳預設是下載的url,之所以需要id,是因為我們要做多檔案下載,可以區分下載的是一個檔案

  2. url 下載檔案的網路位址(需要微信小程式後台配置,具體設定方法請參考微信官方文件)

  3. success 成功回呼回傳參數是一個物件包含id,savedFilePath

  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))需要在微信小程式配置伺服器網域名稱,伺服器網域請在小程式後台-設定-開發設定-伺服器網域中進行配置,具體請參考微信官方文件

封裝多文件下載並且保存

多文件下載並且保存,強制規定,必須所有文件下載成功才算返回成功

參數:一個對象,包含

  1. urls 下載位址數組,支援多個url下載[url1,url2]

  2. success 下載成功(必須所有檔案下載成功才算回傳成功) 回呼參數map ,key(id) -> value ({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 = &#39;https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU2Nzc0Njk3OCIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=&#39;;
let url2 = &#39;https://xcx.upload.utan.com/article/coverimage/2018/01/26/eyJwaWMiOiIxNTE2OTcyNDg0NDUzOSIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=&#39;;
download.downloadSaveFiles({
  urls: [url1, url2],
  success: function (res) {
    // console.dir(res);
   
    console.info(res.get(url2).savedFilePath)
  },
  fail: function (e) {
    console.info("下载失败");
  }
);

上面是我整理給大家的,希望未來會對大家有幫助。

相關文章:

在vue中scroller返回頁面並且記住滾動位置如何實現

詳細介紹javascript中常用工具類的封裝(詳細教學)

在vue中詳細介紹原始碼入口檔案(詳細教學)

#

以上是在微信小程式中如何實現多檔案下載的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn