推薦閱讀:
最近事情特別多,今天終於實現了排行榜功能,記錄下來大家一起學習學習。
一。調用默認排行榜
首先我們需要了解:
1。白鷺開發文檔(開放數據域):http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/openDataContext/index.html
2.微信小游戲開發文檔(關系鏈數據):https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html
實現的核心功能是在main.ts中添加代碼
(1)添加全局變量
(2)定義排行榜按鈕,加載排行榜資源
(3)給按鈕添加監聽事件
main.ts中全部代碼如下:
class Main extends eui.UILayer { private bitmap: egret.Bitmap; private isdisplay = false; private rankBtn: eui.Button; private rankingListMask: egret.Shape; protected createChildren(): void { super.createChildren(); egret.lifecycle.addLifecycleListener((context) => { // custom lifecycle plugin context.onUpdate = () => { } }) egret.lifecycle.onPause = () => { egret.ticker.pause(); } egret.lifecycle.onResume = () => { egret.ticker.resume(); } //inject the custom material parser //注入自定義的素材解析器 let assetAdapter = new AssetAdapter(); egret.registerImplementation("eui.IAssetAdapter", assetAdapter); egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter()); this.runGame().catch(e => { console.log(e); }) } private async runGame() { await this.loadResource() this.createGameScene(); // const result = await RES.getResAsync("description_json") // this.startAnimation(result); await platform.login(); await platform.showShareMenu(); const userInfo = await platform.getUserInfo(); console.log(userInfo); // await platform.showShareMenu(); } private async loadResource() { try { const loadingView = new LoadingUI(); this.stage.addChild(loadingView); await RES.loadConfig("resource/default.res.json", "resource/"); await this.loadTheme(); await RES.loadGroup("preload", 0, loadingView); this.stage.removeChild(loadingView); } catch (e) { console.error(e); } } private loadTheme() { return new Promise((resolve, reject) => { // load skin theme configuration file, you can manually modify the file. And replace the default skin. //加載皮膚主題配置文件,可以手動修改這個文件。替換默認皮膚。 let theme = new eui.Theme("resource/default.thm.json", this.stage); theme.addEventListener(eui.UIEvent.COMPLETE, () => { resolve(); }, this); }) } /** * 根據name關鍵字創建一個Bitmap對象。name屬性請參考resources/resource.json配置文件的內容。 * Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json. */ private createBitmapByName(name: string): egret.Bitmap { let result = new egret.Bitmap(); let texture: egret.Texture = RES.getRes(name); result.texture = texture; return result; } /** * 描述文件加載成功,開始播放動畫 * Description file loading is successful, start to play the animation */ private startAnimation(result: Array<any>): void { // let parser = new egret.HtmlTextParser(); // let textflowArr = result.map(text => parser.parse(text)); // let textfield = this.textfield; // let count = -1; // let change = () => { // count++; // if (count >= textflowArr.length) { // count = 0; // } // let textFlow = textflowArr[count]; // // 切換描述內容 // // Switch to described content // textfield.textFlow = textFlow; // let tw = egret.Tween.get(textfield); // tw.to({ "alpha": 1 }, 200); // tw.wait(2000); // tw.to({ "alpha": 0 }, 200); // tw.call(change, this); // }; // change(); } private textfield: egret.TextField; /** * 創建場景界面 * Create scene interface */ protected createGameScene(): void { let sky = this.createBitmapByName("bg_jpg"); this.addChild(sky); let stageW = this.stage.stageWidth; let stageH = this.stage.stageHeight; sky.width = stageW; sky.height = stageH; //打開關閉排行榜按鈕 this.rankBtn = new eui.Button(); this.rankBtn.label = "排行"; this.rankBtn.x = 260; this.rankBtn.y = 750; this.addChild(this.rankBtn); this.rankBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickRankBtn, this); //加載資源 const platform: any = window.platform; platform.openDataContext.postMessage({ command: 'loadRes' }); } private onClickRankBtn() { console.log('點擊btnClose按鈕'); let platform: any = window.platform; if (this.isdisplay) { this.bitmap.parent && this.bitmap.parent.removeChild(this.bitmap); this.rankingListMask.parent && this.rankingListMask.parent.removeChild(this.rankingListMask); this.isdisplay = false; platform.openDataContext.postMessage({ isDisplay: this.isdisplay, text: 'hello', year: (new Date()).getFullYear(), command: "close" }); } else { //處理遮罩,避免開放數據域事件影響主域。 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.5; this.rankingListMask.touchEnabled = true; this.addChild(this.rankingListMask); //簡單實現,打開這關閉使用一個按鈕。 this.addChild(this.rankBtn); //主要示例代碼開始 this.bitmap = platform.openDataContext.createDisplayObject(null, this.stage.stageWidth, this.stage.stageHeight); this.addChild(this.bitmap); //主域向子域發送自定義消息 platform.openDataContext.postMessage({ isDisplay: this.isdisplay, text: 'hello', year: (new Date()).getFullYear(), command: "open" }); //主要示例代碼結束 this.isdisplay = true; } } }
在微信開發工具上預覽效果:

此時如果你在手機上預覽,會出現如下效果
你會發現key,name,scroes顯示的字體不見了。(可能是到了手機上,字體就默認為白色的原因吧)
這時候,我們需要在index.js里面改變字體顏色:
context.fillStyle="#FF0000";
上面步驟我們只實現了基本的調用開放數據域中的排行,排行榜的具體樣式,可以根據實際情況在開發者工具上的index.js中作修改調整。
最后,附上官方排行榜demo,供大家參考學習:
https://github.com/egret-labs/egret-target-wxgame
二。實現自定義排行榜
當然,上面的代碼只是簡單的調用了默認的排行榜,那么,如何做出自定義排行榜呢,為了研究這個問題,又消耗了我一周的時間研究,期間看了許多排行榜的代碼,終於,在錯誤中蹦躂出來了,開心,下面跟大家分享一下我遇到的最大問題:
這個錯誤,我問了若干人,給我的回答是資源路徑問題或者不存在導致,可是博主檢查了幾十遍發現沒問題,終於在今天,我發現自己是多么的愚蠢,原來是未發送load命令,導致資源未加載,從而出現的錯誤,需要demo實例的朋友可以點擊右側加群下載。
原文鏈接:https://www.mmzsblog.cn/articles/2019/09/10/1568118032212.html