教你快速开发一个微信小游戏好友排行榜

Tychio 发布于2019-08-22 18:44 / 2476人阅读

摘要：概述要做这个好友排行榜必然要有好友的战绩比分然后再做排序最后将数据呈现在上可以分为下面几个步骤保存每个用户的分数获取好友列表并获取好友的分数渲染排行榜保存每个用户的分数保存每个用户的分数需要调用微信的云存储将用户的分数持久化的存起来保存用户

概述

要做这个好友排行榜.必然要有好友的战绩比分,然后再做排序,最后将数据呈现在UI上 , 可以分为下面几个步骤:

保存每个用户的分数

获取好友列表,并获取好友的分数

渲染排行榜

保存每个用户的分数

保存每个用户的分数,需要调用微信的云存储API,将用户的分数持久化的存起来 .

// 保存用户数据,注意限制单条数据容量不得超过1024字节,
// 单个用户数据总条数不得超过128条
wx.setUserCloudStorage(Object)

//存储最高分
var score = 100;
var kvScore = {"key":"score","value":score};
wx.setUserCloudStroage({"KVDataList":[kvScore]},"success":function(){
    //
});

获取好友列表,并获取好友的分数

游戏中将玩家的分数保存起来以后,需要调用微信的云存储API wx.getFirendCloudStorage, 获取玩家的微信好友数据,这样就拿到了每个好友的最高分.

值得一提的是,微信的这个接口在内部隐蔽的使用其微信的社交关系链 .

返回列表中的包含的调用过wx.setUserCloudStroage 这个接口的用户.

渲染排行榜

对分数进行排序 , 得到一个排行榜

let sharedCanvas = wx.getSharedCanvas()

function drawRankList (data) {
  data.forEach((item, index) => {
    // ...
  })
}

wx.getFriendCloudStorage({
  success: res => {
    let data = res.data
    drawRankList(data)
  }
})

注意这个 sharedCanvas , 这是独有的画布 ,与小游戏中的画布不是同一个东东.

使用sharedCanvas来自定义显示玩家的用户排行榜

重要说明

上述所涉及的微信接口 , 都只能在微信小游戏的子域使用 , 微信官网也称之为开放数据域 , 其实应该称之为 封闭数据域 .
为什么这么说呢?
因为子域的js代码执行环境和小游戏本身的代码执行环境是隔离的. 两者之间不能相通 , 子域只能接收外部的消息(如游戏的最高分),不能往外发消息(不能把用户的好友关系链数据发给开发者服务器) , 内存不共享,也就意味着,开发者拿不到微信的社交关系链数据 . 在这样的封闭条件下,开发者能做的只能是在子域的画布上将排行榜数据以个性化的UI元素展示出来 .

参考资料

Cocos Creator 实现微信好友排行榜
http://docs.cocos.com/creator...

微信小游戏关系链数据使用指南
https://developers.weixin.qq....

服务器托管云服务器一个教你开发小程序的小程序教你Ruby快速入门怎么开发一个微信小程序微信开发游戏html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96143.html

菜鸟| 微信小游戏好友排行榜教程

摘要：今天我们分享的菜鸟文档将介绍微信小游戏好友排行榜的制作过程，包括创建项目并发布微信开发者平台添加小游戏打开开放域功能主域和开放域通讯，以及与原生的布局。写在前面：随着越来越多的新人开始接触白鹭引擎，创作属于自己的游戏。考虑到初学者会遇到一些实际操作问题，我们近期整理推出菜鸟系列技术文档，以便更好的让这些开发者们快速上手，Egret大神们可以自动忽略此类内容。今天我们分享的菜鸟文档将...

libxd 2019-08-23 11:33 评论0 收藏0
无聊吗，写个【飞机大战】来玩吧

摘要：今天杭州又是大雨，被淋了个落汤鸡，都怪我家大狼狗非要骑电动车，我昨天吐槽要买的帅气的雨衣还没有买不过大雨和飞机大战小游戏更配哦。微信早已正式发布微信内置飞机大战游戏，目前该游戏已经下线。此时，界面中会显示此次玩家的飞机大战分数。showImg(https://user-gold-cdn.xitu.io/2019/5/15/16ab9377884b99f7); 今天杭州又是大雨，被淋了个落汤鸡...

李涛 2019-05-23 17:27 评论0 收藏0
无聊吗，写个【飞机大战】来玩吧

摘要：今天杭州又是大雨，被淋了个落汤鸡，都怪我家大狼狗非要骑电动车，我昨天吐槽要买的帅气的雨衣还没有买不过大雨和飞机大战小游戏更配哦。微信早已正式发布微信内置飞机大战游戏，目前该游戏已经下线。此时，界面中会显示此次玩家的飞机大战分数。今天杭州又是大雨，被淋了个落汤鸡，都怪我家大狼狗非要骑电动车，我昨天吐槽要买的帅气的雨衣还没有买,不过大雨和飞机大战小游戏更配哦。这篇文章来自我司的王老吉同...

MSchumi 2019-08-26 13:48 评论0 收藏0