开发指南

运行时

游戏引擎

开放能力

小游戏站

PC 端小游戏

推荐流直出游戏能力

游戏礼包

游戏转发分享

支付

关系链

公会群能力指南

用户信息

获取小程序链接

直播间即看即玩能力技术指南

基础能力

性能优化

开放接口

安全指引

开放数据域基础能力

我的收藏

开放数据域

为了让开发者安全使用平台的关系数据，我们提供了一个名为开放数据域的环境。这是一个封闭、独立的 JavaScript 作用域。模块的功能结构如下图：

通过在 game.json 中添加配置项 openDataContext 指定开放数据域的代码目录，来开启该项功能，以便使用对应的关系链数据接口，同时，在使用这一功能时，也会有一些限制。

对应的代码目录应该如下：

├── src
|   └── myOpenDataContext
|       ├── index.js
|       └── ...
├── game.js
├── game.json
└── ...

index.js 作为开放数据域的入口文件是必需的，平台构建工具会将开放数据目录下的文件自动打包为一个独立文件，其代码运行在开放数据域。而 game.js 其代码运行在主域。

具体参考下图：

注意，主域和开放数据域中的代码不能相互 require。

主域和开放数据域的通信

开放数据域不能向主域发送消息。

主域可以向开放数据域发送消息。调用 tt.getOpenDataContext() 方法可以获取开放数据域实例，调用实例上的 OpenDataContext.postMessage() 方法可以向开放数据域发送消息。

// game.js
const openDataContext = tt.getOpenDataContext();
openDataContext.postMessage({
  text: "This is a test.",
});

在开放数据域中通过 tt.onMessage() 方法可以监听从主域发来的消息。

// src/myOpenDataContext/index.js
tt.onMessage((data) => {
  console.log(data);
  /* {
    text: 'This is a test.',
  } */
});

如何使用关系链数据

通过关系链 API 获取到的用户数据，在绘制排行榜等业务场景下如果想要展示，需要将排行榜绘制到 sharedCanvas 上，再在主域将 sharedCanvas 渲染上屏。可参考以下示例代码：

sharedCanvas 是主域和开放数据域都可以访问的一个离屏画布。在开放数据域调用 tt.getSharedCanvas() 将返回 sharedCanvas。根据业务逻辑获取关系链数据，然后绘制到 sharedCanvas 上。

// src/myOpenDataContext/index.js
const sharedCanvas = tt.getSharedCanvas();
const context = sharedCanvas.getContext("2d");

function drawRankList(data) {
  data.forEach((item, index) => {
    // ...
    context.fillStyle = "red";
    context.fillRect(0, 0, 100, 100);
  });
}

tt.getCloudStorageByRelation({
  success: (res) => {
    const data = res.data;
    drawRankList(data);
  },
});

在主域中可以通过开放数据域实例访问 sharedCanvas，通过 drawImage() 方法可以将 sharedCanvas 绘制到上屏画布。

// game.js
const openDataContext = tt.getOpenDataContext();
const sharedCanvas = openDataContext.canvas;

const canvas = tt.createCanvas();
const context = canvas.getContext("2d");
context.drawImage(sharedCanvas, 0, 0);

sharedCanvas 的宽高只能在主域设置，不能在开放数据域中设置。本质上其也是一个离屏 Canvas，而重设 Canvas 的宽高会清空 Canvas 上的内容。所以可以通过 postMessage 通知开放数据域去重绘 sharedCanvas 。

// game.js
sharedCanvas.width = 400;
sharedCanvas.height = 200;

openDataContext.postMessage({
  command: "render",
});

// src/myOpenDataContext/index.js
tt.onMessage((data) => {
  if (data.command === "render") {
    // ... 重绘 sharedCanvas
  }
});

运行时限制

主域

sharedCanvas 只能被绘制到上屏 canvas 上。

上屏 canvas 不能调用 toDataURL，其 context 不能调用 getImageData、readPixels。

sharedCanvas 不能调用 toDataURL 和 getContext。

不能将上屏 canvas 和 sharedCanvas 以任意形式绘制到其他 canvas 上，包括 drawImage、createPattern、texImage2D、texSubImage2D。

sharedCanvas 的宽高只能在主域设置。

配置开启开放数据域后，主域所有 canvas 不能调用 toDataURL、toTempFilePath、toTempFilePathSync

开放数据域

不能设置 sharedCanvas 的宽高。

开放数据域的 Image 只能使用本地或者是通过 tt.xx 系列 API 拿到的平台本身的用户头像图片，不能使用开发者自己服务器上的图片。对于非本地或非用户头像图片，可以先从主域 tt.downloadFile() 下载图片文件，再通过 openDataContext.postMessage() 把文件路径传给开放数据域去使用。

配置开启开放数据域后，主域所有 canvas 不能调用 toDataURL、toTempFilePath、toTempFilePathSync