小程序雲開發實戰

因爲小程序自己存儲數據的能力有限，因此不可能將大量的數據保存在客戶端，並且將數據保存在本地既不安全，也沒法與其餘小程序用戶共享，因此大多數小程序都須要一個服務端，服務端能夠用多種技術實現，如 PHP、Node.js、Python、Asp.net、Java EE 等。無論使用哪一種技術實現服務端，開發一款小程序都須要至少配備兩個程序員，一個是開發小程序的程序員，一個是開發服務端的程序員；並且這兩個程序員之間還須要不斷溝通，以便確認共同遵循的接口。

開發一款小程序須要兩名或更多的程序員參與，一直困擾着不少小的創業公司，由於多僱傭一我的，就會增長不少成本。因此基於這個痛點，不少公司推出了雲開發技術，例如 Bmob 就是較早推出雲開發的公司，所謂雲開發，就是將服務端的功能都封裝起來，而後向客戶端提供 API 訪問這些封裝的功能。服務端的主要功能無外乎數據存儲、文件上傳下載、視頻/音頻流等功能。這些功能大多開發都不困難，但比較費時，因此將其封裝起來供客戶端調用是一個很是好的主意。

騰訊最近推出了本身的雲開發系統，不過這個雲開發系統目前只能用於小程序，並且只提供了以下三種：

• 雲數據庫
• 雲存儲
• 雲函數

雲數據庫是指在服務端提供的數據庫服務，小程序雲提供的數據庫屬於文檔數據庫，文檔數據庫有別於關係型數據庫。傳統的關係型數據庫中能夠保存若干個表，每個表由若干條記錄組成。但文檔數據庫保存的是 JSON 格式的數據，每個 JSON 文檔至關於關係型數據庫中的一個表。也就是說，文檔數據庫保存的是 JSON 文檔的集合。很是流行的 MongoDB 就是典型的文檔數據庫。雲數據庫個組成部分對應的關係以下表所示。

關係數據庫	文檔數據庫
數據庫（DataBase）	數據庫（DataBase）
表（table）	集合（collection）
行（row）	記錄（record/doc）
列（column）	字段（field）

雲存儲爲小程序提供了遠程上傳和下載文件的能力。下載能夠提供權限管理，小程序能夠經過相應的 API 實現文件的上傳和下載功能。

雲函數就是一段能夠運行在服務端的代碼，之因此要將部分代碼在服務端運行，主要有以下兩個緣由：

• 部署多個用戶共享，且容易維護的代碼
• 獲取敏感信息，如 AppID、OpenID 等

搭建雲開發環境

如今讓咱們來開發第一個與雲的小程序，首先應該下載最新版的微信開發者工具，而後在小程序後臺獲取 AppID。使用雲開發功能，必須使用真實的 AppID，不能使用測試用的 AppID。

啓動微信開發者工具，新建立一個小程序工程。在建立小程序工程的過程當中，須要輸入 AppID 和項目名稱，而後在最下面的目標列表中選擇「創建雲開發快速啓動模板」選項，以下圖所示。

建立完支持雲開發的小程序工程後，工程目錄結構和 IDE 主界面以下圖所示。當前工程默認帶了一些例子（模板中的例子）來幫助理解和開發基於雲的小程序。

若是第一次使用這個 AppID 開發基於雲的小程序，應該單擊界面上方的「雲開發」按鈕，會顯示以下圖所示的頁面。

這是一個開通雲服務的頁面，單擊「開通」按鈕，就會開通用於雲開發的服務。在開通的過程當中會出現以下圖所示的確認對話框，單擊」肯定「按鈕進入下一個設置頁面。

這個頁面是」新建環境「頁面，以下圖所示。須要輸入「環境名稱」，一個任意的字符串。在下面列出了基礎版的配置，如數據庫存儲空空間、雲函數數量等。若是想要更多的資源，那之後確定是要收費的，天下沒有免費的午飯。不過這個配置作實驗和用戶量不是很是大的小程序仍是夠用的。

單擊「肯定」按鈕，建立一個環境，而後進入以下圖所示的雲開發控制檯。在這個控制檯中能夠管理用戶、雲數據庫、雲存儲、雲函數及統計分析，而且會顯示相關的信息，現在日 API 調用：

若是想建立新環境，能夠將鼠標放在右側當前環境 minicloud 上，會彈出以下圖所示的菜單，單擊」建立新環境「菜單項則會建立一個新的環境，目前每一個小程序帳號課免費建立兩個新環境。

部署 login 雲函數

模板會默認建立一個 login 雲函數，用於返回 OpenID（標識當前微信登陸用戶的 ID），因此在開發基於雲的小程序以前，首先要先部署 login 雲函數。

選中 login 雲函數，在右鍵菜單中單擊「上傳並部署」菜單項進行部署，以下圖所示。

