Relationship Chain Data Usage Guide

There are two parts in a WeChat user’s relationship chain data:

  • The user data of this user’s friends
  • The user data of the group members of the user’s groups.

In order to enrich the game’s social gameplay, we provide APIs for obtaining relationship chain data:

The return results of these two APIs are object arrays. Each element of the array is an object representing user data. Its structure is as follows:

Properties Type Description
openId String User's openId
avatarUrl String User’s WeChat avatar url
Nickname String User’s WeChat nickname
Data Object User's game data

The user’s game data refers to the data specific to game business such as the user’s level, record, etc. By calling wx.setUserCloudStorage(), the current user’s game data can be managed on the WeChat background. Only the users who have ever managed his data on the background will be considered as players of the Mini Games, and appear in the arrays of objects returned by wx.getFriendCloudStorage() and wx.getGroupCloudStorage().

In addition, we also provide the following APIs:

wx.getUserCloudStorage, wx.getFriendCloudStorage() and wx.getGroupCloudStorage() can only be called in open data domain.
wx.setUserCloudStorage() and wx.removeUserCloudStorage() can be called in both the `main domain' and the open data domain.

Open Data Domain

Open Data Domain is a closed and independent JavaScript scope. To make the code run in an open data domain, add the configuration item openDataContext in game.json to specify the code directory of the open data domain. Adding this configuration item means that the Mini Game has enabled open data domain, which will result in some Limits.

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

You also need to create index.js as an entry file for the open data domain in this directory. Its codes run in the open data domain. Game.js is the entry file for the entire game, and its codes run in the main domain. For the above configuration, the directory structure should be as follows:

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

Src/myOpenDataContext is an open data domain code directory, and all other directories except for src/myOpenDataContext are code directories of the main domain.

The codes in the main domain and the open data domain can not be required mutually. Take the following directory structure as an example:

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

require(’src/myOpenDataContext/util’) can not be used in game.js
Require(’../../lib/render.js’) can not be used in src/myOpenDataContext/index.js

Communication between Main Domain and Open Data Domain

The open data domain can not send messages to the main domain.

The main domain can send messages to the open data domain. The open data domain instance can be obtained by calling wx.getOpenDataContext() method, and messages can be sent to the open data domain by calling OpenDataContext.postMessage() method on the instance.

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

Messages sent from the main domain can be subscribed in the open data domain by calling wx.onMessage() method.

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

Display Relationship Chain Data

If you want to display user data obtained through relational chain APIs, for example, draw business scenes (such as leaderboards), you need to draw the leaderboard on sharedCanvas and then render the sharedCanvas on-screen in the main domain.

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

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

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

sharedCanvas is an off-screen canvas that can be accessed through either main domain or open data domain. Calling wx.getSharedCanvas() in the open data domain will return sharedCanvas.

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

In the main domain, sharedCanvas can be accessed through the open data domain instance, and sharedCanvas can be drawn on the on-screen canvas using the drawImage() method.

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

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

The width and height of the sharedCanvas can only be set in the main domain and cannot be set in the open data domain.

// game.js
sharedCanvas.width = 400
sharedCanvas.height = 200

The sharedCanvas is also essentially an off-screen Canvas, and resetting the width and height of the Canvas will clear the contents of the Canvas. So notify the open data domain to redraw the sharedCanvas.

// game.js

openDataContext.postMessage({
  command: 'render'
})
// src/myOpenDataContext/index.js
openDataContext.onMessage(data => {
  if (data.command === 'render') {
    // ... redraw sharedCanvas
  }
})

Limit

When a Mini Game starts an open data domain, that is when the openDataContext configuration item is added to game.json, the Mini Game environment will imposes some restrictions on the main domain and the open data domain.

Main Domain

  1. sharedCanvas can only be drawn on the on-screen canvas.
  2. The on-screen canvas cannot call toDataURL, and its context cannot call getImageData.
  3. sharedCanvas cannot call toDataURL and getContext.
  4. The on-screen canvas and sharedCanvas can not be drawn on any other canvas in any form, including drawImage, createPattern, texImage2D, and texSubImage2D.
  5. The width and height of the sharedCanvas can only be set in the main domain.

Open Data Domain

  1. The width and height of the sharedCanvas cannot be set

The open data domain can only call limited types of APIs, as shown below:

Frame rate

Timer

Touch event

Canvas

All canvases in open data domain only support the 2d rendering mode

Image

Image in open data domain can only uses local images or WeChat CDN images, and can not use images on the developer's own server. For non-local or non-WeChat CDN images, you can first download the image file from the main domain wx.downloadFile(), and then pass the file path to the open data domain for use via OpenDataContext.postMessage().

Open Data

Subscribe The Main Domain Message