如何用雲開發建立專屬文件存儲小程序？丨實戰

時間 2019-12-19

標籤如何開發建立專屬文件存儲程序實戰简体版

原文原文鏈接

▌1、項目背景

學習雲開發也有段時日了，當時就想試試手，不過一直沒有靈感。直到有一次同窗問我有沒有老師發過的某個ppt，我說你怎麼不去翻聊天記錄呢？他說太麻煩，並且聊天記錄中的文件可能會被清理。git

當時就想到若是能夠作個小型的文件存儲小程序該多好，因而就下手了。每每需求決定產品這就沒錯了。下面繼續介紹下小程序是如何實現的。github

▌2、項目簡介

愛存儲是一個能夠將手機相冊裏的照片（或拍照的照片）和微信聊天會話裏的文件（好比Doc、docx、xls、xlsx、ppt等文件）上傳到雲開發的存儲裏，並能夠進行分享的小程序。數據庫

愛存儲小程序使用的是小程序的雲開發，雲開發自帶免費的雲存儲、雲數據庫，開始時不須要涉及服務器的搭建及運維，也不須要進行域名註冊與備案，只須要經過一些簡單的API就能實現一個完整項目的業務邏輯，免費並且無需後端，開發成本很是低，所以這個小程序從建立到發佈都是免費的，很是適合新手。編程

▌3、項目準備

在雲數據庫中建立diary、fileCountInfo集合，權限都是僅建立者可讀寫，在雲存儲中建立一個diary文件夾。小程序

▌4、功能介紹與項目的目標

下面將會圍繞如下幾個比較核心的功能進行分析。後端

首頁彈窗倒計時：

該彈窗在用戶使用小程序期間只會彈出一次。彈窗彈出時能夠自動取消彈窗在這裏是經過倒計時來關閉的固然也能夠點擊按鈕取消，具體效果請親自使用下小程序，下方是判斷及添加緩存部分代碼。數組

//判斷是否添加了緩存 
  wx.getStorage({
      key: 'time2',
      success: res => {
        this.setData({
          instructions: false
        })
      },
      fail: err => {
  //添加緩存
        wx.setStorage({
          key: "time2",
          data: new Date().getTime(),
          success: res => {
            this.setData({
              instructions: true
            })
            var interval = setInterval(event => {
              var timeCount = this.data.timeCount
              this.setData({
                timeCount: --timeCount
              })
            }, 1000)
      //15秒後取消彈窗
            setTimeout(res => {
              this.setData({
                instructions: false
              })
              clearInterval(interval);
            }, 15000)
          }
        })


      }
    })
複製代碼

限制每一個用戶只有100M存儲空間，在雲開發數據庫中建立一個fileCountInfo集合（權限設置爲僅建立者可讀寫），爲每一個用戶添加一條記錄字段有currentStorage(當前存儲容量)和maxStorageCount(最大存儲容量)，這樣就爲之後的容量存儲限制作了鋪墊。下方是部分實現代碼,邏輯還須要本身揣摩。promise

限制支持文件類型：緩存

doc、docx、xls、xlsx、ppt、pptx、pdf 在js裏添加了一個數組變量fileFormat用來保存僅支持的文件類型，經過js代碼判斷用戶選取的文件是否在這個數組裏從而可否上傳，固然判斷用戶是否能上傳還有存儲容量的限制，前面已經說了最大 100M，每次用戶上傳文件currentStorage字段都會增長用戶上傳的文件大小，具體實現看源代碼上面都有註釋。下方是部分代碼用來實現是不是支持的文件類型。服務器

for (var i = 0; i < res.tempFiles.length; i++) {
            var position = res.tempFiles[i].name.lastIndexOf('.');
            var suffix = res.tempFiles[i].name.substring(position + 1);
            if (this.data.fileFormat.indexOf(suffix) < 0) {
              console.log("文件格式")
              this.setData({
                canUpload: false,
                fileType: suffix
              })
              console.log(this.data.fileType)
              break;
            }
          }
複製代碼

文件的上傳及刪除：

文件上傳包括上傳以前的判斷是否符合要求，前面有提到過。還會涉及到一些坑一會再說。

其餘小功能：

文件預覽、文件的分享，文件的排序及下方存儲容量的顯示邏輯比較簡單這部分比較簡單你們看下源代碼就能夠了。

▌5、遇到的困難

遇到的困難也就是在文件上傳和刪除那一塊，就是我剛纔說一會要解決的問題。在上傳文件會涉及到單個文件或多個文件同時上傳，是每一個文件上傳成功都要提示下成功上傳提示呢？仍是所選文件所有上傳完才提示呢？若是是前者確定會對用戶不友好因此我選擇了後者，但怎麼才能讓它們所有上傳完才彈出上傳成功提示呢，我試了不少方法好比加個flag標誌等等，但都不能很好地解決問題。我靜下心來再仔細想一想，想到了之前使用的 promise 正好適合這個場景，因此使用了 promise 解決了該問題，這裏遇到的問題和刪除文件相似就不一一描述，相關代碼可參見項目源碼。