从跳一跳之后,小游戏火了起来。而小游戏开发的一个重要的点,就是微信数据开放域的使用。现我将开放域整理如下,方便新手和我自己查阅。
微信开放域是由主域向子域发送信号,子域接受后,利用开放域的相关api获取数据,并在子域绘制canvas,将数据渲染到画布上。主域只需要将子域画布渲染到需要的地方即可。
1.主域向子域发消息:
if (CC_WECHATGAME) {
wx.postMessage({
key:value
});
}
以键值对形式发消息到子域。
2.子域接受消息:
wx.onMessage(data => {
if (data.key==value) {
//做相应操作
}
}
子域在data下拿到主域传来的消息或者数据。
3,存数据到微信开放域:
因为我们每次存数据,都会将之前存储的数据替换掉。那么我们只需要存最好成绩就好了。所以存之前要先取出之前的数据作比较。判断要不要存储数据(更新替换掉旧数据)。
注意存取数据都是以json字符串存取的。
取数据:
wx.getUserCloudStorage({
keyList: [key],
success: res => {
if (res.KVDataList.length !=0) {
let data = JSON.parse(res.KVDataList[0].value);
}
}
})
存数据:
let data = JSON.stringify(data);
wx.setUserCloudStorage({
KVDataList: [{key: key, value:`${data}` }],
success:res=> {
wx.showTost({
title:'成绩保存成功',
icon:'none',
duration:1500
})
},
3.获取微信好友的数据:
利用存取时的key值去获取数据。
wx.getFriendCloudStorage({
keyList: [key],
success: res => {
}
}),
4:获取群排行:
获取群排行时,需要先分享到群,分享时需要withShareTicket,(详见小游戏文档)。
在群内打开时,会返回群的shareTicket。将shareTicket一起带到子域获取群排行的数据
wx.getGroupCloudStorage({
shareTicket: shareTicket,
keyList: [key],
success: res => {
}
}),
5,主域显示排行:
从子域获取到数据后,在子域项目中做出排行榜样式。然后在主域刷新出子域的排行榜。
在主域拿好一个“碗”,准备渲染子域的东西。这个“碗”需要如下代码:
this.tex =new cc.Texture2D(); //该类允许从图像或原始数据轻松创建OpenGL或Canvas 2D纹理。
this.sharedCanvas =wx.getOpenDataContext().canvas; //获取shareCanvas
this.sharedCanvas.width =664;
this.sharedCanvas.height =850;
“碗”准备好了,在需要的时候渲染:
if (!this.tex) {
return;
}
this.tex.initWithElement(this.sharedCanvas); //使用一个存储在 Unit8Array 中的图像数据(raw data)初始化数据。
this.tex.handleLoadedTexture(); //贴图加载事件处理器。v2.0 之后你将不在需要手动执行这个函数,它会在贴图加载成功之后自动执行。
this.display.spriteFrame =new cc.SpriteFrame(this.tex); //渲染到本页
微信开放域的使用基本记录完毕,扫码预览效果: