一、前提

　　微信小遊戲主打社交玩法，為了豐富社交玩法我們肯定會用到關系鏈數據來做好友排行幫，群排行榜等功能。本篇主要介紹概念同時劃重點，下一篇Cocos Creator中實戰。

二、概念

1、1）關系鏈數據：

　　一個微信用戶的關系鏈數據包括兩部分：

1. 該用戶好友的用戶數據
2. 該用戶所在的某個群的群成員的用戶數據。

　　2）常用的API:

1. wx.getFriendCloudStorage() 獲取當前用戶也玩該小遊戲的好友的用戶數據
2. wx.getGroupCloudStorage() 獲取當前用戶在某個群中也玩該小遊戲的成員的用戶數據
3. wx.removeUserCloudStorage() 刪除用戶托管數據中指定字段的數據
4. wx.getUserCloudStorage() 獲取當前用戶的托管數據

　　註意：

　　wx.getUserCloudStorage、wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() 只能在 開放數據域 中調用。

　　wx.setUserCloudStorage() 和 wx.removeUserCloudStorage() 可以同時在 主域 和開放數據域中調用。

2、開放數據域

　　開放數據域 是一個封閉、獨立的 JavaScript 作用域。要讓代碼運行在開放數據域，需要在 game.json 中添加配置項 openDataContext

{
  "deviceOrientation": "portrait",
  "openDataContext": "src/myOpenDataContext"
}

　　同時還需要在該目錄下創建 index.js 作為開放數據域的入口文件，其代碼運行在開放數據域。game.js 是整個遊戲的入口文件，其代碼運行在 主域。對應以上配置，應該有如下的目錄結構：

├── src  
|   └── myOpenDataContext
|       ├── index.js
|       └── ...
├── game.js
├── game.json
└── ...
 

　　src/myOpenDataContext 是 開放數據域的代碼目錄，除 src/myOpenDataContext 以外是 主域的代碼目錄。

　　主域和開放數據域中的代碼不能相互 require。以如下的目錄結構為例：

├── src  
|   └── myOpenDataContext
|       ├── index.js
|       ├── util.js
|       └── ...
├── lib
|   └── render.js
└── game.js

　　在 game.js 中不能 require(‘src/myOpenDataContext/util‘)
　　在 src/myOpenDataContext/index.js 中不能 require(‘../../lib/render.js‘)

3、主域和開放數據域的通信

　　開放數據域不能向主域發送消息。

　　主域可以向開放數據域發送消息。調用 wx.getOpenDataContext() 方法可以獲取開放數據域實例，調用實例上的 OpenDataContext.postMessage() 方法可以向開放數據域發送消息。

// game.js
let openDataContext = wx.getOpenDataContext()
openDataContext.postMessage({
  text: ‘hello‘,
  year: (new Date()).getFullYear()
})

　　在開放數據域中通過 wx.onMessage() 方法可以監聽從主域發來的消息。

// src/myOpenDataContext/index.js
wx.onMessage(data => {
  console.log(data)
  /* {
    text: ‘hello‘,
    year: 2018
  } */
})

4、展示關系鏈數據

　　如果想要展示通過關系鏈 API 獲取到的用戶數據，如繪制排行榜等業務場景，需要將排行榜繪制到 sharedCanvas 上，再在主域將 sharedCanvas 渲染上屏。

// src/myOpenDataContext/index.js
let sharedCanvas = wx.getSharedCanvas()

function drawRankList (data) {
  data.forEach((item, index) => {
    // ...
  })
}

wx.getFriendUserGameData({
  success: res => {
    let data = res.data
    drawRankList(data)
  }
})

　　sharedCanvas 是主域和開放數據域都可以訪問的一個離屏畫布。在開放數據域調用 wx.getSharedCanvas() 將返回 sharedCanvas。

// src/myOpenDataContext/index.js
let sharedCanvas = wx.getSharedCanvas()
let context = sharedCanvas.getContext(‘2d‘)
context.fillStyle = ‘red‘
context.fillRect(0, 0, 100, 100)

　　在主域中可以通過開放數據域實例訪問 sharedCanvas，通過 drawImage() 方法可以將 sharedCanvas 繪制到上屏畫布。

// game.js
let openDataContext = wx.getOpenDataContext()
let sharedCanvas = openDataContext.canvas

let canvas = wx.createCanvas()
let context = canvas.getContext(‘2d‘)
context.drawImage(sharedCanvas, 0, 0)

5、限制

　　當小遊戲啟動開放數據域，即在 game.json 中添加 openDataContext 配置項時。小遊戲環境會對主域和開放數據域應用一些限制。

　　1）主域

1. sharedCanvas 只能被繪制到上屏 canvas 上。
2. 上屏 canvas 不能調用 toDataURL，其 context 不能調用 getImageData。
3. sharedCanvas 不能調用 toDataURL 和 getContext。
4. 不能將上屏 canvas 和 sharedCanvas 以任意形式繪制到其他 canvas 上，包括 drawImage、createPattern、texImage2D、texSubImage2D。

　　2）開放數據域

　　開放數據域只能調用有限的 API，如下所示：

　　幀率

1. requestAnimationFrame()
2. cancelAnimationFrame()

　　Timer

1. setTimeout()
2. clearTimeout()
3. setInterval()
4. clearInterval()

　　觸摸事件

1. wx.onTouchStart()
2. wx.onTouchMove()
3. wx.onTouchEnd()
4. wx.onTouchCancel()
5. wx.offTouchStart()
6. wx.offTouchMove()
7. wx.offTouchEnd()
8. wx.offTouchCancel()

　　畫布

1. wx.createCanvas()

　　開放數據域的所有 canvas 只支持 2d 渲染模式

　　圖片

1. wx.createImage()

　　開放數據域的 Image 只能使用本地或微信 CDN 的圖片，不能使用開發者自己服務器上的圖片。對於非本地或非微信 CDN 的圖片，可以先從主域 wx.downloadFile() 下載圖片文件，再通過 wx.postMessage() 把文件路徑傳給開放數據域去使用。

　　開放數據

1. wx.getFriendCloudStorage()
2. wx.getGroupCloudStorage()
3. wx.getUserCloudStorage()
4. wx.setUserCloudStorage()
5. wx.removeUserCloudStorage()

　　監聽主域消息

1. wx.onMessage()

三、總結

1、如果沒有自己的服務器，然而還想做排行榜，那必須用到小遊戲的開放數據域，開放數據域與主域之間不能相互require，是一種隔離的狀態。

2、開放數據域可通過API獲取到好友，群排行數據，獲取到數據後，可以將內容繪制到離屏畫布。

3、這時主域可以通過開放數據域實例訪問離屏畫布，然後通過drawImage將離屏畫布繪制到上屏畫布。

四、最後

歡迎加入QQ群：418177552

【微信小遊戲】關系鏈數據概念篇