摘要：今天我們分享的菜鳥文檔將介紹微信小游戲好友排行榜的制作過程，包括創建項目并發布微信開發者平臺添加小游戲打開開放域功能主域和開放域通訊，以及與原生的布局。

寫在前面：隨著越來越多的新人開始接觸白鷺引擎，創作屬于自己的游戲。考慮到初學者會遇到一些實際操作問題，我們近期整理推出“菜鳥”系列技術文檔，以便更好的讓這些開發者們快速上手，Egret大神們可以自動忽略此類內容。

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

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

創建項目并發布

創建Egret項目，使用Launcher發布，建議使用您個人AppID（測試用的id限制很多功能，例如分享）

添加小游戲

設置 > 基本設置 > 添加小程序（能夠通過審核即可）

打開開放域功能

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

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

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);

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

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

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

 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      * 排行榜遮罩，為了避免點擊開放數據域影響到主域，在主域中建立一個遮罩層級來屏蔽點擊事件.

 5      * 根據自己的需求來設置遮罩的 alpha 值 0~1.

 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/F...