LOL前端重构规范

# 页面编码规范

注意

LOL端游页面编码统一使用gbk编码

<meta charset="gbk">

# LCU客户端规范

# 客户端设计规范

名称 说明 备注
页面尺寸 2110*1440 考虑到兼容问题，因此设计稿的尺寸为 2110*1440
可视访问 1055*720 默认的可视访问 (除好友列表之外的)
中英文字体 引用客户端内嵌字体 设计稿请使用微软雅黑
视频 webm、mp4 优先使用webm格式
使用透明视频时需注意视频编码格（vp9+alpha通道）

# 客户端页面规范

客户端加载load模块，引入客户端通信js并执行页面与客户端通信脚本（必须引入执行） 如未加载此js，页面在客户端侧无法运行。 由于客户端api的特殊性，在浏览器下是无法访问客户端的环境的。需要在客户端环境才可以体验，页面提交后可联系前端或者开发人员在客户端内验证。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="gbk">
<!-- 监测代码和禁止搜索收录 -->
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="tgtest-ignore" content="all,description,title,keywords">
<style>
.subnav{
    position: absolute;
    z-index: 100;
    top: 88px;
    left: 35px;
}
.loading {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background: url(//game.gtimg.cn/images/lol/act/a20230420tocpasss/loading.webp);
    -webkit-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
    background-size: cover;
    z-index: 990;
}
@keyframes spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}
</style>
</head>
<body>
    <div class="wrap">
    <!-- loading,图片预加载完成后显示主内容 -->
    <div id="loading" class="loading"></div>
    <div class="container">
        <div id="SubNavs" class="subnav"></div>
        <div id="content" class="content">
        <!-- 内容 -->
        </div>
    </div>
 </div>
<!-- 通用脚本、统计代码 -->
<script src="//js.aq.qq.com/js/aq_common.js"></script>
<script src="https://lol.qq.com/client/lcu/script-rclient-window-messenger.js"></script>
<script src="https://game.gtimg.cn/images/js/milo-next/latest/milo.gbk.min.js"></script>
<script src="https://lol.qq.com/client/lcu/js/subnav.js"></script>
<script src="https://game.gtimg.cn/images/js/plugin/report/atReport.js" charset="utf-8"></script>
<script>
    // 客户端通信load模块
    window.parent.postMessage({
    type: 'RClientWindowMessenger',
    messageType: 'rcp-fe-lol-home-loaded'
    },'*')

    var setSite={ //设置网站属性
            siteType:"a20230701xxx", //必填项:"os"代表是官网，如果不是，则填写actName例如a20160701xxx
            pageType:"index", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN,不支持点(.)、下划线(_)
            project:"ingame", //选填项:如果是官网模块则是必填;按照模块内容，填写固定的对应值;官网或微社区base;同人站doujin;赛事match;故事站story;文化站history;粉丝站fans;爆料站coming;论坛bbs;皮肤skin;默认other;
            ingame: true,
            autoClick: false,//是否自动上报按钮&a的点击。选填项：默认false。非必要不开启
            autoAreaStay: false,//是否自动上报dom中填写dt-areaid的区域停留时长。选填项：默认false。非必要不开启
        };
    if(typeof LOL_SEND_DATA_FN_AT == 'function'){LOL_SEND_DATA_FN_AT();};//千万不能忘记！
</script>
</body>
</html>

# 客户端API接口

# 商城购买

在页面中点击购买按钮，通过客户端的api事件，直接在打开客户端的商城模块，并定位到某款皮肤或者英雄、礼包

<a href="javascript:;" id="btn"  data-store-id="16015" data-store-type="CHAMPION_SKIN" data-store-page="skins">
  <span>打开商城英雄</span>
</a>

document.getElementById('btn').onclick = function () {
    var inventoryType = $(this).attr('data-item-type');
    var itemId = $(this).attr('data-item-id');
    var pageId = $(this).attr('data-page-id');
    RClientWindowMessenger.sendMessage({
      messageType: 'rcp-fe-lol-home-open-store',
      data: {
          inventoryType: inventoryType,
          itemId: itemId,
          page: pageId
      }
  });
}

