微信小游戏开放域之helloworld
标签: 微信小游戏,开放域
微信小游戏-开放数据域的配置
概念
开放数据域 是一个封闭、独立的 JavaScript 作用域。开放数据域主要作用就是获取用户的关系链数据,并且展示关系链数据
具体使用方法在官方文档已经非常详细了-》开放数据域本文只是做一个简单整理
具体的展示关系链数据
配置方法
1、新建开放数据域的代码目录,以openDataContext为例,在目录下新建index.js作为开放数据的入口文件
2、在game.json中添加配置项 openDataContext
{
"deviceOrientation": "portrait",
"openDataContext": "src/openDataContext"
}
enter description here
开放数据域限制
1、主域和开放数据域中的代码不能相互 require
2、wx.getUserCloudStorage、wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() 只能在 开放数据域 中调用。
3、wx.setUserCloudStorage() 和 wx.removeUserCloudStorage() 可以同时在 主域 和开放数据域中调用。
4、开放数据中不能修改sharedCanvas的宽高,如有需要,请在上屏canvas修改sharedCanvas的宽高
5、sharedCanvas只能被上屏canvas渲染
6、开放数据域不能向主域发送消息
7、sharedCanvas 不能调用 toDataURL 和 getContext。
8、开放数据域的所有 canvas 只支持 2d 渲染模式
9、开放数据域的 Image 只能使用本地或微信 CDN 的图片,不能使用开发者自己服务器上的图片
主域限制
1、主域不能调用wx.getUserCloudStorage、wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() ,也就是说主域不能直接获取用户关系链数据,必须通过开放数据域获取,再渲染到sharedCanvas上
主域和开放数据域的通信
开放数据域不能向主域发送消息,主域可以调用开放数据域实例的postmassage()方法向开放数据域发送消息
// main.js
let openDataContext = wx.getOpenDataContext()
openDataContext.postMessage({
text: 'hello',
year: (new Date()).getFullYear()
})
在开放数据域中通过 wx.onMessage() 方法可以监听从主域发来的消息。
// src/openDataContext/index.js
wx.onMessage(data => {
console.log(data)
/* {
text: 'hello',
year: 2018
} */
})
微信小游戏 —— 关系链数据使用(排行榜的显示)
前言
微信小游戏属于微信小程序的一个类目,小游戏对比于普通的h5游戏,其很大的一个特点是微信提供的关系链数据的使用,你可以获得同玩这个游戏的微信好友的数据,或者你在某个群的用户数据
概念
具体概念请前往-》关系链数据使用指南
需要了解关系链api和开放域,主域等概念。以下着重介绍具体的api使用
wx.setUserCloudStorage() 托管用户数据
ps: wx.setUserCloudStorage()接口在主域和开放数据域都可以使用
enter description here
wx.setUserCloudStorage({
KVDataList: [{ key: 'score', value: score }],
success: res => {
console.log(res);
// 让子域更新当前用户的最高分,因为主域无法得到getUserCloadStorage;
let openDataContext = wx.getOpenDataContext();
openDataContext.postMessage({
type: 'updateMaxScore',
});
},
fail: res => {
console.log(res);
}
});
注意: KVDataList的value必须是字符串String类型,否则会报错
enter description here
托管数据的限制
每个openid所标识的微信用户在每个游戏上托管的数据不能超过128个key-value对。
上报的key-value列表当中每一项的key+value长度都不能超过1K(1024)字节。
上报的key-value列表当中每一个key长度都不能超过128字节。
wx.getFriendCloudStorage()拉取当前用户所有同玩好友的托管数据(开放数据域使用)
ps: 这个接口只能在开放数据域使用,即主域无法调用接口获取好友数据
wx.getFriendCloudStorage({
keyList: ['score', 'maxScore'], // 你要获取的、托管在微信后台都key
success: res => {
console.log(res.data);
}
});
获取到的数据如下:
enter description here
绘制好友排行榜
没错,用你的canvas技术将获取到的好友数据绘制到sharedCanvas上。sharedCanvas是微信默认提供的,不需要再次创建
// src/OpenDataContext/index.js
let sharedCanvas = wx.getSharedCanvas()
function drawRankList (data) {
data.forEach((item, index) => {
// ...
})
}
wx.getFriendCloudStorage({
success: res => {
let data = res.data
drawRankList(data)
}
})
绘制后如何显示以及会遇到的问题?
需要在上屏canvas上通过drawImage()方法把这个sharedCanvas绘制到上屏canvas
主域的js:
//前提是要使用Wxkit
let openDataContext = this.linkOpenData({},"这里传宽度","这里传高度");
this.openDataContext = openDataContext;
this.addChild(openDataContext)
实际操作
首先把你的项目发布为微信小游戏项目
enter description here enter description here enter description here
之后会报错误,这里不用管就行了
然后在mian.js里面加代码
public createGameScene(){
//本来的代码
//发信息给开放域,加载数据
let openDataContext = wx.getOpenDataContext()
openDataContext.postMessage({
text: 'hello',
year: (new Date()).getFullYear(),
command:'loadRes',
})
let that = this;
//这里是让开放域的数据先加载好
setTimeout(function() {
//调用linkOpenData方法
let openData = that.linkOpenData({},that.stage.width,that.stage.height);
that.addChild(openData)
}, 2000);
}
//添加方法
public linkOpenData(message: {}, width?: number, height?: number, data?: Object) {
console.log('调用开放数据域')
let basic = {
isRanking: false,
text: "egret",
data: data,
year: (new Date()).getFullYear(),
command: "open"
}
for (let key in message) {
basic[key] = message[key];
}
let open_data_container = new egret.Sprite();
let openDataContext = wx.getOpenDataContext();
const bitmapdata = new egret.BitmapData(window["sharedCanvas"]);
bitmapdata.$deleteSource = false;
const texture = new egret.Texture();
texture._setBitmapData(bitmapdata);
let bitmap: egret.Bitmap;
bitmap = new egret.Bitmap(texture);
bitmap.width = width || 0
bitmap.height = height || 0
bitmap.name = "openData";
open_data_container.addChild(bitmap);
console.log(bitmap.width + ' ' + bitmap.height)
egret.startTick((timeStarmp: number) => {
egret.WebGLUtils.deleteWebGLTexture(bitmapdata.webGLTexture);
bitmapdata.webGLTexture = null;
return false;
}, this);
openDataContext.postMessage(basic);
console.log('link_done');
return open_data_container;
}
运行项目,就有egret本来帮你写好的开放域demo
enter description here
作者简介:何永峰,芦苇科技web前端开发工程师,喜欢到处寻找好吃的,平时爱好是跳舞,打篮球,听音乐,有时会出席一些大型的舞蹈商演活动,目前是Acum.Revolution現狀革命成员之一。并且代表作品:萌鸡驾到、美旅出行小程序、电竞桌子小程序。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端领域框架、交互设计、图像绘制、数据分析等研究,访问 www.talkmoney.cn 了解更多。