微信小遊戲開發之使用雲開發作爲後臺服務

主題

結合官方文檔,介紹微信雲開發的使用,並補充了文檔中沒有講清楚的部分

特別說明

CocosCreator微信小遊戲開發系列文章,是我在逐步開發過程中,基於官方文檔之上,記錄一些重點內容,以及對官方文檔中有些知識點的補充和分析。

正文

1. 在微信開發者工具中創建並配置雲開發項目

先在微信開發者工具中創建一個小遊戲項目,如下圖:

圖中的AppID,如果還沒有註冊的,需要先到微信公衆平臺註冊一個小程序,因爲使用測試號生成的AppID,無法看到圖中的“後端服務->小程序-雲開發”選項。

項目創建好並打開項目後如上圖所示,看到 cloudfunction 目錄提示“未選擇環境”,是因爲你還沒開通雲開發,點擊上圖紅色框中的“雲開發”,會彈出“雲開發控制檯”,直接選擇“開通”。如果開通了還是沒有綁定環境,可以關閉再重新打開項目。

開通後,會彈出協議彈窗(有興趣的可以點進去看看),直接“同意”,需要填寫創建新環境需要的名稱和付費套餐,付費套餐都有免費額度,未超過免費額度不收費,所以我直接選擇的個人預付費,套餐計費詳情可以點這裏,如下圖:

根據個人情況選擇套餐就好了,提交訂單,然後耐心等待環境初始化。

雲開發控制檯是管理雲開發資源的地方,控制檯提供以下能力:

  • 運營分析:查看雲開發監控、配額使用量、用戶訪問情況
  • 數據庫:管理數據庫,可查看、增加、更新、查找、刪除數據、管理索引、管理數據庫訪問權限等
  • 存儲管理:查看和管理存儲空間
  • 雲函數:查看雲函數列表、配置、日誌

2. 雲函數介紹

雲開發環境創建好以後,可以先關掉控制檯了,回到遊戲項目裏環境會自動綁定環境好(如果還是沒有綁定環境,可以關閉再重新打開項目),環境綁定好後,就可以開始嘗試編寫雲函數了。

雲函數即在雲端(服務器端)運行的函數。開發者無需購買、搭建服務器,只需編寫函數代碼並部署到雲端即可在小程序端調用。雲函數之間也可互相調用,叫做雲調用。

雲函數的寫法與一個在本地定義的JavaScript方法無異,代碼運行在雲端Node.js中。當雲函數被小程序端調用時,定義的代碼會被放在Node.js運行環境中執行。

我們可以像在Node.js環境中使用JavaScript一樣,在雲函數中進行網絡請求等操作,還可以通過雲函數後端 SDK 搭配使用多種服務,比如使用雲函數 SDK 中提供的數據庫和存儲 API 進行數據庫和存儲的操作,這部分可參考數據庫和存儲後端 API 文檔

雲函數的獨特優勢在於與微信登錄鑑權的無縫整合。當小程序端調用雲函數時,雲函數的傳入參數中會被注入小程序端用戶的 openid,開發者可以直接使用該 openid,有了openid相當於拿到了用戶的唯一uid,其他的數據都通過uid來關聯。

其實在項目創建時,開發者工具已經自動爲我們準備好了兩個雲函數模版login和uploadScore,分別介紹獲取openid和小程序上傳數據到雲數據庫中,我們可以結合官方文檔來掌握他們的寫法。

3. 雲函數創建和編寫

接下來,在項目根目錄找到project.config.json文件,搜索cloudfunctionRoot字段,如果沒有新增cloudfunctionRoot字段,它的作用是指定本地已存在的目錄作爲雲開發的本地根目錄,示例:

{
   "cloudfunctionRoot": "cloudfunction/"
}

選中 cloudfunction 目錄,鼠標右鍵喚出菜單,包含以下選項:

  • 查看當前環境
  • 新建 Node.js 雲函數
  • 同步雲函數列表
  • 開啓雲函數本地調試
1. 創建一個雲函數

選擇“新建Node.js雲函數”,然後輸入雲函數的名稱,比如query,確定後本地會創建如下圖的“目錄結構和文件”,同時會自動上傳雲函數到線上環境中:

cloudfunction 
|-- query (以雲函數名字命名的目錄,存放該雲函數的所有代碼)
    |-- config.json (配置文件) 
    |-- index.js (雲函數入口文件)
    |-- package.json (npm包定義文件)
    |-- ... (自定義文件)

config.json:目前知道的可配置內容是定時觸發器雲調用權限(可以點擊參考對應的官方文檔)。

index.js:雲函數被調用時實際執行的入口函數是index.js中導出的main方法

package.json:默認定義了最新wx-server-sdk依賴,將雲函數用到的依賴放到文件中,部署和本地調試時工具會執行npm install

來看下index.js的代碼:

