登录 | 注册
小程序交流 +关注 已有0人关注 +发表新主题

微信小程序下载进度条

发表在 2019-3-12 09:47 来自PC 复制链接 手机看帖 扫一扫!手机看帖更爽 0 419

微信小程序下载进度条

微信小程序下载进度条
一、downloadTask/UploadTask理解
downloadTask
一个可以监听下载进度变化事件,以及取消下载任务的对象
本质:对象
功能一:监听下载进度变化
功能二:取消下载任务
UploadTask
一个可以监听上传进度变化事件,以及取消上传任务的对象
本质:对象
功能一:监听上传进度变化
功能二:取消上传任务
1.1、监听下载进度变化事件
downloadTask.onProgressUpdate((res) => {
  console.log('下载进度', res.progress)
  console.log('已经下载的数据长度', res.totalBytesWritten)
  console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
})
1.2、取消监听下载进度变化事件
DownloadTask.offProgressUpdate(function callback)
1.3、 监听 HTTP Response Header 事件
DownloadTask.onHeadersReceived(function callback)
1.4、 取消监听 HTTP Response Header 事件
DownloadTask.offHeadersReceived(function callback)
1.5、中断下载任务
DownloadTask.abort()
二、downloadFile 下载文件理解
本质:方法
功能:下载文件资源到本地
返回值:downloadTask对象
success 返回的两个参数
tempFilePath
临时文件路径。
如果没传入 filePath 指定文件存储路径,则下载后的文件会存储到一个临时文件
string
statusCode
开发者服务器返回的 HTTP 状态码
number
wx.downloadFile({
  url: 'https://example.com/audio/123',
  header:'', //HTTP 请求的 HeaderHeader 中不能设置 Referer
  filePath:'',//指定文件下载后存储的路径
  success(res) {
    // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调
    //业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath
      })
    }
  },
  fail(err){
      console.log(err)
  },
  complete(res){
      console.log(res)
  }
})
三、saveImageToPhotosAlbum 理解
功能:保存图片到系统相册
wx.saveImageToPhotosAlbum({
  filePath:'',
  success(res) {
      
  }
  fail(err){
      
  },
  complete(res){
      
  }
})
四、代码展示
/**
   * [downloadPhoto 下载照片
   */
  downloadPhoto (e) {
    let imgUrl = e.currentTarget.dataset.src
    // 下载监听进度
    const downloadTask = wx.downloadFile({
      url: imgUrl,
      success: function (res) {
        console.log(res)
        if (res.statusCode === 200) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (res) {
              wx.showToast({
                title: '保存图片成功'
              })
            },
            fail: function (res) {
              wx.showToast({
                title: '保存图片失败'
              })
            }
          })
        }
      }
    })
    downloadTask.onProgressUpdate((res) => {
      if (res.progress === 100) {
        this.setData({
          progress: ''
        })
      } else {
        this.setData({
          progress: res.progress + '%'
        })
      }
    })
  }

扫描二维码,手机查看本帖
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部
快速回复 发贴