cocos creator 可以通過新建一個creator專案進行新增子域專案，但是有一個缺點就是佔用檔案大小是一個問題，所以我這裡採用微信的API進行繪製排行榜，

主域就是各種傳送給子域的訊息，這裡不再這裡贅述，就是各種呼叫微信的API

這裡給出微信的API

微信開放資料域

新建main.js

目錄結構如下：

main.js

export default class Main{
    constructor(){
        this.canvas = wx.createCanvas();
        this.context = this.canvas.getContext('2d');
        console.log(this.canvas.width,this.canvas.height);
        this.drawRect(0,0,this.canvas.width,this.canvas.height,'white');
    }
    /**
     *@param offsetX : 距離螢幕的左邊的距離
     *@param offsetY : 距離螢幕上邊的距離 
     *@param width   : 要繪製的畫面的寬度
      @param height  : 要繪製畫面的高度
      @param color   : 要繪製畫面的顏色 
     */
    drawRect(offsetX,offsetY,width,height,color){
        this.context.fillStyle = color;
        this.context.fillRect(offsetX, offsetY, width, height);
    }
    //繪製文字
    drawText(offsetX,offsetY,content,color,fontSize){
        this.context.fillStyle = color;
        this.context.font = fontSize;
        this.context.fillText(content,offsetX,offsetY);
    }
    //繪製圖片 void ctx.drawImage(image, dx, dy, dWidth, dHeight);
    drawImage(image,dx,dy,dWidth,dHeight){
        this.context.drawImage(image,dx,dy,dWidth,dHeight);
    }

}
 

game.js

import Main from './js/main'

let main = new Main();
//一行的高度，寬度，間距
let List = {
    WIDTH     : main.canvas.width * 6 / 9,
    HEIGHT    : main.canvas.height / 11,
    //行的間距
    OFFSET    : main.canvas.height / 28,
    //起始x 座標
    STARTX    : 60,
    //起始Y 座標
    STARTY    : 60,
    //該行背景色
    COLOR     : '',
    //一行中字型的顏色
    FONTCOLOR  : '',
    FONTESTYLE : '20px serif',
    FONTTOP    : 40,
    IMAGETOP  : 5,
    IMAGEWIDTH  : 50,
    IMAGEHEIGHT : 50,
}
//可以容納的行數
let ROWNUMBER =  Math.floor((main.canvas.height - List.STARTY) / (List.HEIGHT + List.OFFSET));
console.log("可以容納的最大的行數是：",ROWNUMBER);
//需要顯示出來的資料
let Data = [{
    RANK        : 1,
    imageUrl    : "頭像地址",
    nickname    : '暱稱',
    score       : '210'
    },
    {
        RANK: 2,
        imageUrl: "頭像地址",
        nickname: '暱稱',
        score: '220'
    },
    {
        RANK: 3,
        imageUrl: "頭像地址",
        nickname: '暱稱',
        score: '210'
    },
    {
        RANK: 4,
        imageUrl: "頭像地址",
        nickname: '暱稱',
        score: '220'
    },
    {
        RANK: 5,
        imageUrl: "頭像地址",
        nickname: '暱稱',
        score: '210'
    },
    {
        RANK: 6,
        imageUrl: "頭像地址",
        nickname: '暱稱',
        score: '220'
    }
    ]
//繪製底圖
main.drawRect(50, 50, main.canvas.width * 3 / 4, main.canvas.height * 3 / 4,'#6969FF');
//繪製排名行
for(let i = 0;i < Data.length;i++){
    
    if(i % 2 === 0 ){
        List.COLOR = '#D8BFD8';
        List.FONTCOLOR = '#ffffff';
    }else{
        List.COLOR = '#D3D3D3'
        List.FONTCOLOR = '#ec0063';
    }
    main.drawRect(List.STARTX, List.STARTY + i*(List.HEIGHT +  List.OFFSET), List.WIDTH, List.HEIGHT, List.COLOR);
    //繪製資料中的內容
    let dataItem = Data[i];
    // drawText(offsetX, offsetY, content, color, fontSize)
    main.drawText(List.STARTX + 5,List.STARTY + List.FONTTOP + i *(List.HEIGHT + List.OFFSET),dataItem.RANK,List.FONTCOLOR,List.FONTESTYLE);
    let imagePromise = new Promise(function(resolve,reject){
        //繪製圖像內容
        let image = wx.createImage();
        image.src = dataItem.imageUrl;
        image.onload = function () {
            resolve(image);
        }
    });
    imagePromise.then(function(image){
        console.log("image is ",image);
        // drawImage(image, dx, dy, dWidth, dHeight)
        main.drawImage(image, List.STARTX + 30, List.STARTY + List.IMAGETOP + i * (List.HEIGHT + List.OFFSET), List.IMAGEWIDTH, List.IMAGEHEIGHT);
    });
    //繪製暱稱
    main.drawText(List.STARTX + 93, List.STARTY + List.FONTTOP + i * (List.HEIGHT + List.OFFSET), dataItem.nickname, List.FONTCOLOR, List.FONTESTYLE);
    main.drawText(List.STARTX + 190, List.STARTY + List.FONTTOP + i * (List.HEIGHT + List.OFFSET), dataItem.score, List.FONTCOLOR, List.FONTESTYLE);

}

// main.drawText(65,100,'1','white','25px serif');