微信小遊戲開發之Cocos Creator使用微信雲開發和微信開放能力

主題

Cocos Creator集成微信雲開發和調用微信開放能力

特別說明

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

正文

上篇講了如何使用微信雲開發作爲後臺服務,但是它的場景是用於直接在微信開發者工具中創建的項目,而我們的目的是在Cocos Creator項目使用微信雲開發,及使用微信生態的開放能力,那麼我們該怎麼做呢?

Cocos Creator文檔中只提到了怎麼發佈“微信小遊戲”,以及如何使用自帶的第三方服務,而Cocos Creator自帶的TCB雲開發服務,因爲侷限性太大(具體的原因可以看我之前的文章),被我放棄了。

我們先來看看,發佈微信小遊戲的過程:

1. Cocos Creator項目構建發佈微信小遊戲

選擇“菜單欄->項目—>構建發佈”,如下圖:

各發布配置項的具體含義,可以看這裏,我只說一下常用的幾項內容:

  • 發佈平臺:項目要運行的平臺,下拉列表中有幾大類可以選擇“小遊戲”、“web”、“Android”、“iOS”、Mac等;

  • 發佈路徑:項目編譯好後的文件存放位置,默認是在根目錄的build目錄下;

  • 初始場景:即項目運行時,第一個加載的場景

  • appid:如果發佈爲微信小遊戲,這裏就是在微信公衆平臺創建的小程序的appid;

  • 允許分離引擎: 勾選它的目的是爲提升小遊戲啓動速度。引擎分離的好處是,在你手機上已經有其他小遊戲已經使用了CocosCreator引擎插件時,我們的小遊戲啓動時就不會全量的去下載引擎插件了,微信只需要增量更新引擎兩個版本的差異部分就可以了。需要特別注意:

    • 微信開發者工具中的 詳情 -> 本地設置 -> 調試基礎庫 需要設置爲 2.9.0 或以上版本。
    • 微信開發者工具中的 詳情 -> 本地設置 -> 使用本地的插件 選項,用於設置是否禁用引擎插件,通常 無需勾選。(該選項只在微信開發者工具中有效)

發佈配置好之後,先“構建”,完成後再點“運行”。如果第一次運行,還需要到編輯器 “菜單欄”—> “偏好設置” ->原生開發環境中設置微信開發者工具路徑。或者,直接打開微信開發者工具,選擇導入項目,選擇項目根目錄下的build目錄,打開後可以運行起來。

2. 減小的引擎包的大小

選擇“菜單欄 -> 項目 -> 項目設置 -> 模塊設置”,項目場景中沒有使用的組件模塊,在項目打包時,可以不編譯進引擎包中,因爲引擎包的大小也是算在首包包體中,如下圖:

3. 如何集成微信開發工具的雲開發

上面講了項目發佈構建後的目錄默認是在項目根目錄下的build,在微信工具中運行的也是build目錄,按照上一節講的雲開發使用,是基於微信工具的,那麼雲開發的代碼應該在build目錄下了,但是build目錄的代碼和配置會隨着每次構建而變化,而云開發的代碼和配置也會被覆蓋掉,然後要每次都重新配置。如果是這樣,肯定不行啊,下面說一種我覺得比較方便的解決方法:

上一章提了微信工具創建的小遊戲項目project.config.json文件,增加cloudfunctionRoot字段,用於指定本地已存在的目錄作爲雲開發的本地根目錄,那麼project.config.json文件肯定也有用於指定本地已存在的目錄作爲小遊戲的本地根目錄的字段了。

project.config.json文件中搜索miniprogramRoot,指定當前項目中的一個目錄:

{
  "miniprogramRoot": "wechatgame/"
}

而我們只需要把CocosCreator項目構建的發佈路徑build修改成微信工具創建項目的根目錄,這樣CocosCreator項目的代碼編譯好後,在微信工具項目中雲開發的相關配置不會被覆蓋掉,而且項目還把cocos項目編譯後的代碼,作爲小遊戲代碼直接運行了。

當然還有其他的集成方式,比如cocos項目中創建buildTemplate模版目錄,也可以集成微信雲開發。

4. 調用微信開放能力

要在Cocos項目中使用微信生態能力,比如:分享、雲函數調用、用戶信息等,代碼要怎麼實現呢?

第一時間跑去查閱官方文檔,可是文檔中根本沒有類似的說明,沒辦法只能去Cocos社區搜一下了,找了一圈下來,只找到一些代碼片段,用法跟在微信開發工具中使用的方法沒有不同啊,都是使用wx.開頭,照着寫到js腳本中,然後模擬器運行,報錯Uncaught ReferenceError: wx is not defined

其實是我思維被限制住了,要使用微信小程序的api能力,當然需要到微信開發工具下,才能正常使用,所以需要區分運行環境,如下代碼:

if (cc.sys.platform === cc.sys.WECHAT_GAME) {
    //微信小遊戲環境下才執行
    wx.cloud.callFunction({
        name: 'query',
        data: {},
        success: res => {},
        fail: err => {}
    })
}

比較不友好的是,在VS Code編輯js腳本時,使用微信的api沒有智能提示功能。

總結

  1. Cocos Creator項目集成微信雲開發,通過將Cocos項目代碼構建好後,放到微信工具中帶有云開發能力的項目目錄下。

  2. Cocos項目調用微信開放能力,和在微信工具創建的項目中用法一致,只是多了一步判斷運行環境。

結尾

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

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

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


預告

下一節和朋友們說一說:Cocos Creator不同分辨率的背景圖和場景內容適配

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