来来来,哥来手把手教你撸微信小游戏排行榜

发表于2018-09-04
评论0 450浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏策划行业精英群

361498939

  玩微信小游戏的朋友都知道,排行榜是一个可以让朋友产生攀比心理的好东西,那么怎么能快速搞定呢?

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

  1. 保存每个用户的分数;

  2. ·获取好友列表,并获取好友的分数;

  3. ·渲染排行榜;

  

  保存每个用户的分数

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

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

  

  1. //存储最高分

  2. var score = 100;

  3. var kvScore = {"key":"score","value":score};

  4. wx.setUserCloudStroage({"KVDataList":[kvScore]},"success":function(){

  5. //

  6. });

  复制代码

  获取好友列表,并获取好友的分数?游戏中将玩家的分数保存起来以后,需要调用微信的云存储API wx.getFirendCloudStorage, 获取玩家的微信好友数据,这样就拿到了每个好友的最高分. 值得一提的是,微信的这个接口在内部隐蔽的使用其微信的社交关系链 . 返回列表中的包含的 调用过wx.setUserCloudStroage这个接口的用户.

  

  渲染排行榜

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

  1. let sharedCanvas = wx.getSharedCanvas()

  2. function drawRankList (data) {

  3. data.forEach((item, index) => {

  4. // ...

  5. })

  6. }

  7. wx.getFriendCloudStorage({

  8. success: res => {

  9. let data = res.data

  10. drawRankList(data)

  11. }

  12. })

  复制代码

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

  

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

  重要说明

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

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台