微信排行榜功能

我參考網上的寫的

    private bgGroup: eui.Group = null;
    public bitmap: egret.Bitmap = null;
    private isRankClick: boolean = false;
    private rankingListMask: egret.Shape;

    private async initWX() {
        egret.log("initWX 1");
        this.bgGroup = new eui.Group();
        this.bgGroup.width = 720;
        this.bgGroup.height = 1280;
        this.addChild(this.bgGroup);

        let bgImg: egret.Bitmap = new egret.Bitmap();
        bgImg.texture = RES.getRes(ResImgDefine.img_loading_bg_jpg);
        this.bgGroup.addChild(bgImg);

        let btnLogin: egret.Bitmap = new egret.Bitmap();
        btnLogin.texture = RES.getRes(ResImgDefine.btn_ok_png);
        this.bgGroup.addChild(btnLogin);
        btnLogin.x = (GDatas.getStageWidth() - btnLogin.width) / 2;
        btnLogin.y = (GDatas.getStageHeight() - btnLogin.height) / 2;

        let label: eui.Label = new eui.Label();
        label.horizontalCenter = 0.5;
        label.verticalCenter = 0.5;
        label.verticalAlign = egret.VerticalAlign.MIDDLE;

        label.bold = true;
        label.size = 40;
        label.textAlign = egret.HorizontalAlign.CENTER;
        label.$setWidth(btnLogin.width);
        label.$setHeight(btnLogin.height);
        label.$setBackgroundColor(0x00ff00);
        label.$setTextColor(0x000000);
        label.$setText("開始");
        this.bgGroup.addChild(label);
        label.x = btnLogin.x;
        label.y = btnLogin.y;

        GDatas.platformType = EPlatformType.h5;

        let sign = await platform.getPlatformSign();
        if (sign) {
            let plat: string = sign["platform"]
            egret.log("is plat = ", plat);
            if (plat === "wx") {
                GDatas.platformType = EPlatformType.wx;

                // GDatas.userInfo = await platform.getUserInfo();
                // egret.log("GameEntry:: userInfo = ", GDatas.userInfo);
                let loginRes = await platform.login();
                // loginRes =  {errMsg: "login:ok", code: "043NGnW70DszQF1nnCW700uHW70NGnWs"}
                egret.log("loginRes = ", loginRes);

                this.showRank();
            }
        }

        // App.DisplayUtils.removeFromParent(btnLogin);
        // App.DisplayUtils.removeFromParent(bgImg);
        // App.DisplayUtils.removeFromParent(label);
        // App.DisplayUtils.removeFromParent(this.bgGroup);
        // this.bgGroup = null;
        // this.enterGame();
    }

    private showRank() {

        this.bgGroup.touchEnabled = true;
        this.bgGroup.touchChildren = false;
        this.bgGroup.addEventListener(egret.TouchEvent.TOUCH_TAP, this.obBtnRankingClick, this);
        platform.openDataContext.postMessage({
            command: 'loadRes'
        });
    }


    //顯示微信排行榜

    public obBtnRankingClick(e: egret.TouchEvent) {
        console.log("點擊排行榜");
        let plat: any = window.platform;
        egret.log("platform = ", platform);
        let context = platform.openDataContext;
        if (!context) {
            egret.error("Main::showRank context");
            return;
        }

        if (!this.isRankClick) {

            //處理遮罩,避免開放域數據影響主域

            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.4;

            //設置爲true,以免觸摸到下面的按鈕

            this.rankingListMask.touchEnabled = true;

            this.addChildAt(this.rankingListMask, 999);

            //讓排行榜按鈕顯示在容器內

            //TODO: 這裏
            // this.addChild(this.btn_ranking);


            //顯示開放域數據

            this.bitmap = plat.openDataContext.createDisplayObject(null, this.stage.stageWidth, this.stage.stageHeight);
            this.addChild(this.bitmap);
            //主域向子域發送數據
            plat.openDataContext.postMessage({
                isRanking: this.isRankClick,
                text: "egret",
                year: (new Date()).getFullYear(),
                command: "open"
            });

            this.isRankClick = true;
        } else {
            this.bitmap.parent && this.bitmap.parent.removeChild(this.bitmap);
            this.rankingListMask.parent && this.rankingListMask.parent.removeChild(this.rankingListMask);

            this.isRankClick = false;
            plat.openDataContext.postMessage({
                isRanking: this.isRankClick,
                text: "egret",
                year: (new Date()).getFullYear(),
                command: "close"
            });
        }
    }

 

