微信小游戏开放域之helloworld

标签: 微信小游戏，开放域

微信小游戏-开放数据域的配置

概念

开放数据域是一个封闭、独立的 JavaScript 作用域。开放数据域主要作用就是获取用户的关系链数据，并且展示关系链数据
具体使用方法在官方文档已经非常详细了-》开放数据域本文只是做一个简单整理
具体的展示关系链数据

配置方法

1、新建开放数据域的代码目录，以openDataContext为例，在目录下新建index.js作为开放数据的入口文件
2、在game.json中添加配置项 openDataContext

{"deviceOrientation": "portrait","openDataContext": "src/openDataContext"
}

开放数据域限制

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()接口在主域和开放数据域都可以使用

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类型，否则会报错

托管数据的限制
每个openid所标识的微信用户在每个游戏上托管的数据不能超过128个key-value对。
上报的key-value列表当中每一项的key+value长度都不能超过1K(1024)字节。
上报的key-value列表当中每一个key长度都不能超过128字节。

wx.getFriendCloudStorage（）拉取当前用户所有同玩好友的托管数据（开放数据域使用）

ps: 这个接口只能在开放数据域使用，即主域无法调用接口获取好友数据

wx.getFriendCloudStorage({keyList: ['score', 'maxScore'], // 你要获取的、托管在微信后台都keysuccess: res => {console.log(res.data);}
});

获取到的数据如下：

绘制好友排行榜

没错，用你的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.datadrawRankList(data)}
})

绘制后如何显示以及会遇到的问题？
需要在上屏canvas上通过drawImage()方法把这个sharedCanvas绘制到上屏canvas
主域的js：

//前提是要使用Wxkit
let openDataContext = this.linkOpenData({},"这里传宽度","这里传高度");
this.openDataContext = openDataContext;
this.addChild(openDataContext)

实际操作

首先把你的项目发布为微信小游戏项目

之后会报错误，这里不用管就行了
然后在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 || 0bitmap.height = height || 0bitmap.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

作者简介：何永峰，芦苇科技web前端开发工程师，喜欢到处寻找好吃的，平时爱好是跳舞，打篮球，听音乐，有时会出席一些大型的舞蹈商演活动，目前是Acum.Revolution現狀革命成员之一。并且代表作品：萌鸡驾到、美旅出行小程序、电竞桌子小程序。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究，访问 www.talkmoney.cn 了解更多。