標簽: 微信小游戲，開放域
微信小游戲-開放數據域的配置
概念
開放數據域 是一個封閉、獨立的 JavaScript 作用域。開放數據域主要作用就是獲取用戶的關系鏈數據，並且展示關系鏈數據
具體使用方法在官方文檔已經非常詳細了-》開放數據域本文只是做一個簡單整理
具體的展示關系鏈數據
配置方法
1、新建開放數據域的代碼目錄，以openDataContext為例，在目錄下新建index.js作為開放數據的入口文件
2、在game.json中添加配置項 openDataContext
{
"deviceOrientation": "portrait",
"openDataContext": "src/openDataContext"
}
enter description here
開放數據域限制
1、主域和開放數據域中的代碼不能相互 require
2、wx.getUserCloudStorage、wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() 只能在 開放數據域 中調用。
3、wx.setUserCloudStorage() 和 wx.removeUserCloudStorage() 可以同時在 主域 和開放數據域中調用。
4、開放數據中不能修改sharedCanvas的寬高，如有需要，請在上屏canvas修改sharedCanvas的寬高
5、sharedCanvas只能被上屏canvas渲染
6、開放數據域不能向主域發送消息
7、sharedCanvas 不能調用 toDataURL 和 getContext。
8、開放數據域的所有 canvas 只支持 2d 渲染模式
9、開放數據域的 Image 只能使用本地或微信 CDN 的圖片，不能使用開發者自己服務器上的圖片
主域限制
1、主域不能調用wx.getUserCloudStorage、wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage() ，也就是說主域不能直接獲取用戶關系鏈數據，必須通過開放數據域獲取，再渲染到sharedCanvas上
主域和開放數據域的通信
開放數據域不能向主域發送消息，主域可以調用開放數據域實例的postmassage()方法向開放數據域發送消息
// main.js
let openDataContext = wx.getOpenDataContext()
openDataContext.postMessage({
text: 'hello',
year: (new Date()).getFullYear()
})
在開放數據域中通過 wx.onMessage() 方法可以監聽從主域發來的消息。
// src/openDataContext/index.js
wx.onMessage(data => {
console.log(data)
/* {
text: 'hello',
year: 2018
} */
})
微信小游戲 —— 關系鏈數據使用(排行榜的顯示)
前言
微信小游戲屬於微信小程序的一個類目，小游戲對比於普通的h5游戲，其很大的一個特點是微信提供的關系鏈數據的使用，你可以獲得同玩這個游戲的微信好友的數據，或者你在某個群的用戶數據
概念
具體概念請前往-》關系鏈數據使用指南
需要了解關系鏈api和開放域，主域等概念。以下着重介紹具體的api使用
wx.setUserCloudStorage() 托管用戶數據
ps: wx.setUserCloudStorage()接口在主域和開放數據域都可以使用
enter description here
wx.setUserCloudStorage({
KVDataList: [{ key: 'score', value: score }],
success: res => {
console.log(res);
// 讓子域更新當前用戶的最高分，因為主域無法得到getUserCloadStorage;
let openDataContext = wx.getOpenDataContext();
openDataContext.postMessage({
type: 'updateMaxScore',
});
},
fail: res => {
console.log(res);
}
});
注意： KVDataList的value必須是字符串String類型，否則會報錯
enter description here
托管數據的限制
每個openid所標識的微信用戶在每個游戲上托管的數據不能超過128個key-value對。
上報的key-value列表當中每一項的key+value長度都不能超過1K(1024)字節。
上報的key-value列表當中每一個key長度都不能超過128字節。
wx.getFriendCloudStorage（）拉取當前用戶所有同玩好友的托管數據（開放數據域使用）
ps: 這個接口只能在開放數據域使用，即主域無法調用接口獲取好友數據
wx.getFriendCloudStorage({
keyList: ['score', 'maxScore'], // 你要獲取的、托管在微信后台都key
success: res => {
console.log(res.data);
}
});
獲取到的數據如下：
enter description here
繪制好友排行榜
沒錯，用你的canvas技術將獲取到的好友數據繪制到sharedCanvas上。sharedCanvas是微信默認提供的，不需要再次創建
// src/OpenDataContext/index.js
let sharedCanvas = wx.getSharedCanvas()
function drawRankList (data) {
data.forEach((item, index) => {
// ...
})
}
wx.getFriendCloudStorage({
success: res => {
let data = res.data
drawRankList(data)
}
})
繪制后如何顯示以及會遇到的問題？
需要在上屏canvas上通過drawImage()方法把這個sharedCanvas繪制到上屏canvas
主域的js：
//前提是要使用Wxkit
let openDataContext = this.linkOpenData({},"這里傳寬度","這里傳高度");
this.openDataContext = openDataContext;
this.addChild(openDataContext)
實際操作
首先把你的項目發布為微信小游戲項目
enter description here 
enter description here 
enter description here
之后會報錯誤，這里不用管就行了
然后在mian.js里面加代碼
public createGameScene(){
//本來的代碼
//發信息給開放域，加載數據
let openDataContext = wx.getOpenDataContext()
openDataContext.postMessage({
text: 'hello',
year: (new Date()).getFullYear(),
command:'loadRes',
})
let that = this;
//這里是讓開放域的數據先加載好
setTimeout(function() {
//調用linkOpenData方法
let openData = that.linkOpenData({},that.stage.width,that.stage.height);
that.addChild(openData)
}, 2000);
}
//添加方法
public linkOpenData(message: {}, width?: number, height?: number, data?: Object) {
console.log('調用開放數據域')
let basic = {
isRanking: false,
text: "egret",
data: data,
year: (new Date()).getFullYear(),
command: "open"
}
for (let key in message) {
basic[key] = message[key];
}
let open_data_container = new egret.Sprite();
let openDataContext = wx.getOpenDataContext();
const bitmapdata = new egret.BitmapData(window["sharedCanvas"]);
bitmapdata.$deleteSource = false;
const texture = new egret.Texture();
texture._setBitmapData(bitmapdata);
let bitmap: egret.Bitmap;
bitmap = new egret.Bitmap(texture);
bitmap.width = width || 0
bitmap.height = height || 0
bitmap.name = "openData";
open_data_container.addChild(bitmap);
console.log(bitmap.width + ' ' + bitmap.height)
egret.startTick((timeStarmp: number) => {
egret.WebGLUtils.deleteWebGLTexture(bitmapdata.webGLTexture);
bitmapdata.webGLTexture = null;
return false;
}, this);
openDataContext.postMessage(basic);
console.log('link_done');
return open_data_container;
}
運行項目，就有egret本來幫你寫好的開放域demo
enter description here
作者簡介：何永峰，蘆葦科技web前端開發工程師，喜歡到處尋找好吃的，平時愛好是跳舞，打籃球，聽音樂，有時會出席一些大型的舞蹈商演活動，目前是Acum.Revolution現狀革命成員之一。並且代表作品：萌雞駕到、美旅出行小程序、電競桌子小程序。擅長網站建設、公眾號開發、微信小程序開發、小游戲、公眾號開發，專注於前端領域框架、交互設計、圖像繪制、數據分析等研究，訪問 www.talkmoney.cn 了解更多。