小程序•小故事(22)——开放数据域-杭州网络公司为你转播

我们收到很多小游戏开发者的反馈，在设计小游戏时，为了增强小游戏的用户黏性，希望实现一些排行榜、或者“下一个即将超越的好友”等社交玩法。开发者需要获取到自己游戏中哪些玩家是当前用户的微信好友/某个群成员。但如果直接提供这个数据，会存在被恶意使用的风险。

因此我们既要保证开发者可以获取并合法的使用这类数据（如绘制排行榜等），但不能将这类数据收集并将其发送至第三方服务器。

（排行榜示意）

开放数据域介绍

基于这一背景，我们设计了“开放数据域”， 这是一个封闭、独立的JavaScript 作用域。

在这个作用域中，开发者可以将玩家数据托管到云端，并且可以获取到玩家的微信好友、群聊中的其他玩家数据，也即关系链数据。这个作用域和另一个执行游戏逻辑的“主域”是隔离的，没有共享变量，只能进行从主域到开放数据域的单向通信。开放数据域和主域有一个共享画布 shardCanvas。在开放数据域中，开发者可以调用 API 获取关系链数据和 2d 绘图 API，将获取到的关系链数据根据自己的业务需要绘制到 sharedCanvas 上，主域可以将 sharedCanvas 渲染上屏；但是为了保证数据安全，开放数据域不能调用网络、存储、文件等 API。

但如果我们的设计只做到这一步，开发者仅能拉取到一个不包含游戏数据的好友列表或群成员列表。此时开发者并不知道这些用户是自己游戏中的哪些玩家。因为每款游戏的游戏数据都是自定义的，可能包含分数、头衔、公会等信息，且结构不同，而这些信息往往是需要在排行榜中展示的。

为此，我们提供了托管数据 API：

前台使用的接口：wx.setUserCloudStorage

后台使用的接口：setUserStorage

开发者可以将每个玩家的分数、头衔等数据托管在微信后台，这些数据在调用关系链API 时会随着昵称、头像等信息一并返回。

完整的开放数据域的设计如下图所示：

下面我们想分享开放数据域应用的一些实战经验。

在一个小游戏中，只存在一个 sharedCanvas 。所有需要使用到关系链数据的页面场景，都只能绘制到这一个 sharedCanvas 上面。而在实际游戏中，往往存在多个关系链场景。例如排行榜页（好友排行）、结算页（即将超越某好友）、游戏页（某好友也在玩）等等。

如果将这些功能都写在一个文件内，势必难以管理。较好的做法是将代码按功能拆分成文件，由入口文件 index.js 来路由函数调用：

子模块们再对公用的 sharedCanvas 进行操作：

如上文所说， sharedCanvas 会被多个场景共享使用，而场景的销毁并不会自动清空 sharedCanvas 上的内容。若在场景切换时忘记清空画布，则有可能出现错乱叠加等现象：

（排行榜页面忘记重置 sharedCanvas 的效果）

因此，建议在场景切换时，要记得清空画布：

在涉及到网络请求的关系链场景中（如排行榜），若主域在初始化开放数据域后便立即渲染上屏，则有可能渲染不到任何数据：

这是因为存在网络延时，主域在渲染上屏时，开放数据域未获取到网络数据，sharedCanvas 为空。由于开放数据域无法主动向主域通信，所以可以考虑采用 setTimeout 或 setInterval 来延时上屏：

此外，亦可使用 WebGLRenderingContext.wxBindCanvasTexture() 方法将 sharedCanvas 绑定到主域的 WebGL 上下文中，以实现自动同步开放数据域的更新。

详细可查看：

教程文档

接口文档

历史文章回顾 ：小程序•小故事

如果大家有想了解的小程序相关能力的故事，欢迎在评论区留言，我们后续会考虑将这些能力背后的故事分期分享给大家。