成功部署 login 雲函數後，回到小程序的主頁面，單擊「點擊獲取 openid」按鈕，如圖所示，則會經過 login 雲函數獲取 openid。

 

如今咱們來開發第一個基於雲的小程序，這個小程序很是簡單，就是在一個集合中插入一條數據，也就是一個 JSON 格式的文本。

一個集合就至關於一個表。選擇環境後，小程序就會默認有一個數據庫，因此就不須要單首創建數據庫了，只須要在該數據庫中建立若干個集合（表）便可。

首先打開雲開發控制檯，切換到「數據庫」頁面，單後單擊左上角的「添加集合」，彈出以下圖所示的「添加集合」對話框，輸入集合的名字，而後單擊「肯定」按鈕添加集合。

建立一個新集合後的效果以下圖所示。能夠經過單擊右側的「添加記錄」導入 json 或 csv 文件，每一個文件最大 50 MB。不過本課並不會經過雲開發控制檯導入，而是使用代碼來插入文檔。

得到 openid 後，會跳到 userConsole 頁面，所以咱們在這個頁面的 onLoad() 函數中向 test 集合插入一個 json 文檔。

在小程序開發工具中定位到 userConsole.js 文件，並找到 onLoad() 函數，以下圖所示。

在 onLoad() 函數中會從全局變量（globalData）中獲取 openid。操做集合首先要經過 init() 函數初始化環境，init() 函數的語法格式以下：

wx.cloud.init({env:envname}) 

其中，envname 是字符串類型的值，表示要使用的環境名，由於在前面已經建立了一個名爲 minicloud 的環境了，因此本例的 envname 的值是'minicloud'。

使用下面的代碼獲取數據庫和集合對象：

const db = wx.cloud.database() const test = db.collection('test') 

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

最後使用 add() 方法插入 json 格式的數據，完整的代碼以下：

