菜鳥 | 微信小遊戲好友排行榜教程
微信好友排行榜利用微信關系鏈數據實現一個簡單的排行榜，此文檔包含關系鏈數據、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 * 排行榜遮罩，為了避免點擊開放數據域影響到主域，在主域中建立一個遮罩層級來屏蔽點擊事件.</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
菜鳥 | 微信小遊戲好友排行榜教程