我們都知道，微信小游戲和小程序目前風頭十足，很多公司都逐漸增加了相關業務線來迅速推廣自己的產品和搶占用戶群。說到微信小游戲，就不得不提到排行榜這個功能，就目前游戲行業，似乎都離不開排行榜這個重要功能，用戶很大一部分留存都是依仗這個看似不起眼的模塊。那么，微信小游戲中具體該如何借助laya引擎實現排行榜這個功能呢？我們先來看一下最終的效果圖：
image
按照微信官方的說法，如果我們要使用微信官方提供的好友關系鏈的數據，我們就不能直接在項目中繪制排行榜，我們需要借助于開放域來繪制排行榜：
image
? 如果想要展示通過關系鏈 API 獲取到的用戶數據，如繪制排行榜等業務場景，需要將排行榜繪制到 sharedCanvas 上，再在主域將 sharedCanvas 渲染上屏。簡單來說，sharedCanvas 是主域和開放數據域都可以訪問的一個離屏畫布。在開放數據域調用 wx.getSharedCanvas() 將返回 sharedCanvas。更多相關詳情可以去看看官網的介紹：https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/open-data.html
那么我們來實際動手操作一下吧。
主域繪制
通過效果可以看出來，我們排行榜是一個彈窗形式展示的，由于開放域只負責排行榜UI繪制，所以，除此以外的UI以及交互我們需要在主域繪制和處理。因此，這里的彈窗 dialog 需要在主域繪制，然后將對應的排行榜需要顯示的位置信息和長寬映射到開放域，具體代碼如下：
/**
* 顯示排行榜數據
*/
function onRankInfoLoad(){
console.log("查看排行榜～");
var dialog = new RankDialogUI();
showShareCanvas();
// 解決顯示對象和鼠標錯位而導致的排行榜滑動無效問題
var globalPosition = dialog.ranking_list.localToGlobal(new Laya.Point());
var originMatrix = Laya.stage._canvasTransform;
var mat = new Laya.Matrix(originMatrix.a, 0, 0, originMatrix.d, globalPosition.x * originMatrix.a, globalPosition.y * originMatrix.d);
wxPostMessage({
command: 0,
text: "設置開放域canvas大小",
canvasData: {
width: rankViewWidth * mat.a, height: rankViewHeight * mat.d, matrix: mat
},
isLoad: false
}, null, function (message) {
console.log("再次往開放域發請求");
window['wx'].postMessage({
command: 1,
text: '開放域加載資源',
});
});
Laya.stage.addChild(dialog);
dialog.ranking_list.visible = false;
dialog.popup();
Laya.timer.once(400,this,function(){
wxPostMessage({
command: 3,
text: "獲取排行榜數據～"
}, null, function (message) {
console.log("獲取排行榜的回調～");
});
});
dialog.btn_rank_dialog_share.on(Laya.Event.CLICK, this, onGameRankShare);
dialog.btn_rank_dialog_back.on(Laya.Event.CLICK, this, onDialogClose);
function onDialogClose(){
wxPostMessage({
command: 4,
text: "關閉排行榜～"
}, null, function (message) {
console.log("關閉排行榜的回調～");
});
dialog.close();
}
function onGameRankShare(){
console.log("分享排行榜～");
window['wx'].showShareMenu({
withShareTicket:false,
success:function(res){
console.log("開啟轉發成功～");
},
fail:function(res){
console.log("開啟轉發失敗～");
},
complete:function(res){
}
});
window['wx'].onShareAppMessage(function () {
return {
title: '我在飛機大戰游戲中排名又上升了,快來挑戰我吧～'
}
})
window['wx'].shareAppMessage({
title: '我在飛機大戰游戲中排名又上升了,快來挑戰我吧～',
imageUrl: canvas.toTempFilePathSync({
x: (screenWidth - rankViewWidth)/2 - 10,
y: (screenHeight - rankViewHeight)/2+80,
width: (rankViewWidth - 30)*4,
height: (rankViewHeight - 40)*4,
destWidth: 500,
destHeight: 600
})
});
}
}
/**
* 設置共享Canvas
*/
function showShareCanvas(){
window['sharedCanvas'].width = rankViewWidth;
window['sharedCanvas'].height = rankViewHeight;
//主域顯示開放域內容???
//window['sharedCanvas'].sharedCanvas = window['wx'].getOpenDataContext().canvas;
Laya.timer.once(1000, this, function () {
var sprite = new Laya.Sprite();
sprite.zOrder = 1008;
sprite.pos(0, 0);
var texture = new Laya.Texture(window['sharedCanvas']);
texture.bitmap.alwaysChange = true;//小程序使用，非常費
sprite.graphics.drawTexture(texture, (screenWidth - rankViewWidth)/2, (screenHeight - rankViewHeight)/2, texture.width, texture.height);
Laya.stage.addChild(sprite);
});
}
/**
* 向開放域發送消息，并接收開放域返回過來的數據，
* 可根據發送參數和接收數據在主域這邊進行下步處理
* @param message
* @param caller
* @param callback
*/
function wxPostMessage(message, caller, callback){
window['wx'].postMessage(message);
Laya.timer.once(400, this, function (){
//回調處理
if (caller == null || caller == undefined) {
callback(message);
} else {
caller.callback(message);
}
});
}
這邊主要發送的消息體中攜帶了command字段，用于在開放域執行不同的功能代碼，這邊大體分為：資源加載命令、初始化排行榜大小命令、獲取關系鏈(排行榜)數據命令以及關閉排行榜的命令，大家可以根據業務具體需要適當增減。
開放域繪制
根據官方的說明，開放數據域 是一個封閉、獨立的 JavaScript 作用域。要讓代碼運行在開放數據域，需要在 game.json 中添加配置項 openDataContext 指定開放數據域的代碼目錄。添加該配置項表示小游戲啟用了開放數據域，這將會導致一些 限制。這些限制主要包含：
- 無法設置sharedCanvas的寬高
- 只能使用有限的接口(如逐幀動畫、Timer、觸摸事件以及獲取和設置關系鏈數據等接口)
下面我們一步步來在開放域繪制排行榜。
-
首先，需要新建一個項目作為開放域，這個項目目錄是與主域項目平行的(主域就是未做排行榜之前的項目目錄)，比如我的項目目錄是這樣的：
image -
接著，我們需要在開放域中接收主域發送的消息并處理不同的功能命令，UI就不放了，看看具體代碼吧：
/** * 監聽從主域發過來的消息 */ function wxOnMessage(){ if(window['wx'] != undefined){ window['wx'].onMessage(function (message){ dispatchMessage(message); }); }else{ console.log("微信接口無法使用～"); } } /** * 處理消息 * @param {*} message */ function dispatchMessage(message){ switch(message.command){ //設置開放域畫布大小 case 0: sample.setCanvasSize(message.canvasData); break; //加載資源 case 1: sample.loadResource(); break; //寫入排行榜數據 case 2: sample.writeRankingData(message.rankingData); break; //獲取微信排行榜數據 case 3: sample.getRankingData(); break; //關閉排行榜 case 4: sample.closeRankingDialog(); break; default: console.log(JSON.stringify(message)); } } /** * 設置開放域畫布大小 * @param {*} size */ _proto.setCanvasSize = function(size){ console.log("設置開放域canvas大小～"); window['sharedCanvas'].width = size.width; window['sharedCanvas'].height = size.height; //Laya.stage.width = size.width; //Laya.stage.width = size.height; /** * 將主域的canvasTransform映射到開放域 */ if(size.matrix!=null){ console.log("收到主域的同步canvasTransform了～"); } var mainMatrix = size.matrix; var openMatrix = new Laya.Matrix(); openMatrix.a = mainMatrix.a; openMatrix.b = mainMatrix.b; openMatrix.c = mainMatrix.c; openMatrix.d = mainMatrix.d; openMatrix.tx = mainMatrix.tx; openMatrix.ty = mainMatrix.ty; //重置矩陣 Laya.stage._canvasTransform = openMatrix; //監聽舞臺的鼠標移動事件 Laya.stage.mouseEnabled = true; } /** * 用戶自己的排名 */ var myRanking = -1; /** * 獲取微信排行榜數據 */ _proto.getRankingData = function(){ window['wx'].getUserInfo({ openIdList: ['selfOpenId'], success: (userRes) => { console.log('success', userRes.data); //索引代表各個好友0為自己 let userData = userRes.data[0]; console.log("取信息索引0" + userData.nickName); //取出所有好友數據 window['wx'].getFriendCloudStorage({ keyList: [ //'擊殺排行', '第1關', '第2關', '第3關' ], success: res => { console.log("wx.getFriendCloudStorage success", res); let data = res.data; /*data.sort((a, b) => { if (a.KVDataList.length == 0 && b.KVDataList.length == 0) { return 0; } if (a.KVDataList.length == 0) { return 1; } if (b.KVDataList.length == 0) { return -1; } return b.KVDataList[0].value - a.KVDataList[0].value; });*/ for (let i = 0; i < data.length; i++) { var playerInfo = data[i]; var currentPlayer = res.data[i].nickname; console.log("當前排行玩家昵稱為=>"+res.data[i].nickname); var kvList = playerInfo.KVDataList; var scoreSum = 0; if(kvList.length>0){ for(var j = 0;j<kvList.length;j++){ if(kvList[j].key != null){ //將value轉化為int再累加 scoreSum+=Number(kvList[j].value); } } } if (data[i].avatarUrl == userData.avatarUrl) { //獲取群好友的時候,沒有自己的名字?? data[i].nickName = userData.nickName; myRanking = i+1; console.log("此ID為自己,當前排名第"+myRanking); } //填充總分信息 sortData.push({ nickName: currentPlayer, avatarUrl: data[i].avatarUrl, totalScore: scoreSum }); } sortData.sort((a, b) => { var score1 = Number(a.totalScore); var score2 = Number(b.totalScore); if (score1 > score2) { return -1; }else if(score1 < score2){ return 1; }else{ return 0; } }); showRankingDialog(); }, fail: res => { console.log("拉取好友信息失敗", res); }, }); }, fail: (res) => { console.log("拉取個人信息失敗") } }); } /** * 加載資源 */ _proto.loadResource = function(){ Laya.loader.load(["comp/bg_line.png","comp/ranking1.png","comp/ranking2.png", "comp/ranking3.png","comp/userholder_img.png"], Laya.Handler.create(null,function(){ console.log("開放域資源加載完畢～"); sample.rankView = new RankingViewUI(); Laya.stage.addChild(sample.rankView); })); } /** * 寫入排行榜數據 */ _proto.writeRankingData = function(rankingData){ console.log("寫入排行榜數據～"); //KVDataList代表排行數據,可以為多個,多個代表多個排行 //key-排行類型,value-排行分數 window['wx'].setUserCloudStorage({ KVDataList: [ //{ key: '擊殺排行', value: "" + 1 }, { key: '第'+rankingData.fightLevel+'關', value: rankingData.fightScore+"" },//需要改成動態的值 ], success: function (res) { console.log('setUserCloudStorage', 'success', res) }, fail: function (res) { console.log('setUserCloudStorage', 'fail') } }); } var sortData = []; /** * 渲染排行榜列表 */ function showRankingDialog(){ console.log("拿到好友排行榜信息", sortData); sample.rankView.ranking_list.vScrollBarSkin = ""; sample.rankView.ranking_list.array = sortData; sample.rankView.ranking_list.renderHandler = new Laya.Handler(this, onRender); sample.rankView.ranking_list.selectHandler = new Laya.Handler(this, onSelect); } var lastRenderIndex = -1; function onRender(cell, index){ if (index == lastRenderIndex) { return; } lastRenderIndex = index; //根據子節點的name獲取子節點對象 var name = cell.getChildByName("item_rank_name"); var ranking = cell.getChildByName("item_rank_text"); var userlogo = cell.getChildByName("item_rank_logo"); var score = cell.getChildByName("item_rank_score"); var rank_icon = cell.getChildByName("item_rank_icon"); name.text = sortData[index].nickName; console.log("渲染排行榜當前的用戶名為="+sortData[index].nickName+"，渲染索引："+lastRenderIndex); ranking.text = (index+1)+""; userlogo.skin = sortData[index].avatarUrl; score.text = sortData[index].totalScore+"分"; if(lastRenderIndex === 0 || lastRenderIndex === 1 || lastRenderIndex === 2){ ranking.visible = false; rank_icon.visible = true; rank_icon.skin = "comp/ranking"+(lastRenderIndex+1)+".png"; }else{ rank_icon.visible = false; ranking.visible = true; } } function onSelect(index){ console.log("當前選擇的索引是："+index); } /** * 關閉排行榜 */ _proto.closeRankingDialog = function(){ //dialog.close(); console.log("關閉排行榜～"); sortData = []; lastRenderIndex = -1; sample.rankView.removeChildren(); sample.rankView = null; } _proto.start = function(){ console.log("開始接收主域的消息～"); wxOnMessage(); } }可以看到，我們這里通過
wx.onMessage方法來獲取主域發送的數據，然后借助dispatchMessage方法作消息的分發處理。值得注意的是，我們在設置開放域canvas大小的時候，需要重置坐標矩陣，將主域的排行榜顯示位置映射到開放域中來，否則會發生滑動無效的問題。我這里設置的排行榜數據有三條，大家可以根據具體需求來傳入，獲取到排行榜數據后，需要對它進行排序處理并展示，這里直接借助于laya中的List控件展示就可以了，對于它用法不熟悉的可以去laya官網了解一下：https://ldc.layabox.com/doc/?nav=zh-js-6-0-0 開放域圖片加載問題：
用過laya游戲引擎的都知道，我們一般用官方推薦的打包圖集的方式來加載游戲中的圖片資源，這種方式在主域中是可行的，然而，在開放域中卻不能成功加載圖片資源。因此，開放域中，我們不需要將圖片資源打包成圖集，只要像下面這樣直接加載圖片即可：
/**
* 加載資源
*/
_proto.loadResource = function(){
Laya.loader.load(["comp/bg_line.png","comp/ranking1.png","comp/ranking2.png",
"comp/ranking3.png","comp/userholder_img.png"], Laya.Handler.create(null,function(){
console.log("開放域資源加載完畢～");
sample.rankView = new RankingViewUI();
Laya.stage.addChild(sample.rankView);
}));
}
然后，我們還需要將對應的圖片文件夾拷貝到wx_publish目錄下，否則會提示找不到圖片資源。
合并主域和開放域
主域和開放域功能代碼實現了之后，我們就需要打包成微信小游戲項目了。首先，我們需要先將主域項目發布成微信小游戲，發布目錄直接為項目的根目錄，如上圖的 wx_publish 目錄。然后，在該目錄下創建src/myOpenDataContext目錄。接著，我們需要將開放域項目也發布成微信小游戲，目錄可以選擇桌面，名稱為 wx_open，發布成功后，進入該目錄，將code.js、weapp-adapter.js以及index.js文件復制到 wx_publish/src/myOpenDataContext 目錄下，并在 game.json 文件中增加開放域映射目錄：
{
"deviceOrientation": "portrait",
"showStatusBar": "false",
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"openDataContext": "src/myOpenDataContext"
}
到這里，微信小游戲排行榜功能就算實現了，到頭來發現，其實實現起來并不難，難的是缺乏資料，此文僅用來拋磚引玉，如有問題歡迎提出。
