黔优媒体网-软文媒体自助发稿平台!
  1. 行业资讯
  2. 正文

微信小程序之多文件下载的简单封装

来源:黔优媒体网   时间:2024-09-19

本篇文章主要介绍了微信小程序之多文件下载的简单封装示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

需求

需要生成一个宣传的图片分享到朋友圈,这个宣传图片包含二维码,包含不同的背景图片和不同的文字。对于这种图片生成,我们考虑过使用服务端生成,但是这样会比较耗服务器性能,所以最终决定使用本地生成。

首先小程序有一个限制,包不能大于2m,而且我们可能多个背景图,所以计划把背景图和二维码图片放在服务端,这样可以减少小程序包的大小,也可以灵活的切换背景图。

在绘制分享图的时候,可以直接使用互联网地址,但是遇到了一个问题,有可能不能生成图片,所以我们需要把这个图片文件下载下来。

下载文件的方法微信有API,但是返回的是文件的临时路径,只在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,才能在小程序下次启动时访问得到。

所以我们先把下载文件和保存文件封装

封装下载并且保存一个文件

这个方法比较简单

参数:一个对象,包含

id 需要下载文件的id,如果不传默认是下载的url,之所以需要id,是因为我们要做多文件下载,可以区分下载的是一个文件

url 下载文件的网络地址(需要微信小程序后台配置,具体配置方法请参考微信官方文档)

success 成功回调 返回参数是一个对象 包含 id,savedFilePath

fail 失败回调 ,下载失败,保存都是都算失败

/**
 * 下载保存一个文件
function downloadSaveFile(obj) {
 let that = this;
 let success = obj.success;
 let fail = obj.fail;
 let id = 
 let url = obj.url;
 if (obj.id){
 id = obj.id;
 }else{
 id = url;
 // console.info( %s 开始下载。。。 , obj.url);
 wx.downloadFile({
 url: obj.url,
 success: function (res) {
 wx.saveFile({
 tempFilePath: res.tempFilePath,
 success: function (result) {
 result.id = id;
 if (success) {
 success(result);
 fail: function (e) {
 console.info( 保存一个文件失败 
 if (fail) {
 fail(e);
 fail: function (e) {
 console.info( 下载一个文件失败 
 if (fail) {
 fail(e);
}

使用下载方法(wx.downloadFile(obj))需要在微信小程序配置服务器域名,服务器域名请在 小程序后台-设置-开发设置-服务器域名 中进行配置 ,具体请参考 微信官方文档

封装多文件下载并且保存

多文件下载并且保存,强制规定,必须所有文件下载成功才算返回成功

参数:一个对象,包含

urls 下载地址 数组,支持多个 url下载 [url1,url2]

success 下载成功 (必须所有文件下载成功才算返回成功) 回调参数 map ,key(id) -> value ({id,savedFilePath})

fail 下载失败,只要有一个方法失败就调用失败

/**
 * 多文件下载并且保存,强制规定,必须所有文件下载成功才算返回成功
function downloadSaveFiles(obj) {
 // console.info( 准备下载。。。 
 let that = this;
 let success = obj.success; //下载成功
 let fail = obj.fail; //下载失败
 let urls = obj.urls; //下载地址 数组,支持多个 url下载 [url1,url2]
 let savedFilePaths = new Map();
 let urlsLength = urls.length; // 有几个url需要下载
 for (let i = 0; i urlsLength; i++) {
 downloadSaveFile({
 url: urls[i],
 success: function (res) {
 //console.dir(res);
 //一个文件下载保存成功
 let savedFilePath = res.savedFilePath;
 savedFilePaths.set(res.id, res);
 console.info( savedFilePath:%s , savedFilePath);
 if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功
 if (success){
 success(savedFilePaths)
 fail: function (e) {
 console.info( 下载失败 
 if (fail) {
 fail(e);
}

完整的download.js文件

/**
 * 下载管理器
 * Created by 全科 on 2018/1/27.
 * 下载保存一个文件
function downloadSaveFile(obj) {
 let that = this;
 let success = obj.success;
 let fail = obj.fail;
 let id = 
 let url = obj.url;
 if (obj.id){
 id = obj.id;
 }else{
 id = url;
 // console.info( %s 开始下载。。。 , obj.url);
 wx.downloadFile({
 url: obj.url,
 success: function (res) {
 wx.saveFile({
 tempFilePath: res.tempFilePath,
 success: function (result) {
 result.id = id;
 if (success) {
 success(result);
 fail: function (e) {
 console.info( 保存一个文件失败 
 if (fail) {
 fail(e);
 fail: function (e) {
 console.info( 下载一个文件失败 
 if (fail) {
 fail(e);
 * 多文件下载并且保存,强制规定,必须所有文件下载成功才算返回成功
function downloadSaveFiles(obj) {
 // console.info( 准备下载。。。 
 let that = this;
 let success = obj.success; //下载成功
 let fail = obj.fail; //下载失败
 let urls = obj.urls; //下载地址 数组,支持多个 url下载 [url1,url2]
 let savedFilePaths = new Map();
 let urlsLength = urls.length; // 有几个url需要下载
 for (let i = 0; i urlsLength; i++) {
 downloadSaveFile({
 url: urls[i],
 success: function (res) {
 console.dir(res);
 //一个文件下载保存成功
 let savedFilePath = res.savedFilePath; 
 savedFilePaths.set(res.id, res);
 console.info( savedFilePath:%s , savedFilePath);
 if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功
 if (success){
 success(savedFilePaths)
 fail: function (e) {
 console.info( 下载失败 
 if (fail) {
 fail(e);
module.exports = {
 downloadSaveFiles: downloadSaveFiles
}

使用

首先导入

import download from download.js 

之后调用

let url1 = #39;https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU2Nzc0Njk3OCIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0= #39;;
let url2 = #39;https://xcx.upload.utan.com/article/coverimage/2018/01/26/eyJwaWMiOiIxNTE2OTcyNDg0NDUzOSIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0= #39;;
download.downloadSaveFiles({
 urls: [url1, url2],
 success: function (res) {
 // console.dir(res);
 console.info(res.get(url2).savedFilePath)
 fail: function (e) {
 console.info( 下载失败 
);

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

微信小程序 循环及嵌套循环的使用

微信小程序之分享页面如何返回首页

以上就是微信小程序之多文件下载的简单封装的详细内容,更多请关注php中文网其它相关文章!

微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!


【免责申明】黔优媒体网以上展示内容来源于用户自主上传、合作媒体、企业机构或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表黔优媒体网官方立场,请读者仅做参考,本文标题:微信小程序之多文件下载的简单封装;欢迎转载,转载时请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何违法/违规的内容,请您立即联系我们及时修正或删除。(邮箱号: kefu@qianu.com)