当前位置:   article > 正文

一个微信小程序下载保存视频的模块,支持进度显示_const task = wx.downloadfile({

const task = wx.downloadfile({

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

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

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

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

  1. function downloadFile(url, listener) {
  2.   listener.onStart && listener.onStart()
  3.   const task = wx.downloadFile({
  4.     url,
  5.     success: res => {
  6.       if (res.statusCode == 200) {
  7.         wx.saveVideoToPhotosAlbum({
  8.           filePath: res.tempFilePath,
  9.           success: listener.onComplete,
  10.           fail: listener.onComplete
  11.         })
  12.       }
  13.     },
  14.     // fail: listener.onComplete,
  15.   })
  16.   listener.onProgress && task.onProgressUpdate(listener.onProgress)
  17. }
  18.  
  19. exports.downloadFile = downloadFile


 以下是调用

  1. const downFileUtil = require('saveFileUtil') // 注意文件实际的路径
  2.  
  3. @param videoUrl 视频地址
  4. @param listener 事件监听,object
  5.  
  6. downFileUtil.downloadFile(videoUrl, {
  7.     onStart() {
  8.         // 开始下载
  9.     },
  10.     onComplete(res) {
  11.         // 下载完成或者失败都会调用这里
  12.         console.log(res)
  13.     },
  14.     onProgress(res) {
  15.         // 进度变化,建议有,体验更好
  16.         // 这里调用原生的进度提示,你可以自己实现
  17.         wx.showLoading({
  18.             title: res.progress + "%"
  19.         })
  20.     }
  21. })


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

  1. function downloadFile(url, listener) {
  2.   return new Promise((resolve, reject) =>{
  3.     listener.onStart && listener.onStart()
  4.     const task = wx.downloadFile({
  5.       url,
  6.       success: res => {
  7.         if (res.statusCode == 200) {
  8.           resolve(res)
  9.         }
  10.       }
  11.     })
  12.     listener.onProgress && task.onProgressUpdate(listener.onProgress)
  13.   })
  14. }
  15.  
  16. function downloadVideo(url, listener) {
  17.   downloadFile(url, listener).then(res => {
  18.     wx.saveVideoToPhotosAlbum({
  19.       filePath: res.tempFilePath,
  20.       success: listener.onComplete,
  21.       fail: listener.onComplete
  22.     })
  23.   })
  24. }
  25.  
  26. function downloadImage(url, listener) {
  27.   downloadFile(url, listener).then(res => {
  28.     wx.saveImageToPhotosAlbum({
  29.       filePath: res.tempFilePath,
  30.       success: listener.onComplete,
  31.       fail: listener.onComplete
  32.     })
  33.   })
  34. }
  35.  
  36. function downloadVoice(url) {
  37.  
  38. }
  39.  
  40. module.exports = {
  41.   downloadFile,
  42.   downloadVideo,
  43.   downloadImage,
  44.   downloadVoice,
  45. }


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

  1. const downFileUtil = require('saveFileUtil')
  2.  
  3. // 下载视频
  4.  
  5. downFileUtil.downloadVideo(videoUrl, {
  6.     onStart() {
  7.         // 开始下载
  8.     },
  9.     onComplete(res) {
  10.         // 下载动作完成
  11.     },
  12.     onProgress(res) {
  13.         // 进度变化
  14.     }
  15. })


 
// 下载图片
 

  1. downFileUtil.downloadImage(imageUrl, {
  2.     onStart() {
  3.         // 开始下载
  4.     },
  5.     onComplete(res) {
  6.         // 下载动作完成
  7.     },
  8.     onProgress(res) {
  9.         // 进度变化
  10.     }
  11. })


 
// 下载其它文件
 

  1. downFileUtil.downloadFile(url, {
  2.     onStart() {
  3.         // 开始下载
  4.     },
  5.     onComplete(res) {
  6.         // 下载动作完成
  7.         // 下载文件此方法作废
  8.     },
  9.     onProgress(res) {
  10.         // 进度变化
  11.     }
  12. }).then(res => {
  13.     // 下载动作完成
  14.     // TODO...
  15. })


 
 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/185664
推荐阅读
  

闽ICP备14008679号