小程序 下载功能

小程序下载实现

   这是小程序结构图和实现效果

1.config->httpconfig.js 这是个工具js

function sendPost(cb, data, url) {
  wx.request({
    url: url,
    method: 'POST',
    dataType: "json",
    header: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    data: data,
    success: function (res) {      
      cb(res.data)
    },
    fail: function (res) {

    }
  });
}
function sendGet(success, data, url) {
  wx.request({
    url: url,
    method: 'GET',
    header: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    data: data,
    success: function (res) {
      success(res.data);
    },
    fail: function(res) {
      
    }
  });
}

function down(success, progressUpdate, url){
  const downloadTask = wx.downloadFile({
    url: url, 
    success: function (res) {
      if (res.statusCode === 200) {
        success(res);
      }
    }
  })
  downloadTask.onProgressUpdate((res) => {
    progressUpdate(res);
  })
}
// 模块对外暴露的接口
module.exports = {
  sendPost: sendPost,
  sendGet: sendGet,
  down: down
}
// 或下面的暴露方式
// exports.init = init;

2.下载图片，实现位置pages->htmls->html5.js。调用config.down(下载成功数据,进度条数据,url)

var config = require('../../config/httpconfig.js');
Page({
  
  data: {
    img:'',
    progress:0
  },
  down:function(){
    var that = this;
    config.down(function(data){
      that.setData({
        img: data.tempFilePath
      });
      wx.saveImageToPhotosAlbum({
        filePath: data.tempFilePath,
        success: function (data) {
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000
          })
        },
        complete(data) {
          console.log(data);
        }
      })
    },function(data){
      console.log('下载进度', data.progress);
      that.setData({
        progress: data.progress
      })
    },"http://www.xiexingcun.com/Poetry/6/images/53b.jpg");
  },
  preview: function () {
    wx.previewImage({
      current: this.data.img,
      urls: this.data.img
    })
  },
})

3.页面实现

<button bindtap='down'>下载</button>
<view><image src='{{img}}' bindtap='preview'></image></view>
<text>{{progress}}</text>