资源审核标准

PC端–milo登录

组件CDN:

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

代码示例:登录前的容器ID名为 unlogin、登录后的容器ID名为 logined,登录后用户信息ID名为 login_qq_span均不可修改。
DOM部分:

    <!--登录前状态 Start-->
    <div id="unlogin" class="login" style="display: block;">
        你好,请【<a id="btn_qqlogin" href="javascript:void(0)" title="QQ登录">QQ登录</a>】
       【<a id="btn_wxlogin" href="javascript:void(0);" title="微信登陆">微信登陆</a>】
       【<a id="btn_wxandqqlogin" href="javascript:void(0);" title="一体化登录">QQ微信一体化登录</a>】
     </div>
    <!--登录前状态 End-->
    <!--登录后状态 Start-->
    <div id="logined" class="login" style="display: none;">
        欢迎您,<span id="login_qq_span"></span> 
        <span id="ams_user_headimg"></span> 
       【<a id="btn_logout" href="javascript:void(0)" title="注销">注销</a>】
    </div>
    <!--登录后状态 End-->

JS部分:

 <script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
    <script>
        milo.ready(function () {
    need("biz.login",function(LoginManager){
        //QQ登录
        milo.addEvent(g('btn_qqlogin'),'click',function(e){
            LoginManager.login();
        });
        //微信登录
        milo.addEvent(g('btn_wxlogin'),'click',function(e){
            LoginManager.loginByWx({
                "appId":"xxxxxxx",  //游戏在微信的appid,联系内部
                gameDomain:"xxx.qq.com",
                serviceType:"xxx"
            });
        });

        //QQ微信一体化登录
        milo.addEvent(g("btn_wxandqqlogin"),"click",function(){
            LoginManager.loginByWXAndQQ({
                "appId":"xxxxxxx", //游戏在微信的appid
                gameDomain:"xxx.qq.com",
                serviceType:"xxx"
            },function(){
                alert("已登录,即将刷新页面");
                location.reload();
            });
        });

        //检查登录态
        milo.addEvent(g("checkLogin"),"click",function(){
            LoginManager.checkLogin(function(userInfo){
                g("loginInfobox").innerHTML="已登录:<br/>"+JSON.stringify(userInfo);
            },function(){
                g("loginInfobox").innerHTML="未登录";
            })
        })

        //注销
        milo.addEvent(g("btn_logout"),"click",function(){
            LoginManager.logout();
        })

        var chkLoginFunc=function(str){
            LoginManager.checkLogin(function(){
                console.log("已登录: "+str);
            },function(){
                console.log("未登录: "+str);
            })
        }
        //执行验证登陆操作
        LoginManager.checkLogin(function(userinfo){
            //此处返回用户的基本信息
            console.log("已登录:\n",userinfo);
            //如果登陆类型是qq,使用LoginManager.getUserFace方法去获取头像
            if (userinfo.logtype=="qq"){
                LoginManager.getUserFace(function(data){
                    $("#ams_user_headimg").html("<img src=\""+data.userFace+"\"> ");
                });
            }else if(userinfo.logtype=="wx"){
                //如果登陆类型是wx微信,就直接获取基本信息里的头像
                $("#ams_user_headimg").html("<img src=\""+userinfo.headimgurl+"/64\"> ");
            }

        },function(){
            console.log("未登录");
            //LoginManager.init();
        });
    });
});
</script>

iframe方式

视频点播:

<div id="video_container"></div>
<script type="text/javascript" src="//vm.gtimg.cn/tencentvideo/txp/js/iframe/api.js"></script>
<script>
    // 点播方式
    var player = new Txp.Player({
        containerId: 'video_container',
        width:800,
        height:600,        
        vid: '点播ID',
        autoplay:false,
        mini:false  //是否使用迷你皮肤
    });
</script>



视频直播:

<div id="video_container"></div>
<script type="text/javascript" src="//vm.gtimg.cn/tencentvideo/txp/js/iframe/api.js"></script>
<script>
    // 直播方式
    var player = new Txp.LivePlayer({
        containerId: 'video_container',
        vid: '直播ID',
        width:800,
        height:600,
        autoplay:false,
        livepid: '',    
    });
</script>


JS方式

视频点播:

<div id="container"></div>
<!-- 使用相对协议,同时支持http和https -->
<script src='//vm.gtimg.cn/tencentvideo/txp/js/txplayer.js'></script>
<script>
    var player = new Txplayer({
        containerId: '点播容器dom的ID',
        vid: '点播vid',
        width: '600',
        height: '400',
        autoplay: true
    });
</script>



视频直播:

<script src="//ossweb-img.qq.com/images/js/jquery/jquery-1.11.3.min.js"></script>
<script src="//vm.gtimg.cn/tencentvideo/txvlive/2017/txvlive.js"></script>
<script>
    var config = {
        containerId: '直播容器dom的ID',
        vid: '直播ID',
        livepid: '',
        width: '670',
        height: '377',
        autoplay: true
        };
    var player = new TxvLive(config);
    player.on('ready', function () {
    //准备完成开始播放
    });
</script>



API:

player.play(); //播放视频,可用作无刷新切换

// 播放视频对象参数

player.play({vid: 'xxx', autoplay: true})

// 播放视频vid 字符串参数

player.play('xxx')

player.pause(); //暂停视频

player.togglePlayPause(); //暂停或播放视频

player.seekTo( Number::time ) //跳到指定时间点播放

player.getPlayerState() //获取视频播放状态(-1(未开始)、0(已结束)、1(正在播放)、2(已暂停)、3(正在缓冲))

player.mute(); //静音

player.unMute();//取消静音

player.setPoster(String::url); //设置封面图


H5端–millo登录

组件CDN:

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



代码示例:登录前的容器ID名为 unlogin、登录后的容器ID名为 logined,登录后用户信息ID名为 login_qq_span均不可修改。

DOM部分:

<!-- 登录信息 -->
<div id="ams_loginbar">
    <div id="unlogin">
        你好,请<a id="ptLoginBtn" href="javascript:;" style="cursor: pointer;">[QQ登录]</a>
        <a id="wxloginBtn" href="javascript:void(0);">[微信登录]</a>
    </div>
    <div id="logined" style="display: none;">
        <span>欢迎您,</span>
        <span id="userinfo">1079682165</span>

        【<a id="ptLogoutBtn" href="javascript:;" style="cursor: pointer;">注销</a>】
    </div>
</div>

JS部分:

<script src="//ossweb-img.qq.com/images/js/mobile_bundle/milo.js"></script>
<script>
milo.ready(function () {
        need("biz.login", function (LoginManager) {
            LoginManager.init({
                appConfig: {
                    "avoidConflict":"false",//默认值为空,判断是否需要校验微信登录态串号,设为true,为必须校验,设为false,为不校验,默认值""表示在微信环境下校验,其它app环境下不校验
                    "QQBrowserAppId": "xxx",  //在QQ浏览器端申请的APPID,联系内部同学
                    "WxAppId"       : "xxxxxxxxxxx",  //需要在微信申请openLink权限,联系内部同学
                    "AppName"       : "业务的中文名称",  //业务的中文名称
                    "scope"         : "snsapi_base",   //默认是 snsapi_base 静默授权,如果游戏无静默权限,就需要手动改成 snsapi_userinfo
                    "LogoUrl"       : "//ossweb-img.qq.com/images/feiji/web201507/logo.png"   //业务在授权时需要显示的正方形标准Logo,图片要求:尺寸:100x100px
                }
            });

            //QQ登录
            milo.addEvent(g('ptLoginBtn'), 'click', function (e) {
                LoginManager.login();
            });

            //微信登录
            milo.addEvent(g('wxloginBtn'), 'click', function (e) {
                LoginManager.loginByWX();
            });

            //检查登录态
            LoginManager.checkLogin(function(userInfo){
                console.log("已登录");
                console.log("登录信息:",userInfo);
            },function(){
                console.log("未登录");
            });
            //注销
            milo.addEvent(g("ptLogoutBtn"),"click",function(){
                LoginManager.logout(
                    {
                        logoutCallback:function(){
                            alert("已注销");
                        }
                    }
                );
            })

        });

    });