wx.cloud.init({env:'minicloud'}) const db = wx.cloud.database() const test = db.collection('test') test.add({ // data 字段表示需新增的 JSON 數據 data: { name: "Bill", age:30 }, success: function (res) { // 輸出成功插入後的id以及其餘信息 console.log(res) } }) 

如今從新運行程序，獲取 openid 後，就會在小程序開發者工具的 Console 中看到以下圖的信息。

回到雲開發控制檯，會看到 test 集合多了以下圖所示的數據，這代表 json 文檔已經插入成功。

如今來完善前面編寫的基於雲的小程序，這個小程序儘管能夠向雲數據庫中插入數據，不過代碼與模板代碼混在了一塊兒，在真正的小程序項目中，不可能讓用戶先單擊按鈕得到 openid，再進行下面的操做，所以如今須要從新編寫基於雲的小程序，主要包括以下功能。

• 從文本輸入組件中輸入姓名和年齡，單擊「插入數據」按鈕向雲數據庫插入包含姓名和年齡的數據。
• 從文本輸入組件中輸入記錄 ID，單擊「查詢數據」按鈕，從雲數據庫中查詢相關的數據，並將查詢到的數據中的姓名和年齡顯示在頁面上。

小程序的主界面以下圖所示。

爲了在咱們本身頁面上實現這些功能，首先在小程序工程中建立一個 main 目錄，並建立以下圖所示的文件。

接下來修改 app.json 文件，將 main 頁面變成首頁（第一個顯示的頁面），也就是將「pages/main/main」放在 pages 數組的第一個元素的位置，修改後的 app.json 文件的內容以下：

{
  "cloud": true, "pages": [ "pages/main/main", "pages/userConsole/userConsole", "pages/storageConsole/storageConsole", "pages/databaseGuide/databaseGuide", "pages/addFunction/addFunction", "pages/deployFunctions/deployFunctions", "pages/chooseLib/chooseLib" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "雲開發 QuickStart", "navigationBarTextStyle": "black" } } 

如今從新運行小程序，會看到 main 頁面已經成爲了小程序的首頁。因爲本例的頁面須要用到一些組件，於是須要先在 main.wxml 文件中輸入下面的代碼完成 main 頁面的佈局。

<view> <input style='margin-top: 40rpx;' placeholder="請輸入姓名" value="{{name}}" bindinput="bindKeyInputName" /> <input style='margin-top: 40rpx;' placeholder="請輸入年齡" value="{{age}}" bindinput="bindKeyInputAge" /> <button style='margin-top: 40rpx;' bindtap='insertData'>插入數據</button> <input style='margin-top: 40rpx;' placeholder="請輸入記錄ID" value="{{recordId}}" bindinput="bindKeyInputId" /> <button style='margin-top: 40rpx;' bindtap='queryData'>查詢數據</button> <text style='margin-top: 40rpx;'> 姓名：{{nameResult}} </text> <text style='margin-top: 80rpx;'> 年齡：{{ageResult}} </text> </view> 

在 main.wxml 文件中，包含 3 個 <input>組件和 2 個 text 組件，這 5 個組件分別與 age、name、recordId，nameResult 和 ageResult 五個變量綁定，修改和獲取這 5 個組件的值也只須要考慮這 5 個變量便可。

在小程序中調用雲 API 以前，必需要獲取小程序的 openid，這個 openid 表示當前小程序的用戶 ID。因爲進入小程序必需要經過微信，於是小程序使用與微信相同的用戶驗證體系，所以，小程序就不須要單獨登陸了，而 openid 就是小程序是否登陸的憑證。

獲取 openid 的代碼已經包含在模板中了，只須要找到 index.js 文件，並搜索 onGetOpenid() 函數，會看到以下的代碼。

onGetOpenid: function() { // 調用雲函數 wx.cloud.callFunction({ name: 'login', data: {}, success: res => { console.log('[雲函數] [login] user openid: ', res.result.openid) app.globalData.openid = res.result.openid wx.navigateTo({ url: '../userConsole/userConsole', }) }, fail: err => { console.error('[雲函數] [login] 調用失敗', err) wx.navigateTo({ url: '../deployFunctions/deployFunctions', }) } }) } 

上面的代碼用於調用名爲 login 的雲函數獲取小程序的 openid。一般只須要將 onGetOpenid() 函數中的代碼直接複製到 main.js 文件中的 onLoad() 函數便可。

向雲數據庫插入數據的代碼前面已經學過，一下子你們能夠看本例完整的代碼。從雲數據庫中查詢數據可使用下面的代碼。

db.collection(集合名）.doc(記錄ID）.get(
    {
        // 查詢到數據後觸發，res參數值包含的查詢到 數據 success:function(res) { }, // 未查詢到數據觸發 fail:function(res) { } }) 

main.js 中完整的實現代碼以下：

// miniprogram/pages/main/main.js const app = getApp() Page({ /** * 頁面的初始數據 */ db:undefined, test:undefined, data: { name:'', age:'', recordId:'', nameResult:'', ageResult:'' }, /** * 生命週期函數--監聽頁面加載 */ onLoad: function (options) { var that = this // 調用login雲函數獲取openid wx.cloud.callFunction({ name: 'login', data: {}, success: res => { console.log('[雲函數] [login] user openid: ', res.result.openid) app.globalData.openid = res.result.openid wx.cloud.init({ env: 'minicloud' }) that.db = wx.cloud.database() that.test = that.db.collection('test') }, fail: err => { console.error('[雲函數] [login] 調用失敗', err) wx.navigateTo({ url: '../deployFunctions/deployFunctions', }) } }) }, // 單擊「插入數據」按鈕調用該函數 insertData:function() { var that = this try { // 將年齡轉換爲整數類型值 var age = parseInt(that.data.age) // 若是輸入的年齡不是數字，會顯示錯誤對話框，並退出該函數 if(isNaN(age)) { // 顯示錯誤對話框 wx.showModal({ title: '錯誤', content: '請輸入正確的年齡', showCancel: false }) return } // 向test數據集添加記錄 this.test.add({ // data 字段表示需新增的 JSON 數據 data: { name: that.data.name, age: age }, // 數據插入成功，調用該函數 success: function (res) { console.log(res) wx.showModal({ title: '成功', content: '成功插入記錄', showCancel:false }) that.setData({ name:'', age:'' }) } }) } catch(e) { wx.showModal({ title: '錯誤', content: e.message, showCancel: false }) } }, // 單擊「查詢數據」按鈕執行該函數 queryData:function() { var that = this // 根據記錄ID搜索數據集 this.db.collection('test').doc(this.data.recordId).get({ // 找到記錄集調用 success: function (res) { // 將查詢結果顯示在頁面上 that.setData({ nameResult:res.data.name, ageResult:res.data.age }) }, // 未查到數據時調用 fail:function(res) { wx.showModal({ title: '錯誤', content: '沒有找到記錄', showCancel: false }) } }) }, // 下面的函數用於當更新input組件中的值時同時更新對應變量的值 bindKeyInputName: function (e) { this.setData({ name: e.detail.value }) }, bindKeyInputAge:function(e) { this.setData({ age: e.detail.value }) }, bindKeyInputId:function(e) { this.setData({ recordId:e.detail.value }) }, }) 

如今從新運行小程序，並添加一些數據，看到雲開發控制檯中的 test 集合下多了幾條記錄，以下圖所示，這代表已經將數據成功插入 test 集合。

如今回到小程序開發界面，在「查詢按鈕」上方的文本輸入框中輸入一條記錄的 ID，單擊「查詢數據」按鈕，會看到按鈕下方會顯示以下圖的查詢結果，若是未查詢到結果，會顯示一個提示對話框。

成功經過 login 雲函數獲取 openid 後，會顯示以下圖的頁面。如今就可使用雲 API 來開發小程序了。

 

 

關注「極客起源」公衆號，下載本文源代碼，公衆號二維碼以下：