139-8950-0275

绍兴云远网络热线
首页 >> 小程序 >>小程序专业知识 >> 小程序•小故事(22)——开放数据域-绍兴网络公司为你转播
详细内容

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

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


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


2.jpg

(排行榜示意)


开放数据域介绍


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


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


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


为此,我们提供了托管数据 API:

前台使用的接口:wx.setUserCloudStorage

后台使用的接口:setUserStorage


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


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

3.png

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


01

自建函数路由规则


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

 

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


4.png


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


5.jpg


02

适时清空画布


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


6.jpg

(排行榜页面忘记重置 sharedCanvas 的效果)


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



03

延时上屏


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


7.png


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


8.png


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

详细可查看:

教程文档

接口文档

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


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

技术支持: 杭州云远科技有限公司 | 管理登录
seo seo