小程式雲開發實戰

由于小程式本身存儲資料的能力有限，是以不可能将大量的資料儲存在用戶端，而且将資料儲存在本地既不安全，也無法與其他小程式使用者共享，是以大多數小程式都需要一個服務端，服務端可以用多種技術實作，如PHP、Node.js、Python、ASP.NET、Java EE等。不管使用哪種技術實作服務端，開發一款小程式都需要至少配備兩個程式員，一個是開發小程式的程式員，一個是開發服務端的程式員。而且這兩個程式員之間還需要不斷溝通，以便确認共同遵循的接口。

開發一款小程式需要兩名或更多的程式員參與，一直困擾着很多小的創業公司，因為多雇傭一個人，就會增加很多成本。是以基于這個痛點，很多公司推出了雲開發技術，例如Bmob就是較早推出雲開發的公司，所謂雲開發，就是将服務端的功能都封裝起來，然後向用戶端提供API通路這些封裝的功能。服務端的主要功能無外乎資料存儲、檔案上傳下載下傳、視訊/音頻流等功能。這些功能大多開發都不困難，但比較費時，是以将其封裝起來供用戶端調用是一個非常好的主意。

騰訊最近推出了自己的雲開發系統，不過這個雲開發系統目前隻能用于小程式，而且隻提供了如下3種。

雲資料庫

雲存儲

雲函數

雲資料庫是指在服務端提供的資料庫服務，小程式雲提供的資料庫屬于文檔資料庫，文檔資料庫有别于關系型資料庫。傳統的關系型資料庫中可以儲存若幹個表，每一個表由若幹條記錄組成。但文檔資料庫儲存的是JSON格式的資料，每一個JSON文檔相當于關系型資料庫中的一個表。也就是說，文檔資料庫儲存的是JSON文檔的集合。非常流行的MongoDB就是典型的文檔資料庫。雲資料庫個組成部分對應的關系如下表所示。

關系資料庫

文檔資料庫

資料庫（database）

表（table）

集合（collection）

行（row）

記錄（record/doc）

列（column）

字段（field）

雲存儲為小程式提供了遠端上傳和下載下傳檔案的能力。下載下傳可以提供權限管理，小程式可以通過相應的API實作檔案的上傳和下載下傳功能。

雲函數就是一段可以運作在服務端的代碼，之是以要将部分代碼在服務端運作，主要有如下兩個原因：

部署多個使用者共享，且容易維護的代碼

擷取敏感資訊，如appid、openid等。

現在讓我們來開發第一個與雲的小程式，首先應該下載下傳最新版的微信開發者工具，然後在小程式背景擷取AppID。使用雲開發功能，必須使用真實的AppID，不能使用測試用的AppID。

啟動微信開發者工具，新建立一個小程式工程。在建立小程式工程的過程中，需要輸入AppID和項目名稱，然後在最下面的目标清單中選擇“建立雲開發快速啟動模闆”選項，如下圖所示。

建立完支援雲開發的小程式工程後，工程目錄結構和IDE主界面如下圖所示。目前工程預設帶了一些例子（模闆中的例子）來幫助了解和開發基于雲的小程式。

如果第一次使用這個AppID開發基于雲的小程式，應該單擊界面上方的“雲開發”按鈕，會顯示如下圖所示的頁面。

這是一個開通雲服務的頁面，單擊“開通”按鈕，就會開通用于雲開發的服務。在開通的過程中會出現如下圖所示的确認對話框，單擊”确定“按鈕進入下一個設定頁面。

這個頁面是”建立環境“頁面，如下圖所示。需要輸入”環境名稱“，一個任意的字元串。在下面列出了基礎版的配置。如資料庫存儲空空間、雲函數數量等。如果想要更多的資源，那以後肯定是要收費的。天下沒有免費的午餐。不過這個配置做實驗和使用者量不是非常大的小程式還是夠用的。

單擊”确定“按鈕，就會建立一個環境，然後會進入如下圖所示的雲開發控制台。在這個控制台中可以管理使用者、雲資料庫、雲存儲、雲函數以及統計分析。并且會顯示相關的資訊，如今日API調用

如果想建立新環境，可以将滑鼠放在右側目前環境minicloud上，會彈出如下圖所示的菜單，單擊”建立新環境“菜單項就會建立一個新的環境，目前每個小程式賬号課免費建立兩個新環境。

模闆會預設建立一個login雲函數，用于傳回openid（辨別目前微信登入使用者的ID），是以在開發基于雲的小程式之前，首先要先部署login雲函數。

選中login雲函數，在右鍵菜單中單擊”上傳并部署“菜單項進行部署，如下圖所示。

