1. 云開(kāi)發(fā)簡(jiǎn)介

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

開(kāi)發(fā)一款小程序需要兩名或更多的程序員參與，一直困擾著很多小的創(chuàng)業(yè)公司，因?yàn)槎喙蛡蛞粋€(gè)人，就會(huì)增加很多成本。所以基于這個(gè)痛點(diǎn)，很多公司推出了云開(kāi)發(fā)技術(shù)，例如Bmob就是較早推出云開(kāi)發(fā)的公司，所謂云開(kāi)發(fā)，就是將服務(wù)端的功能都封裝起來(lái)，然后向客戶端提供API訪問(wèn)這些封裝的功能。服務(wù)端的主要功能無(wú)外乎數(shù)據(jù)存儲(chǔ)、文件上傳下載、視頻/音頻流等功能。這些功能大多開(kāi)發(fā)都不困難，但比較費(fèi)時(shí)，所以將其封裝起來(lái)供客戶端調(diào)用是一個(gè)非常好的主意。

騰訊最近推出了自己的云開(kāi)發(fā)系統(tǒng)，不過(guò)這個(gè)云開(kāi)發(fā)系統(tǒng)目前只能用于小程序，而且只提供了如下3種。

• 云數(shù)據(jù)庫(kù)
• 云存儲(chǔ)
• 云函數(shù)

云數(shù)據(jù)庫(kù)是指在服務(wù)端提供的數(shù)據(jù)庫(kù)服務(wù)，小程序云提供的數(shù)據(jù)庫(kù)屬于文檔數(shù)據(jù)庫(kù)，文檔數(shù)據(jù)庫(kù)有別于關(guān)系型數(shù)據(jù)庫(kù)。傳統(tǒng)的關(guān)系型數(shù)據(jù)庫(kù)中可以保存若干個(gè)表，每一個(gè)表由若干條記錄組成。但文檔數(shù)據(jù)庫(kù)保存的是JSON格式的數(shù)據(jù)，每一個(gè)JSON文檔相當(dāng)于關(guān)系型數(shù)據(jù)庫(kù)中的一個(gè)表。也就是說(shuō)，文檔數(shù)據(jù)庫(kù)保存的是JSON文檔的集合。非常流行的MongoDB就是典型的文檔數(shù)據(jù)庫(kù)。云數(shù)據(jù)庫(kù)個(gè)組成部分對(duì)應(yīng)的關(guān)系如下表所示。

云存儲(chǔ)為小程序提供了遠(yuǎn)程上傳和下載文件的能力。下載可以提供權(quán)限管理，小程序可以通過(guò)相應(yīng)的API實(shí)現(xiàn)文件的上傳和下載功能。

云函數(shù)就是一段可以運(yùn)行在服務(wù)端的代碼，之所以要將部分代碼在服務(wù)端運(yùn)行，主要有如下兩個(gè)原因：

• 部署多個(gè)用戶共享，且容易維護(hù)的代碼
• 獲取敏感信息，如appid、openid等。

2. 搭建云開(kāi)發(fā)環(huán)境

現(xiàn)在讓我們來(lái)開(kāi)發(fā)第一個(gè)與云的小程序，首先應(yīng)該下載最新版的微信開(kāi)發(fā)者工具，然后在小程序后臺(tái)獲取AppID。使用云開(kāi)發(fā)功能，必須使用真實(shí)的AppID，不能使用測(cè)試用的AppID。

啟動(dòng)微信開(kāi)發(fā)者工具，新創(chuàng)建一個(gè)小程序工程。在創(chuàng)建小程序工程的過(guò)程中，需要輸入AppID和項(xiàng)目名稱(chēng)，然后在最下面的目標(biāo)列表中選擇“建立云開(kāi)發(fā)快速啟動(dòng)模板”選項(xiàng)，如下圖所示。

創(chuàng)建完支持云開(kāi)發(fā)的小程序工程后，工程目錄結(jié)構(gòu)和IDE主界面如下圖所示。當(dāng)前工程默認(rèn)帶了一些例子（模板中的例子）來(lái)幫助理解和開(kāi)發(fā)基于云的小程序。

如果第一次使用這個(gè)AppID開(kāi)發(fā)基于云的小程序，應(yīng)該單擊界面上方的“云開(kāi)發(fā)”按鈕，會(huì)顯示如下圖所示的頁(yè)面。

