如何利用开放数据域为微信小游戏添加社交关系链玩法

3月23日， 小程序游戏类目开放测试，开发者可开发、调试小游戏，同时，微信官方还对小游戏开放了微信社交关系链、虚拟支付能力。可是令一些开发者感到困惑的是「如何才能利用开放数据域为微信小游戏添加社交关系链玩法」。

• 这张图片是来自于微信小游戏的跳一跳排行榜，小游戏不但开放了用户注册也把关系链数据开放了出来，有了这些数据普通的开发者也能够开发出相似的排行榜功能，有了关系链数据，会大大增长游戏玩法，玩家之间的互动，给游戏带来了更大的趣味性。
• 小游戏主要提供了 wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() 两个 API 接口。可是为了保护关系链数据，小游戏增长了开放数据域的概念，开放数据域只能在离屏画布（sharedCanvas）上使用，这块画布和主域是能够共享的，咱们须要把 sharedCanvas 绘制到主域上，这个过程须要开发者接触底层的 canvas 底层 API，对于不熟悉的同窗会带来很大的不便，因此白鹭引擎对作了进一步的优化与封装。
• 请开发者先阅读微信小游戏开放数据的文档这样对关系链会有更好的理解。

使用示例：
一、白鹭引擎使用开放数据域的原理简介。关系链数据必须在开放数据域中获取。引擎在主域中使用window["sharedCanvas"]接口获取到 sharedCanvas，而后直接使用 sharedCanvas 做为 egret.Bitmap 的 egret.BitmapData ，添加在主域的舞台上便可。这样在使用上带来了极大的方便性。
二、因为 开放数据域 是一个封闭、独立的 JavaScript 做用域 因此要创建两个 egret 项目，主域项目 (egretToWxDemo) 和开放数据域项目 (myOpenDataContext) ，为了减小小游戏的体积，在开放数据域项目中只保留 egret、game两个模块。关于图片的加载能够白鹭提供的 egret.ImageLoader 或者直接使用 微信小游戏原生提供的 Image 对象进行加载。
三、在 launcher 中将主域项目发布成小游戏项目，发布成功后获得一个 egretToWxDemo_wxgame 文件夹，而后须要在 game.json 中添加配置项 openDataContext 指定开放数据域的代码目录，这里咱们填写 openDataContext，一会咱们要将开放数据域的项目发布到这里。修改 Main.ts 文件，将离屏画布绘制到主域上；
   

//主要示例代码开始
  const bitmapdata = new egret.BitmapData(window["sharedCanvas"]);
  bitmapdata.$deleteSource = false;
  const texture = new egret.Texture();
  texture._setBitmapData(bitmapdata);
  this.bitmap = new egret.Bitmap(texture);
  this.bitmap.width = this.stage.stageWidth;
  this.bitmap.height = this.stage.stageHeight;
  this.addChild(this.bitmap);

  egret.startTick((timeStarmp: number) => {
      egret.WebGLUtils.deleteWebGLTexture(bitmapdata.webGLTexture);
      bitmapdata.webGLTexture = null;
      return false;
  }, this);
  //主要示例代码结束

 

{
	"deviceOrientation": "portrait",
	"networkTimeout": {
		"request": 5000,
		"connectSocket": 5000,
		"uploadFile": 5000,
		"downloadFile": 5000
	},
	"openDataContext": "openDataContext"
}

四、再使用 wing 打开开放数据域项目，打开 egretProperties.json 配置模块中值保留 egret、game 、'promise'模块，删除 resource 目录下全部内容，这是为了减小游戏的体积。
 

"modules": [
    {
      "name": "egret"
    },
    {
      "name": "game"
    },
    {
      "name": "promise"
    }
  ]

五、在开放数据域 script 目录里打开 config.wxgame.ts 文件。 输出路径 (outputDir) 改成 ../egretToWxDemo_wxgame/openDataContext，而后把 demo 中的 wxgame.ts 插件替换到 script 的 wxgame 目录内。
  
六、因为开放数据域可使用主域的图片资源，咱们直接利用主域内的图片，修改 Main.ts 文件，因为篇幅所限，具体见示例 demo。
七、在 launcher 中将开放数据域项目发布成小游戏，这时有可能发布的目录不正确，不要着急，回到开放数据域项目中执行 egret publish --target wxgame 命令，若是报错请在主域发布的小游戏项目中找到 openDataContext 目录，建立一个 index.js 文件，再次回到开放数据域项目中执行 egret publish --target wxgame 命令，正常状况发布成功后如图所示。
 
注意事项
    必定要帧率为 60 帧。避免屏幕闪烁。
    开发后数据域尽可能少使用库。

如您在开发过程当中遇到任何问题，请登陆官方论坛进行讨论。
示例DEMO下载请访问
https://github.com/peony-ma/wxOpenDataContext