// 雲函數模板
const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init({
  // API 調用都保持和雲函數當前所在環境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

/**
 * exports.main即爲雲函數執行的入口方法
 * 這個示例將經自動鑑權過的小程序用戶 openid 返回給小程序端
 * event 參數包含小程序端調用傳入的 data
 */
exports.main = async (event, context) => {
  // console.log 的內容可以在雲開發雲函數調用日誌查看
  console.log(event)
  // 獲取 WX Context (微信調用上下文),包括 OPENID、APPID等信息
  const wxContext = cloud.getWXContext()
  
  // 可執行其他自定義邏輯
  ...

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    env: wxContext.ENV,
  }
}

一個雲函數,可以類比成服務器的一個api接口,但是在自己的服務器api接口中,我們一般需要做token和驗籤等身份校驗的工作,而在雲函數中wx-server-sdk幫我們做了這些工作,通過wxContext.OPENID能直接拿到唯一標識openid,相當於api接口中的用戶uid,我們只需要專注於業務邏輯的實現。

再來看雲函數的調用方式:

//Promise風格的調用
wx.cloud.callFunction({
  // 雲函數名稱
  name: 'query',
  // 傳給雲函數的參數
  data: {
    name: 'cloud'
  },
})
.then(res => {
  console.log(res.result)
})
.catch(console.error)

爲什麼是這麼調用呢?

來看exports.main方法,函數聲明用了async關鍵字,方法體執行完後,會返回Promise對象,那async關鍵字有什麼作用呢?

asyncawait關鍵字在JavaScript中代表函數的異步執行和同步執行。

什麼是async異步執行呢,舉個例子,你在火車站窗口排隊買票,售票員給你買票時,發現你沒帶身份證,所以售票員不能給你買票,要你帶着身份證來纔給你買。售票員不會因爲你沒帶身份證,而一直等着你拿到身份證,不給其他人買票;實際上你怎麼去拿身份證,中間花了多久,售票員不會在意,他只要你拿着身份證就可以找他買票。

這個例子中“去拿身份證”的過程,就是一個async異步執行過程,它不會影響售票員給其他人買票,等你拿到身份證了,就可以找售票員買票。

我們繼續延伸這個例子:在售票員給你買票時,必須要等付完錢,才能出票。你打開手機掃碼付錢的過程,是售票員必須要等待的,這個等待過程就是await同步執行。

async修飾的函數必須要等到方法體中所有await聲明的函數執行完後,async函數纔會得到一個resolve狀態的Promise對象。

而如果在執行async異步函數的過程中,一旦異步函數出現錯誤,整個async函數就會立即拋出錯誤,但是如果在async函數中對異步函數通過try/catch封裝,並在catch方法體中返回Promise.reject(),這樣async函數將得到一個reject狀態的Promise,有效的避免因爲異步函數導致整個async函數的終止,這就推導出瞭如下的調用鏈:

wx.cloud.callFunction(...).then(res => {...}).catch(...)

then()是雲函數執行完成的回調結果,catch()是雲函數異常的回調結果。

注意: 這裏只是簡單介紹了asyncawait關鍵字作用,要想深入瞭解它們的原理和進階用法,可以關注我的公衆號「掉隊程序員」,我會在公衆號持續更新這方面內容。

2. 同步雲函數列表

在右鍵菜單中,選擇“同步雲函數列表”,可以將線上環境中的雲函數列表同步到本地,開發者工具會根據雲函數的名字,在本地中創建出對應的雲函數目錄。

而在一個雲函數目錄上右鍵,在菜單中選擇"下載",雲函數代碼會被下載到指定目錄(指定到同名的雲函數目錄下)。

注意: 如果本地已經存在該雲函數,則會覆蓋本地的代碼。

3. 開啓雲函數本地調試

在微信開發工具中提供了一套與線上環境一致的Node.js雲函數運行環境,讓開發者可以在本地對雲函數進行調試,等同於預發佈測試環境,在本地調試完畢以後在將雲函數上傳部署。

具體的調試過程,官方文檔講的很清楚,可以看這裏

4. 雲函數上傳部署

雲函數上傳部署分爲 所有文件 和 雲端安裝依賴(不上傳node_modules)

如果想在雲函數中使用自定義的配置文件,比如:配置風控開關,怎麼辦呢?

在雲函數執行過程中,通過__dirname可獲取當前雲函數的根目錄,而和雲函數打包上傳的文件(兩種上傳部署都會將除node_modules目錄下的其他文件一起上傳),可以通過__dirname加相對路徑引用獲取。

這兩種上傳方式的區別在於:

用到平臺相關的Node.js native依賴,即依賴需要在相應平臺下編譯(Windows / macOS / Linux ...)的,務必注意:如果使用全量上傳而不是雲端安裝依賴,則需在 Linux 平臺(CentOS 7 最佳)下編譯後再上傳,否則可能出現環境兼容性問題。即涉及到Node.js native依賴的,最好選擇 雲端安裝依賴(不上傳node_modules)。

總結

微信雲開發入門很簡單,但是想要熟練使用,必須對Node.js語法進一步學習,結合自己小程序的業務需求,不斷的去解決問題,就能很快的上手雲開發了。

結尾

既然您看到這了,說明文章對你還有吸引力,幫忙點個贊再走吧,謝謝!

關注我的公衆號「掉隊程序員」,持續輸出更多內容!

自己動手寫,分解項目中的各個模塊需求,通過查文檔和搜索Cocos社區,解決碰到的問題,最終在微信上線了下面這款微信小遊戲《成語錦衣衛》,歡迎大家掃碼體驗,並作爲參考項目模版,開發出屬於自己的小遊戲


預告

下一節和朋友們說一說:Cocos Creator集成微信雲開發和調用微信開放能力

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章