這是一個(gè)開(kāi)通云服務(wù)的頁(yè)面，單擊“開(kāi)通”按鈕，就會(huì)開(kāi)通用于云開(kāi)發(fā)的服務(wù)。在開(kāi)通的過(guò)程中會(huì)出現(xiàn)如下圖所示的確認(rèn)對(duì)話框，單擊”確定“按鈕進(jìn)入下一個(gè)設(shè)置頁(yè)面。

這個(gè)頁(yè)面是”新建環(huán)境“頁(yè)面，如下圖所示。需要輸入”環(huán)境名稱(chēng)“，一個(gè)任意的字符串。在下面列出了基礎(chǔ)版的配置。如數(shù)據(jù)庫(kù)存儲(chǔ)空空間、云函數(shù)數(shù)量等。如果想要更多的資源，那以后肯定是要收費(fèi)的。天下沒(méi)有免費(fèi)的午餐。不過(guò)這個(gè)配置做實(shí)驗(yàn)和用戶量不是非常大的小程序還是夠用的。

單擊”確定“按鈕，就會(huì)創(chuàng)建一個(gè)環(huán)境，然后會(huì)進(jìn)入如下圖所示的云開(kāi)發(fā)控制臺(tái)。在這個(gè)控制臺(tái)中可以管理用戶、云數(shù)據(jù)庫(kù)、云存儲(chǔ)、云函數(shù)以及統(tǒng)計(jì)分析。并且會(huì)顯示相關(guān)的信息，如今日API調(diào)用

如果想創(chuàng)建新環(huán)境，可以將鼠標(biāo)放在右側(cè)當(dāng)前環(huán)境minicloud上，會(huì)彈出如下圖所示的菜單，單擊”創(chuàng)建新環(huán)境“菜單項(xiàng)就會(huì)創(chuàng)建一個(gè)新的環(huán)境，目前每個(gè)小程序賬號(hào)課免費(fèi)創(chuàng)建兩個(gè)新環(huán)境。

3. 部署login云函數(shù)

模板會(huì)默認(rèn)創(chuàng)建一個(gè)login云函數(shù)，用于返回openid（標(biāo)識(shí)當(dāng)前微信登錄用戶的ID），所以在開(kāi)發(fā)基于云的小程序之前，首先要先部署login云函數(shù)。

選中l(wèi)ogin云函數(shù)，在右鍵菜單中單擊”上傳并部署“菜單項(xiàng)進(jìn)行部署，如下圖所示。

成功部署login云函數(shù)后，回到小程序的主頁(yè)面，單擊“點(diǎn)擊獲取openid”按鈕，如下圖所示，會(huì)通過(guò)login云函數(shù)獲取openid。

成功通過(guò)login云函數(shù)獲取openid后，會(huì)顯示如下圖的頁(yè)面?，F(xiàn)在就可以使用云API來(lái)開(kāi)發(fā)小程序了。

4. 開(kāi)始實(shí)戰(zhàn)

現(xiàn)在我們來(lái)開(kāi)發(fā)第一個(gè)基于云的小程序，這個(gè)小程序非常簡(jiǎn)單，就是在一個(gè)集合中插入一條數(shù)據(jù)，也就是一個(gè)JSON格式的文本。

一個(gè)集合就相當(dāng)于一個(gè)表。選擇環(huán)境后，小程序就會(huì)默認(rèn)有一個(gè)數(shù)據(jù)庫(kù)，所以就不需要單獨(dú)創(chuàng)建數(shù)據(jù)庫(kù)了，只需要在該數(shù)據(jù)庫(kù)中創(chuàng)建若干個(gè)集合（表）即可。

首先打開(kāi)云開(kāi)發(fā)控制臺(tái)，切換到”數(shù)據(jù)庫(kù)“頁(yè)面，單后單擊左上角的”添加集合“，會(huì)彈出如下圖所示的”添加集合“對(duì)話框，輸入集合的名字，然后單擊”確定“按鈕添加集合。

創(chuàng)建一個(gè)新集合后的效果如下圖所示?？梢酝ㄟ^(guò)單擊右側(cè)的”添加記錄“導(dǎo)入json或csv文件，每個(gè)文件最大50MB。不過(guò)本節(jié)并不會(huì)通過(guò)云開(kāi)發(fā)控制臺(tái)導(dǎo)入，而是使用代碼來(lái)插入文檔。

由于獲得openid后，會(huì)跳到userConsole頁(yè)面，所以我們?cè)谶@個(gè)頁(yè)面的onLoad函數(shù)中向test集合插入一個(gè)json文檔。

