一、前提

微信小遊戲主打社交玩法，為了豐富社交玩法我們肯定會用到關系鏈數據來做好友排行幫，群排行榜等功能。本篇主要介紹Cocos Creator中排行榜的實現，上一篇微信小遊戲排行版概念篇。

二、準備

工具：cocos creator

版本：v1.9.1

語言：JavaScript

介紹：

1）cocos creator v1.9.1 版本，構建發布中增加了子域的概念，這裏的子域對應的就是小遊戲中的開放數據域。如圖1

2）子域代碼目錄：指的就是小遊戲game.json中subContext的路徑，一般在主域的根路徑下，如圖3，這時此框填寫子域遊戲名opendata即可。

3）小遊戲子域工程：如果選中了此復選框，則說明此工程作為子域工程，如圖2。

圖1（上圖）

圖2（上圖）

圖3（上圖）

註意點：如果擔心有兩個引擎文件，代碼文件會大很多，此時可以考慮，去掉不用的模塊。

三、實戰

1、新建wx-main-test項目，display是個sprite用於顯示排行，New Button是查看排行榜按鈕, 如下圖：

2、給場景綁定腳本lanuch.js， 給按鈕綁定事件，不做過多解釋，lanuch.js代碼如下

cc.Class({
    extends: cc.Component,

    properties: {
        display: cc.Sprite
    },

    start () {
        
 
this._isShow = false;
        this.tex = new cc.Texture2D();
    },

    onClick () {
        this._isShow = !this._isShow;
        // 發消息給子域
        wx.postMessage({
            message: this._isShow ? ‘Show‘ : ‘Hide‘
        })
    },

    _updaetSubDomainCanvas () {
        if (!this.tex) {
            
 
return;
        }
        this.tex.initWithElement(sharedCanvas);
        this.tex.handleLoadedTexture();
        this.display.spriteFrame = new cc.SpriteFrame(this.tex);
    },

    update () {
        this._updaetSubDomainCanvas();
    }

});

解釋：

onClick()：查看排行榜，按鈕點擊事件，主要是通過wx.posMessage發送消息到子域，子域監聽消息來獲取數據。

updata()：通過一個定時器來獲取sharedCanvas內容，就是上篇介紹的離屏畫布。

3、新建wx-sub-test，如圖

4、lanuch.js代碼如下：

cc.Class({
    extends: cc.Component,

    properties: {
        display: cc.Node
    },

    start () {
        wx.onMessage(data => {
            switch (data.message) {
                case ‘Show‘:
                    this._show();
                    break;
                case ‘Hide‘:
                    this._hide();
                    break;
            }
        });
    },

    _show () {
        let moveTo = cc.moveTo(0.5, 0, 73);
        this.display.runAction(moveTo);
    },

    _hide () {
        let moveTo = cc.moveTo(0.5, 0, 1000);
        this.display.runAction(moveTo);
    }
});

解釋：

1、關鍵代碼，start中的 wx.onMessage，監聽主域消息。

2、這是一個實例工程，咱們自己可以通過調用wx.getFriendCloudStorage獲取好友數據，進行渲染，實現排行榜。

四、總結

1、先發布主域工程，再發布子域工程，每次主域有修改都要重新發布子域；如果只修改子域，可只發布子域。

2、如果發現子域渲染到主域上很小，多半是主域sprite大小適配設置的問題。

3、穿透問題，如果發現子域有穿透問題，則需要再主域加 Block Input Events。

4、主域加了防穿透後，發現子域隱藏後，屏幕不可點擊了。是由於主域的sprite並沒有真正的隱藏。正確的做法是排行榜的關閉按鈕做在主域上，點擊隱藏主域內容，同時發送消息到子域，隱藏子域內容。

5、時刻明確一點，子域是不可能修改主域內容的。

6、如有更多問題，歡迎留言，加QQ群交流。QQ群：418177552

【微信小遊戲】排行榜實戰版