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

2019 年 12 月 6 日
筆記

▌一、項目背景

學習雲開發也有段時日了，當時就想試試手，不過一直沒有靈感。直到有一次同學問我有沒有老師發過的某個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相關的技術故事/技術實戰經驗，請掃碼關注【騰訊云云開發】公眾號～