▌一、專案背景

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

當時就想到如果可以做個小型的檔案儲存小程式該多好，於是就下手了。往往需求決定產品這就沒錯了。下面繼續介紹下小程式是如何實現的。

▌二、專案簡介

愛儲存是一個可以將手機相簿裡的照片（或拍照的照片）和微信聊天會話裡的檔案（比如Doc、docx、xls、xlsx、ppt等檔案）上傳到雲開發的儲存裡，並可以進行分享的小程式。

愛儲存小程式使用的是小程式的雲開發，雲開發自帶免費的雲端儲存、雲資料庫，開始時不需要涉及伺服器的搭建及運維，也不需要進行域名註冊與備案，只需要通過一些簡單的API就能實現一個完整專案的業務邏輯，免費而且無需後端，開發成本非常低，因此這個小程式從建立到釋出都是免費的，非常適合新手。

▌三、專案準備

在雲資料庫中建立diary、fileCountInfo集合，許可權都是僅建立者可讀寫，在雲端儲存中建立一個diary資料夾。

▌四、功能介紹與專案的目標

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

首頁彈窗倒計時：

該彈窗在使用者使用小程式期間只會彈出一次。彈窗彈出時可以自動取消彈窗在這裡是通過倒計時來關閉的當然也可以點選按鈕取消，具體效果請親自使用下小程式，下方是判斷及新增快取部分程式碼。

//判斷是否添加了快取  
  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(最大儲存容量)，這樣就為以後的容量儲存限制做了鋪墊。下方是部分實現程式碼,邏輯還需要自己揣摩。

限制支援檔案型別：

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;
            }
          }

檔案的上傳及刪除：

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

其他小功能：

檔案預覽、檔案的分享，檔案的排序及下方儲存容量的顯示邏輯比較簡單這部分比較簡單大家看下原始碼就可以了。

▌五、遇到的困難

遇到的困難也就是在檔案上傳和刪除那一塊，就是我剛才說一會要解決的問題。在上傳檔案會涉及到單個檔案或多個檔案同時上傳，是每個檔案上傳成功都要提示下成功上傳提示呢？還是所選檔案全部上傳完才提示呢？如果是前者肯定會對使用者不友好所以我選擇了後者，但怎麼才能讓它們全部上傳完才彈出上傳成功提示呢，我試了很多方法比如加個flag標誌等等，但都不能很好地解決問題。我靜下心來再仔細想想，想到了以前使用的 promise 正好適合這個場景，所以使用了 promise 解決了該問題，這裡遇到的問題和刪除檔案類似就不一一描述，相關程式碼可參見專案原始碼。

▌六、總結

小程式較其他程式語言更容易上手，尤其使用了雲開發自帶免費的雲端儲存、雲資料庫，讓此專案更快的完成。相信通過學習此專案你已經可以開發自己的檔案儲存小程式了。

原始碼地址

https://tencentcloudbase.github.io/

---

如果你想要了解更多關於雲開發CloudBase相關的技術故事/技術實戰經驗，請掃碼關注【騰訊云云開發】公眾號～

相關推薦