CocosCreator小游戏排行榜
先贴上几个链接 ：
https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html?q= 这个是介绍了子域和主域之间的通信
https://www.w3cschool.cn/weixinapp/weixinapp-vibrate.html 微信小程序的接口 当时查震动就是在这里找到的
我用的Creator版本是1.9.2。
制作游戏微信小游戏排行榜，你需要创建两个项目，一个项目作为主域存放你的代码，就是你写的游戏逻辑。另外需要新建一个项目作为子域，这个项目用来和微信之间通信。因为开发者只有在子域中才能访问微信提供的 wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() 两个 API，才能实现一些排行榜的功能。
主域构建的时候要在开放域数据代码写上wegame下的一个文件目录，这个文件目录就是子域的代码。
子域构建勾选小游戏开放数据域。
由于每次重新构建的时候，都会将之前的东西先删除再构建，所以要首先构建子域项目，构建完成之后再将子域构建的项目复制过来。我这里选择的是将子域构建目录直接放在主域构建目录的wegame文件夹下，所以我会先构建主域，然后构建子域就可以了，不需要手动去复制粘贴。
打包子域工程的时候，渲染模式选择canvas，选择自动会报错：子域只支持2D渲染模式
主域和子域都构建完成了之后，建立主域与子域之间的通信，另外说一下，调用微信的接口使用的wx. 是只能在微信开发工具或者预览到手机上才有用的，直接调试或者运行，在creator中wx.是会报错的，建议搞一个枚举，不然调试功能的时候很麻烦，或者从微信平台再转回Android要更改或者注释很多代码。
微信中的wx.getOpenDataContext()方法可以获得开放数据域的实例，获得的实例调用postMessage，向子域发送数据，子域通过开启wx.onMessage()接受主域传达的消息。
let openDataContext = wx.getOpenDataContext();
openDataContext.postMessage({
text: 'writeBubbleNum',
bubbleToatalNum:cc.sys.localStorage.getItem("wipeBubbleTotalNum"),
LV:cc.sys.localStorage.getItem("GameLv"),
});
wx子域
wx.onMessage(data => {
console.log(data)
switch(data.text){
case "rankList":
self.label_tips.active = true;
self.onLoadRankList();
break;
case "abilityList":
self.label_tips.active = true;
self.onLoadAbilityList();
break;
case "writeBubbleNum":
self.onWriteBubbleNum(data.bubbleToatalNum,data.LV);
break;
default:break;
}
})
子域中收到主域传递过来的消息，甄别后进入不同的渠道。我上边的代码前两个是进行读操作，后一个是进行写操作。
存储数据wx.setUserCloudStorage(function(){})
wx.setUserCloudStorage({
KVDataList: [{key: "writeBubbleNum", value: "" + bubbleToatalNum},{key:"LV",value:"" + LV}],
success:function(res){
console.log("存储数据成功")
},
fail:function(res){
console.log("存储数据失败")
},
complete:function(res){
console.log("存储数据完成")
}
});
读数据就通过微信提供的接口来实现
- wx.getFriendCloudStorage() 获取当前用户也玩该小游戏的好友的用户数据
- wx.getGroupCloudStorage() 获取当前用户在某个群中也玩该小游戏的成员的用户数据
wx.getFriendCloudStorage({
keyList:["LV"], //获取到好友存储的LV值
success:function(res){
console.log("读取等级数据成功")
console.log(res); //微信开发工具中后台可以看到返回的详细数据
}
});
你申请获得的数据会以下边的格式返回，用户写入的数据都会存储到data当中，如果不清楚可以在后台输出，使用console.log()方法，在微信开发工具中可以查看具体的数据。微信头像的返回是一个URL，可以用cocos官网上提供的一个方法，直接将微信返回的url传入就可以显示头像。
//加载头像
createImage(avatarUrl) {
if (CC_WECHATGAME) {
try {
let image = wx.createImage();
image.onload = () => {
try {
let texture = new cc.Texture2D();
texture.initWithElement(image);
texture.handleLoadedTexture();
this.avatarImgSprite.spriteFrame = new cc.SpriteFrame(texture);
} catch (e) {
cc.log(e);
this.avatarImgSprite.node.active = false;
}
};
image.src = avatarUrl;
}catch (e) {
cc.log(e);
this.avatarImgSprite.node.active = false;
}
} else {
cc.loader.load({
url: avatarUrl, type: 'jpg'
}, (err, texture) => {
this.avatarImgSprite.spriteFrame = new cc.SpriteFrame(texture);
});
}
}
这是在子域中的操作，接下来要把子域中的画面渲染到主域上去。微信公众平台提供的方法我试了下，会报错说不能将安全的canvas绘制到不安全的canvas上，一脸懵。搞了半天没解决问题。后边去用了cocos官网的方法，才实现了，可以去看看。
链接是：http://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame-sub-domain.html
上边是官网的代码，值得一提的是我没找到sharedCanvas是在哪里定义的，然后它就直接用了，我将这个sharedCanvas保存为全局变量，通过wx.getOpenDataContext（）获得，因为微信调试好麻烦的，我也没试直接用这个玩意。但是我保存全局变量是可以的。
在上边的代码的基础上，我们还要去设置sharedCanvas的宽高，我是设置的设计分辨率的大小。我这里用的self就是this，因为吃过this的亏，所以我在每个方法的第一行都会写上let self = this;
//子域设置尺寸
let openDataContext = wx.getOpenDataContext()
self.sharedCanvas = openDataContext.canvas
self.sharedCanvas.width = 1080;
self.sharedCanvas.height = 1920;
当子域绘制在屏幕上的时候，游戏会特别卡，在微信小游戏中帧率掉到了恐怖的6帧。后边查了很久才知道就是这么卡，最好的解决方案是调开排行榜的时候暂停游戏。然后我去看了跳一跳还有一些带排行榜的游戏，我发现跳一跳排行榜是在载入界面的入口，要么就是游戏结束后会自己弹出，根本就不存在游戏运行的时候可以查看排行榜。所以，加载排行榜的时候还是暂停游戏，或者干脆游戏中不给玩家看排行榜。
有一些问题，微信小程序的帧率问题，我的小游戏在浏览器和微信开发工具上的模拟器上都不卡，但是在微信小游戏中有一点卡顿，我看了一下帧率，在微信中只有30帧左右波动，而在模拟器中却很流畅，60左右波动，打出android包也是不卡。搜索了很久没找到原因。在cocos论坛上看到了也有类似的情况，引擎团队说是要改底层，我没有解决的能力。不过整体不是很影响。
还有就是在子域中不能修改节点的颜色，会报错。也是引擎级别的bug。后边应该会改进。