附參考：https://www.mmzsblog.cn/articles/2019/09/10/1568118032212.html

一、調用默認排行榜

1、首先我們需要了解：

• 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

• 核心代碼：

• 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;
          }
      }
  
  }
  

  下面是可以獲得頭像的

參考：https://blog.csdn.net/duan003387/article/details/82591827

/**
 * 微信開放數據域
 * 使用 Canvas2DAPI 在 SharedCanvas 渲染一個排行榜，
 * 並在主域中渲染此 SharedCanvas
 */

/**
 * 資源加載組，將所需資源地址以及引用名進行註冊
 * 之後可通過assets.引用名方式進行獲取
 */
const assets = {
  icon: "openDataContext/assets/icon.png",
  box: "openDataContext/assets/box.png",
  panel: "openDataContext/assets/panel.png",
  button: "openDataContext/assets/button.png",
  title: "openDataContext/assets/rankingtitle.png"
};
/**
 * canvas 大小
 * 這裏暫時寫死
 * 需要從主域傳入
 */
let canvasWidth;
let canvasHeight;



//獲取canvas渲染上下文
const context = sharedCanvas.getContext("2d");
context.globalCompositeOperation = "source-over";


var userInfoList = [];

/**
 * 創建排行榜
 */
function drawRankPanel() {
  //繪製背景
  // context.drawImage(assets.panel, offsetX_rankToBorder, offsetY_rankToBorder, rankWidth, rankHeight);
  //繪製標題
  const title = assets.title;
  //根據title的寬高計算一下位置;
  const titleX = offsetX_rankToBorder + (rankWidth - title.width) / 2;
  const titleY = offsetY_rankToBorder + title.height + 40;
  // context.drawImage(title, titleX, titleY);
  //獲取當前要渲染的數據組

  //起始id
  const startID = perPageMaxNum * page;

  if (userInfoList.length <= 0) {
    return;
  }

  currentGroup = userInfoList.slice(startID, startID + perPageMaxNum);
  //創建頭像Bar
  drawRankByGroup(currentGroup);
  //創建按鈕
  // drawButton()
  setMaxScore();
}
/**
 * 根據屏幕大小初始化所有繪製數據
 */
function init() {
  //排行榜繪製數據初始化,可以在此處進行修改
  rankWidth = stageWidth * 4 / 5;
  rankHeight = stageHeight * 3 / 5;
  barWidth = rankWidth * 4 / 5;
  barHeight = rankWidth / perPageMaxNum;
  offsetX_rankToBorder = (stageWidth - rankWidth) / 2;
  offsetY_rankToBorder = (stageHeight - rankHeight) / 2;
  preOffsetY = (rankHeight - barHeight) / (perPageMaxNum + 1) * 1.15;
  fontSize = Math.floor(stageWidth / 25);
  startX = offsetX_rankToBorder + (rankWidth - barWidth) / 4;
  startY = offsetY_rankToBorder + preOffsetY * 0.2;
  avatarSize = barHeight - 10;
  intervalX = barWidth / 20;
  textOffsetY = (barHeight + fontSize) / 2;
  textMaxSize = barWidth / 2;
  indexWidth = context.measureText("99").width;

  //按鈕繪製數據初始化
  buttonWidth = barWidth / 3;
  buttonHeight = barHeight / 2;
  buttonOffset = rankWidth / 3;
  lastButtonX = offsetX_rankToBorder + buttonOffset - buttonWidth;
  nextButtonX = offsetX_rankToBorder + 2 * buttonOffset;
  nextButtonY = lastButtonY = offsetY_rankToBorder + rankHeight - 50 - buttonHeight;
  let data = wx.getSystemInfoSync();
  canvasWidth = data.windowWidth;
  canvasHeight = data.windowHeight;
}

