菜鳥教程 | Egret微信小遊戲好友排行榜教程

寫在前面：隨着愈來愈多的新人開始接觸白鷺引擎，創做屬於本身的遊戲。考慮到初學者會遇到一些實際操做問題，咱們近期整理推出「菜鳥」系列技術文檔，以便更好的讓這些開發者們快速上手，Egret大神們能夠自動忽略此類內容。

今天咱們分享的菜鳥文檔將介紹微信小遊戲好友排行榜的製做過程，包括建立項目併發布、微信開發者平臺添加小遊戲、打開開放域功能、主域和開放域通信，以及ShareCanvas與原生Canvas的佈局。

微信好友排行榜利用微信關係鏈數據實現一個簡單的排行榜，此文檔包含關係鏈數據、Egret平臺數據接口、ShareCanvas離屏畫布、原生Canvas佈局。

建立項目併發布

建立Egret項目，使用Launcher發佈，建議使用您我的AppID（測試用的id限制不少功能，例如分享）

添加小遊戲

設置 > 基本設置 > 添加小程序（可以經過審覈便可）

打開開放域功能

使用微信開發者工具打開發布的微信小遊戲，或在終端運行 egret run --target wxgame ，找到遊戲配置文件game.json，配置以下，其中openDataContext使小遊戲支持了微信開放域功能。

 1 {
 2     "deviceOrientation": "portrait",
 3     "networkTimeout": {
 4         "request": 5000,
 5         "connectSocket": 5000,
 6         "uploadFile": 5000,
 7         "downloadFile": 5000
 8     },
 9     "openDataContext": "openDataContext"
10 }

ShareCanvas介紹

開放數據域的繪製文件中已經擁有一個經過Canvas API繪製的排行榜 ，SharedCanvas 是主域和開放數據域均可以訪問的一個離屏畫布，原理以下所示。

index.js文件中，官方已經爲咱們繪製了一個簡單的排行榜demo，渲染出的效果以下圖所示

主域和開放域通信

開放域已經爲咱們繪製好了虛擬排行榜，如今只須要讓主域打開開放域的排行榜就能夠展現在Canvas上了。

首先，建立開放數據域顯示對象，離屏畫布的顯示對象可直接在主域中經過如下的方式進行建立，建立的顯示對象爲 egre.Bitmap 類型，可直接添加到舞臺上。

//在主域中建立開放數據域顯示對象
var platform = window.platform;
this.bitmap = platform.openDataContext.createDisplayObject(null,this.stage.stageWidth, this.stage.stageHeight);

 

 

其次，經過主域與開放數據域的單向數據接口進行通信。主域可向開放數據域單方向發送消息。

1 //主域向子域發送數據
2 plathform.openDataContext.postMessage({
3     isRanking: this.isRankClick,
4     text: "egret",
5     year: (new Date()).getFullYear(),
6     command: "open"
7 });

 

子域可經過監聽事件的方式獲取到主域發送過來的自定義信息。

 1 //子域接收信息
 2 wx.onMessage((data) => {
 3   if (data.command == 'open') {
 4     //顯示開放域
 5     if (!hasCreateScene) {
 6       //建立並初始化
 7       hasCreateScene = createScene();
 8       ...
 9   }
10 }

最後，開發者即可以在主域中發送數據，請求開放域打開排行榜，子域接收到數據打開排行榜。

擴展

您能夠經過修改index.js文件內的參數改變排行榜樣式達到目標效果，可使用本身的圖片放到對應的路徑中（總文件大小不要超過4M）。佈局建議不要使用固定數字的數值，而是以 stageWidth stageHeight 舞臺寬高做爲基數，以儘可能減小不一樣手機出現的適配問題。

 1 /**
 2  * 資源加載組，將所需資源地址以及引用名進行註冊
 3  * 以後可經過assets引用名方式進行獲取
 4  */
 5 var assets = {
 6   icon: "openDataContext/assets/icon.png",
 7   box: "openDataContext/assets/signIn.png",
 8   panel: "openDataContext/assets/bg.png",
 9   button: "openDataContext/assets/OK_button.png",
10   title: "openDataContext/assets/rankingtitle.png"
11 };

 

 

注意：安卓偶爾有不顯示數據的BUG，在index.js中給字體加一個顏色便可

1 //設置字體
2   context.font = fontSize + "px Arial";
3   context.fillStyle = "#fff"

 

小結

經過本文您能夠對如下問題有更深刻的瞭解

• 對微信的關係鏈數據有更深刻的理解

• 平臺數據接口的做用和使用

• 熟悉主域與開放域數據通信規則

• 對原生Canvas的佈局有所瞭解

本文關鍵代碼參考

 1 private isRankClick:boolean = false;
 2     private bitmap: egret.Bitmap;
 3      /**
 4      * 排行榜遮罩，爲了不點擊開放數據域影響到主域，在主域中創建一個遮罩層級來屏蔽點擊事件.</br>
 5      * 根據本身的需求來設置遮罩的 alpha 值 0~1.</br>
 6      */
 7     private rankingListMask: egret.Shape;
 8 
 9     //顯示微信排行榜
10     public obBtnRankingClick(e:egret.TouchEvent) {
11         console.log("點擊排行榜");
12         let plathform:any = window.platform;
13         if(!this.isRankClick) {
14              //處理遮罩,避免開放域數據影響主域
15             this.rankingListMask = new egret.Shape();
16             this.rankingListMask.graphics.beginFill(0x000000,1);
17             this.rankingListMask.graphics.drawRect(0,0,this.stage.width,this.stage.height);
18             this.rankingListMask.graphics.endFill();
19             this.rankingListMask.alpha = 0.4;
20             //設置爲true,以避免觸摸到下面的按鈕
21             this.rankingListMask.touchEnabled = true;
22             this.addChildAt(this.rankingListMask,999);
23 
24             //讓排行榜按鈕顯示在容器內
25             this.addChild(this.btn_ranking);
26             
27             //顯示開放域數據
28             this.bitmap = plathform.openDataContext.createDisplayObject(null,                       this.stage.stageWidth, this.stage.stageHeight);
29             this.addChild(this.bitmap);
30             //主域向子域發送數據
31             plathform.openDataContext.postMessage({
32                 isRanking: this.isRankClick,
33                 text: "egret",
34                 year: (new Date()).getFullYear(),
35                 command: "open"
36             });
37 
38             this.isRankClick = true;
39         }
40         else {
41             this.bitmap.parent && this.bitmap.parent.removeChild(this.bitmap);
42             this.rankingListMask.parent && this.rankingListMask.parent.removeChild(this.rankingListMask);
43             this.isRankClick = false;
44             plathform.openDataContext.postMessage({
45                 isRanking: this.isRankClick,
46                 text: "egret",
47                 year: (new Date()).getFullYear(),
48                 command: "close"
49             });
50         }
51     }

本文源碼連接：https://github.com/shenysun/FriendsList