玩轉小程式雲開發
前言
好久沒寫小程式的文章了，最近小程式變動也比較大。最主要的是我之前也曾寫過個人如果開發小程式，可以使用Bmob免費的服務去開發自己的一套小程式，Bmob提供了免費的雲函式以及資料庫（20G空間）。But！！！微信小程式推出了自己的雲開發服務，雖然資料庫只有5G的空間，但是對於個人開發基本上足夠使用，20支雲函式介面以及雲端儲存（相當於OSS伺服器一樣存放圖片json檔案等），以及使用者管理。
1. 先來玩玩雲函式
雲函式是什麼呢？估計很多玩過阿里雲以及騰訊雲的人已經對這個名詞早已很熟悉。一種無需伺服器的執行環境，平臺會給出它支援的語言以及核心的程式碼，即可以在服務商提供的設施上彈性、安全的執行。這個很大程度上省卻了很多開發部署工作，用過的都說好（假的）。
小程式內部提供了專門用於雲函式呼叫的API，而我們只需要在雲函式內將每次獲取到的appId以及openId不再需要後臺經過一系列鑑定加密就可以獲取到可信任的使用者登入狀態！！！這個是最主要的，再之前利用Bmob也好，自己開發也好，這個是必備的，具體前往微信登入流程檢視。現在利用小程式本身的雲函式，省去了大量工作，真的是個人開發者的福音。
廢話這麼多，趕緊開始第一個雲函式的新增以及呼叫吧 ---->
配置雲開發：
第一步： project.config.json 中進行新增欄位 "cloudfunctionRoot": "cloudfunctions/" 這個欄位主要是為了指定存放雲函式的資料夾 "cloudfunctions/" 
第二步： app.json 中新增 "cloud": true 指定是雲開發模式
第三步： 新增雲函式
第四步：新增對應的函式後，會下載依賴，這一步玩過node及npm的都知道，就是下載依賴，現在下載的是微信小程式官方的sdk。。。
等下載完成後，點開雲開發控制檯的雲函式一欄就會發現函式名稱已經有了test這個雲函數了。。。具體看下圖所示：
這個test雲函式就是我們剛剛新增的雲函式，此時在開發者工具中開啟test目錄下的index.js檔案，就可以進行返回我們需要返回的內容。。。如下：測試
這裡如果是利用了獲取授權的按鈕之後就會在return中返回使用者登入後的openId和appId，所以我們就return預設的 event 物件以及 context （上下文）物件。主要是為了看看小程式預設提供的物件包含了什麼，我們可以用什麼？？？
儲存完了，還不夠因為這個雲函式我們都說了是小程式提供的服務平臺來執行我們做的類似於介面的函式，所以我們必須得上傳，具體看下圖：
等待上傳完畢，在 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!!!