/**
 * 創建兩個點擊按鈕
 */
function drawButton() {
  context.drawImage(assets.button, nextButtonX, nextButtonY, buttonWidth, buttonHeight);
  context.drawImage(assets.button, lastButtonX, lastButtonY, buttonWidth, buttonHeight);
}


/**
 * 根據當前繪製組繪製排行榜
 */
function drawRankByGroup(currentGroup) {
  for (let i = 0; i < currentGroup.length; i++) {
    const data = currentGroup[i];
    drawByData(data, i);
  }
}

/**
 * 根據繪製信息以及當前i繪製元素
 */
function drawByData(data, i) {
  let x = startX;
  let headX = startX + indexWidth + intervalX;
  //繪製序號
  context.fillStyle = "#888489";
  if (i == 0) {
    context.fillStyle = "#FC670A";
  } else if (i == 1) {
    context.fillStyle = "#FF004C";
  } else if (i == 2) {
    context.fillStyle = "#0019FF";
  }

  // context.font = "34px Microsoft YaHei";
  context.font = Math.floor(stageWidth / 25) + "px Microsoft YaHei";
  context.fillText(data.key + "", x, startY + i * preOffsetY + textOffsetY, 50);
  x += indexWidth + intervalX;
  //繪製頭像
  let img = wx.createImage();
  img.src = data.url;
  img.onload = function () {
    context.save();
    context.beginPath(); //開始繪製
    context.arc(headX + (avatarSize / 2), startY + i * preOffsetY + (barHeight - avatarSize) / 2 + (avatarSize / 2), avatarSize / 2, 0, Math.PI * 2, false);
    context.clip();
    context.drawImage(img, headX, startY + i * preOffsetY + (barHeight - avatarSize) / 2, avatarSize, avatarSize);
    context.restore(); //恢復之前保存的繪圖上下文 恢復之前保存的繪圖上下午即狀態 還可以繼續繪製
  }
  x += avatarSize + intervalX;
  //繪製名稱
  context.fillStyle = "#888489";
  context.font = Math.floor(stageWidth / 28) + "px Arial";
  context.fillText(data.name + "", x, startY + i * preOffsetY + textOffsetY, textMaxSize);
  x += textMaxSize + intervalX;
  //繪製分數
  context.fillStyle = "#09E0EF";
  context.font = Math.floor(stageWidth / 25) + "px Microsoft YaHei";
  context.fillText(data.scroes + "", x, startY + i * preOffsetY + textOffsetY, textMaxSize);
}

/**
 * 點擊處理
 */
function onTouchEnd(event) {
  let x = event.clientX * sharedCanvas.width / canvasWidth;
  let y = event.clientY * sharedCanvas.height / canvasHeight;
  if (x > lastButtonX && x < lastButtonX + buttonWidth &&
    y > lastButtonY && y < lastButtonY + buttonHeight) {
    //在last按鈕的範圍內
    if (page > 0) {
      buttonClick(0);
    }
  }
  if (x > nextButtonX && x < nextButtonX + buttonWidth &&
    y > nextButtonY && y < nextButtonY + buttonHeight) {
    //在next按鈕的範圍內
    if ((page + 1) * perPageMaxNum < userInfoList.length) {
      buttonClick(1);
    }
  }

}
/**
 * 根據傳入的buttonKey 執行點擊處理
 * 0 爲上一頁按鈕
 * 1 爲下一頁按鈕
 */
function buttonClick(buttonKey) {
  let old_buttonY;
  if (buttonKey == 0) {
    //上一頁按鈕
    old_buttonY = lastButtonY;
    lastButtonY += 10;
    page--;
    renderDirty = true;
    console.log('上一頁' + page);
    setTimeout(() => {
      lastButtonY = old_buttonY;
      //重新渲染必須標髒
      renderDirty = true;
    }, 100);
  } else if (buttonKey == 1) {
    //下一頁按鈕
    old_buttonY = nextButtonY;
    nextButtonY += 10;
    page++;
    renderDirty = true;
    console.log('下一頁' + page);
    setTimeout(() => {
      nextButtonY = old_buttonY;
      //重新渲染必須標髒
      renderDirty = true;
    }, 100);
  }

}

