微信小程式雲開發使用方法新手初體驗
今天看到微信推送了一條小程式雲上線通知,作為一個前端er,滿懷期待的去看了看,很不錯先看看文件上怎麼說的:
開發者可以使用雲開發開發微信小程式、小遊戲,無需搭建伺服器,即可使用雲端能力,6的一匹。
雲開發為開發者提供完整的雲端支援,弱化後端和運維概念,無需搭建伺服器,使用平臺提供的 API 進行核心業務開發,即可實現快速上線和迭代,同時這一能力,同開發者已經使用的雲服務相互相容,並不互斥。(就是說以後老闆讓你做小程式,連個後臺的人都不用給你配了,自己搞定就行了)。
目前提供三大基礎能力支援:
-
雲函式:在雲端執行的程式碼,微信私有協議天然鑑權,開發者只需編寫自身業務邏輯程式碼
-
資料庫:一個既可在小程式前端操作,也能在雲函式中讀寫的 JSON 資料庫
-
儲存:在小程式前端直接上傳/下載雲端檔案,在雲開發控制檯視覺化管理
說白了就是,雲函式就是後端程式碼,現在叫雲函式,自己寫,自己上傳,資料庫沒什麼好說的,就是資料庫,不過這個資料庫是json資料庫,很方便,怎麼個方便法呢,看下圖:
傳統資料庫以mysql為例子:
看到int..這麼多型別是不是很煩躁,取的時候再合併多個表也很麻煩
小程式雲json資料庫:
看到這些型別是不是很親切,大大降低了新手對資料庫理解,不用學黑視窗,sql命令,還可以匯入josn資料,很是方便。
現在走一遍流程:
1、建立帶小程式雲模板的小程式:
----新建一個空的資料夾,填入你的appId(必須),官方說 :勾選建立 “雲開發 QuickStart 專案”,實際上是"建立雲開發快速啟動模板",有點坑哦,同學要注意,點選確定 ==>
2.看到這麼多是不是有點方 - -!,看到多了一個東西,點選建立自己的環境,,具體就是寫個名字,創個一個環境,官方上說是最好建立倆個環境,一個是開發環境,一個是線上環境。
不做贅述,都是免費的,,看這配置給的也挺良心,一般人真的不用升級配置 ==>
3.選擇環境,環境建立好了,不過還沒有使用上
對第一個資料夾點右鍵,選擇你要使用的環境,下面則是你的雲函式,就是跑在伺服器上的。
對login資料夾點右鍵,選擇上傳並部署,ps:不上傳部署怎麼使用呀,所以沒毛病。==>
4.先別急上傳個login是怎麼使用的,我們先去看點選獲取openid是事件,發現,這裡只有個name對應上上傳的雲函式事件名,而云函式直接就返回了openid,看看雲函式是怎麼實現的
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',
})
}
})
// 雲函式模板
// 部署:在 cloud-functions/login 資料夾右擊選擇 “上傳並部署”
/**
* 這個示例將經自動鑑權過的小程式使用者 openid 返回給小程式端
*
* event 引數包含
* - 小程式端呼叫傳入的 data
* - 經過微信鑑權直接可信的使用者唯一標識 openid
*
*/
exports.main = (event, context) => {
console.log(event)
console.log(context)
// 可執行其他自定義邏輯
// console.log 的內容可以在雲開發雲函式呼叫日誌檢視
return {
openid: event.userInfo.openId,
}
}
雲函式裡,直接就能拿到使用者的openid和appid並返回,所以在前端上拿到了openid,真的是很方便。==>
5.關於資料庫,資料庫那邊每一個表都有許可權設定,好好看一下。
建立很簡單,讀取也很簡單,很像slq語句。
先建立一個db物件,然後直接走collection('表名字').where({條件}).get().then(res=>{}) ,我這裡使用的是Promise風格,當然也可以使用回撥的方式,就可以把表裡的資料都取出來在頁面上展示了。
const db = wx.cloud.database();
db.collection('todos').where({
_id: 'W5c0IDWesyZkco4t'
}).get().then(res => {
this.setData({
dataList: res.data
})
})
感覺還可以繼續完善,使用起來感覺很好,把一切變的簡單。