第一次使用Egret开发微信小游戏经验总结（包括排行榜排序，每周一数据清零，超越好友等处理）

最近项目组立项了个小游戏，用Egret(白鹭)开发，本来游戏核心功能2天就完成了，后来准备接入微信好友排行榜的时候，用到了子域，加入分享给好友的时候，图片合成后分享给微信好友有时候不能显示出图片内容。现整理一下，避免大家踩坑。
好友排行榜微信只让我们在开放数据域(后文都简称为”子域”)里面操作(毕竟这是人家最重要最值钱的数据了,不会让我们拿来随便用的),小游戏做好后，想加入排行榜和超越好友等功能，白鹭官方也给出了详细的教程了。目前官网的demo排行榜是分页的，点击查看下一页数据，不能像scrollView那样滚动展示数据，不是我想要的，我看了下其他人做的，说可以用一个项目做游戏，一个项目专门放排行榜，放排行榜的项目直接导出到游戏项目的openDataContext文件夹下。我也试着操作了下，发现坑有点难踩，遇到了个wx.getFileSystemManager not function的错误，后面发现在5.2.2中，使用assetsmananger而不是res，解决方案。而且这样会多引入一次egret和game库，其实好像也就多几百KB而已。第一种方案；这里我着重说一下另外一个方案，就是目前官方demo那种，在js里面直接用canvas做出类似于scrollView那种滚动效果，其实就是监听下Y轴滑动距离，根据滑动距离来处理canvas的位置。
想要排行榜有数据，就先上传用户数据到微信后台，就是托管数据。我是在比赛结束的时候发送一个消息给子域，此消息带上用户分数。

   platform["openDataContext"].postMessage({command: 'updateMaxScore',myScore: _myScore});

    然后在子域的index.js里面监听并处理这个消息

else if (data.command == 'updateMaxScore') {if (myCurrentScore <= data.myScore) {setUserCloudStorage(data.myScore);}getFriendCloudInfo();
}

这个setUserCloudStorage加了个上传时间的操作，用于之后通过时间来处理周一数据清零的操作，后面会贴上完整代码。上传新分数后再通过getFriendCloudInfo拿新数据并过滤排序。在排行榜界面先创建一个离屏canvas

let bitmap_rank = platform["openDataContext"].createDisplayObject(null,this.stageW, rank_item_bg_Group.height, 0);
bitmap_rank.y = 80;
rank_item_bg_Group.addChild(bitmap_rank);

 效果如下图

rank_item_bg_Group就是图中绿色框部分，在这个上面添加canvas，方便位置调整。然后传消息给后台根据是否有shareTicket来显示是好友排行榜还是群排行榜。

        let delayTime = 0;if(game.myShareTicket != undefined && game.myShareTicket != ""){delayTime = 1000;}setTimeout((e)=> {platform["openDataContext"].postMessage({command: "open",shareTicket: game.myShareTicket});}, delayTime);