# 配置说明

ID 类型 模块
英雄id CHAMPION 英雄（champions）
英雄道具包 （bundles_champions）
皮肤id CHAMPION_SKIN 皮肤（skins）
炫彩皮肤（chromas）
皮肤道具包（bundles_skins）
棋盘皮肤（tft_map_skins）
礼包id BUNDLES 无
无 BUNDLES
 战利品（hextech）
表情（emotes）
守卫（ward_skins）
图标（icons）
加成道具（ boosts）
符文页（runes）
道具包 （bundles_accessories）
  • 打开游戏商城的指定皮肤 则对应设置：data-item-type="CHAMPION_SKIN"、data-item-id="16015" 、data-page-id="skins"
<a href="javascript:;" id="btn" data-item-type="CHAMPION_SKIN" data-item-id="16015" data-page-id="skins"></a>
  • 打开游戏商城的指定英雄 则对应设置：data-item-type="CHAMPION"、data-item-id="16" 、data-page-id="champions"
<a href="javascript:;" id="btn" data-item-type="CHAMPION_SKIN" data-item-id="16015" data-page-id="skins"></a>
  • 打开游戏商城的指定礼包，礼包时可不填写pageid， 则对应设置：data-item-type="BUNDLES"、data-item-id="99900936" 、data-page-id=""
<a href="javascript:;" id="btn" data-item-type="BUNDLES" data-item-id="16015" data-page-id=""></a>

# 页面中购买

在页面中如需要在当前页面中直接购买单皮肤或单英雄的，可通过客户端的api事件直接在当前页面中直接完成购买 仅支持单皮肤和单英雄的购买

<a href="javascript:;" id="popSkin" >
  <span>当前购买皮肤或英雄</span>
</a>

document.getElementById('popSkin').onclick = function () {
    RClientWindowMessenger.sendMessage({
        messageType: 'rcp-fe-lol-home-open-paw',
        data: {
            inventoryType: 'CHAMPION_SKIN',//CHAMPION,CHAMPION_SKIN
            itemId: 22011 // 英雄id或皮肤id
        }
    });
};

# 英雄详情

在页面中如需查看某个英雄的详情或者皮肤，技能等，可通过客户端的api事件直接在打开客户端英雄详情介绍

<a href="javascript:;" id="openChampion">
  <span>打开英雄详情</span>
</a>

document.getElementById('openChampion').onclick = function () {
    RClientWindowMessenger.sendMessage({
        messageType: 'rcp-fe-lol-home-open-champion-details',
        data: {
            section:"overview",// "overview"（总览）, "abilities"（技能）, "skins"（皮肤）
            championId: 22 //英雄id
        }
    });
};

# 客户端弹出层

在页面中如需在客户端打开一个全屏弹出层可通过客户端的api事件，直接在打开客户端弹出层

<a href="javascript:;" id="openModal">
  <span>打开客户端弹出层</span>
</a>

 document.getElementById('openModal').onclick = function () {
    RClientWindowMessenger.sendMessage({
        messageType: 'rcp-fe-lol-home-open-full-page-modal',
        data: {
            url: url //打开的地址路径
        }
    });
};

# 客户端视频播放

在页面中点击视频播放，通过客户端的api事件，直接在打开客户端弹出层并且直接播放视频

<a href="javascript:;" id="openVideo">
  <span>打开视频播放</span>
</a>

 document.getElementById('openVideo').onclick = function () {
    RClientWindowMessenger.sendMessage({
        messageType: 'rcp-fe-lol-home-open-full-page-modal',
        data: {
            url: 'https://lol.qq.com/client/lcu/page/video.html?vid=z3031bawfwa' // vid 为腾讯视频vid
        }
    });
};

← 端游引导页模板 →