Egret做微信好友排行榜

直接进入正题，下图是一个很常见的小游戏排行榜，包含玩家排名、头像、微信名字、分数等等

那么这种排行榜该怎么做呢

首先你要了解关系链数据，这里是微信的文档，建议先了解，没必要深究，等做完这个项目再去看一遍，会有不一样的收获

https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html

为了方便理解关系链数据思想，我们今天做个简单的demo。

1，创建一个egret项目，使用Launcher发布,最好用自己的AppID，（听说这个测试用的id限制很多功能，例如分享..）

注册AppID

2.设置->基本设置->添加小程序（类型选择小游戏）（能够通过审核即可）

3.使用微信开发者工具打开发布的微信小游戏，找到游戏配置文件game.json，配置如下，其中openDataContext让这个游戏支持了微信开放域功能

{"deviceOrientation": "portrait","networkTimeout": {"request": 5000,"connectSocket": 5000,"uploadFile": 5000,"downloadFile": 5000},"openDataContext": "openDataContext"
}

index.js是这个游戏的shareCanvas，sharedCanvas 是主域和开放数据域都可以访问的一个离屏画布

这个js文件中官方已经为我们绘制了一个简单的排行榜demo，那么问题来了，我们怎么去调用这一块的东西呢?

4.调用shareCanvas开放域数据

笔者给调用排行榜数据设置了一个按钮触发事件，调用的方法如下

/*本文章关键

//是否点击按钮private isRankClick:boolean = false;private bitmap: egret.Bitmap;/*** 排行榜遮罩，为了避免点击开放数据域影响到主域，在主域中建立一个遮罩层级来屏蔽点击事件.</br>* 根据自己的需求来设置遮罩的 alpha 值 0~1.</br>*/private rankingListMask: egret.Shape;//点击排行榜事件public obBtnRankingClick(e:egret.TouchEvent) {console.log("点击排行榜");let plathform:any = window.platform;if(!this.isRankClick) {//处理遮罩,避免开放域数据影响主域this.rankingListMask = new egret.Shape();this.rankingListMask.graphics.beginFill(0x000000,1);this.rankingListMask.graphics.drawRect(0,0,this.stage.width,this.stage.height);this.rankingListMask.graphics.endFill();this.rankingListMask.alpha = 0.4;this.rankingListMask.touchEnabled = true;this.addChild(this.rankingListMask);//让排行榜按钮显示在容器内this.addChild(UI_Panel.Instance.btn_ranking);//显示开放域数据this.bitmap = plathform.openDataContext.createDisplayObject(null, this.stage.stageWidth, this.stage.stageHeight);this.addChild(this.bitmap);//主域向子域发送数据plathform.openDataContext.postMessage({isRanking: this.isRankClick,text: "egret",year: (new Date()).getFullYear(),command: "close"});this.isRankClick = true;}else {this.bitmap.parent && this.bitmap.parent.removeChild(this.bitmap);this.rankingListMask.parent && this.rankingListMask.parent.removeChild(this.rankingListMask);this.isRankClick = false;plathform.openDataContext.postMessage({isRanking: this.isRankClick,text: "egret",year: (new Date()).getFullYear(),command: "close"});}}

本文章关键结束*/

当你做完了这一步，再去看一遍微信的关系链数据使用也许会有不一样的收获哦！

https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html

Egret做微信好友排行榜相关推荐

unity开发微信小游戏（5）- 微信好友排行榜
效果展示: 如果感觉文章有用的,也烦请大家多多支持(扫描上面二维码n(*≧▽≦*)n)!!❤❤❤ unity开发微信好友排行榜可以说是把我虐的体无完肤,但为了拿下这功能,硬壳了三天,把我所踩过的坑分享 ...
前端做微信好友分享_前端微信分享，调用微信分享，分享朋友圈，分享微信好友，分享qq空间，qq好友...
项目中很多使用到微信分享的地方,对于前端来说也算很简单了,建议写该功能时使用微信调试工具,便于调试,直接上代码第一步,引入微信配置文件 //这里的AJAX用于获取后台数据,当然也可以不用这么写,您只 ...
前端做微信好友分享_web端实现微信分享功能
微信分享的东西目前文档已经很完善了.记录下做微信分享时遇到的坑,以及流程. 配置相关的就不说了, 文档里很明白. 1:先登录微信公众平台进入"公众号设置"的"功能设置&q ...
前端做微信好友分享_一篇搞定微信分享和line分享
前言在h5的页面开发中,分享是不可或缺的一部分,对于一些传播性比较强的页面,活动页之类的,分享功能极为重要.例如,京东等电商年末时会有一系列的总结h5在微信中传播,就不得不提到微信的分享机制. 微信 ...
前端做微信好友分享_前端-微信分享
1.绑定域名公众号设置->功能设置->JS接口安全域名加入要分享的工程域名 2.引入JS文件因为在内网开发,如果直接引用在内网会报错,所以先判断是微信环境再引用js. // 判断是否 ...
前端做微信好友分享_基于js实现微信发送好友如何分享到朋友圈、微博
微信浏览器内置了javascript私有对象WeixinJSBridge,可以实现发送给朋友.分享到朋友圈.分享到微博等功能. var imgUrl = "图片地址"; var l ...
第一次使用Egret开发微信小游戏经验总结（包括排行榜排序，每周一数据清零，超越好友等处理）
最近项目组立项了个小游戏,用Egret(白鹭)开发,本来游戏核心功能2天就完成了,后来准备接入微信好友排行榜的时候,用到了子域,加入分享给好友的时候,图片合成后分享给微信好友有时候不能显示出图片内容. ...
菜鸟|Egret微信小游戏好友排行榜教程
原文链接:https://mp.weixin.qq.com/s/kYIdnHv-C5KuR9snekPNBg 原文虽然是菜鸟教程,但是有几个地方没有说清楚,补充如下. 你可以先看原文,看不懂时,再来这 ...
菜鸟| 微信小游戏好友排行榜教程
写在前面:随着越来越多的新人开始接触白鹭引擎,创作属于自己的游戏.考虑到初学者会遇到一些实际操作问题,我们近期整理推出"菜鸟"系列技术文档,以便更好的让这些开发者们快速上手,Egr ...
微信小游戏好友排行榜快速开发教程
要做这个好友排行榜.必然要有好友的战绩比分,然后再做排序,最后将数据呈现在UI上 , 可以分为下面几个步骤: 保存每个用户的分数获取好友列表,并获取好友的分数渲染排行榜保存每个用户的分数保存每 ...

Egret做微信好友排行榜

Egret做微信好友排行榜相关推荐

最新文章

热门文章