我們都知道譬淳，微信小游戲和小程序目前風(fēng)頭十足，很多公司都逐漸增加了相關(guān)業(yè)務(wù)線來迅速推廣自己的產(chǎn)品和搶占用戶群熊镣。說到微信小游戲彻亲，就不得不提到排行榜這個功能，就目前游戲行業(yè)侠草，似乎都離不開排行榜這個重要功能，用戶很大一部分留存都是依仗這個看似不起眼的模塊。那么沦补，微信小游戲中具體該如何借助laya引擎實現(xiàn)排行榜這個功能呢？我們先來看一下最終的效果圖：
按照微信官方的說法咪橙，如果我們要使用微信官方提供的好友關(guān)系鏈的數(shù)據(jù)夕膀，我們就不能直接在項目中繪制排行榜，我們需要借助于開放域來繪制排行榜：
? 如果想要展示通過關(guān)系鏈 API 獲取到的用戶數(shù)據(jù)美侦，如繪制排行榜等業(yè)務(wù)場景产舞，需要將排行榜繪制到 sharedCanvas 上，再在主域?qū)?sharedCanvas 渲染上屏菠剩。簡單來說易猫，sharedCanvas 是主域和開放數(shù)據(jù)域都可以訪問的一個離屏畫布。在開放數(shù)據(jù)域調(diào)用 wx.getSharedCanvas() 將返回 sharedCanvas具壮。更多相關(guān)詳情可以去看看官網(wǎng)的介紹：https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/open-data.html
那么我們來實際動手操作一下吧准颓。
主域繪制
通過效果可以看出來，我們排行榜是一個彈窗形式展示的棺妓，由于開放域只負(fù)責(zé)排行榜UI繪制攘已，所以，除此以外的UI以及交互我們需要在主域繪制和處理怜跑。因此样勃，這里的彈窗 dialog 需要在主域繪制，然后將對應(yīng)的排行榜需要顯示的位置信息和長寬映射到開放域，具體代碼如下：
/**
* 顯示排行榜數(shù)據(jù)
*/
function onRankInfoLoad(){
console.log("查看排行榜～");
var dialog = new RankDialogUI();
showShareCanvas();
// 解決顯示對象和鼠標(biāo)錯位而導(dǎo)致的排行榜滑動無效問題
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: "設(shè)置開放域canvas大小",
canvasData: {
width: rankViewWidth * mat.a, height: rankViewHeight * mat.d, matrix: mat
},
isLoad: false
}, null, function (message) {
console.log("再次往開放域發(fā)請求");
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: "獲取排行榜數(shù)據(jù)～"
}, null, function (message) {
console.log("獲取排行榜的回調(diào)～");
});
});
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: "關(guān)閉排行榜～"
}, null, function (message) {
console.log("關(guān)閉排行榜的回調(diào)～");
});
dialog.close();
}
function onGameRankShare(){
console.log("分享排行榜～");
window['wx'].showShareMenu({
withShareTicket:false,
success:function(res){
console.log("開啟轉(zhuǎn)發(fā)成功～");
},
fail:function(res){
console.log("開啟轉(zhuǎn)發(fā)失敗～");
},
complete:function(res){
}
});
window['wx'].onShareAppMessage(function () {
return {
title: '我在飛機(jī)大戰(zhàn)游戲中排名又上升了,快來挑戰(zhàn)我吧～'
}
})
window['wx'].shareAppMessage({
title: '我在飛機(jī)大戰(zhàn)游戲中排名又上升了,快來挑戰(zhàn)我吧～',
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
})
});
}
}
/**
* 設(shè)置共享Canvas
*/
function showShareCanvas(){
window['sharedCanvas'].width = rankViewWidth;
window['sharedCanvas'].height = rankViewHeight;
//主域顯示開放域內(nèi)容???
//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;//小程序使用峡眶，非常費(fèi)
sprite.graphics.drawTexture(texture, (screenWidth - rankViewWidth)/2, (screenHeight - rankViewHeight)/2, texture.width, texture.height);
Laya.stage.addChild(sprite);
});
}
/**
* 向開放域發(fā)送消息剧防，并接收開放域返回過來的數(shù)據(jù)，
* 可根據(jù)發(fā)送參數(shù)和接收數(shù)據(jù)在主域這邊進(jìn)行下步處理
* @param message
* @param caller
* @param callback
*/
function wxPostMessage(message, caller, callback){
window['wx'].postMessage(message);
Laya.timer.once(400, this, function (){
//回調(diào)處理
if (caller == null || caller == undefined) {
callback(message);
} else {
caller.callback(message);
}
});
}
這邊主要發(fā)送的消息體中攜帶了command字段辫樱，用于在開放域執(zhí)行不同的功能代碼峭拘，這邊大體分為：資源加載命令、初始化排行榜大小命令搏熄、獲取關(guān)系鏈(排行榜)數(shù)據(jù)命令以及關(guān)閉排行榜的命令棚唆，大家可以根據(jù)業(yè)務(wù)具體需要適當(dāng)增減。
開放域繪制
根據(jù)官方的說明心例，開放數(shù)據(jù)域 是一個封閉宵凌、獨立的 JavaScript 作用域。要讓代碼運(yùn)行在開放數(shù)據(jù)域止后，需要在 game.json 中添加配置項 openDataContext 指定開放數(shù)據(jù)域的代碼目錄瞎惫。添加該配置項表示小游戲啟用了開放數(shù)據(jù)域，這將會導(dǎo)致一些 限制译株。這些限制主要包含：
- 無法設(shè)置sharedCanvas的寬高
- 只能使用有限的接口(如逐幀動畫瓜喇、Timer、觸摸事件以及獲取和設(shè)置關(guān)系鏈數(shù)據(jù)等接口)
下面我們一步步來在開放域繪制排行榜歉糜。
-
首先乘寒，需要新建一個項目作為開放域，這個項目目錄是與主域項目平行的(主域就是未做排行榜之前的項目目錄)匪补，比如我的項目目錄是這樣的：
image -
接著伞辛，我們需要在開放域中接收主域發(fā)送的消息并處理不同的功能命令，UI就不放了夯缺，看看具體代碼吧：
/** * 監(jiān)聽從主域發(fā)過來的消息 */ function wxOnMessage(){ if(window['wx'] != undefined){ window['wx'].onMessage(function (message){ dispatchMessage(message); }); }else{ console.log("微信接口無法使用～"); } } /** * 處理消息 * @param {*} message */ function dispatchMessage(message){ switch(message.command){ //設(shè)置開放域畫布大小 case 0: sample.setCanvasSize(message.canvasData); break; //加載資源 case 1: sample.loadResource(); break; //寫入排行榜數(shù)據(jù) case 2: sample.writeRankingData(message.rankingData); break; //獲取微信排行榜數(shù)據(jù) case 3: sample.getRankingData(); break; //關(guān)閉排行榜 case 4: sample.closeRankingDialog(); break; default: console.log(JSON.stringify(message)); } } /** * 設(shè)置開放域畫布大小 * @param {*} size */ _proto.setCanvasSize = function(size){ console.log("設(shè)置開放域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; //監(jiān)聽舞臺的鼠標(biāo)移動事件 Laya.stage.mouseEnabled = true; } /** * 用戶自己的排名 */ var myRanking = -1; /** * 獲取微信排行榜數(shù)據(jù) */ _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); //取出所有好友數(shù)據(jù) window['wx'].getFriendCloudStorage({ keyList: [ //'擊殺排行', '第1關(guān)', '第2關(guān)', '第3關(guān)' ], 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("當(dāng)前排行玩家昵稱為=>"+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轉(zhuǎn)化為int再累加 scoreSum+=Number(kvList[j].value); } } } if (data[i].avatarUrl == userData.avatarUrl) { //獲取群好友的時候,沒有自己的名字?? data[i].nickName = userData.nickName; myRanking = i+1; console.log("此ID為自己,當(dāng)前排名第"+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); })); } /** * 寫入排行榜數(shù)據(jù) */ _proto.writeRankingData = function(rankingData){ console.log("寫入排行榜數(shù)據(jù)～"); //KVDataList代表排行數(shù)據(jù),可以為多個,多個代表多個排行 //key-排行類型,value-排行分?jǐn)?shù) window['wx'].setUserCloudStorage({ KVDataList: [ //{ key: '擊殺排行', value: "" + 1 }, { key: '第'+rankingData.fightLevel+'關(guān)', value: rankingData.fightScore+"" },//需要改成動態(tài)的值 ], 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; //根據(jù)子節(jié)點的name獲取子節(jié)點對象 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("渲染排行榜當(dāng)前的用戶名為="+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("當(dāng)前選擇的索引是："+index); } /** * 關(guān)閉排行榜 */ _proto.closeRankingDialog = function(){ //dialog.close(); console.log("關(guān)閉排行榜～"); sortData = []; lastRenderIndex = -1; sample.rankView.removeChildren(); sample.rankView = null; } _proto.start = function(){ console.log("開始接收主域的消息～"); wxOnMessage(); } }可以看到，我們這里通過
wx.onMessage方法來獲取主域發(fā)送的數(shù)據(jù)踊兜，然后借助dispatchMessage方法作消息的分發(fā)處理竿滨。值得注意的是，我們在設(shè)置開放域canvas大小的時候捏境，需要重置坐標(biāo)矩陣于游，將主域的排行榜顯示位置映射到開放域中來，否則會發(fā)生滑動無效的問題典蝌。我這里設(shè)置的排行榜數(shù)據(jù)有三條曙砂，大家可以根據(jù)具體需求來傳入，獲取到排行榜數(shù)據(jù)后骏掀，需要對它進(jìn)行排序處理并展示，這里直接借助于laya中的List控件展示就可以了，對于它用法不熟悉的可以去laya官網(wǎng)了解一下：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);
}));
}
然后，我們還需要將對應(yīng)的圖片文件夾拷貝到wx_publish目錄下鹉勒，否則會提示找不到圖片資源帆锋。
合并主域和開放域
主域和開放域功能代碼實現(xiàn)了之后，我們就需要打包成微信小游戲項目了禽额。首先锯厢，我們需要先將主域項目發(fā)布成微信小游戲，發(fā)布目錄直接為項目的根目錄脯倒，如上圖的 wx_publish 目錄实辑。然后，在該目錄下創(chuàng)建src/myOpenDataContext目錄藻丢。接著剪撬，我們需要將開放域項目也發(fā)布成微信小游戲，目錄可以選擇桌面悠反，名稱為 wx_open残黑，發(fā)布成功后，進(jìn)入該目錄问慎，將code.js萍摊、weapp-adapter.js以及index.js文件復(fù)制到 wx_publish/src/myOpenDataContext 目錄下，并在 game.json 文件中增加開放域映射目錄：
{
"deviceOrientation": "portrait",
"showStatusBar": "false",
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"openDataContext": "src/myOpenDataContext"
}
到這里如叼，微信小游戲排行榜功能就算實現(xiàn)了冰木，到頭來發(fā)現(xiàn)，其實實現(xiàn)起來并不難笼恰，難的是缺乏資料踊沸，此文僅用來拋磚引玉，如有問題歡迎提出社证。
