WePy 整合雲開發

Bestony發表於2019-02-02

由於工作上的原因，有需求要使用 WePy，剛好，有了雲開發的契機，就決定研究一下。

初試 WePY

想要做雲開發和 WePY，首先要先熟悉 WePY。 WePY 其實之前就聽說過，不過自己一直沒有使用，更多還是習慣用小程式原生寫法來進行開發。

後續，也用過一些其他的框架，比如 MinUI 。

和 MinUI 相比，WePY 給我來說最大的感受是提供了 promise 的支援和 async/await 的支援，這個支援可以極大的改善 JavaScript 程式設計時遇到的 Callback Hell 的問題，可以讓我們更加愉悅的開發。

此外，我比較看重的特性是支援外部的 NPM 包，支援 NPM 包意味著可以更好的使用 JavaScript 原本的工程化的產品，也是大大提升生產力的特性。不過，相比於 Promise 的支援和 async/await 的支援，這個如今已經被微信小程式官方團隊所支援的 npm 也顯得不那麼重要了。

做一個 WePY 的 tempalte 吧！

在看文件時注意到，WePY 是使用 wepy init 來進行初始化的，而且可以使用 wepy list 來檢視專案的模板。發現了其中有一個基於 ZanUI 的模板。

由於 ZanUI 及更名後的 VantUI 我都比較熟悉，所以從他下手，去研究一下如何製作 WePY 的模板。

WePy 整合雲開發

複製 repo名/模板名，並在前面加上 github 的域名，就找到了對應的 repo 。

簡單的看了一下專案的檔案，發現其中並沒有什麼特殊的，需要指明初始化內容的檔案，所以猜測大概率是不需要進行單獨的配置的。

這方面 WePY 的文件做的不是很好，我在文件中並沒有找到相關的說明。如果可以的話，希望開發者可以加一個功能，比如加上一個 .wepy-template ，可以在裡面加入一些互動式的問題，從而來讓使用者設定一些內容。

在確定了模板其實並不困難以後，我就開始做自己的雲開發模板了。

如何做一個模板

做一個模板只需要三步

  1. 下載官方的 empty 模板
  2. 加入你自己的程式碼
  3. 上傳到 Github

說起來簡單，不過，在實際製作時，還是應當注意一些問題：

  1. 初始化 Empty 模板後，儘快使用 git init 來初始化版本控制。這是因為雲開發是與小程式的 AppID 進行繫結的，如果前期沒有做好控制，容易出現後續將 AppID 加入了版本追蹤。所以在一開始，我就將專案進行了初始化，方便後續的回溯。
  2. 上傳到 Github 時，應當注意配置 Readme，在我之前的文章中，曾經提到過我們應當儘可能的交付一些產品給世界，好讓世界根絕我們所交付的產品進行估值。特別是對於模板型別的 repo ，更是需要一個非常好的 Readme ，來引導別人去使用自己的模板
  3. 製作完成模板後，記得自己使用 wepy init 命令將整個過程完整的走一遍。確保你的模板是可用的。

在使用 WePY 過程中遇到的一些問題

CloudFunctionRoot 的設定問題

在做第一個版本的時候，我是將雲函式的目錄放在 src 目錄下，後續，在執行時發現， WePY 會自動編譯雲函式的目錄，導致出錯。不得已，我將雲函式的目錄放置在了專案的根目錄。

當時在研究這部分時，我試圖去尋找 wepy.config.js檔案的配置說明，希望找到一個 exclude 配置專案，來忽略一部分目錄，可惜，我並沒有找到。

WePY 下的一些定義問題

在使用原生寫法的時候，我常常會在 Page({}) 函式外部放上一些引用。比如這樣

const database = wx.cloud.database()
const storeCollection = database.collection('store')
Page({
    onReady():function(){
        // some code
    }
})
複製程式碼

在 WePY 中我試圖將程式碼放在 Page 例項的內部，不過會導致報錯，因此，我不得不廢棄這樣的寫法，改用 constructor 來實現。

 export default class Index extends wepy.page {
    constructor () {
      super()
      this.db = wx.cloud.database()
    }
    onLoad() {
      console.log('onLoad')
      console.log(this.db)
    }
}
複製程式碼

對 getApp 報錯

在 WePY 中，由於傳承了 Vue 的思想，並沒有提供對 getApp的 hack ，不過在實際的測試過程中，發現 getApp() 依然可用。

如果不引入 Redux 之類的狀態管理工具的情況下，getApp() 的單例模式作為一個全域性的 Bus 來進行資料的傳遞還是非常方便的。

關於 WePY 的其他

總的來說， WePY 是一個值得嘗試的框架，單純 Async/Await 的引入，可以讓你的程式碼變得更加簡潔易懂。特別是如果你的專案需要長期運轉的情況下，整潔的程式碼會幫助你的專案成功。

此外，如果你很習慣於 Vue 的寫法，那麼 WePY 不容錯過，computed 屬性還是非常實用的。

相關文章