/////////////////////////////////////////////////////////////////// 相關緩存數據

///////////////////////////////////數據相關/////////////////////////////////////

/**
 * 渲染標髒量
 * 會在被標髒（true）後重新渲染
 */
let renderDirty = true;

/**
 * 當前繪製組
 */
let currentGroup = [];
/**
 * 每頁最多顯示個數
 */
let perPageMaxNum = 6;
/**
 * 當前頁數,默認0爲第一頁
 */
let page = 0;
///////////////////////////////////繪製相關///////////////////////////////
/**
 * 舞臺大小
 */
let stageWidth;
let stageHeight;
/**
 * 排行榜大小
 */
let rankWidth;
let rankHeight;

/**
 * 每個頭像條目的大小
 */
let barWidth;
let barHeight;
/**
 * 條目與排行榜邊界的水平距離
 */
let offsetX_barToRank
/**
 * 繪製排行榜起始點X
 */
let startX;
/**
 * 繪製排行榜起始點Y
 */
let startY;
/**
 * 每行Y軸間隔offsetY
 */
let preOffsetY;
/**
 * 按鈕大小
 */
let buttonWidth;
let buttonHeight;
/**
 * 上一頁按鈕X座標
 */
let lastButtonX;
/**
 * 下一頁按鈕x座標
 */
let nextButtonX;
/**
 * 上一頁按鈕y座標
 */
let lastButtonY;
/**
 * 下一頁按鈕y座標
 */
let nextButtonY;
/**
 * 兩個按鈕的間距
 */
let buttonOffset;

/**
 * 字體大小
 */
let fontSize;
/**
 * 文本文字Y軸偏移量
 * 可以使文本相對於圖片大小居中
 */
let textOffsetY;
/**
 * 頭像大小
 */
let avatarSize;
/**
 * 名字文本最大寬度，名稱會根據
 */
let textMaxSize;
/**
 * 繪製元素之間的間隔量
 */
let intervalX;
/**
 * 排行榜與舞臺邊界的水平距離
 */
let offsetX_rankToBorder;
/**
 * 排行榜與舞臺邊界的豎直距離
 */
let offsetY_rankToBorder;
/**
 * 繪製排名的最大寬度
 */
let indexWidth;

//////////////////////////////////////////////////////////
/**
 * 監聽點擊
 */
wx.onTouchEnd((event) => {
  const l = event.changedTouches.length;
  for (let i = 0; i < l; i++) {
    onTouchEnd(event.changedTouches[i]);
  }
});


/**
 * 是否加載過資源的標記量
 */
let hasLoadRes;

/**
 * 資源加載
 */
function preloadAssets() {
  let preloaded = 0;
  let count = 0;
  for (let asset in assets) {
    count++;
    const img = wx.createImage();
    img.onload = function () {
      preloaded++;
      if (preloaded == count) {
        // console.log("加載完成");
        hasLoadRes = true;
      }
    }
    img.src = assets[asset];
    assets[asset] = img;
  }
}


/**
 * 繪製屏幕
 * 這個函數會在加載完所有資源之後被調用
 */
function createScene() {

  // if (sharedCanvas.width && sharedCanvas.height && hasLoadRes) {
    // console.log('初始化完成')
    stageWidth = sharedCanvas.width;
    stageHeight = sharedCanvas.height;
    init();
    hasCreateScene = true;
    return true;
  // } else {
  //   console.log('創建開放數據域失敗，請檢查是否加載開放數據域資源');
  //   return false;
  // }
}


function getKVValueByKey(kvDataList, key) {
  for (let kvData of kvDataList) {
    if (kvData.key == key) {
      return kvData.value;
    }
  }
}

//記錄requestAnimationFrame的ID
let requestAnimationFrameID;
let hasCreateScene;
/**
 * 增加來自主域的監聽函數
 */
