? ? ? ? 在開(kāi)發(fā)pc端后臺(tái)管理系統(tǒng)的時(shí)候，經(jīng)常會(huì)遇到這樣的需求：下載zip到本地，然后用戶雙擊壓縮包，并借助電腦端的壓縮軟件打開(kāi)壓縮包，就可以查看里面的word、excel、pdf文件里面的內(nèi)容。（這種需求，毫無(wú)疑問(wèn)，對(duì)于我們前端開(kāi)發(fā)工程師來(lái)說(shuō)，已經(jīng)是習(xí)以為常了）。

????????最近我在開(kāi)發(fā)微信小程序的項(xiàng)目。后端和我說(shuō)，下載zip的邏輯可以效仿pc端的邏輯。在微信小程序里，下載zip壓縮包后解壓，并且查看里面文件的內(nèi)容，這個(gè)需求我沒(méi)有做過(guò)。于是，我便查閱官網(wǎng)資料，實(shí)現(xiàn)了這個(gè)效果。

1、預(yù)備知識(shí)：

1. 需要了解微信小程序的文件系統(tǒng)
2. 需要了解FileSystemManager文件管理器的使用，可通過(guò)wx.getFileSystemManager()獲取
3. 需要了解wx.openDocument()方法是可以打開(kāi)word、excel、pdf等文件

2、實(shí)現(xiàn)思路：

1. 將壓縮包下載到?“本地臨時(shí)文件”
2. 將 “本地臨時(shí)文件” 解壓到 “本地用戶文件”
3. 在?“本地用戶文件”?的目錄中，獲取里面剛剛已解壓的文件名稱(chēng)（.word，.excel，.pdf等）
4. 將名稱(chēng)渲染到界面
5. 點(diǎn)擊界面的文件名稱(chēng)，即刻打開(kāi)對(duì)應(yīng)的文件

3、實(shí)現(xiàn)代碼

? ? ? ? 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、將壓縮包下載到 “本地臨時(shí)文件”
    wx.downloadFile({
      url: 'http://localhost/1.zip', // 后端給你的下載zip的接口
      success: res => {
        unzip(res.tempFilePath)
      },
    })

    // 2、將 “本地臨時(shí)文件” 解壓到 “本地用戶文件” ，并且目錄命名為yyy（可以隨便啦）
    const unzip = filePath => {
      fs.unzip({
        zipFilePath: filePath,
        targetPath: wx.env.USER_DATA_PATH + `/yyy`,
        success: () => {
          readdir()
        }
      })
    }

    // 3、在 “本地用戶文件” 的目錄名稱(chēng)為yyy中，獲取里面剛剛已解壓的文件名稱(chēng)（.word，.excel，.pdf）
    const readdir = () => {
      fs.readdir({
        dirPath: wx.env.USER_DATA_PATH + `/yyy`,
        success: res => {
          this.setData({ 
            files: res.files
          })
        }
      })
    }
  },
  // 點(diǎn)擊
  open(ev){
    let { target: { dataset: { item } }  } = ev
    wx.openDocument({
      filePath: wx.env.USER_DATA_PATH + `/yyy/${item}`,
      showMenu: true
    });
  }
 }) 

4、最終效果

????????點(diǎn)擊可打開(kāi)pdf文件。

?????????

? ? ? ? 其實(shí)，“解壓zip壓縮包”這個(gè)操作可以交給后端來(lái)解壓，只是看看你的后端有沒(méi)有空。歡迎閱讀本篇文章，希望本篇文章能對(duì)您有幫助。如果您有更好的解決方案，歡迎留言評(píng)論！

????????文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-482986.html

到了這里，關(guān)于微信小程序下載zip壓縮包后解壓，并且打開(kāi)文件查看的內(nèi)容的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！