微信小遊戲 —— 關係鏈資料使用(排行榜的顯示)
前言
微信小遊戲屬於微信小程式的一個類目,小遊戲對比於普通的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/myOpenDataContext/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:
let openDataContext = wx.getOpenDataContext()
let sharedCanvas = openDataContext.canvas canvas.getContext('2d').drawImage(sharedCanvas, 0, 0);
問題1:繪製了不顯示?
因為wx.getFriendCloudStorage() 介面是非同步的,以及sharedCanvas的繪製也是非同步的(涉及頭像等資源),如果在上屏canvas 只進行一次繪製,那麼肯定是不顯示或者顯示不全的。但是開放資料域不能主動向主域進行通訊,主域無法獲知何時繪製完畢進行重新繪製,所以我建議在主域迴圈進行繪製。具體的其他邏輯可根據自身情況修改
loop(){
// 主域繪製
let openDataContext = wx.getOpenDataContext();
let sharedCanvas = openDataContext.canvas;
canvas.getContext('2d').drawImage(sharedCanvas, 0, 0);
requestAnimationFrame(this.loop.bind(this));
}
問題2: 排行榜模糊的問題?
這個問題基本在每個人初次繪製排行榜的時候都會遇到。canvas繪製模糊的問題,通常的解決辦法就是將內容放大裝置畫素比倍數,然後進行縮放。
const ratio = wx.getSystemInfoSync().pixelRatio;//獲取裝置畫素比
let openDataContext = wx.getOpenDataContext();
let sharedCanvas = openDataContext.canvas;
sharedCanvas.width = screenWidth * ratio; // 在主域將sharedCanvas寬高都按畫素比放大
sharedCanvas.height = screenHeight * ratio;
繪製到上屏canvas到時候要把寬高設為當前螢幕的寬高
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
canvas.getContext('2d').drawImage(sharedCanvas, 0, 0, screenWidth, screenHeight);
實際上到這裡你還是模糊的。因為在sharedCanvas裡你還是需要進行放大-縮放的操作。
開放域index.js
let sharedCanvas = wx.getSharedCanvas();
let context = sharedCanvas.getContext('2d');
const screenWidth = wx.getSystemInfoSync().screenWidth;
const screenHeight = wx.getSystemInfoSync().screenHeight;
const ratio = wx.getSystemInfoSync().pixelRatio;
……
//繪製元素的時候
context.scale(ratio, ratio);// 因為sharedCanvas在主域放大了ratio倍
//為了便於計算尺寸,在將context 縮放到750寬的設計稿尺寸,
let scales = screenWidth / 750;
context.scale(scales, scales);
// 接下來你每繪製的一個元素的尺寸,都應該按鈕750寬的設計稿/
// 比如
// 畫標題
context.fillStyle = '#fff';
context.font = '50px Arial';
context.textAlign = 'center';
context.fillText('好友排行榜', 750 / 2, 220); // 750的尺寸
如果不明白,獻上github一份微信小遊戲demo
wx.getGroupCloudStorage()獲取群同玩成員遊戲資料
在小遊戲是通過群分享卡片開啟的情況下,可以通過呼叫該介面獲取群同玩成員的遊戲資料。
獲取群成員資料和獲取好友資料有些不同,多了一個shareTicket
這個shareTicket必須是你分享到一個群,那麼通過這個分享出來的卡片開啟的小遊戲就會有一個shareTicket,可以在頁面開啟的時候獲取
主域js
wx.onShow(res => {
let shareTicket = res.shareTicket;
});
開放資料域index.js
wx.getGroupCloudStorage({
shareTicket: ticket, // 需要帶上shareTicket
keyList: ['score', 'maxScore'],
success: res => {
console.log(res.data);
},
fail: res => {
console.log(res.data);
}
});
問題1: 開放資料域如何拿到主域的shareTicket?
主域可以通過postMessage通知開放域
主域js
let openDataContext = wx.getOpenDataContext();
openDataContext.postMessage({
type: 'group',
text: shareTicket,
});
在開放資料域通過onMessage獲取主域訊息
wx.onMessage(data => {
if (data.type === 'group') {
let shareTicket = data.text; // 開放資料域順利拿到shareTicket
}
});
接下來的繪製與好友排行榜同。
問題2:分享介面報錯?
因為很多人剛開始開發微信小遊戲都是屬於無appid體驗開發的,這個模式下是無法呼叫分享介面的,必須要有appid,可以申請一個新的小程式賬號,設定類目的時候必須為遊戲型別,一旦設定無法更改,也不能將舊的小程式其他型別改成遊戲型別。
分享黑屏的問題
你可能會遇到小遊戲點選右上角分享之後就黑屏了,而且是必現的,實際上是因為你的canvas 沒有實時繪製,不清楚原因,但是分享回來黑屏,解決辦法:1、監聽分享回撥,重新繪製當前canvas;2、實時繪製當前canvas
排行榜排名的問題?
託管在微信後臺的資料,微信是沒有給你排序的,排名需要自己處理。