這篇文章將為大家詳細講解有關小程序中云開發的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

為興寧等地區用戶提供了全套網頁設計制作服務，及興寧網站建設行業解決方案。主營業務為成都網站設計、成都網站建設、興寧網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

1. 云開發簡介

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

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

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

• 云數據庫

• 云存儲

• 云函數

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

云存儲為小程序提供了遠程上傳和下載文件的能力。下載可以提供權限管理，小程序可以通過相應的API實現文件的上傳和下載功能。

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

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

• 獲取敏感信息，如appid、openid等。

2. 搭建云開發環境

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

啟動微信開發者工具，新創建一個小程序工程。在創建小程序工程的過程中，需要輸入AppID和項目名稱，然后在最下面的目標列表中選擇“建立云開發快速啟動模板”選項，如下圖所示。

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

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

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

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

單擊”確定“按鈕，就會創建一個環境，然后會進入如下圖所示的云開發控制臺。在這個控制臺中可以管理用戶、云數據庫、云存儲、云函數以及統計分析。并且會顯示相關的信息，如今日API調用

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

3. 部署login云函數

模板會默認創建一個login云函數，用于返回openid（標識當前微信登錄用戶的ID），所以在開發基于云的小程序之前，首先要先部署login云函數。

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

成功部署login云函數后，回到小程序的主頁面，單擊“點擊獲取openid”按鈕，如下圖所示，會通過login云函數獲取openid。

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

4. 開始實戰

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

一個集合就相當于一個表。選擇環境后，小程序就會默認有一個數據庫，所以就不需要單獨創建數據庫了，只需要在該數據庫中創建若干個集合（表）即可。

首先打開云開發控制臺，切換到”數據庫“頁面，單后單擊左上角的”添加集合“，會彈出如下圖所示的”添加集合“對話框，輸入集合的名字，然后單擊”確定“按鈕添加集合。

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

由于獲得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頁面的布局。

 
 
 插入數據
 

 查詢數據

 
   姓名：{{nameResult}}
 
 
   年齡：{{ageResult}}
 

在main.wxml文件中，包含3個組件和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，單擊”查詢數據“按鈕，會看到按鈕下方會顯示如下圖的查詢結果，如果未查詢到結果，會顯示一個提示對話框。

關于“小程序中云開發的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。