一个微信小程序下载保存视频的模块，支持进度显示

 

 封装好的代码，代码量很少但调用很方便，有完整的事件监听，将它保存为 saveFileUtil.js

其实代码还是偷懒了，比如 wx.downloadFile 里面只有 success 监听，没有 fail，自己改一下吧。

listener.onComplete 其实是绑定在 wx.saveVideoToPhotosAlbum（保存视频到相册，wx.downloadFile 才是下载动作）

其实你也可以让 fail 走 listener.onComplete 监听，直接 fail: listener.onComplete,

function downloadFile(url, listener) {
  listener.onStart && listener.onStart()
  const task = wx.downloadFile({
    url,
    success: res => {
      if (res.statusCode == 200) {
        wx.saveVideoToPhotosAlbum({
          filePath: res.tempFilePath,
          success: listener.onComplete,
          fail: listener.onComplete
        })
      }
    },
    // fail: listener.onComplete,
  })
  listener.onProgress && task.onProgressUpdate(listener.onProgress)
}

exports.downloadFile = downloadFile

 以下是调用

const downFileUtil = require('saveFileUtil') // 注意文件实际的路径

@param videoUrl 视频地址
@param listener 事件监听，object

downFileUtil.downloadFile(videoUrl, {
    onStart() {
        // 开始下载
    },
    onComplete(res) {
        // 下载完成或者失败都会调用这里
        console.log(res)
    },
    onProgress(res) {
        // 进度变化，建议有，体验更好
        // 这里调用原生的进度提示，你可以自己实现
        wx.showLoading({
            title: res.progress + "%"
        })
    }
})

当然，不只是保存视频，如果是保存图片，或者下载其它文件都可以，重新封装了以下

function downloadFile(url, listener) {
  return new Promise((resolve, reject) =>{
    listener.onStart && listener.onStart()
    const task = wx.downloadFile({
      url,
      success: res => {
        if (res.statusCode == 200) {
          resolve(res)
        }
      }
    })
    listener.onProgress && task.onProgressUpdate(listener.onProgress)
  })
}

function downloadVideo(url, listener) {
  downloadFile(url, listener).then(res => {
    wx.saveVideoToPhotosAlbum({
      filePath: res.tempFilePath,
      success: listener.onComplete,
      fail: listener.onComplete
    })
  })
}

function downloadImage(url, listener) {
  downloadFile(url, listener).then(res => {
    wx.saveImageToPhotosAlbum({
      filePath: res.tempFilePath,
      success: listener.onComplete,
      fail: listener.onComplete
    })
  })
}

function downloadVoice(url) {

}

module.exports = {
  downloadFile,
  downloadVideo,
  downloadImage,
  downloadVoice,
}

调用演示。下载视频图片和上面演示代码一样，但下载是用的是 downloadVideo 下载图片用的 downloadImage，下载其它文件如下使用

const downFileUtil = require('saveFileUtil')

// 下载视频

downFileUtil.downloadVideo(videoUrl, {
    onStart() {
        // 开始下载
    },
    onComplete(res) {
        // 下载动作完成
    },
    onProgress(res) {
        // 进度变化
    }
})

// 下载图片

downFileUtil.downloadImage(imageUrl, {
    onStart() {
        // 开始下载
    },
    onComplete(res) {
        // 下载动作完成
    },
    onProgress(res) {
        // 进度变化
    }
})

// 下载其它文件

downFileUtil.downloadFile(url, {
    onStart() {
        // 开始下载
    },
    onComplete(res) {
        // 下载动作完成
        // 下载文件此方法作废
    },
    onProgress(res) {
        // 进度变化
    }
}).then(res => {
    // 下载动作完成
    // TODO...
})