主題

Cocos Creator集成微信云開發(fā)和調(diào)用微信開放能力

特別說明

CocosCreator微信小游戲開發(fā)系列文章，是我在逐步開發(fā)過程中，基于官方文檔之上，記錄一些重點(diǎn)內(nèi)容，以及對(duì)官方文檔中有些知識(shí)點(diǎn)的補(bǔ)充和分析。

正文

上篇講了如何使用微信云開發(fā)作為后臺(tái)服務(wù)，但是它的場(chǎng)景是用于直接在微信開發(fā)者工具中創(chuàng)建的項(xiàng)目，而我們的目的是在Cocos Creator項(xiàng)目使用微信云開發(fā)，及使用微信生態(tài)的開放能力，那么我們?cè)撛趺醋瞿兀?/p>

Cocos Creator文檔中只提到了怎么發(fā)布“微信小游戲”，以及如何使用自帶的第三方服務(wù)，而Cocos Creator自帶的TCB云開發(fā)服務(wù)，因?yàn)榫窒扌蕴螅ň唧w的原因可以看我之前的文章），被我放棄了。

我們先來看看，發(fā)布微信小游戲的過程：

1. Cocos Creator項(xiàng)目構(gòu)建發(fā)布微信小游戲

選擇“菜單欄->項(xiàng)目—>構(gòu)建發(fā)布”，如下圖：

發(fā)布配置

各發(fā)布配置項(xiàng)的具體含義，可以看這里，我只說一下常用的幾項(xiàng)內(nèi)容：

• 發(fā)布平臺(tái)：項(xiàng)目要運(yùn)行的平臺(tái)，下拉列表中有幾大類可以選擇“小游戲”、“web”、“Android”、“iOS”、Mac等；

• 發(fā)布路徑：項(xiàng)目編譯好后的文件存放位置，默認(rèn)是在根目錄的build目錄下；

• 初始場(chǎng)景：即項(xiàng)目運(yùn)行時(shí)，第一個(gè)加載的場(chǎng)景

• appid：如果發(fā)布為微信小游戲，這里就是在微信公眾平臺(tái)創(chuàng)建的小程序的appid；

• 允許分離引擎： 勾選它的目的是為提升小游戲啟動(dòng)速度。引擎分離的好處是，在你手機(jī)上已經(jīng)有其他小游戲已經(jīng)使用了CocosCreator引擎插件時(shí)，我們的小游戲啟動(dòng)時(shí)就不會(huì)全量的去下載引擎插件了，微信只需要增量更新引擎兩個(gè)版本的差異部分就可以了。需要特別注意：

  • 微信開發(fā)者工具中的 詳情 -> 本地設(shè)置 -> 調(diào)試基礎(chǔ)庫 需要設(shè)置為 2.9.0 或以上版本。
  • 微信開發(fā)者工具中的 詳情 -> 本地設(shè)置 -> 使用本地的插件 選項(xiàng)，用于設(shè)置是否禁用引擎插件，通常 無需勾選。（該選項(xiàng)只在微信開發(fā)者工具中有效）

發(fā)布配置好之后，先“構(gòu)建”，完成后再點(diǎn)“運(yùn)行”。如果第一次運(yùn)行，還需要到編輯器 “菜單欄”—> “偏好設(shè)置” ->原生開發(fā)環(huán)境中設(shè)置微信開發(fā)者工具路徑?；蛘?，直接打開微信開發(fā)者工具，選擇導(dǎo)入項(xiàng)目，選擇項(xiàng)目根目錄下的build目錄，打開后可以運(yùn)行起來。

2. 減小的引擎包的大小

選擇“菜單欄 -> 項(xiàng)目 -> 項(xiàng)目設(shè)置 -> 模塊設(shè)置”，項(xiàng)目場(chǎng)景中沒有使用的組件模塊，在項(xiàng)目打包時(shí)，可以不編譯進(jìn)引擎包中，因?yàn)橐姘拇笮∫彩撬阍谑装w中，如下圖：

模塊設(shè)置

3. 如何集成微信開發(fā)工具的云開發(fā)

