WePy 整合雲開發

因爲工做上的緣由，有需求要使用 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 的模板。

複製 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 屬性仍是很是實用的。