引言
微信小游戏接入排行榜可以激发玩家竞争欲望，增加游戏的互动性和挑战性，提高用户的黏性和留存率。同时，排行榜还可以帮助玩家比较自己在游戏中的成绩，增加游戏的社交性和乐趣。那么我们要如何接入开放域排行榜呢？我们先引入一个开放域的概念。本章源码和开放域工程会放在文章末尾，大家有需要的可以自行去获取。
微信小游戏的开放域
微信小游戏的开放域是指通过开放数据域（OpenData）实现的一种功能，它允许小游戏在小程序环境中与其他小游戏共享一部分数据。开发者可以在开放数据域中绘制UI界面、展示排行榜、分享成绩等，并将这些信息展示在小程序的游戏界面上。开放域的数据不会与用户的个人信息相关联，保护用户隐私。开放域为小游戏提供了互动和社交功能，增强了用户体验和游戏的社区性质。
开放域的特点总结如下:
限制操作：开放域环境下，用户无法进行除了点击和触摸以外的操作，以防止用户通过开放域环境进行恶意操作和作弊。
无网络访问：开放域环境无法直接访问网络，无法获取用户个人信息和敏感数据，确保用户的隐私安全。
共享数据：开放域可以通过发送消息和接收消息的方式与主游戏进行通信，实现共享数据和信息。
自定义UI：开放域可以自定义绘制UI界面，包括按钮、文本框等，提供给用户更多的交互方式。
多人联机：开放域可以支持多人联机游戏，用户可以与其他玩家进行实时互动和竞技。
总的来说就是，想要获取到玩家的好友并展现给玩家看，就必须要在开放域进行操作，开放域的数据无法传到外界，极大限度地保护了玩家地隐私。
如何接入排行榜
1.将Egret工程导出到微信小游戏。
2.导出成功后我们用微信开发者工具打开工程，可以发现工程自带了一个默认的简易排行榜示例。
3.在openDataContext目录的index.js我们可以看到：
/** * 增加来自主域的监听函数 */function addOpenDataContextListener() { console.log('增加监听函数') wx.onMessage((data) => { console.log(data); if (data.command == 'open') { if (!hasCreateScene) { //创建并初始化 hasCreateScene = createScene(); } requestAnimationFrameID = requestAnimationFrame(loop); } else if (data.command == 'close' && requestAnimationFrameID) { cancelAnimationFrame(requestAnimationFrameID); requestAnimationFrameID = null } else if (data.command == 'loadRes' && !hasLoadRes) { /** * 加载资源函数 * 只需要加载一次 */ // console.log('加载资源') preloadAssets(); } });}
这个方法主要是监听主域发过来的指令，由图中可以看到包含了open、close和loadRes三个指令。那么我们是不是通过这3个指令就可以显示排行榜呢？我们来测试一下。
4.我们在主域中创建并且显示开放域数据。
//添加排行榜var plathform = window.platform;if(!plathform.openDataContext) return;//显示开放域数据var bitmap = plathform.openDataContext.createDisplayObject(null,this.rankContainer.width, this.rankContainer.height);this.rankContainer.addChild(bitmap);egret.startTick((timeStarmp: number) => { egret.WebGLUtils.deleteWebGLTexture(bitmap.webGLTexture); bitmap.webGLTexture = null; return false;}, this);
5.通过发送指令去加载资源和显示排行榜
//主域向子域发送数据plathform.openDataContext.postMessage({ command: "loadRes"});plathform.openDataContext.postMessage({ command: "open"});
6.调用之后我们可以看到一个简单的排行榜
7.然后我们通过修改index.js这个文件内容，可以把排行榜修改成我们想要的样式即可。
8.要注意示例里面是简单的假数据展示，我们获取真正的数据要通过wx.getFriendCloudStorage获取：
wx.getFriendCloudStorage({ keyList: ["rank"], success: res => { console.log(res); var datas: any = []; res.data.forEach( (value: any, index) => { if (value.KVDataList.length > 0) { // console.log(value.KVDataList[0].value); let score = JSON.parse(value.KVDataList[0].value).score; let tmp = datas.length; for (let i = 0; i < datas.length; i++) { if (score > datas[i].scoreBest) { tmp = i; break; } } value.nickName = value.nickname; value.scoreBest = score; datas.splice(tmp, 0, value); } }); //展示数据 this.onShow(data.objData, datas, 0); }, fail: err => { console.log(err); }, complete: () => { }});
更方便地接入排行榜
按照上面官方示例接入排行榜的话，有个比较明显的缺点，就是UI没有办法很直观地编辑，只能通过慢慢地调整坐标去构建。那我们如何更方便地接入开放域排行榜？下面和大家分享一下我的踩坑流程：
通过查阅资料发现，我们可以将Egret的基础库导到开放域，甚至还可以将Egret的eui库导到开放域，那么这样我们就可以通过ui编辑器去编辑UI了。下面我们尝试一下用Egret的ui接入排行榜。
1.首先我们导出一个简单的Egret开放域工程。
我们将其命名为开放域工程，大家可以自己导出，也可以在文末获取之后直接修改使用。
2.如果大家自己导出记得要复制或者配置下图中红框的几个文件：
3.大家可以直接在开放域工程编写UI，笔者写了个插件可以直接在主游戏工程编辑UI，然后通过指令发送到开放域。主要通过UI编码和解码器实现：
4.完成之后通过命令行egret publish把开放域工程导出到微信小游戏：
5.如图所示我们在主域的排行榜UI中嵌入了开放域的UI：
6.通过代码调用显示排行榜：
private async showRank(type) { if (this.objData == null) { if (window.platform.openDataContext) { var bitmap = window.platform.openDataContext.createDisplayObject(null, this.stage.stageWidth, this.stage.stageHeight); bitmap.pixelHitTest = true; this.addChild(bitmap); } SdkManager.instance.postMessage({ command: "init" }); //编码关键 this.objData = {}; var encoder: DisplayObjectEncoder = new DisplayObjectEncoder(); encoder.encodeDisplayObject(this.openDataGroup, this.objData, true); console.log(this.objData); } var datas = null; //世界排行榜,先获取数据再发往开放域 if (type == 1) { datas = await (<DBManager>DBManager.getSingtonInstance()).GetRankDatas(); } this.GameState = EGameState.Rank; SdkManager.instance.postMessage({ command: "show", objData: this.objData, datas: datas, rankKey: DBDataKey.RankCache });}
7.开放域通过数据解码：
private onShow(objData, datas, page) { this.curObjData = objData; this.curDatas = datas; var length = objData.childs.length; if (page >= 0 && page < Math.ceil(datas.length / length)) { this.curPage = page; } else { page = this.curPage; } for (var i = 0; i < length; i++) { var index = page * length + i; if (index < datas.length) { if (index >= 0 && index < 3) { objData.childs[i].childs[1].url = "resource/assets/tcs/game/" + (i + 1) + ".png"; objData.childs[i].childs[4].text = ""; } else { objData.childs[i].childs[1].url = ""; objData.childs[i].childs[4].text = index + 1; } objData.childs[i].childs[2].text = datas[index].scoreBest; objData.childs[i].childs[3].text = datas[index].nickName; } else { objData.childs[i].childs[1].url = ""; objData.childs[i].childs[2].text = ""; objData.childs[i].childs[3].text = ""; objData.childs[i].childs[4].text = ""; } } let decoder: DisplayObjectDecoder = new DisplayObjectDecoder(objData); decoder.decodeDisplayObject(objData, this);}
8.导出工程，实际效果：
总结
本文的重点内容主要有以下几点，不知道小伙伴们是否已经理解：
微信小游戏接入排行榜的重要意义。
什么是开放域。
如何接入开放域排行榜。
怎么更方便地接入开放域排行榜。
本文关键工程和源码关注"亿元程序员"发送"rank"获取。
本系列是《从零开始开发贪吃蛇小游戏到上线系列》，欢迎大家订阅。游戏已经上线，大家可以搜索小游戏《贪吃蛇掌机经典》进行体验。
此外笔者还有2款已经上线的小游戏《填色之旅》《重力迷宫球》大家也可以自行搜索体验。
感兴趣的小伙伴记得关注"亿元程序员"哦，学习小游戏开发不迷路。欢迎大家一起交流。
喜欢的可以点个赞、点个在看哦！谢谢大家。
点击微信公众号 关注我们