1. 程式人生 > >如何利用開放資料域為微信小遊戲新增社交關係鏈玩法

如何利用開放資料域為微信小遊戲新增社交關係鏈玩法

3月23日, 小程式遊戲類目開放測試,開發者可開發、除錯小遊戲,同時,微信官方還對小遊戲開放了微信社交關係鏈、虛擬支付能力。但是令一些開發者感到困惑的是「如何才能利用開放資料域為微信小遊戲新增社交關係鏈玩法」。

  • 這張圖片是來自於微信小遊戲的跳一跳排行榜,小遊戲不但開放了使用者註冊也把關係鏈資料開放了出來,有了這些資料普通的開發者也可以開發出類似的排行榜功能,有了關係鏈資料,會大大增加遊戲玩法,玩家之間的互動,給遊戲帶來了更大的趣味性。
  • 小遊戲主要提供了 wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() 兩個 API 介面。但是為了保護關係鏈資料,小遊戲增加了開放資料域的概念,開放資料域只能在離屏畫布(sharedCanvas)上使用,這塊畫布和主域是可以共享的,我們需要把 sharedCanvas 繪製到主域上,這個過程需要開發者接觸底層的 canvas 底層 API,對於不熟悉的同學會帶來很大的不便,所以白鷺引擎對做了進一步的優化與封裝。
  • 請開發者先閱讀微信小遊戲開放資料的文件這樣對關係鏈會有更好的理解。

使用示例:
1、白鷺引擎使用開放資料域的原理簡介。關係鏈資料必須在開放資料域中獲取。引擎在主域中使用window["sharedCanvas"]介面獲取到 sharedCanvas,然後直接使用 sharedCanvas 作為 egret.Bitmap 的 egret.BitmapData ,新增在主域的舞臺上即可。這樣在使用上帶來了極大的方便性。
2、由於 開放資料域 是一個封閉、獨立的 JavaScript 作用域 所以要建立兩個 egret 專案,主域專案 (egretToWxDemo) 和開放資料域專案 (myOpenDataContext) ,為了減少小遊戲的體積,在開放資料域專案中只保留 egret、game兩個模組。關於圖片的載入可以白鷺提供的 egret.ImageLoader 或者直接使用 微信小遊戲原生提供的 Image 物件進行載入。
3、在 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"
}

4、再使用 wing 開啟開放資料域專案,開啟 egretProperties.json 配置模組中值保留 egret、game 、'promise'模組,刪除 resource 目錄下所有內容,這是為了減少遊戲的體積。
 

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

5、在開放資料域 script 目錄裡開啟 config.wxgame.ts 檔案。 輸出路徑 (outputDir) 改為 ../egretToWxDemo_wxgame/openDataContext,然後把 demo 中的 wxgame.ts 外掛替換到 script 的 wxgame 目錄內。
  
6、由於開放資料域可以使用主域的圖片資源,我們直接利用主域內的圖片,修改 Main.ts 檔案,由於篇幅所限,具體見示例 demo。
7、在 launcher 中將開放資料域專案釋出成小遊戲,這時有可能釋出的目錄不正確,不要著急,回到開放資料域專案中執行 egret publish --target wxgame 命令,如果報錯請在主域釋出的小遊戲專案中找到 openDataContext 目錄,建立一個 index.js 檔案,再次回到開放資料域專案中執行 egret publish --target wxgame 命令,正常情況釋出成功後如圖所示。
 
注意事項
    一定要幀率為 60 幀。避免螢幕閃爍。
    開發後資料域儘量少使用庫。

如您在開發過程中遇到任何問題,請登入官方論壇進行討論。
示例DEMO下載請訪問
https://github.com/peony-ma/wxOpenDataContext