LOL前端重构规范

# 弹出层

TIP

特别注意：milo-next版本不兼容老版本的Dialog方法， TGDialogs需自行实现或进行修改相关的工具函数。 milo-next版本弹出层前端文档：https://ide.qq.com/milo/sdk/guide/tgdialog.html

<button onclick='TGDialogS("pop6");'>测试弹框</button>


<div class="dialog pop6" id="pop6" style="display:none">
    <div class="dia-con">
    </div>
    <a class="dia-close" href="javascript:closeDialog();" title="关闭">关闭</a>
</div>

function TGDialogS(e) {
    Milo.dialog.show({
        id: e,
        bgcolor: '#000', //背景色
        opacity: 70 // 透明度
    });
}
function closeDialog() {
    // Use the milo library to import the dialog component
    Milo.dialog.hide();
}

# eas数据统计

部分专题会有号码包统计上报的需求。

如不确定是否需要添加，请找内部产品同学确认是否有对按钮事件号码包的采集需要。

页面底部引入脚本：

<script src="//ossweb-img.qq.com/images/js/eas/eas.js "></script>

注意

引入前请检查是否已经加载过eas.js，例如milo.js中会加载eas.js

在需要上报的地方进行自定义埋点：

EAS.SendClick({ e_c: 'lol.a20210507yyb.videoplay', c_t: 4 });

参数说明：

名称 说明 备注
e_c 点击按钮事件的标识，填加活动标识前缀，避免跟其他活动冲突

标识前缀 + 自定义事件名称

命名举例：
活动地址为 lol.qq.com/a20200901xxx/，则标识前缀为lol.a20200901xxx
活动地址为 lpl.qq.com/a20201207xxx/，则标识前缀为lpl.a20201207xxx		 *必填
c_t 类型，默认为4即可 *必填

与PTT点击上报同时使用：

PTTSendClick('btn','order','预约');
EAS.SendClick({ e_c: 'lol.a20210507yyb.btnorder', c_t: 4 });

# 双端适配

  • 通过媒体查询的方式引入不同的样式文件，同时针对ie9以下进行条件注释：
<link rel="stylesheet" href="index.css" media="screen and (min-device-width: 1025px)">
<link rel="stylesheet" href="index-m.css" media="screen and (max-device-width: 1024px)">
<!--[if lt IE 9]><link rel="stylesheet" href="index.css"> <![endif]-->
  • 移动端建议使用vw + rem方式进行适配布局，但不是说限制只能用这种布局方式。vw的兼容情况

将以下代码写入移动端样式文件中（以宽度为750px的设计稿为例）：

html {
  font-size: 50px;/* 兼容不支持vw的系统 */
  font-size: 13.33333333vw;/* 7.5rem === 100vw */
}


@media (max-width: 1024px) {
  html,body {
    max-width: 1024px;
  }
}
  • 另外，提供一种适配方法，通过传入参数选择是rem适配或是通过动态生成target-densitydpi值进行适配，需放入页面头部head标签内：
<script>
  //mode  移动端的适配方式 按需 传参  目前只有两种 px和rem
  (function(win, doc, mode) {
    var std = 750;
    if(/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)) {
      var h = document.getElementsByTagName("head")[0];
      h.insertAdjacentHTML('beforeEnd', '<meta name="apple-mobile-web-app-capable" content="yes">');
      h.insertAdjacentHTML('beforeEnd', '<meta name="apple-mobile-web-app-status-bar-style" content="black">');
      h.insertAdjacentHTML('beforeEnd', '<meta name="format-detection" content="telephone=no">');
      h.insertAdjacentHTML('beforeEnd', '<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />');
      if(mode == 'px') {
        if (!win.addEventListener) return;
          var html=document.documentElement;
          function setFont()
          {
              function adaptVP(a){function c(){var c,d;return b.uWidth=a.uWidth?a.uWidth:750,b.dWidth=a.dWidth?a.dWidth:window.screen.width||window.screen.availWidth,b.ratio=window.devicePixelRatio?window.devicePixelRatio:1,b.userAgent=navigator.userAgent,b.bConsole=a.bConsole?a.bConsole:!1,a.mode?(b.mode=a.mode,void 0):(c=b.userAgent.match(/Android/i),c&&(b.mode="android-2.2",d=b.userAgent.match(/Android\s(\d+.\d+)/i),d&&(d=parseFloat(d[1])),2.2==d||2.3==d?b.mode="android-2.2":4.4>d?b.mode="android-dpi":d>=4.4&&(b.mode=b.dWidth>b.uWidth?"android-dpi":"android-scale")),void 0)}function d(){var e,f,g,h,c="",d=!1;switch(b.mode){case"apple":f=(window.screen.availWidth*b.ratio/b.uWidth)/b.ratio;c="width="+b.uWidth+",initial-scale="+f+",minimum-scale="+f+",maximum-scale="+f+",user-scalable=no";break;case"android-2.2":a.dWidth||(b.dWidth=2==b.ratio?720:1.5==b.ratio?480:1==b.ratio?375:.75==b.ratio?240:480),e=window.screen.width||window.screen.availWidth,375==e?b.dWidth=b.ratio*e:750>e&&(b.dWidth=e),b.mode="android-dpi",d=!0;case"android-dpi":f=160*b.uWidth/b.dWidth*b.ratio,c="target-densitydpi="+f+", width="+b.uWidth+", user-scalable=no",d&&(b.mode="android-2.2");break;case"android-scale":c="width="+b.uWidth+", user-scalable=no"}g=document.querySelector("meta[name='viewport']")||document.createElement("meta"),g.name="viewport",g.content=c,h=document.getElementsByTagName("head"),h.length>0&&h[0].appendChild(g)}function e(){var a="";for(key in b)a+=key+": "+b[key]+"; ";alert(a)}if(a){var b={uWidth:0,dWidth:0,ratio:1,mode:"apple",userAgent:null,bConsole:!1};c(),d(),b.bConsole&&e()}};adaptVP({uWidth:750});
          }
          win.addEventListener('resize',setFont,false)
          setFont();
      }
      else if(mode == 'rem') {
        var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function() {
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / std) + 'px';
          };
        if(!doc.addEventListener) return;
        recalc();
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
      }
    }
  })(window, document, 'px');
