教你用微信小程序解压zip文件

有时候会做一些小工具，要是后端传一个线上图片zip给你，要你显示出来，你该咋办？？

啊啊啊，是不是头脑要炸逼了？

你们会不会觉得，谁特么的想出这个产品？😂？产品狗脑子”抽抽“？

哎，这个可能是产品需要，并不是他们脑子抽了

第一步

先思考

js有解压线上zip文件的功能，就比如很完美的jszip

那小程序有解压线上文件的功能吗？答案：没有

（没有还讲个pi）?

我说的是真的，不能直接解压线上的zip文件，但是我们可以间接解压【本地文件】呀

下面来真的了

第二步

了解小程序的文件系统，这一步是基础

在微信开放社区里面提到的文件系统问题，里面都有相应的答案，就比如:

微信小程序为什么没有操作文件夹的权限，为什么老是读取（写）文件失败

里面都有答案，我只是提醒一句：

小程序提供了一个用户文件目录给开发者，开发者对这个目录有完全自由的读写权限。通过 wx.env.USER_DATA_PATH 可以获取到这个目录的路径。

还有要记得看下面的图：

解压的zip是到本地用户文件的，因为只有本地用户文件可以写入，存贮最多是10MB哦

第三步

1.先下载zip

wx.downloadFile({
    url: 'http://xxxxx.zip',
    success: function (res) {
        //把路径传过去
        that.unzip(res)
    },
    fail: function ({ errMsg }) {
        console.log('downloadFile fail, err is:', errMsg)
    },
    complete: function () { }  
})

2.解压zip

uuzip(val){
    FileSystemManager.unzip({
        zipFilePath: val.tempFilePath,
        targetPath: `${wx.env.USER_DATA_PATH}`,
        success: function (res) { 
            console.log(res)
            //解压成功之后读取文件
            that.readdir()
        },
        fail: function ({ errMsg }) { 
            console.log('fail, err is:', errMsg)}, 
        complete: function () { } 
    })
}

3.读取本地文件夹及文件，并且保存图片(也就是上面调用的readdir方法)

FileSystemManager.readdir({      
    dirPath: `${wx.env.USER_DATA_PATH}`,
    success: function (res) {
        //这里获取到一个数组 
        console.log(res)
        //示范而已，所以这里只取其中一个
        var _val=res.files[0]
        //读取文件
        FileSystemManager.readFile({
            filePath: wx.env.USER_DATA_PATH+"/"+_val, 
            encoding: 'base64',
            success: function (res) {
              //这里设置可以显示图片
                that.setData({ 
                 'image': 'data:image/png;base64,'+res.data 
                })
               //保存文件 
                wx.saveImageToPhotosAlbum({
                    filePath: wx.env.USER_DATA_PATH+"/"+_val,
                    success: function (res) { 
                        wx.showToast({ 
                        title: '保存成功',
                     }) 
                }, 
            fail: function (err) { 
            console.log(err)  
            }  
       }) 
    }, 
    fail: function ({ errMsg }) {
     console.log('fail, err is:', errMsg)
     }, 
    complete: function () {} 
 })
},
fail: function ({ errMsg }) { 
    console.log('fail, err is:', errMsg)
}, 
complete: function () {}   
})

还有，记得获取全局唯一的文件系统管理器,才可以调用上面的代码哟

const FileSystemManager = wx.getFileSystemManager()

好了，这就可以了，我只是个前端小白，有不同的意见欢迎骚扰留言