前言

　　好久沒寫小程序的文章了，最近小程序變動也比較大。最主要的是我之前也曾寫過個人如果開發小程序，可以使用Bmob免費的服務去開發自己的一套小程序，Bmob提供了免費的雲函數以及數據庫（20G空間）。But！！！微信小程序推出了自己的雲開發服務，雖然數據庫只有5G的空間，但是對於個人開發基本上足夠使用，20支雲函數接口以及雲存儲（相當於OSS服務器一樣存放圖片json文件等），以及用戶管理。

　　1. 先來玩玩雲函數

　　雲函數是什麽呢？估計很多玩過阿裏雲以及騰訊雲的人已經對這個名詞早已很熟悉。一種無需服務器的執行環境，平臺會給出它支持的語言以及核心的代碼，即可以在服務商提供的設施上彈性、安全的運行。這個很大程度上省卻了很多開發部署工作，用過的都說好（假的）。

　　小程序內部提供了專門用於雲函數調用的API，而我們只需要在雲函數內將每次獲取到的appId以及openId不再需要後臺經過一系列鑒定加密就可以獲取到可信任的用戶登錄狀態！！！這個是最主要的，再之前利用Bmob也好，自己開發也好，這個是必備的，具體前往微信登錄流程查看。現在利用小程序本身的雲函數，省去了大量工作，真的是個人開發者的福音。

　　廢話這麽多，趕緊開始第一個雲函數的添加以及調用吧 ---->

配置雲開發：

　　第一步： project.config.json 中進行添加字段 "cloudfunctionRoot": "cloudfunctions/" 這個字段主要是為了指定存放雲函數的文件夾

　　第二步： app.json 中添加 "cloud": true 指定是雲開發模式

　　第三步： 添加雲函數

　　第四步：添加對應的函數後，會下載依賴，這一步玩過node及npm的都知道，就是下載依賴，現在下載的是微信小程序官方的sdk。。。

　　　　等下載完成後，點開雲開發控制臺的雲函數一欄就會發現函數名稱已經有了test這個雲函數了。。。具體看下圖所示：

　　　　這個test雲函數就是我們剛剛添加的雲函數，此時在開發者工具中打開test目錄下的index.js文件，就可以進行返回我們需要返回的內容。。。如下：測試

　　　　這裏如果是利用了獲取授權的按鈕之後就會在return中返回用戶登錄後的openId和appId，所以我們就return默認的event

　　　　保存完了，還不夠因為這個雲函數我們都說了是小程序提供的服務平臺來運行我們做的類似於接口的函數，所以我們必須得上傳，具體看下圖：

　　　　等待上傳完畢，在pages下index.wxml中需要做的是

<button open-type="getUserInfo" bindgetuserinfo="getUserInfgo">授權登錄</button>

　　　　由於獲取授權需要配合點擊後js的操作，所以在index.js中添加對應的getUserInfo的方法，並且註意這裏的wx.cloud.callFunction方法，因為這是調用雲函數的方法。不可忽視~~~

getUserInfo: function(e){
    wx.cloud.callFunction({
      name: "test",//這裏填寫雲函數的名字
      data: {
        userInfo: e // 這裏是把參數e直接傳給test函數處理
      },
      success: res => {
        console.log(res) // 返回的文本如下圖所示：
      },
      fail: err => {
        console.log(err)
      }
    })
  }

　　　　可以看到輸出的信息中會返回用戶的openId以及appId還有對應雲函數認證的信息。。。具體的實際可以自行測試查看，這裏不做進一步探測...

　　　　這裏雲函數已經相信大家會玩了。。。就不再做其他的一一測試以及講解。

　　2. 數據庫

　　對於數據庫我相信大家都早已用的不能再熟悉，mySql， SQLServer， Oracle， MongoDb， indexDb等等。。。。接下來帶著大家玩玩這個微信雲開發提供的數據庫。。。

　　雲開發提供的應該是類似於NoSql類型的數據庫，存儲的是JSON對象。一個數據庫也是多個集合（相似於MongoDb）

　　接下來讓我們開始快樂的使用這個數據庫吧~~~

