LOL前端重构规范

# 客户端API接口

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

<script src="https://lol.qq.com/client/lcu/script-rclient-window-messenger.js"></script>
<script>
window.parent.postMessage({
   type: 'RClientWindowMessenger',
   messageType: 'rcp-fe-lol-home-loaded'
 },'*')
</script>

# 商城购买

在页面中点击购买按钮，通过客户端的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
        }
    });
};

← 移动端分享 →