小程序资源下载、解压、保存到本地及本地文件的使用

小程序对资源存储有限一般10M，不要超过限制
思路解析：将资源保存到本地，首先需要获取到本地路径，然后将文件下载（下载前需要判断文件是否更新，第一次和更新则需要下载，如果存在之前的资源则将其删除），解压（压缩包需要解压，解压完成将压缩包删除，非压缩包略过），保存到本地路径，（可以自行创建本地目录，把资源统一保存在改目录下），页面中使用本地路径中的资源。

小程序中获取用户本地路径 ： wx.env.USER_DATA_PATH
let fm = wx.getFileSystemManager();    // 文件系统管理器
删除文件夹及文件下的文件使用 fm.rmdir()

下面为整个流程结构代码
一、判断资源是否更新

var isUpdate = '判断资源是否更新的字段';if (!isUpdate ) {  // 第一次进入程序wx.setStorageSync('isUpdate', isUpdate );     //this.isFile()    //是否创建目录} else if (resourcesFileMd5 != newFileMd5) {  //资源更新了wx.setStorageSync('isUpdate', isUpdate );this.isFile()   }else{    // 没有更新，则还是用原来的路径var cachePath = '本地路径'this.setData({ cachePath: cachePath});return;}

二、创建本地保存资源的目录
本地目录有了之后，需要判断是否要重新下载资源

var savePath ='需要保存资源的本地目录'
isFile() {var that = this;fm.access({  //判断目录是否存在path: savePath,success: function (res) {  //存在//存在直接下载文件到该目录that.downloadFile()    },fail: function (err) { //不存在fm.mkdir({ //不存在就创建目录dirPath: savePath,recursive: true,success: function (res) {that.downloadFile()}});}});},

三、资源下载
下载前判断是否存在之前的资源，if 存在，则删除再下载

downloadFile() { //下载资源var that = this;let fileUrl = '下载资源的地址';wx.showLoading({title: '资源加载中...',})var unlinkUrl = '需要删除资源的路径'this.isUnlink(unlinkUrl);  //删除文件的方法wx.downloadFile({url: fileUrl,filePath: '下载后保存的地址',success: function (res) {// 压缩包需要解压，非则略过that.fileUnzip();  //解压},fail: function (err) {wx.hideLoading();wx.showToast({title: '下载失败，请稍后重新',})}});},

删除文件的方法

isUnlink(unlinkUrl) { //删除文件fm.access({  //判断目录是否存在path: unlinkUrl,success: function (res) {  //存在之前的资源删除重新下载fm.rmdir({  //删除目录       删除文件夹及文件下的文件使用rmdir，unlink不能实现改功能dirPath: unlinkUrl,recursive:true,success(res) {console.log('旧资源删除成功')},fail(res) { console.log(res);}})}})},

四，解压完之后，将资源保存在本地
解压的方法，解压完之后将压缩包删除

  fileUnzip() {  //解压var that = this;fm.unzip({zipFilePath: '需要解压的文件路径',targetPath: cashPath,   //解压后保存的地址success(res) {wx.setStorageSync('cashPath', cashPath)that.setData({ cachePath: cashPath});//解压成功后将压缩包删除fm.unlink({filePath: orginCachePath + '/' + id +'resource.zip',success(res) {},fail(res) {wx.showToast({title: '解压失败，请稍后重新',})}})}complete() {wx.hideLoading();}})},

到此，资源下载，解压，保存在本地已经完成，如何使用本地路径下的文件呢？

eg:   cachePath 是你保存在本地的路径地址 ，FileName 改文件下的内容
<image class='bg-pic' mode="widthFix"  src='{{cachePath}}/{{FileName}}'></image>

至此ok

小程序资源下载、解压、保存到本地及本地文件的使用相关推荐

【日常点滴015】微信小程序直接下载文件到PC端
微信小程序直接下载文件到PC端方法一 : 方法二: 下载函数内的全部代码附promise同时多张图片上传方法方法一 : 需要点击下载 =>手动给定后缀名=>保存文档给的方法,但是保 ...
小程序开发-利用canvas实现保存二维码海报到本机
场景及需求在小程序开发过程中,经常需要实现保存某个页面为带小程序码的二维码海报图片到本地,然后用于分享或者发朋友圈等操作. 主要技术点及小程序相关api 技术注意事项小程序的canvas与H5 c ...
微信小程序录音之获取、保存、读取
小程序语音获取后怎么保存到服务器呢,保存到服务器之后怎么读取呢?(好像听说小程序已经更新了录音接口,开始支持mp3.. https://mp.weixin.qq.com/debug/wxadoc/de ...
如何使用Fiddler抓包某奇艺小程序视频下载
[跟着新手学FD第03套]003如何使用Fiddler抓包爱奇艺小程序视频下载 Hello 大家好我是你们的老朋友,小白我是本套课程的讲师小程序名字:某奇艺视频本节课的内容:实战抓取视频之抓取 ...
uniapp-微信小程序分包--详解
uniapp-微信小程序分包–详解实际环境(用business举例,可以创建很多个分包) 先说好,如果代码模块多,就一个一个模块搞(照着做不会错) 直入主题,我代码写完了,一真机运行,g,发现超过 ...
【微信小程序】将base64图片保存至本地
需求描述微信小程序中,下载一个报告文件,直接可获取到的是报告图片的base64格式. 参考文章 1.微信小程序实现图片下载功能 2.微信小程序把base64的图片保存到手机相册代码实现 1.wxm ...
小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...
微信小程序获取用户信息并保存登录状态
微信小程序获取用户信息并保存登录状态:http://www.360doc.com/content/18/0124/11/9200790_724662071.shtml 转载于:https://www ...
linux通讯录软件带头像,小程序新技能 Get！保存微信好友头像到手机通讯录
原标题:小程序新技能 Get!保存微信好友头像到手机通讯录亲爱的朋友,你知道来电时能看到好友的头像是一种怎样的体验吗? 你是否注意过这样一件事:每当打开自己的微博.微信等社交软件,除了扑面而来的信息 ...

小程序资源下载、解压、保存到本地及本地文件的使用

小程序资源下载、解压、保存到本地及本地文件的使用相关推荐

最新文章

热门文章