小程序下载实现
这是小程序结构图和实现效果
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>