1. 程式人生 > >微信小程式雲開發使用方法新手初體驗

微信小程式雲開發使用方法新手初體驗

今天看到微信推送了一條小程式雲上線通知,作為一個前端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
            })
        })

感覺還可以繼續完善,使用起來感覺很好,把一切變的簡單。