微信小游戏加入排行榜功能，可以增加游戏微信好友参与，增加分数竞争氛围，官方的说明文档不怎么详细，也有坑。本文实战以cocos creator v2.2版本为例，供大家参考。
结果显示：
前提：
1、创建主域：用于显示子域画布
2、创建子域：子域界面
步骤及说明
1、主域创建空节点：用于显示子域内容，设置宽高背景颜色设置为白色。注意此处不要设置黑色，不然会出现透明黑问题。
添加WXSubContextView组件，新增了 FPS 属性, 用户可以通过设置 FPS 直接控制开放数据域的帧率。
步骤：属性检查器里面-》添加组件-》其他组件-》WXSubContextView
创建成功显示如下
至此，主域界面代码已经完成了。
2、主域数据提交到微信托管数据，这里传递用户游戏得分给子域letopenDataContext=wx.getOpenDataContext()
openDataContext.postMessage({
wxscore:topScore,
})
3、编写向子域发送数据方法，博主这里采用按钮形式，用户点击按钮即向子域发送请求数据//好友榜
frendRank(){
if(typeofwx==='undefined'){
return;
}
letwxrank=cc.find("Canvas/bghome_Sprite/wxrank");
wxrank.active=true;
letopenDataContext=wx.getOpenDataContext()
openDataContext.postMessage({
showwx:2,
})
},
以上是好友榜单代码，向子域发送请求
4、子域界面搭建
子域采用Node空节点,和ScrollView 组件，实现排行榜界面，用于显示数据
使用预制资源(prefab)，对数据进行遍历
5、子域接收主域传过来的消息，进行判断，执行相应的方法
子域wxrank.js代码如下cc.Class({
extends:ponent,
properties:{
itemParent:cc.Node,
pre_item:cc.Prefab,
},
onLoad(){
//letwxrankbg=cc.find("Canvas/bg_rank");
//wxrankbg.active=false;
if(typeofwx==='undefined'){
return;
}
//src/myOpenDataContext/index.js
this.allInfoList=[];
wx.onMessage(data=>{
if(data.wxscore){
this.wxscore=data.wxscore;
letarr=newArray();
arr.push({key:"wxscore",value:String(this.wxscore)});
letnewKVData=arr
this.setNewCloudScore(newKVData);//调用写入分数
}elseif(data.showwx){
//如果是微信榜单
this.getFriendInfo();
}
})
},
getResult:function(numss,data){
varitem=cc.instantiate(this.pre_item);
varitemH=item.height;
this.itemParent.height=itemH*numss
for(leti=0;i
varitem=cc.instantiate(this.pre_item);
item.parent=this.itemParent;
varjs=item.getComponent('item');
if(js){
varname=data[i].nickName
varscore=data[i].wxscore
varactar=data[i].avatarUrl
js.init(i+1,name,score,actar);
}
item.y=-50-i*itemH
}
},
//排序
compare:function(property,desc){
returnfunction(a,b){
varvalue1=a[property];
varvalue2=b[property];
if(desc==true){
//升序排列
returnvalue1-value2;
}else{
//降序排列
returnvalue2-value1;
}
}
},
addItem:function(){
this.allInfoList.sort(pare("wxscore",false))
vardatass=this.allInfoList;
vardataLength=datass.length
this.getResult(dataLength,datass);
},
getFriendInfo(){
//获取同城好友信息(包括自身)
wx.getFriendCloudStorage({
keyList:['wxscore'],
success:(res)=>{
this.allInfoList=[];
//console.log(res)
for(leti=0;i
//获取玩家微信名，头像url和分数
letnickName=res.data[i].nickname;
letavatarUrl=res.data[i].avatarUrl;
letwxscore=0;
if(res.data[i].KVDataList.length)
wxscore=res.data[i].KVDataList[0]['value'];
//加入到数组中
this.allInfoList.push({
nickName:nickName,
avatarUrl:avatarUrl,
wxscore:wxscore
});
}
this.addItem();
},
fail:(res)=>{
console.log(res);
}
});
//console.log(this.allInfoList)
},
//存储记录
setNewCloudScore(newKVData){
wx.setUserCloudStorage({
KVDataList:newKVData,
success:function(res){
console.log("存储记录成功\n",res);
},
fail:function(res){
console.error(res);
},
complete(res){
}
})
},
start(){
},
//update(dt){},
//
});
6、子域item.js代码如下：对数据进行处理和显示cc.Class({
extends:ponent,
properties:{
lab_num:cc.Label,
lab_avtar:cc.Sprite,
lab_name:cc.Label,
lab_score:cc.Label
},
onLoad(){
},
init:function(num,name,score,actar){
this.lab_num.string=num
this.lab_name.string=name
this.lab_score.string=score
//加载远程网络图片
varthat=this
cc.loader.load({url:actar,type:"png"},function(err,text){
//console.log('报错信息：'+err+'图片地址：'+text)
that.lab_avtar.spriteFrame=newcc.SpriteFrame(text);
});
},
start(){
},
//update(dt){},
});
6、构建和发布(主域和子域)：
6.1、主域发布，填写微信开放数据子域目录名称，这里要和子域项目名称一致
6.2、子域项目发布：这里发放平台选择微信开放数据域，发布路径选择主域build\发布的文件夹下
点击构建即可，运行到微信开发者工具下，即可同步显示用户数据。
如果觉得《cocosjs微信头像本地服务器 Cocos creator游戏接入微信开放数据域 实现好友排行榜功能...》对你有帮助，请点赞、收藏，并留下你的观点哦！