function addOpenDataContextListener() {

  // wx.removeUserCloudStorage({
  //   keyList: ["score"]
  // });

  console.log('增加監聽函數')
  wx.onMessage((data) => {
    if (data.command == 'open') {
      let curScore = ~~data.curScore;
      wx.getUserCloudStorage({
        keyList: ["score"],
        success: function (callBackData) {
          //獲取玩家數據成功
          let kvDataList = callBackData.KVDataList;
          let oldScore = ~~getKVValueByKey(kvDataList, "score");
          if (oldScore <= curScore) {
            //破紀錄
            maxScore = curScore;
            wx.setUserCloudStorage({
              KVDataList: [{
                key: "score",
                value: curScore.toString()
              }],
              success: handleFriends()
            })
          } else {
            maxScore = oldScore;
            handleFriends();
          }
        }
      })
    } else if (data.command == 'close' && requestAnimationFrameID) {
      cancelAnimationFrame(requestAnimationFrameID);
      requestAnimationFrameID = null
    } else if (data.command == 'loadRes' && !hasLoadRes) {
      /**
       * 加載資源函數
       * 只需要加載一次
       */
      // console.log('加載資源')
      preloadAssets();
    }
  });
}

addOpenDataContextListener();

var maxScore = 0;
/**
 * 最高分
 */
function setMaxScore() {
  let maxScoreX = startX + rankWidth - rankWidth * 0.15; //最高分的x座標
  context.fillStyle = "#FF0000";
  context.font = Math.floor(stageWidth / 18) + "px Microsoft YaHei";
  context.fillText(maxScore.toString(), maxScoreX, stageHeight - 260 * (stageHeight / 1280), 50);
}

function handleFriends() {
  wx.getFriendCloudStorage({
    keyList: ["score"],
    success: function (callBackData) {
      userInfoList = [];
      let data = callBackData.data;
      //獲取同玩數據成功
      for (let i = 0; i < data.length; i++) {
        let userData = data[i];

        // console.log("unionId = " + userData.unionId);
        console.log(userData);

        let avatarUrl = userData.avatarUrl;
        let nickname = userData.nickname;
        let maxScore = 0;
        let KVDataList = userData.KVDataList;
        for (let kvData of KVDataList) {
          if (kvData.key == "score") {
            maxScore = ~~kvData.value;
          }
        }
        let playerData = {
          key: 0,
          name: "",
          url: assets.icon,
          scroes: 0
        }

        playerData.key = i + 1;
        playerData.name = nickname;
        playerData.url = avatarUrl;
        playerData.scroes = maxScore;
        userInfoList.push(playerData);
      }

      let compare = function (a, b) {//比較函數
        if (a.scroes < b.scroes) {
          return 1;
        } else if (a.scroes > b.scroes) {
          return -1;
        } else {
          return 0;
        }
      }
      userInfoList.sort(compare);
      for (let i = 0; i < userInfoList.length; i++) {
        let userInfo = userInfoList[i];
        userInfo.key = i + 1;
      }

      if (!hasCreateScene) {
        //創建並初始化
        hasCreateScene = createScene();
      }
      requestAnimationFrameID = requestAnimationFrame(loop);

      context.clearRect(0, 0, sharedCanvas.width, sharedCanvas.height);
      drawRankPanel();
    }
  });
}

/**
 * 循環函數
 * 每幀判斷一下是否需要渲染
 * 如果被標髒，則重新渲染
 */
function loop() {
  if (renderDirty) {
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, sharedCanvas.width, sharedCanvas.height);
    drawRankPanel();
    renderDirty = false;
  }
  requestAnimationFrameID = requestAnimationFrame(loop);
}

 

參考：https://mp.weixin.qq.com/s/kYIdnHv-C5KuR9snekPNBg

參考：https://blog.csdn.net/Pan_mouren/article/details/88636418