在小程序開(kāi)發(fā)工具中定位到userConsole.js文件，并找到onLoad函數(shù)，如下圖所示。

在onLoad函數(shù)中會(huì)從全局變量（globalData）中獲取openid。操作集合首先要通過(guò)init函數(shù)初始化環(huán)境，init函數(shù)的語(yǔ)法格式如下：

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

其中envname是字符串類(lèi)型的值，表示要使用的環(huán)境名，在前面已經(jīng)創(chuàng)建了一個(gè)名為minicloud的環(huán)境了，所以本例的envname的值是'minicloud'。

然后使用下面的代碼獲取數(shù)據(jù)庫(kù)和集合對(duì)象。

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

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

最后使用add方法插入json格式的數(shù)據(jù)，完整的代碼如下：

  wx.cloud.init({env:'minicloud'})
  const db = wx.cloud.database()
  const test = db.collection('test')

  test.add({
   // data 字段表示需新增的 JSON 數(shù)據(jù)
   data: {

    name: "Bill",
    age:30    
   },
   success: function (res) {    
    // 輸出成功插入后的id以及其他信息
    console.log(res)
   }
  })

現(xiàn)在重新運(yùn)行程序，獲取openid后，就會(huì)在小程序開(kāi)發(fā)者工具的Console中看到如下圖的信息。

回到云開(kāi)發(fā)控制臺(tái)，會(huì)看到test集合多了如下圖所示的數(shù)據(jù)。這表明json文檔已經(jīng)插入成功。

現(xiàn)在來(lái)改進(jìn)前面編寫(xiě)的基于云的小程序。這個(gè)小程序盡管可以向云數(shù)據(jù)庫(kù)中插入數(shù)據(jù)，不過(guò)代碼與模板代碼混在了一起，在真正的小程序項(xiàng)目中，不可能讓用戶先單擊按鈕獲得openid，再進(jìn)行下面的操作，所以現(xiàn)在重新編寫(xiě)基于云的小程序。主要包括如下功能。

• 從文本輸入組件輸入姓名和年齡，單擊“插入數(shù)據(jù)”按鈕向云數(shù)據(jù)庫(kù)插入包含信命和年齡的數(shù)據(jù)。
• 從文本輸入組件輸入記錄ID，單擊“查詢數(shù)據(jù)”按鈕，從云數(shù)據(jù)庫(kù)中查詢相關(guān)的數(shù)據(jù)，并將查詢到的數(shù)據(jù)中的姓名和年齡顯示在頁(yè)面上。

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

為了在我們自己頁(yè)面上實(shí)現(xiàn)這些功能，首先在小程序工程中創(chuàng)建一個(gè)main目錄，并創(chuàng)建如下圖所示的文件。

接下來(lái)修改app.json文件，將main頁(yè)面變成首頁(yè)（第一個(gè)顯示的頁(yè)面），也就是將 "pages/main/main"放在pages數(shù)組的第一個(gè)元素的位置，修改后的app.json文件的內(nèi)容如下：

{
 "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": "云開(kāi)發(fā) QuickStart",
  "navigationBarTextStyle": "black"
 }
}

現(xiàn)在重新運(yùn)行小程序，會(huì)看到main頁(yè)面已經(jīng)成為了小程序的首頁(yè)。由于本例的頁(yè)面需要用到一些組件，所以需要現(xiàn)在main.wxml文件中輸入下面的代碼完成
main頁(yè)面的布局。

<view>
 <input style='margin-top: 40rpx;' placeholder="請(qǐng)輸入姓名" value="{{name}}" bindinput="bindKeyInputName" />
 <input style='margin-top: 40rpx;' placeholder="請(qǐng)輸入年齡" value="{{age}}" bindinput="bindKeyInputAge" />
 <button style='margin-top: 40rpx;' bindtap='insertData'>插入數(shù)據(jù)</button>
 <input style='margin-top: 40rpx;' placeholder="請(qǐng)輸入記錄ID" value="{{recordId}}" bindinput="bindKeyInputId" />

 <button style='margin-top: 40rpx;' bindtap='queryData'>查詢數(shù)據(jù)</button>

 <text style='margin-top: 40rpx;'>
   姓名：{{nameResult}}
 </text>
 <text style='margin-top: 80rpx;'>
   年齡：{{ageResult}}
 </text>
</view>

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

在小程序中調(diào)用云API之前，必須要獲取小程序的openid，這個(gè)openid表示當(dāng)前小程序的用戶ID。由于進(jìn)入小程序必須要通過(guò)微信，所以小程序使用與微信相同的用戶驗(yàn)證體系，因此，小程序就不需要單獨(dú)登錄了，而openid就是小程序是否登錄的憑證。

