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

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

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

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

創(chuàng)建項目并發(fā)布

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

添加小游戲

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

打開開放域功能

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

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

ShareCanvas介紹

開放數(shù)據(jù)域的繪制文件中已經(jīng)擁有一個通過Canvas API繪制的排行榜 ，SharedCanvas 是主域和開放數(shù)據(jù)域都可以訪問的一個離屏畫布，原理如下所示。

index.js文件中，官方已經(jīng)為我們繪制了一個簡單的排行榜demo，渲染出的效果如下圖所示

主域和開放域通訊

開放域已經(jīng)為我們繪制好了虛擬排行榜，現(xiàn)在只需要讓主域打開開放域的排行榜就可以展示在Canvas上了。

首先，創(chuàng)建開放數(shù)據(jù)域顯示對象，離屏畫布的顯示對象可直接在主域中通過以下的方式進(jìn)行創(chuàng)建，創(chuàng)建的顯示對象為 egre.Bitmap 類型，可直接添加到舞臺上。

//在主域中創(chuàng)建開放數(shù)據(jù)域顯示對象
var platform = window.platform;
this.bitmap = platform.openDataContext.createDisplayObject(null,this.stage.stageWidth, this.stage.stageHeight);

其次，通過主域與開放數(shù)據(jù)域的單向數(shù)據(jù)接口進(jìn)行通訊。主域可向開放數(shù)據(jù)域單方向發(fā)送消息。

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

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

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

最后，開發(fā)者便可以在主域中發(fā)送數(shù)據(jù)，請求開放域打開排行榜，子域接收到數(shù)據(jù)打開排行榜。

擴展

您可以通過修改index.js文件內(nèi)的參數(shù)改變排行榜樣式達(dá)到目標(biāo)效果，可以使用自己的圖片放到對應(yīng)的路徑中（總文件大小不要超過4M）。布局建議不要使用固定數(shù)字的數(shù)值，而是以 stageWidth stageHeight 舞臺寬高作為基數(shù)，以盡量減少不同手機出現(xiàn)的適配問題。

1 /**
 2  * 資源加載組，將所需資源地址以及引用名進(jìn)行注冊
 3  * 之后可通過assets引用名方式進(jìn)行獲取
 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 };

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

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

小結(jié)

通過本文您可以對以下問題有更深入的了解

對微信的關(guān)系鏈數(shù)據(jù)有更深入的理解
平臺數(shù)據(jù)接口的作用和使用
熟悉主域與開放域數(shù)據(jù)通訊規(guī)則
對原生Canvas的布局有所了解

本文關(guān)鍵代碼參考

1 private isRankClick:boolean = false;
 2     private bitmap: egret.Bitmap;
 3      /**
 4      * 排行榜遮罩，為了避免點擊開放數(shù)據(jù)域影響到主域，在主域中建立一個遮罩層級來屏蔽點擊事件.

 5      * 根據(jù)自己的需求來設(shè)置遮罩的 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              //處理遮罩,避免開放域數(shù)據(jù)影響主域
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             //設(shè)置為true,以免觸摸到下面的按鈕
21             this.rankingListMask.touchEnabled = true;
22             this.addChildAt(this.rankingListMask,999);
23 
24             //讓排行榜按鈕顯示在容器內(nèi)
25             this.addChild(this.btn_ranking);
26             
27             //顯示開放域數(shù)據(jù)
28             this.bitmap = plathform.openDataContext.createDisplayObject(null,                       this.stage.stageWidth, this.stage.stageHeight);
29             this.addChild(this.bitmap);
30             //主域向子域發(fā)送數(shù)據(jù)
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...