/**
 * 微信好友排行榜（主域跟子域）
 *
 * desc：微信爲了保護用戶信息特地推出了主域跟子域的概念，目的是爲了保護用戶好友的信息防止泄露，好友信息只能在子域通過
 *       wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage()兩個API獲得
 *       首先創建兩個項目，一個是原本的工程項目，另一個是子域的項目，
 *       在子域的canvas大小設置爲主域中排行顯示好友信息界面同等大小
 *       在主域的排行窗口下新建一個空節點，添加WXSubContextView組件，用來接收子域傳遞迴的排行信息，該節點的大小與子域的canvas大小保持一致
 *******剩下的就是子域中UI的排布了
 *
 * */
 
// 代碼部分（主域）
// 第一步：在排行榜顯示界面的地方添加：
    this.rankListView.active=true;
    //判斷是否是微信平臺
    if(window['wx']){
        //給子域發送消息
        var openDataContext = wx.getOpenDataContext();
        openDataContext.postMessage({
            text:'showRank',
        });
    }
// 用戶通關的地方添加：
// 第二步：向微信發送用戶通關數據，微信雲會存儲當前用戶的當前遊戲的成就
    if (window['wx']){
        var kvDataList = new Array();
        kvDataList.push({
            //標籤 存儲的當前遊戲種類的標籤
            key:'level',
            value:this.currentLevel.toString(),
        });
        console.log(kvDataList);
        wx.setUserCloudStorage({
            KVDataList:kvDataList,
            success(e){
                console.log('向wx存儲用戶數據成功');
                console.log(e);
            },
            fail(e){
                console.log('向wx存儲用戶數據失敗');
                console.log(e);
            }
        });
    }
 
// 子域部分
// 在子域的腳本中的update中實時監測主域發送的消息（主域中打開排行榜顯示時會自動給子域發送消息）
    update(){
        var self = this;
        if(this.lock){
            //接受主域消息
            wx.onMessage(function (data){
                console.log('子域收到信息：');
                console.log(data);
                if(data.text == 'showRank'){
                    self.getWXData();
                }
            });
            // this.lock = false;
        }
    },
//
//向微信雲獲取數據（好友信息）
    getWXData(){
        var self = this;
        wx.getFriendCloudStorage({
            keyList:['score'],
            success(e){
                console.log('獲得好友微信數據成功（數組）');
                console.log(e);
                let num = self.findNum(e,'level');//weizhi
                self.createRankList(e.data.sort(self.sortBy(num,false)));
            },
            fail(e){
                console.log('獲得好友微信數據失敗');
                console.log(e);
            },
        });
    },
// 排序算法
// attr：排序對象
// rev:1：降序0：升序
    sortBy(num,rev){
        if(rev == undefined){
            rev = 1;
        }else{
            rev = (rev)?1:-1;
        }
        return function(a,b){
            a = Number(a.KVDataList[num].value);
            b = Number(b.KVDataList[num].value);
            if(a<b){
                return rev*-1;
            }
            if(a>b){
                return rev*1;
            }
            return 0;
        }
    },
//查詢鍵值位置，存儲好友的當前遊戲的成就數據
    findNum(e,str){
        for(var i = 0;i<e.data[0].KVDataList.length;i++){
            if(e.data[0].KVDataList[i].key==str){
                return i;
            }
        }
    },
//產生列表創建好友列表
    createRankList(e){
        //··· instance（）
        //就是在ScrollView裏添加子節點啦 自己通過預設體代碼創建就行了
    }
/**
 * 構建發佈時注意：
 * 主域操作：
 * 構建發佈微信小遊戲時，需要在主域（發佈平臺：WechatGame）的開放開放數據域代碼目錄選項中添加子域項目的發佈的遊戲名稱subContextProj，
 * 不是子域的項目名稱，同時需要勾選MD5Cache選項
 * *********************************************************
 * 子域操作：
 * 遊戲名稱：subContextProj
 * 發佈平臺：WechatGameOpenDataContext
 * 發佈路徑是在主域的.build/wechatgame的文件夾下
 *
 * 發佈時要先構建主域的項目，再構建子域的項目，順序不能顛倒
 * */

用eui做排行榜：https://bbs.egret.com/forum.php?mod=viewthread&tid=50649&extra=&highlight=%E6%BB%91%E5%8A%A8%E6%8E%92%E8%A1%8C%E6%A6%9C&page=2