小程序雲開發實戰

1. 雲開發簡介

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

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

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

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

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

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

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

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

  • 部署多個用戶共享,且容易維護的代碼
  • 獲取敏感信息,如appid、openid等。

2. 搭建雲開發環境

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

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

<br/>

3. 部署login雲函數

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

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

image.png

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

image.png

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

image.png

4. 開始實戰

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

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

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

image.png

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

image.png

因爲得到openid後,會跳到userConsole頁面,因此咱們在這個頁面的onLoad函數中向test集合插入一個json文檔。

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

image.png

在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中看到以下圖的信息。

image.png

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

image.png

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

  • 從文本輸入組件輸入姓名和年齡,單擊「插入數據」按鈕向雲數據庫插入包含信命和年齡的數據。

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

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

image.png

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

image.png

接下來修改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集合。

image.png

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

image.png

請關注「極客起源」公衆號,下載源代碼,二維碼以下:

相關文章
相關標籤/搜索