</script>

使用案例：https://lol.qq.com/act/a20190510battle/index.html

# PC端公共Top条

页面底部引入脚本：

<script src="//ossweb-img.qq.com/images/lol/title/lol.js"></script>

# 专题通用底部

适用于专题页面底部公共信息展示

提示

所有专题默认必须引入，如有特殊情况与内部前端同学沟通

# 使用示例

https://lol.qq.com/cguide/code/demo/footStyle.html

使用方式建议以下两种：

1.直接引用foot.js

<script src="//game.gtimg.cn/images/js/2018foot/foot.js"></script>
//在body标签内把页脚appendchild到文档流最底部

2.加个容器 id="afooter"，如果需要在特定位置插入底部内容，使用此方式

<div id="afooter"></div>
<script src="//game.gtimg.cn/images/js/2018foot/foot.js"></script>
//如果需要用其他标签包含页脚，请使用id="afooter"

# 默认样式

以下是一套默认样式，可直接拷贝到项目样式中使用

PC端：

#afooter {
  padding:30px 0;
  text-align:center;
  font-size:12px;
  line-height:20px;
  background-color:#000;
  color:#c0c0c0;
}
#afooter a,#afooter a:hover {
  color:#c0c0c0;
  text-decoration:none;
}

移动端：

#afooter {
  text-align:center;
  font-size:.2rem;/*根据适配方式调整*/
  padding:.3rem 0;/*根据适配方式调整*/
  line-height:1.5;
  background-color: #000;
  color:#c0c0c0;
}

# PC端宽度自适应

适用于需求人明确希望页面撑满浏览器宽度的专题页

// 屏幕自适应
if (!/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)) {
    // 只需要在PC端工作
    var adaptViewport = (function () {
        function detectIE() {
            var ua = window.navigator.userAgent;
            var msie = ua.match(/MSIE (\d+)/g);
            if (msie != null) {
            return parseInt(msie[0].match(/\d+/g)[0]);
            }
            // IE 11
            var trident = ua.indexOf('Trident/');
            if (trident > 0) {
                var rv = ua.indexOf('rv:');
                return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
            }
            return false;
        }
        var minWidth = 1400; // 最小宽度
        var maxWidth = 3400; // 最大宽度
        var designWidth = 1920; // 设计稿宽度
        var isFirefox = navigator.userAgent.indexOf("Firefox") != -1
        var ieVersion = detectIE();
        var zoom = 1;
        function resize(){
            // doc.clientWidth不包含滚动栏宽度
            var ww = document.documentElement.clientWidth || window.innerWidth;
            var realWid = Math.min(Math.max(ww, minWidth), maxWidth);
            zoom = realWid/designWidth;
            if (ieVersion && ieVersion < 9) { return; }
            // firefox不支持zoom. ie9,10,11 zoom表现奇怪
            if (isFirefox || ieVersion >= 9) {
            if (zoom !== 1) {
                if (!$('.wrapper').parent().hasClass('wrapper-scale')) {
                $('.wrapper').wrapper('<div class="wrapper-scale"></div>')
                $('.wrapper').data('originHeight', $('.wrapper').outerHeight())
                }
                var transformOrigin = '0% 0%';
                // 页面最外层容器缩放
                $('.wrapper').css({'width': designWidth,'transform':'scale('+zoom+')', 'transform-origin': transformOrigin, 'margin-left': 0})
                // 导航缩放
                if (zoom >= 1) {
                    $('.side_nav').css({ 'transform': 'scale(' + 1 / zoom + ')', 'transform-origin': '100% 50%' });
                } else {
                    $('.side_nav').css({ 'transform': 'scale(' + zoom + ')', 'transform-origin': '100% 50%' });

                }
            }
            } else {
                // 页面最外层容器缩放
                $('.wrapper').css({'width': designWidth, 'zoom': zoom});
                // 导航缩放
                if (zoom >= 1) {
                    $('.side_nav').css('zoom', 1 / zoom)
                } else {
                    $('.side_nav').css('zoom', zoom)

                }
            }
        }
        resize();
        window.onresize = resize;

        return { zoom: zoom}
    })();
}

# 配置说明

参数 说明
$('.wrapper') 页面主模块容器，一般为<body>的第一个子元素
$('.side_nav') 页面侧边导航容器，一般被包裹在$('.wrapper')中。因此页面放大时，侧边栏不要放大；页面缩小时，侧边栏增倍缩小
designWidth 设计稿中的页面标准宽度，一般为 1920
minWidth 缩放逻辑生效的最小宽度，默认为 1400
maxWidth 缩放逻辑生效的最大宽度，默认为 3400

← 工具/系统 →