如何利用開放數據域爲微信小遊戲添加社交關係鏈玩法

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