//首先  要實例一個數據庫對象

let db = wx.cloud.database();
db.collection(‘counters‘).add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回結果中會包含新創建的記錄的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: ‘新增記錄成功‘,
        })
        console.log(‘[數據庫] [新增記錄] 成功，記錄 _id: ‘, res._id)
      },
      fail: err => {
        wx.showToast({
          icon: ‘none‘,
          title: ‘新增記錄失敗‘
        })
        console.error(‘[數據庫] [新增記錄] 失敗：‘, err)
      }
    })

　　　　這是利用添加數據的方法進行添加的數據，此時可以在雲開發控制臺看到對應得數據：下圖---》

　　　　此時可以看到插入進去的數據。。。接下來可以看看增刪改查的其余操作：

//查詢數據：
const db = wx.cloud.database()
    // 查詢當前用戶所有的 counters
    db.collection(‘counters‘).where({
      _openid: this.data.openid
    }).get({
      success: res => {
        this.setData({
          queryResult: JSON.stringify(res.data, null, 2)
        })
        console.log(‘[數據庫] [查詢記錄] 成功: ‘, res)
      },
      fail: err => {
        wx.showToast({
          icon: ‘none‘,
          title: ‘查詢記錄失敗‘
        })
        console.error(‘[數據庫] [查詢記錄] 失敗：‘, err)
      }
})

// 修改數據
const db = wx.cloud.database()
    const newCount = this.data.count + 1
    db.collection(‘counters‘).doc(this.data.counterId).update({
      data: {
        count: newCount
      },
      success: res => {
        this.setData({
          count: newCount
        })
      },
      fail: err => {
        icon: ‘none‘,
        console.error(‘[數據庫] [更新記錄] 失敗：‘, err)
      }
 })    

//  刪除數據
const db = wx.cloud.database()
      db.collection(‘counters‘).doc(this.data.counterId).remove({
        success: res => {
          wx.showToast({
            title: ‘刪除成功‘,
          })
          this.setData({
            counterId: ‘‘,
            count: null,
          })
        },
        fail: err => {
          wx.showToast({
            icon: ‘none‘,
            title: ‘刪除失敗‘,
          })
          console.error(‘[數據庫] [刪除記錄] 失敗：‘, err)
        }
 })

　　　　當然，在數據庫操作之前需要利用雲函數login獲取對應的openId， 獲取方法請細看上方雲函數test部分。。。

　　3. 存儲部分

　　小程序只有2M的空間，個人開發要麽將圖片放在這小小的2M內，要麽自己配置https證書的域名，再要麽利用github將自己的域名免費轉為https，不會玩的可以私信我，我可以再單獨寫一篇將自己的域名利用github穿https證書的方法，哈哈（略過）。將圖片放github不用自己的域名也行，但是利用github就要忍受它的網速慢以及隨時被墻的可能性。。。

　　現在我們來用雲開發提供的存儲：

wx.chooseImage({
      count: 1,
      sizeType: [‘compressed‘],
      sourceType: [‘album‘, ‘camera‘],
      success: function (res) {

        wx.showLoading({
          title: ‘上傳中‘,
        })

        const filePath = res.tempFilePaths[0]
        
        // 上傳圖片
        const cloudPath = ‘my-image‘ + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log(‘[上傳文件] 成功：‘, res)

            let fileId = res.fileID
            let cloudPath = cloudPath
            let imagePath = filePath
            
            console.log( fileId )
            console.log( cloudPath )
           console.log( imagePath )
          },
          fail: e => {
            console.error(‘[上傳文件] 失敗：‘, e)
            wx.showToast({
              icon: ‘none‘,
              title: ‘上傳失敗‘,
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })                

　　　　代碼已經奉上，上傳成功後再跑去雲開發控制臺查看一番~~~

　　　　好了，雲開發已經基本上完成，當然雲存儲也可以存儲json文件，然後請求靜態數據~~~看自己的需要了。

　　　　雲開發是將前端開發者擺到了更重要的地位，不再很依賴於服務端。這真的是一個福利~~~~

　　　　OVER~~SLEEP!!!

玩轉小程序雲開發