在开始微信排行榜之前,我们先了解一下微信的关系链数据。
https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html
wx.getFriendCloudStorage() 获取当前用户也玩该小游戏的好友的用户数据
wx.getGroupCloudStorage() 获取当前用户在某个群中也玩该小游戏的成员的用户数据
wx.setUserCloudStorage() 将当前用户的游戏数据上传托管在微信后台
wx.removeUserCloudStorage() 删除用户托管数据中指定字段的数据
wx.getUserCloudStorage() 获取当前用户的托管数据
wx.onMessage() 监听主域消息
基本上我们常使用的就是这些接口了。
API查看:
https://developers.weixin.qq.com/minigame/dev/api/open-api/data/wx.getFriendCloudStorage.html
很简单的使用方法。不过有个问题我们也可以看到:
看完感觉实现起来是不是有点复杂,没关系。Creator已经在这方面做了一个简单的解决方案以及示例
https://github.com/cocos-creator/demo-wechat-subdomain/archive/1.x.zip示例工程
http://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame-sub-domain.html官方文档
要点就是需要新创建一个子域工程,在子域中实现排行榜的功能以及获取微信关系链数据。
主域通过WXSubContextView渲染子域的显示内容。
好的,了解完基础的这些知识,我看开始动手。
首先先在游戏场景中创建一个节点,节点的长宽大小为我们需要显示的排行榜大小。给这个节点添加一个WXSubContextView组件。
然后,我们新建一个工程,命名为FishingCatSub,创建结束后,打开工程,这个工程也就是我们的子域工程。
在子域工程下,我们创建一个ScrollView节点,调整一下资源。
现在我们先来打包试一下。
先看子域工程的构建界面设置:
发布平台选择微信开放域(Wechat Game Open Data Context),发布路径选择为主域的打包路径。
同样记得勾选MD5 Cache。
主域的构建界面设置:
填写子域目录的文件夹名称
配置完后开始构建,注意构建顺序:
先构建主域工程,再构建子域工程
由于我这里子域目录名设置为FishingCatSub,因此子域构建完后,我还得去重命名一下。
懒得重命名的话,请使用build模板,子域代码目录命名为为wx-open-data-project。构建后代码放到主域的build-templates/wechatgame文件夹中,这样如果子域不需要构建,主域够更改时就不用麻烦的再去构建一次子域并且重命名。
OK,现在点击主域得运行按钮,在微信开发者工具中就可以看到效果:
现在我们来在子域中使用刚刚学习到的这些微信接口,实现一些方法用来完成获取数据,上传数据这些功能。
注意上传的KVDataList中所有值为string类型,否则会报错KVData item错误。//上传玩家游戏数据
UploadGameData (score , depth) {
var maxScore = Math.max(score, GameData.instance.maxScore);
var maxDepth = Math.max(depth, GameData.instance.maxDepth);
if (maxScore > GameData.instance.maxScore || maxDepth > GameData.instance.maxDepth)
{
GameData.instance.maxScore = maxScore;
GameData.instance.maxDepth = maxDepth;//记录最高分
wx.setUserCloudStorage({
KVDataList : [
{ "key":'depth', "value": "" + GameData.instance.maxDepth },
{ "key":'score', "value": "" + GameData.instance.maxScore }
],
success : function(){
console.log("上传成功!");
GameData.instance.isDataDirty = true;
}
});
}
},
//获得玩家游戏数据
GetUserGameData () {
wx.getUserCloudStorage({
keyList : ["depth" , "score"],//要获取数据的key列表
success : function(res){
console.log("下载玩家游戏数据成功!");
if (res.KVDataList.length > 0)
{
GameData.instance.maxDepth = res.KVDataList[0].value;
GameData.instance.maxScore = res.KVDataList[1].value;
}
}
});
},
//获得玩家的好友游戏数据
GetFriendGameData () {
var self = this;
wx.getFriendCloudStorage({
keyList : ["depth" , "score"],
success : function(res){
console.log("下载好友游戏数据成功!")
GameData.instance.friendData = res.data;
self.SortFriendGameData();
GameData.instance.isDisplayDirty = true;//更新排行榜显示
}
});
},
得分的排序使用sort方法
//好友游戏数据排序,按得分从高到低
SortFriendGameData () {
var compareScore = function (x, y) {//比较得分
var value1 = parseInt(x.KVDataList[0].value);
var value2 = parseInt(y.KVDataList[0].value);
if (value1 <= value2) {
return 1;
} else if (value1 > value2) {
return -1;
}
}
GameData.instance.friendData.sort(compareScore);
},
使用wx.onMessage,可以监听主域的消息
start () {
wx.onMessage(data => {
switch (data.message) {
case 'SetOpenId' :
{
//openid登陆时主域获取,传到子域使用。
//data: {message:'SetOpenId', openid:"xxxxxxxxxxxxx"}
GameData.instance.openId = data.openid;
GameData.instance.isDataDirty = true;
}
case 'UploadGameData' : {
//上传得分
//data: {message:'UploadGameData', score:999, depth:999}
this.UploadGameData(data.score, data.depth);
}
}
});
},
排行榜UI方面使用ScrollView实现,排行榜内每一个Cell我们使用一个Prefab去创建,同时使用NodePool,降低Cell的消耗。
大致思路就是这样,具体的实现代码就不贴了,最终效果如下: