CocosCreator微信小游戏入门实战《小猫钓鱼》(十):微信排行榜

分类栏目:cocos教程

245

在开始微信排行榜之前,我们先了解一下微信的关系链数据。

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,现在点击主域得运行按钮,在微信开发者工具中就可以看到效果:

 

 

现在我们来在子域中使用刚刚学习到的这些微信接口,实现一些方法用来完成获取数据,上传数据这些功能。

    //上传玩家游戏数据
 
    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;
 
                }
 
            });
 
        }
 
    },

注意上传的KVDataList中所有值为string类型,否则会报错KVData item错误。

    //获得玩家游戏数据
 
    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的消耗。

 

大致思路就是这样,具体的实现代码就不贴了,最终效果如下: