在开发pc端后台管理系统的时候，经常会遇到这样的需求：下载zip到本地，然后用户双击压缩包，并借助电脑端的压缩软件打开压缩包，就可以查看里面的word、excel、pdf文件里面的内容。（这种需求，毫无疑问，对于我们前端开发工程师来说，已经是习以为常了）。

        最近我在开发微信小程序的项目。后端和我说，下载zip的逻辑可以效仿pc端的逻辑。在微信小程序里，下载zip压缩包后解压，并且查看里面文件的内容，这个需求我没有做过。于是，我便查阅官网资料，实现了这个效果。

1、预备知识：

1. 需要了解微信小程序的文件系统
2. 需要了解FileSystemManager文件管理器的使用，可通过wx.getFileSystemManager()获取
3. 需要了解wx.openDocument()方法是可以打开word、excel、pdf等文件

2、实现思路：

1. 将压缩包下载到 “本地临时文件”
2. 将 “本地临时文件” 解压到 “本地用户文件”
3. 在 “本地用户文件” 的目录中，获取里面刚刚已解压的文件名称（.word，.excel，.pdf等）
4. 将名称渲染到界面
5. 点击界面的文件名称，即刻打开对应的文件

3、实现代码

        index.wxml

<view>
  <view wx:for="{{files}}" wx:key="unique" data-item="{{ item }}" bindtap="open">{{ item }}</view>
</view>

        index.js

Page({ 
  data: { 
    files: []
  }, 
  onLoad() {
    const fs = wx.getFileSystemManager()

    // 1、将压缩包下载到 “本地临时文件”
    wx.downloadFile({
      url: 'http://localhost/1.zip', // 后端给你的下载zip的接口
      success: res => {
        unzip(res.tempFilePath)
      },
    })

    // 2、将 “本地临时文件” 解压到 “本地用户文件” ，并且目录命名为yyy（可以随便啦）
    const unzip = filePath => {
      fs.unzip({
        zipFilePath: filePath,
        targetPath: wx.env.USER_DATA_PATH + `/yyy`,
        success: () => {
          readdir()
        }
      })
    }

    // 3、在 “本地用户文件” 的目录名称为yyy中，获取里面刚刚已解压的文件名称（.word，.excel，.pdf）
    const readdir = () => {
      fs.readdir({
        dirPath: wx.env.USER_DATA_PATH + `/yyy`,
        success: res => {
          this.setData({ 
            files: res.files
          })
        }
      })
    }
  },
  // 点击
  open(ev){
    let { target: { dataset: { item } }  } = ev
    wx.openDocument({
      filePath: wx.env.USER_DATA_PATH + `/yyy/${item}`,
      showMenu: true
    });
  }
 }) 

4、最终效果

        点击可打开pdf文件。

         

        其实，“解压zip压缩包”这个操作可以交给后端来解压，只是看看你的后端有没有空。欢迎阅读本篇文章，希望本篇文章能对您有帮助。如果您有更好的解决方案，欢迎留言评论！