微信小遊戲-開放資料域的配置
概念
開放資料域 是一個封閉、獨立的 JavaScript 作用域。開放資料域主要作用就是獲取使用者的關係鏈資料，並且展示關係鏈資料具體使用方法在官方文件已經非常詳細了-》開放資料域本文只是做一個簡單整理具體的展示關係鏈資料
配置方法
1、新建開放資料域的程式碼目錄，以openDataContext為例，在目錄下新建index.js作為開放資料的入口檔案2、在game.json中新增配置項 openDataContext
{
"deviceOrientation": "portrait", "openDataContext": "src/openDataContext"
}複製程式碼開放資料域限制
1、主域和開放資料域中的程式碼不能相互 require2、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.jslet openDataContext = wx.getOpenDataContext()openDataContext.postMessage({
text: 'hello', year: (new Date()).getFullYear()
})複製程式碼在開放資料域中通過 wx.onMessage() 方法可以監聽從主域發來的訊息。
// src/openDataContext/index.jswx.onMessage(data =>
{
console.log(data) /* {
text: 'hello', year: 2018
} */
})複製程式碼微信小遊戲 —— 關係鏈資料使用(排行榜的顯示)
前言
微信小遊戲屬於微信小程式的一個類目，小遊戲對比於普通的h5遊戲，其很大的一個特點是微信提供的關係鏈資料的使用，你可以獲得同玩這個遊戲的微信好友的資料，或者你在某個群的使用者資料
概念
具體概念請前往-》關係鏈資料使用指南需要了解關係鏈api和開放域，主域等概念。以下著重介紹具體的api使用
wx.setUserCloudStorage() 託管使用者資料
ps: wx.setUserCloudStorage()介面在主域和開放資料域都可以使用
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型別，否則會報錯
託管資料的限制每個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);
}
});
複製程式碼獲取到的資料如下：
繪製好友排行榜
沒錯，用你的canvas技術將獲取到的好友資料繪製到sharedCanvas上。sharedCanvas是微信預設提供的，不需要再次建立
// src/OpenDataContext/index.jslet 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：
//前提是要使用Wxkitlet openDataContext = this.linkOpenData({
},"這裡傳寬度","這裡傳高度");
this.openDataContext = openDataContext;
this.addChild(openDataContext)複製程式碼實際操作
首先把你的專案釋出為微信小遊戲專案
之後會報錯誤，這裡不用管就行了然後在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
作者簡介：何永峰，蘆葦科技web前端開發工程師，喜歡到處尋找好吃的，平時愛好是跳舞，打籃球，聽音樂，有時會出席一些大型的舞蹈商演活動，目前是Acum.Revolution現狀革命成員之一。並且代表作品：萌雞駕到、美旅出行小程式、電競桌子小程式。擅長網站建設、公眾號開發、微信小程式開發、小遊戲、公眾號開發，專注於前端領域框架、互動設計、影像繪製、資料分析等研究，訪問 www.talkmoney.cn 瞭解更多或掃描以下二維碼獲取最新的文章推送