pixijs微信小遊戲排行榜開放域開發

關於微信小遊戲開放域的基本概念本文不作介紹請去微信官文文檔閱讀；

主域：
在這你有幾件事要作，第一準備好給離屏canvas用的容器；第二作好離屏canvas事件交互，比如切換菜單/關閉窗口；第三循環裏有渲染，由於離屏canvas內有向微信官方的異步請求，所以他會晚於主域生成，但這時間是不確定的。
以下是主域循環外的代碼主要是先拿到離屏的引用然後設置好寬高；

//
let openDataContext = wx.getOpenDataContext();
let sharedCanvas = openDataContext.canvas;
const {pixelRatio, windowHeight, windowWidth} = wx.getSystemInfoSync()

sharedCanvas.width = windowWidth * pixelRatio ; 
sharedCanvas.height = windowHeight * pixelRatio;

//向開放域發送消息
wx.postMessage({ 
	type:'friend',
	key: 'time_1',
	openId:UI.user.openid
});
this.loop();

下面是主域循環內的代碼：
這次主要是要將離屏canvas放進容器內；如果之前放進去了先刪除之前的；
因爲是個canvas我們用了texture.update()是爲了讓canvas能用，默認是用的webgl;

loop(){
		
		if(this.UI.scene.getChildByName('opensp')){
			this.UI.scene.removeChild(this.UI.scene.getChildByName('opensp'))
		}

		let openDataContext = wx.getOpenDataContext();
    	let sharedCanvas = openDataContext.canvas; 
    	var texture = PIXI.Texture.fromCanvas(sharedCanvas);
		texture.update();
		var opensp = new PIXI.Sprite(texture);
		opensp.name = 'opensp'

		
		this.UI.scene.addChild(opensp);


	    requestAnimationFrame(this.loop.bind(this));
	}

與開放域的交互：
wx.postMessage這是唯一的溝通方式，沒有類的調用，開放域內也不能向自己的服務器發請求；你要交互就用這個；警記；

開放域：
這裏你要作的幾件事；第一要設定好開放域的目錄；第二做好接受來自主域的監聽；第三渲染離屏canvas;

遊戲項目中根下面會有一個game.json，加上
“openDataContext”: “js/myOpenDataContext”；
這是設定開放域文件的目錄，這個目錄下的代碼與你的項目是隔絕的不能相互
調用；相當於兩個項目；

以下是我項目的監聽器，監聽了兩個請求；請求用戶好友排行，另一個是關閉；

wx.onMessage(data => {
    switch (data['type']) {
        case 'friend':
            getFriendRanking(data['key'], data['openId'])
            break;
        case 'close':
            cvs.clearRect(0, 0, width * ratio, height * ratio);
            ctx.clearRect(0, 0, width * ratio, height * ratio);
            rankingStatus = false;
            break;
    }
})

當好友請求發來我們在開放域裏需要向微信官方發請求請求用戶的好友關係裏的數據：

/**
 * 獲取好友排行榜
 */
function getFriendRanking(key, openId) {
    // 初始化外框
    initFrame(1);
    // 獲取好友數據
    wx.getFriendCloudStorage({
        keyList: [key],
        success: result => {
            if (result['data'].length !== 0) {
                console.log(key,result);
                destory();
                let gameData = groupGameData(result['data'], key, openId)
                console.log('gamedata:',gameData,openId);
                if(gameData['ranking']){
                    initRankingItems(gameData['ranking'])
                    initOwnRanking(gameData['own'],gameData)
                }else{
                    destory();
                }

                
            } else {
                console.error('無數據記錄')
                //destory();
            }
        }
    })
}

這樣就拿到的好友數據並且可以拿去canvas中去渲染了；

排行榜的數據怎麼產生的：
排行榜的數據是在微信小遊戲前端調用微信官方接口傳給微信的；

var kvDataList = new Array();
                kvDataList.push({
                    key:"ai",
                    value:rs.again.toString()
                });
                wx.setUserCloudStorage({
                    KVDataList: kvDataList,
                    success(res){
                        console.log(res)
                    },
                    fail(res){
                        console.log(res)
                    }
                })

以上是我項目中的代碼；wx.setUserCloudStorage，是官方接口，{key:‘ai’,value:rs.again.toString()}，就是存的數據了。