成功部署login雲函數後，回到小程式的首頁面，單擊“點選擷取openid”按鈕，如下圖所示，會通過login雲函數擷取openid。

成功通過login雲函數擷取openid後，會顯示如下圖的頁面。現在就可以使用雲API來開發小程式了。

現在我們來開發第一個基于雲的小程式，這個小程式非常簡單，就是在一個集合中插入一條資料，也就是一個JSON格式的文本。

一個集合就相當于一個表。選擇環境後，小程式就會預設有一個資料庫，是以就不需要單獨建立資料庫了，隻需要在該資料庫中建立若幹個集合（表）即可。

首先打開雲開發控制台，切換到”資料庫“頁面，單後單擊左上角的”添加集合“，會彈出如下圖所示的”添加集合“對話框，輸入集合的名字，然後單擊”确定“按鈕添加集合。

建立一個新集合後的效果如下圖所示。可以通過單擊右側的”添加記錄“導入json或csv檔案，每個檔案最大50MB。不過本節并不會通過雲開發控制台導入，而是使用代碼來插入文檔。

由于獲得openid後，會跳到userConsole頁面，是以我們在這個頁面的onLoad函數中向test集合插入一個json文檔。

在小程式開發工具中定位到userConsole.js檔案，并找到onLoad函數，如下圖所示。

在onLoad函數中會從全局變量（globalData）中擷取openid。操作集合首先要通過init函數初始化環境，init函數的文法格式如下：

其中envname是字元串類型的值，表示要使用的環境名，在前面已經建立了一個名為minicloud的環境了，是以本例的envname的值是'minicloud'。

然後使用下面的代碼擷取資料庫和集合對象。

其中test是前面建立的集合名。

最後使用add方法插入json格式的資料，完整的代碼如下：

現在重新運作程式，擷取openid後，就會在小程式開發者工具的Console中看到如下圖的資訊。

回到雲開發控制台，會看到test集合多了如下圖所示的資料。這表明json文檔已經插入成功。

現在來改進前面編寫的基于雲的小程式。這個小程式盡管可以向雲資料庫中插入資料，不過代碼與模闆代碼混在了一起，在真正的小程式項目中，不可能讓使用者先單擊按鈕獲得openid，再進行下面的操作，是以現在重新編寫基于雲的小程式。主要包括如下功能。

從文本輸入元件輸入姓名和年齡，單擊“插入資料”按鈕向雲資料庫插入包含信命和年齡的資料。

從文本輸入元件輸入記錄ID，單擊“查詢資料”按鈕，從雲資料庫中查詢相關的資料，并将查詢到的資料中的姓名和年齡顯示在頁面上。

小程式主界面如下圖所示。

為了在我們自己頁面上實作這些功能，首先在小程式工程中建立一個main目錄，并建立如下圖所示的檔案。

接下來修改app.json檔案，将main頁面變成首頁（第一個顯示的頁面），也就是将 "pages/main/main"放在pages數組的第一個元素的位置，修改後的app.json檔案的内容如下：

現在重新運作小程式，會看到main頁面已經成為了小程式的首頁。由于本例的頁面需要用到一些元件，是以需要現在main.wxml檔案中輸入下面的代碼完成

main頁面的布局。

在main.wxml檔案中，包含3個<input>元件和2個text元件，這5個元件分别與age、name、recordId，nameResult和ageResult五個變量綁定，修改和擷取這5個元件的值也隻需要考慮這5個變量即可。

在小程式中調用雲API之前，必須要擷取小程式的openid，這個openid表示目前小程式的使用者ID。由于進入小程式必須要通過微信，是以小程式使用與微信相同的使用者驗證體系，是以，小程式就不需要單獨登入了，而openid就是小程式是否登入的憑證。

擷取openid的代碼已經包含在模闆中了，隻需要找到index.js檔案，并搜尋onGetOpenid函數，會看到如下的代碼。

上面的代碼用于調用名為login的雲函數擷取小程式的openid。通常隻需要将onGetOpenid函數中的代碼直接複制到main.js檔案中的onLoad函數即可。

向雲資料庫插入資料的代碼前面已經學過，一會大家可以看本例完整的代碼。從雲資料庫中查詢資料可以使用下面的代碼。

main.js中完整的實作代碼如下：

現在重新運作小程式，并添加一些資料，看到雲開發控制台中的test集合下多了幾條記錄，如下圖所示。這表明已經将資料成功插入test集合。

現在回到小程式開發界面，在"查詢按鈕“上方的文本輸入框中輸入一條記錄的ID，單擊”查詢資料“按鈕，會看到按鈕下方會顯示如下圖的查詢結果，如果未查詢到結果，會顯示一個提示對話框。

請關注“極客起源”公衆号，下載下傳源代碼，二維碼如下：