LayaAirIDE实现微信小游戏排行榜绘制（开放数据域）

看这篇文章的前提是你

1.已经在微信Web开发者平台里使用wx.setUserCloudStorage接口把自己的数据存储到微信提供的服务器上，

2.并且已经通过wx.getFriendCloudStorage把游戏数据已经读取到了开放域里。

如果不是 请按照微信官方的提示做到这步。否则往下看也没什么意义。

本教程参考Laya官方提供的帖子，看了下Egret的官方教程不得不提一句，比Laya专业的多。

有点后悔自己开始没有用Egret了。

说白了，官方的教程就是要建立2个Laya工程，对没错，要建立2个，不要觉的自己开发的是1个游戏，为什么要建立2个？

这个新建的Laya工程其实就是为了重新导入Laya的库，并且为Laya的代码执行提供执行的环境。

注意Laya可以一键导出到微信小游戏平台，而所有的代码都要包含到一个js文件里，包括Laya的引擎库js也要包含到这个js文件里。在Laya里生成的是code.js。

所以建立两个Laya工程会导出2个code.js而第二个code.js要放在一个单独的文件夹下，和这个文件夹微信要求的一样目录是src/myOpenDataContext，

在没有编译和语法错误的情况下。

两个code.js都会有这行代码。

 

Laya.MiniAdpter.init(;

现在找到这两个code.js

主域里的code.js的这行代码要改为如下代码

Laya.MiniAdpter.init(true);
Laya.init(EN_STAGE_WIDTH_ORIGIN, EN_STATE_HEIGHT_ORIGIN, Laya.WebGL);

var rankSprite2 = new Laya.Sprite();
Laya.stage.addChild(rankSprite2);
Laya.timer.once(400, this, function (){
  var rankTexture = new Laya.Texture(Browser.window.sharedCanvas);
  rankTexture.bitmap.alwaysChange = true;//小游戏使用，非常费，每帧刷新
  rankSprite2.graphics.drawTexture(rankTexture, 5, 78, rankTexture.width, rankTexture.height);
});

 

而刚才我们新建的src/myOpenDataContext里的code.js

 

也要找到Laya.MiniAdpter.init(这行代码

同时替换为

//初始化微信小游戏
Laya.MiniAdpter.init(true,true);
//程序入口
Laya.init(600, 400);
//激活资源版本控制
//Laya.ResourceVersion.enable("version.json", Handler.create(null, beginLoad), Laya.ResourceVersion.FILENAME_VERSION);

function drawRankList(data) {
  data.forEach((item, index) => {
    // context.drawImage(item.avatarUrl, 0, 0, 200, 400);
    // var image1 = wx.createImage()
    // image1.src = item.avatarUrl
    // context.drawImage(image1, 0, 0, 80 * index, 80)
    var image = new Laya.Image();
    image.loadImage(item.avatarUrl, 0, 0, 40, 40);

    var score = new Laya.Text();
    score.text = item.KVDataList[0].value;
    image.addChild(score)

    var nickName = new Laya.Text();
    nickName.text = item.nickname;
    Laya.stage.addChild(image);

    image.addChild(nickName);
    image.x = 30
    nickName.x = image.x + 60;
    image.y = index * 80
    score.x = image.x + 180;
  })
}


wx.onMessage(function(message){
    wx.getFriendCloudStorage({
      keyList: ["score"],
      success: res => {
        let data = res.data
        drawRankList(data)
      }
    })
});

这里解释一下 代码的用处wx.onMessage是为了接收主域发来的消息，比如我点击排行榜按钮，就wx.postMessage，而此时就会调用到wx.onMesage，然后请求玩家好友数据，然后绘出玩家的头像，昵称和分数。

函数drawRankList函数都与使用Laya的同学来说已经很熟悉，这里不再赘述。

通过以上 可以看到关键代码是这两行。

var rankTexture = new Laya.Texture(Browser.window.sharedCanvas);
  rankTexture.bitmap.alwaysChange = true;//小游戏使用，非常费，每帧刷新
  rankSprite2.graphics.drawTexture(rankTexture, 5, 78, rankTexture.width, rankTexture.height);

很明显Laya的Stage在src/myOpenDataContext里在执行

Laya.MiniAdpter.init(true,true);

的时候被绘制到了微信的sharedCanvas上。

而下面两行把sharedCanvas绘制出来，就把Laya的Stage显示出来，进而显示出来上面的绘制的元素。

var rankTexture = new Laya.Texture(Browser.window.sharedCanvas);
  rankTexture.bitmap.alwaysChange = true;//小游戏使用，非常费，每帧刷新
  rankSprite2.graphics.drawTexture(rankTexture, 5, 78, rankTexture.width, rankTexture.height);

 

效果如图