CocosCreator構建微信或QQ小遊戲分包實例教程

分包概述

分包加載，是把遊戲內容按一定規則拆分成幾個包，在首次啓動時先下載必要的包，這個必要的包稱爲「主包」，開發者在主包內觸發其它分包的下載，從而把首次啓動的下載耗時分散到遊戲運行中。

但各大平臺考慮到承載能力，對分包還是有大小限制的，以微信小遊戲爲例：

• 整個小遊戲所有分包大小不超過 8M
• 單個分包/主包大小不能超過 4M

對小遊戲來說，分包其實是針對代碼而言，資源分包意義不大。因爲對於一個遊戲，包體內主要就是代碼和資源。而上線遊戲的資源本身就需要離散方式部署在CDN上，很少跟代碼放在一個包內，即便真的放在同一個包內上傳到小遊戲後臺，其實就是微信官方的CDN而已。因此，分包主要就是拆分代碼。

分包使用

CocosCreator引擎已經封裝了不同平臺的分包功能，使用非常方便，主要就兩步。

1、Creator編輯器選定需要設置爲分包的代碼目錄，右側“屬性檢查器”裏勾選“配置爲子包”，填入相應的分包名。例如：名爲"subA"。

2、使用cc.loader.downloader.loadSubpackage，傳入分包名，加載相應分包。

cc.loader.downloader.loadSubpackage('subA', (err) => {
    if (err) {
        return console.error(err);
    }
    console.log('load subpackage successfully.');
});

另外，在編碼上有一些注意點：

• [主包]是最早被加載的，它的代碼可以被任意[分包]調用，但在[分包]加載進來前，它不能去調用[分包]的代碼，否則報錯。
• 在加載場景或Prefab時，如果它們綁定的腳本屬於[分包]，則需要先加載該[分包]，才能使用該場景或Prefab，否則報錯。

CocosCreator實例

• CocosCreator版本：2.1.2
• 小遊戲分包示例工程 (下載地址)

本文以微信小遊戲爲例，演示如何把一個Prefab的代碼放在分包裏。即在主包內先加載分包，然後加載Prefab，最後運行分包內的代碼。

主要代碼非常簡單，就是在 start 中先加載分包，如果成功再加載Prefab。

start() {
    this.loadSub(() => {
        this.loadPrefab();
    });
},

loadPrefab() {
    let self = this;
    cc.loader.loadRes('Prefab/root', cc.Prefab, (err, prefab) => {
        if (err) {
            return cc.error(err.message||err);
        }
        let node = cc.instantiate(prefab);
        !!node && self.node.addChild(node);
        cc.log('Hello: success to create prefab');
    });
},

loadSub(callback) {
    this.loadSubpackage('subA', (err) => {
        if (err) {
            return cc.error(err.message||err);
        }
        !!callback && callback();
    })
},

上面代碼中的loadSubpackage是個自定義方法，沒有直接使用cc.loader.downloader.loadSubpackage的原因主要是爲了更方便的適配不同平臺，讀者可根據自己的需求而定。代碼如下。

loadSubpackage(name, callback) {
    if (CC_WECHATGAME) {
        cc.log('Hello: begin to load subA');

        const loadTask = wx.loadSubpackage({
            name: name, // 分包名字
            success(res) {
                // 分包加載成功
                cc.log('Hello: end to load subA');
                !!callback && callback();
            },
            fail(res) {
                // 分包加載失敗
                !!callback && callback('error to loadSubpackage');
            }
        });

        loadTask.onProgressUpdate(res => {
            cc.log('qq.progress=', res.progress);
            cc.log('qq.currLen=', res.totalBytesWritten);
            cc.log('qq.totalLen=', res.totalBytesExpectedToWrite);
        });
    } else {
        !!callback && callback();
    }
}

分包加載成功時顯示如下（構建目標：微信小遊戲，用微信開發者工具打開）

分包加載失敗時顯示如下（構建目標：web-mobile，瀏覽器打開）

適配QQ小遊戲

QQ小遊戲平臺完全兼容微信，用CocosCreator構建出來的微信小遊戲包，改appId後是可以直接當成QQ小遊戲運行的。

分包兼容H5構建

分包功能是不支持H5的，如果同一份代碼設置了分包，則構建出來的H5包不能運行。

因爲是否分包是由代碼目錄的meta文件決定的，我的解決方法是在自動化構建流程中，構建前先還原成不分包的meta文件，構建完後再恢復meta，當然代碼裏也做好平臺區分。這樣構建H5時按[不分包]構建，構建微信/QQ小遊戲時按[分包]構建，就實現了同一份代碼，不同平臺都能運行了。