1.优化方向:优化子域空间,去除新建子域工程,改用原生开发子域排行榜等信息。
优化之前, 子域包体在800kb以上,视资源大小而定。
优化之后,将减少子域包体大小,缩减至100kb左右,可能更小。视子域内包含资源大小而定。
2.优化方案:在主包之中,需要用到子域功能的组件上,挂载子域组件。代码中,通过消息传递形 式,传递给子域脚本,进行原生canvas绘画渲染。
3.工程目录示例:
4.脚本代码示例
let Consts = {
OpenDataKeys: {
ScoreKey: "xScore", // 存储在微信云端的分数数据字段
},
DomainAction: { //对应主域的消息字段
//上传新分数
UpdateScore: "UpdateScore",
//打开好友排行榜
FriendRank: "FriendRank",
updateMaxScore: "updateMaxScore",
song: "song", //>-1
best: 'best', //>-1
showList: 'showList',
updateLast: 'updateLast',
showLast: 'showLast',
showRank: 'showRank',
showRankLeft: 'showRankLeft',
showRankRight: 'showRankRight',
overNext: 'overNext', //>-1
showBattle: 'showBattle',
showBattleLeft: 'showBattleLeft',
showBattleRight: 'showBattleRight',
getBattleData: 'getBattleData',
},
}
const PAGE_SIZE = 5;
const ITEM_HEIGHT = 107;
/**
* 从高到低排序函数
* @param {存储在微信云端的数据} gameDatas
* @param {依照本字段进行排序} field
*/
const dataSorter = (gameDatas, field = Consts.OpenDataKeys.ScoreKey) => {
return gameDatas.sort((a, b) => {
const kvDataA = a.KVDataList.find(kvData => kvData.key === Consts.OpenDataKeys.ScoreKey);
const kvDataB = b.KVDataList.find(kvData => kvData.key === Consts.OpenDataKeys.ScoreKey);
const gradeA = kvDataA ? parseInt(kvDataA.value || 0) : 0;
const gradeB = kvDataB ? parseInt(kvDataB.value || 0) : 0;
return gradeA > gradeB ? -1 : gradeA < gradeB ? 1 : 0;
});
}
function compare(val1, val2) {
// console.log(val2.nickname+":"+val2.KVDataList[0].value+"========="+val1.nickname+":"+val1.KVDataList[0].value+"result:"+(val2.KVDataList[0].value-val1.KVDataList[0].value));
if (val1.KVDataList[0].value == undefined) {
val1.KVDataList[0].value = 0;
}
return val2.KVDataList[0].value - val1.KVDataList[0].value;
}
function compareBattle(val1, val2) {
// console.log(val2.nickname+":"+val2.KVDataList[0].value+"========="+val1.nickname+":"+val1.KVDataList[0].value+"result:"+(val2.KVDataList[0].value-val1.KVDataList[0].value));
return val2.level - val1.level;
}
class RankListRenderer {
constructor() {
this.totalPage = 0;
this.currPage = 0;
this.gameDatas = []; //https://developers.weixin.qq.com/minigame/dev/document/open-api/data/UserGameData.html
this.init();
}
init() {
this.canvas = swan.getSharedCanvas();
this.ctx = this.canvas.getContext('2d');
this.ctx.imageSmoothingEnabled = true;
this.ctx.imageSmoothingQuality = "high";
}
listen() {
//监听主域发来的消息
//msg -> {action, data}
swan.onMessage(msg => {
console.log("ranklist swan.onMessage", msg);
switch (msg.message) {
case Consts.DomainAction.FriendRank:
this.fetchFriendData();
break;
case Consts.DomainAction.UpdateScore:
this.updateScore(parseInt(msg.score));
break;
case Consts.DomainAction.showRank:
// this.fetchFriendData();
this.showRank();
break;
case Consts.DomainAction.showRankLeft:
this.updatePage('left', 'GK');
break;
case Consts.DomainAction.showRankRight:
this.updatePage('right', 'GK');
break;
case Consts.DomainAction.showBattle:
this.showBattleRank();
break;
case Consts.DomainAction.showBattleLeft:
this.updatePage('left', 'PW');
break;
case Consts.DomainAction.showBattleRight:
this.updatePage('right', 'PW');
break;
case Consts.DomainAction.getBattleData:
// this.showBattleRank();
break;
case Consts.DomainActi