【微信小遊戲】排行榜概念篇

時間 2019-11-11

標籤微信小遊戲排行榜概念欄目遊戲简体版

原文原文鏈接

1、前提

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

2、概念

一、1）關係鏈數據：

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

該用戶好友的用戶數據
該用戶所在的某個羣的羣成員的用戶數據。

　　2）經常使用的API:

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

　　注意：

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

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

二、開放數據域

　　開放數據域 是一個封閉、獨立的 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 之外是 主域的代碼目錄。post

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

├── 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')spa

三、主域和開放數據域的通訊

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

　　主域能夠向開放數據域發送消息。調用 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
  } */
})

四、展現關係鏈數據

　　若是想要展現經過關係鏈 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)

五、限制

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

　　1）主域

sharedCanvas 只能被繪製到上屏 canvas 上。
上屏 canvas 不能調用 toDataURL，其 context 不能調用 getImageData。
sharedCanvas 不能調用 toDataURL 和 getContext。
不能將上屏 canvas 和 sharedCanvas 以任意形式繪製到其餘 canvas 上，包括 drawImage、createPattern、texImage2D、texSubImage2D。