</script>

交互体验

保证交互逻辑能正常使用,如:(包含但不限于只有这些)

弹窗:正常打开、关闭,有一定的过渡动效。

弹层:内嵌弹层页面正常显示、关闭,有一定的过渡动效。

Tab内容:Tab内容能正确切换、展示。有一定的过渡动效。

导航条:导航条定位准确,有过渡效果。

页面内容

文案:检查文案是否正确,避免设计师输入和重构师输入错误。

配图:检查页面中图片是否正确使用,确保使用的内容正确、合理。

活动规则:确保活动规则及活动时间等内容正确。

通用头/脚步:确保通用头/脚步组件正确引用,相关信息正确展示。

rem适配

设置viewport:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">



初始字号:在css中设置html根字体大小,如:

html{font-size: 13.3333vw} //采用Rem布局,当前值以750px设计稿为基础


750px设计稿:font-size值为13.33333vw
1080px设计稿:则font-size值为9.259259vw


单位转换:在css中html里设置好根字体大小后,只需将所有设计稿的的元素大小全除以100即可换成rem单位,如:

.my-invite-box{
	width: 7.13rem;  //713px
	height: 3.56rem; //356px
	margin-left: -3.565rem;  //-356.5px
}

温馨提示:rem是一种适配方式,但并不仅限于rem方式。无论用何种方式,需要保证在不同比例、不同尺寸的上级上,测试微信、手Q、safari、UC等主流浏览器无明显错误、变形。

H5视频参数

格式:mp4

编码:H.264(AVC>)

编码工具:x264

码率:950≤x≤1350kbps

帧率:推荐24fps

编码配置:main

编码等级:4.1

编码方式:平均码率+二次码率

音频格式:AAC

音频码率:≤128kbps

音频采样率:44.4kHz

字体设置

PC端:通常使用微软雅黑作为中文字体进行设计

H5端:因IOS、Android等系统差异,建议使用移动端系统默认字体进行设置

特殊字体:如需求中有特殊字体或者图标,则使用Web字体进行设置。请使用字蛛+进行字体提取压缩

PV统计

需要在页面底部添加PTT统计代码,如:

<script src="//ossweb-img.qq.com/images/js/PTT/ping_tcss_tgideas_https_min.js"></script>
<script>
//此段代码不能放到外链JS中,
var setSite={ //设置网站属性 
    siteType:"a20160711xxx", //必填项:"os"代表是官网,如果不是,则填写actName例如a20160701xxx
    pageType:"index", //必填项:本页面的定位;按照页面含义填写例如main||list||detail||download||share||page1||pageN,不支持点(.)、下划线(_)
    pageName:"首页", //必填项:页面中文名 
    project:"other", //选填项:如果是官网模块则是必填;按照模块内容,填写固定的对应值;官网微社区base;同人站doujin;赛事match;故事站story;文化站history;粉丝站fans;爆料站coming;论坛bbs;皮肤skin;默认other;
    osact:0 //选填项:默认是0。osact=0表示非官网专题;osact=pc表示pc官网/pc官网专题;osact=m表示移动官网/移动官网专题;osact=ingame表示微社区/微社区专题
};
if(typeof(pgvMain)=='function')pgvMain();//千万不能忘记!
</script>

曝光埋点

用来统计官网的模块的曝光量和模块点击:

PC端和H5端用法一样;在官网模块dom结构上添加 exposure-tag=”英文名,中文解释” 属性及值,如:

<div class="news" exposure-tag="英文名,中文解释"></div>
<!-- 例如: -->
<div class="news" exposure-tag="news,新闻"></div>

按钮上报

PC端:

<!-- 开始游戏 -->
<a href="#" onclick="PTTSendClick('btn','start','开始游戏');">开始游戏</a>
<!-- 分享给朋友 -->
<a href="#" onclick="PTTSendClick('btn','share','分享');">分享给朋友</a>
<!-- 预约-->
<a href="#" onclick="PTTSendClick('btn','order','预约');">预约</a>
<!-- 下载游戏 -->
<a href="#" onclick="PTTSendClick('btn','download','下载游戏');">下载游戏</a>
<!-- 视频播放 -->
<a href="#" onclick="PTTSendClick('btn','playvideo','播放视频');">播放视频</a>

H5端:

<a href="javascript:;" id="btnStart">开始游戏</a>
<script src="//ossweb-img.qq.com/images/js/mobile_build/util/zepto.js"></script>
<script>
    $("#btnStart").tap(function(){
        PTTSendClick('btn','start','开始游戏');
    });
</script>

专题创建

专题命名:专题文件夹的命名为:a+年月日+专题英文或拼音小写简写,如:a20200320lol

文件命名:html首页文件必须命名为”index”,文件名禁止特殊字符。统一使用英文小写

通用头尾部:公共头部组件JS,

<script src=”//cdn.tgp.qq.com/wegame/header/js/init.js”>


公共尾部组件JS,

<script src=”//game.gtimg.cn/images/js/2018foot/foot.js”>



Meta使用:统一使用运营活动Meta,注意区分PC和H5端,如:

<meta charset="gbk" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="all">
<meta name="author" content="Tencent-CP" />
<meta name="Copyright" content="Tencent" />
<meta name="Description" content="页面的描述内容" />
<meta name="Keywords" content="页面关键字" />

Html协议

http协议:引用http或https地址时,需要补全http协议信息,如:

<style>
//CSS背景图片 
.bg{background: url(//game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;}
</style>
//链接URL
<a href="//cf.qq.com/main.shtml">进入官网</a>
//图片SRC
<img src="//game.gtimg.cn/images/cf/web201610/logo.png">
//JS链接
<script src="//ossweb-img.qq.com/images/js/title.js"></script>

TDK

页面标题:页面名称-产品中文全称-WeGame,如:

<title>WeGame游戏商店 - 发现更大的游戏世界</title>



页面关键字:为产品名、专题名、专题相关名,之间用英文半角逗号隔开,如:

<meta name="keywords" content="WeGame,游戏商店,WeGame平台,游戏发行,游戏平台,游戏评测,单机游戏,游戏购买,游戏下载,腾讯游戏平台,游戏助手,游戏加速,LOL助手,LOL官方盒子,CF助手,DNF助手,免费网络加速">



页面描述:不超过120字,描述内容要和页面内容相关,如:

<meta name="description" content="WeGame游戏商店,致力于发现全球好游戏,提供游戏资讯、购买、下载、助手、直播和社区等一站式游戏服务,满足优质汉化、社交互动、稳定国服等更贴心的本地化需求,同时连接全球开发者与游戏玩家,构筑玩家与开发者的沟通桥梁。">


CSS

样式命名:使用标准、通用的英文单词进行命名,全部使用小写,遵循BEM规则,如:

.wrap{}                    //外层容器
.mod-box{}                 //模块容器
.btn-start{}               //开始按钮
.btn-download-ios          //IOS下载按钮
.btn-download-andriod      //安卓下载按钮
.btn-head-nav1             //头部导航链接按钮
.btn-news-more             //更多新闻按钮
.btn-play                  //播放视频按钮
.side-nav{}                //侧栏导航

选择器层级:禁止使用层级过深的选择器,最多3级,如:

正确示范:

.hot-game .hot-game-user-name{}

错误示范:

.page-lol .hot-game .hot-game-hd .hot-game-user-box .hot-game-user-name{}



使用Class进行定义:除非有特定的功能、组件要求等,禁止使用id来定义元素样式

禁止对纯元素选择器设置特定样式:错误示范:

a{background: url("xxx");}