獲取openid的代碼已經(jīng)包含在模板中了，只需要找到index.js文件，并搜索onGetOpenid函數(shù)，會(huì)看到如下的代碼。

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

上面的代碼用于調(diào)用名為login的云函數(shù)獲取小程序的openid。通常只需要將onGetOpenid函數(shù)中的代碼直接復(fù)制到main.js文件中的onLoad函數(shù)即可。

向云數(shù)據(jù)庫(kù)插入數(shù)據(jù)的代碼前面已經(jīng)學(xué)過(guò)，一會(huì)大家可以看本例完整的代碼。從云數(shù)據(jù)庫(kù)中查詢數(shù)據(jù)可以使用下面的代碼。

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

main.js中完整的實(shí)現(xiàn)代碼如下：

// miniprogram/pages/main/main.js
const app = getApp()
Page({

 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 db:undefined,
 test:undefined,
 data: {
  name:'',
  age:'',
  recordId:'',
  nameResult:'',
  ageResult:''  
 },

 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
  */
 onLoad: function (options) {
  var that = this
  // 調(diào)用login云函數(shù)獲取openid
  wx.cloud.callFunction({
   name: 'login',
   data: {},
   success: res => {
    console.log('[云函數(shù)] [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('[云函數(shù)] [login] 調(diào)用失敗', err)
    wx.navigateTo({
     url: '../deployFunctions/deployFunctions',
    })
   }
  })

 },
 // 單擊“插入數(shù)據(jù)”按鈕調(diào)用該函數(shù)
 insertData:function() {
  var that = this
  try
  {
   // 將年齡轉(zhuǎn)換為整數(shù)類(lèi)型值
   var age = parseInt(that.data.age)
   // 如果輸入的年齡不是數(shù)字，會(huì)顯示錯(cuò)誤對(duì)話框，并退出該函數(shù)
   if(isNaN(age))
   {
    // 顯示錯(cuò)誤對(duì)話框
    wx.showModal({
     title: '錯(cuò)誤',
     content: '請(qǐng)輸入正確的年齡',
     showCancel: false
    })
    return
   } 
   // 向test數(shù)據(jù)集添加記錄
   this.test.add({
    // data 字段表示需新增的 JSON 數(shù)據(jù)
    data: {
     name: that.data.name,
     age: age
    },
    // 數(shù)據(jù)插入成功，調(diào)用該函數(shù)
    success: function (res) {
     console.log(res)
     wx.showModal({
      title: '成功',
      content: '成功插入記錄',
      showCancel:false
     })
     that.setData({
      name:'',
      age:''
     })
    }
   })
  }
  catch(e)
  {
   wx.showModal({
    title: '錯(cuò)誤',
    content: e.message,
    showCancel: false
   })

  }
 },
 // 單擊“查詢數(shù)據(jù)”按鈕執(zhí)行該函數(shù)
 queryData:function() {
  var that = this
   // 根據(jù)記錄ID搜索數(shù)據(jù)集 
  this.db.collection('test').doc(this.data.recordId).get({
   // 找到記錄集調(diào)用
   success: function (res) { 
     // 將查詢結(jié)果顯示在頁(yè)面上 
    that.setData({
     nameResult:res.data.name,
     ageResult:res.data.age
    })

   },
   // 未查到數(shù)據(jù)時(shí)調(diào)用
   fail:function(res) {
    wx.showModal({
     title: '錯(cuò)誤',
     content: '沒(méi)有找到記錄',
     showCancel: false
    })
   }
  })

 },
 // 下面的函數(shù)用于當(dāng)更新input組件中的值時(shí)同時(shí)更新對(duì)應(yīng)變量的值
 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
  })
 },

})

現(xiàn)在重新運(yùn)行小程序，并添加一些數(shù)據(jù)，看到云開(kāi)發(fā)控制臺(tái)中的test集合下多了幾條記錄，如下圖所示。這表明已經(jīng)將數(shù)據(jù)成功插入test集合。

現(xiàn)在回到小程序開(kāi)發(fā)界面，在"查詢按鈕“上方的文本輸入框中輸入一條記錄的ID，單擊”查詢數(shù)據(jù)“按鈕，會(huì)看到按鈕下方會(huì)顯示如下圖的查詢結(jié)果，如果未查詢到結(jié)果，會(huì)顯示一個(gè)提示對(duì)話框。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論