上面講了項(xiàng)目發(fā)布構(gòu)建后的目錄默認(rèn)是在項(xiàng)目根目錄下的build，在微信工具中運(yùn)行的也是build目錄，按照上一節(jié)講的云開發(fā)使用，是基于微信工具的，那么云開發(fā)的代碼應(yīng)該在build目錄下了，但是build目錄的代碼和配置會(huì)隨著每次構(gòu)建而變化，而云開發(fā)的代碼和配置也會(huì)被覆蓋掉，然后要每次都重新配置。如果是這樣，肯定不行啊，下面說一種我覺得比較方便的解決方法：

上一章提了微信工具創(chuàng)建的小游戲項(xiàng)目project.config.json文件，增加cloudfunctionRoot字段，用于指定本地已存在的目錄作為云開發(fā)的本地根目錄，那么project.config.json文件肯定也有用于指定本地已存在的目錄作為小游戲的本地根目錄的字段了。

在project.config.json文件中搜索miniprogramRoot,指定當(dāng)前項(xiàng)目中的一個(gè)目錄：

{
  "miniprogramRoot": "wechatgame/"
}

而我們只需要把CocosCreator項(xiàng)目構(gòu)建的發(fā)布路徑build修改成微信工具創(chuàng)建項(xiàng)目的根目錄，這樣CocosCreator項(xiàng)目的代碼編譯好后，在微信工具項(xiàng)目中云開發(fā)的相關(guān)配置不會(huì)被覆蓋掉，而且項(xiàng)目還把cocos項(xiàng)目編譯后的代碼，作為小游戲代碼直接運(yùn)行了。

當(dāng)然還有其他的集成方式，比如cocos項(xiàng)目中創(chuàng)建buildTemplate模版目錄，也可以集成微信云開發(fā)。

4. 調(diào)用微信開放能力

要在Cocos項(xiàng)目中使用微信生態(tài)能力，比如：分享、云函數(shù)調(diào)用、用戶信息等，代碼要怎么實(shí)現(xiàn)呢？

第一時(shí)間跑去查閱官方文檔，可是文檔中根本沒有類似的說明，沒辦法只能去Cocos社區(qū)搜一下了，找了一圈下來，只找到一些代碼片段，用法跟在微信開發(fā)工具中使用的方法沒有不同啊，都是使用wx.開頭，照著寫到j(luò)s腳本中，然后模擬器運(yùn)行，報(bào)錯(cuò)Uncaught ReferenceError: wx is not defined。

其實(shí)是我思維被限制住了，要使用微信小程序的api能力，當(dāng)然需要到微信開發(fā)工具下，才能正常使用，所以需要區(qū)分運(yùn)行環(huán)境，如下代碼：

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

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

總結(jié)

1. Cocos Creator項(xiàng)目集成微信云開發(fā)，通過將Cocos項(xiàng)目代碼構(gòu)建好后，放到微信工具中帶有云開發(fā)能力的項(xiàng)目目錄下。

2. Cocos項(xiàng)目調(diào)用微信開放能力，和在微信工具創(chuàng)建的項(xiàng)目中用法一致，只是多了一步判斷運(yùn)行環(huán)境。

結(jié)尾

既然您看到這了，說明文章對(duì)你還有吸引力，幫忙點(diǎn)個(gè)贊再走吧，謝謝！

關(guān)注我的公眾號(hào)「掉隊(duì)程序員」，持續(xù)輸出更多內(nèi)容！

自己動(dòng)手寫，分解項(xiàng)目中的各個(gè)模塊需求，通過查文檔和搜索Cocos社區(qū)，解決碰到的問題，最終在微信上線了下面這款微信小游戲《成語錦衣衛(wèi)》，歡迎大家掃碼體驗(yàn)，并作為參考項(xiàng)目模版，開發(fā)出屬于自己的小游戲

歡迎大家掃碼體驗(yàn)

預(yù)告

下一節(jié)和朋友們說一說：Cocos Creator不同分辨率的背景圖和場(chǎng)景內(nèi)容適配