如果是打开群排行榜，则需要延时来处理群排行榜数据。子域对应消息处理如下：

    if (data.command == 'open') {//创建并初始化startIndex = 0;if (data.shareTicket && data.shareTicket != "") {getGroupCloudStorage(data.shareTicket);setTimeout((e) => {createScene();createMyScene();}, 500);} else {createScene();createMyScene();}}

createScene创建的是除图上红色框之外的排行榜内容，createMyScene创建的是我的内容，就是红色框那块，其实可以合并到一起的，后期再整理一下。微信头像和图片一样做一下预加载，先拿到头像数据保存起来，再预加载。

function preloadAvatarUrl() {let preloaded = 0;let count = 0;for (let asset in avatarUrlList) {count++;const img = wx.createImage();img.onload = () => {preloaded++;if (preloaded == count) {// console.log("头像加载完成");hasLoadRes = true;}}// console.log("src:" + avatarUrlList[asset] + " asset:" + asset);img.src = avatarUrlList[asset];assetsAvatarUrl[asset] = img;}
}

这个是给排行榜排序，根据用户分数做降序处理。

//给排行榜排序(降序)
var compare = function (prop) {return function (obj1, obj2) {var val1 = obj1[prop];var val2 = obj2[prop];var int1 = val1[0]["value"];var int2 = val2[0]["value"];if (!isNaN(Number(int1)) && !isNaN(Number(int2))) {int1 = Number(int1);int2 = Number(int2);}if (int1 < int2) {return 1;} else if (int1 > int2) {return -1;} else {return 0;}}
}

这个是根据上传分数时带的时间戳判断分数是否是同一周，大致思路是首先新的天数要大于老的天数，周日的天数通过getDay()获取到时是0，转为7，方便处理，然后天数不同通过时间戳差值判断是否在一周内，如果天数相同则判断差值是否在一天内，防止这周一早上10点和下周一早上9点被判断成一周。

//判断是否是同一周
function isSameWeek(oldTime) {oldTime = parseInt(oldTime);var newTime = new Date().getTime();let oneDayTime = 60 * 60 * 24 * 1000;// console.log("now:" + newTime + " old:" + oldTime + " off:" + (newTime - oldTime) + " one:" + (oneDayTime * 7))let oldDate = new Date(oldTime);let newDate = new Date(newTime);let oldDay = oldDate.getDay();let newDay = newDate.getDay();if (newDay == 0) {newDay = 7;}if (oldDay == 0) {oldDay = 7;}let isSame = false;if (oldDay < newDay) {if ((newTime - oldTime) < oneDayTime * 7) {  // 时间相差小于7isSame = true;}} else if (oldDay == newDay) {if ((newTime - oldTime) < oneDayTime) {isSame = true;}}return isSame;
}

platform.js里面也改造了下

    createDisplayObject(type, width, height,offsetY) {sharedCanvas.width = width;sharedCanvas.height = height;const bitmapdata = new egret.BitmapData(sharedCanvas);bitmapdata.$deleteSource = false;const texture = new egret.Texture();texture._setBitmapData(bitmapdata);const bitmap = new egret.Bitmap(texture);bitmap.width = width;bitmap.height = height;bitmap.y = offsetY;if (egret.Capabilities.renderMode == "webgl") {const renderContext = egret.wxgame.WebGLRenderContext.getInstance();const context = renderContext.context;////需要用到最新的微信版本////调用其接口WebGLRenderingContext.wxBindCanvasTexture(number texture, Canvas canvas)////如果没有该接口，会进行如下处理，保证画面渲染正确，但会占用内存。if (!context.wxBindCanvasTexture) {egret.startTick((timeStarmp) => {egret.WebGLUtils.deleteWebGLTexture(bitmapdata.webGLTexture);bitmapdata.webGLTexture = null;return false;}, this);}}return bitmap;}

排行榜好友我是只显示7个，根据Y轴滑动距离来判断显示哪7个数据就行，具体方法看后面代码，写的太多了，大家不一定有耐心看了，好久没写博客，有点乱，好像拆开写比较合适啊。

下面是index.js详细代码,贴了全部代码，发现显示不了那么多。就当附件传上来吧，附件找不到在哪里传，就先直接上传到资源里吧index.js顺便贴几张子域效果图。

20180907补充:
子域的数据可以传给主域了，一个qq群里同学说的，验证了下，的确可以，现分享给大家。
在子域里获取到排行榜数据后，userDataList保存数据然后如下写法：

      let openContext = wx.getSharedCanvas().getContext("2d");openContext["canvas"]["userDataList"] = JSON.stringify(userDataList);

在主域里通过如下写法可以拿到子域保存的排行榜数据，这些就可以在主域直接用ScrollView了，哎，发现的有点晚了啊。

        let openContext = wx.getOpenDataContext();let friendDataList:any;if(openContext["canvas"]["userDataList"]){friendDataList = JSON.parse(openContext["canvas"]["userDataList"]);}console.log("openContext");console.log(openContext);console.log("friendDataList");console.log(friendDataList);

不过还是有点懵，微信这是准备把这些数据完全给开发者们使用了吗。
下面是我们小游戏二维码，有兴趣的同学可以体验一下。

第一次使用Egret开发微信小游戏经验总结（包括排行榜排序，每周一数据清零，超越好友等处理）相关推荐

如何使用egret开发微信小游戏（一）Hello World
如何使用egret开发微信小游戏(一)Hello World 微信小游戏上线以来,凭借微信海量的用户,取得了巨大的成功,从跳一跳到大家一起来滑水,从2d游戏到3d游戏,许多游戏开发者都赚的盆满钵满,我 ...
Egret白鹭引擎开发微信小游戏之保存图片到相册
玩家在玩小游戏的过程中,很多时候想要保存一下当前的截图.或者保存游戏内精美的画面到相册,一方面是为了记录在游戏中的美好时刻,另一方面则是能够更好地和朋友们分享我在这游戏中获得的荣耀和快乐,因为我们就会 ...
利用Phaser开发微信小游戏（排行榜小结）
利用Phaser开发微信小游戏(排行榜小结) 小游戏中的开放数据域可用来保存游戏 ...
微信小游戏申请注册流程+开发微信小游戏类目需要具备条件
微信小游戏申请注册流程+开发微信小游戏类目需要具备条件在这里先讲一下,小程序和小游戏前面的注册流程都是一样的,在注册完毕登录小程序后台后选择类目时需要注意一下,我下面讲解的是已经通过认证的服务号进行 ...
webpack + typescript 开发微信小游戏实践
源码地址微信小游戏版本技术选型使用typescript开发但是微信小游戏原生不支持 typescript 开发,于是探索一下使用ts开发微信小游戏 1. 创建小游戏使用测试号,创建一个使用官方示 ...
Unity开发微信小游戏步骤
unity开发微信小游戏 https://gitcode.net/mirrors/wechat-miniprogram/minigame-unity-webgl-transform?utm_sourc ...
unity开发微信小游戏（5）- 微信好友排行榜
效果展示: 如果感觉文章有用的,也烦请大家多多支持(扫描上面二维码n(*≧▽≦*)n)!!❤❤❤ unity开发微信好友排行榜可以说是把我虐的体无完肤,但为了拿下这功能,硬壳了三天,把我所踩过的坑分享 ...
Unity 开发微信小游戏初探
前言最近因项目需要开始研究Unity开发微信小游戏相关的知识.期间遇到各种坑,网上查阅的资料基本类似,无法解决自己遇到的问题.特用本文记录下过程,方便其他人遇到同样的问题时能够参考. 开发环境 Un ...
Unity3d C# 开发微信小游戏分享图片、朋友圈等功能实现（含源码）
广告通过一段时间的基于minigame-unity-webgl-transform插件的开发,算是稍微完整的一小个游戏已经制作完成,具体大家可以扫码体验一下: 感谢支持!! 前言之前编写了一篇u3 ...

第一次使用Egret开发微信小游戏经验总结（包括排行榜排序，每周一数据清零，超越好友等处理）

第一次使用Egret开发微信小游戏经验总结（包括排行榜排序，每周一数据清零，超越好友等处理）相关推荐

最新文章

热门文章