利用微信小程序（小游戏）API制作适配cocos creator小游戏排行榜的实例程序

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