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()}，就是存的数据了。