腾讯动漫CP H5活动重构稿规范V2.1

腾讯动漫
CP

代码规范

地址：https://ac.qq.com/event/CPGuide/index.html

设计稿尺寸

使用Iphone6的尺寸作为标准，750px * 1254px，以下涉及到切图，压缩图片都以此尺寸的设计稿为准

通用模板

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="gray">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!--QQ浏览器私有meta begin-->
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-page-mode" content="app">
    <!--QQ浏览器私有meta end-->

    <!--UC浏览器私有mete begin-->
    <meta name="full-screen" content="yes">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <!--UC浏览器私有mete end-->

    <!--APP化meta begin-->

    <!-- 设置缓存 -->
    <meta http-equiv="Cache-Control" content="no-cache"/>

    <!--顶部状态栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!--APP化meta end-->
    
     <!--手Q分享信息 begin-->
     <!--注意，这里的分享信息有可能需要替换，并且需要和js设置的分享信息一致,图片size推荐200*200-->
    <meta itemprop="name" content="腾讯动漫"/>
    <meta itemprop="image" content="https:#link(images/share.png)"/><!--这里的#link写法保留，用于腾讯动漫H5活动上线使用，分享图片按照相对地址替换即可-->
    <meta name="description" itemprop="description" content="中国最大最权威的正版动漫网站"/>
    <!--手Q分享信息 end-->
    
    <link href="css/common.css" rel="stylesheet">
    
    <title>XXXXXXXXX</title>
</head>
<body>
    <!--body内容-->
</body>

<script type="text/javascript" src="https://gtimg.ac.qq.com/hd/CPGuide/js/zepto.min.js"></script>
<!-- 腾讯动漫分享信息设置以及PV/UV统计 begin -->
<script type="text/javascript" src="https://gtimg.ac.qq.com/hd/CPGuide/js/easy-kit.min.js"></script>
<script type="text/javascript">

(function (window) {

    var ek = window['ek'] || {};

    ek.share.setShare({
        link: window.location.href,
        img_url: $('meta[itemprop="image"]').attr('content'),
        title: $('meta[itemprop="name"]').attr('content'),
        desc: $('meta[itemprop="description"]').attr('content'),
        callback: function (res) {
            //只有在腾讯动漫APP内的分享能够调用此回调函数
            if (res == 1 && ek.isApp) {
                // 在腾讯动漫APP内分享成功之后处理
            }
        }
    });

    //统计PV,UV,下载统计次数
    ek.ping.init({
        //如果存在下载按钮，androidAppUrl需要找需求方提供重新配置，iOSAppUrl不需要修改
        androidAppUrl: 'http://mobile.ac.qq.com/apkSet/qqcomic_android_dm2309.apk',
        iOSAppUrl: 'https://itunes.apple.com/us/app/teng-xun-wei-man/id569387346?ls=1&mt=8',
        downAppTag: function () {
            // 根据活动名称生成下载的按键统计标记
            // 存在下载按钮的时候，‘eventName’替换为当前活动名称（英文）
            return ek.ping.getDownAppTag('eventName');
        },
        // 初始化完毕后上报页面访问URL（保持默认值，不需要修改）
        reportVisit: true
    });

})(window);

</script>
<!-- 腾讯动漫分享信息设置以及PV/UV统计 end -->

</html>

css引入方式

统一使用外链CSS文件方法，例如：

  <link type="text/css" rel="stylesheet" href="css/xxxx.css">

reset.css示例

可以直接引用，推荐使用reset.sass方便适配

@charset "UTF-8";
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, sub, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  -webkit-text-size-adjust: none; }

html, body {
  width: 100%;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; }

body {
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  -webkit-font-smoothing: antialiased; }

a {
  text-decoration: none;
  /* 去除默认下划线 */ }
  a:focus {
    outline: thin dotted;
    /* 处理“outline”在Chrome浏览器中和其它浏览器之间的不一致 */ }
  a:active, a:hover {
    outline: 0;
    color: inherit; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

ul, li, ol {
  list-style-type: none; }

/*用于rem作为单位在各个屏幕上的适配*/
@media screen and (min-width: 320px) {
  html {
    font-size: 14px; } }
@media screen and (min-width: 360px) {
  html {
    font-size: 16px; } }
@media screen and (min-width: 375px) {
  html {
    font-size: 16.5px; } }
@media screen and (min-width: 414px) {
  html {
    font-size: 18px; } }

reset.sass

推荐使用sass文件

@charset "utf-8";
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, sub, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  -webkit-text-size-adjust: none;
}

html, body {
  width: 100%;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  -webkit-font-smoothing: antialiased;
  //-webkit-overflow-scrolling: touch;
}

a {
  text-decoration: none; /* 去除默认下划线 */
  &:focus {
    outline: thin dotted; /* 处理“outline”在Chrome浏览器中和其它浏览器之间的不一致 */
  }
  &:active, &:hover {
    outline: 0;
    color: inherit;
  }
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

ul, li, ol {
  list-style-type: none;
}

//设置基本文字大小和px变化rem函数
$defaultFontSize: 16px !default;

html {
  @media screen and (min-width: 320px) {
    font-size: 14px;
  }

  @media screen and (min-width: 360px) {
    font-size: $defaultFontSize;
  }

  @media screen and (min-width: 375px) {
    font-size: 16.5px;
  }

  @media screen and (min-width: 414px) {
    font-size: 18px;
  }

}

@function px2rem($px) {
  @return (($px / $defaultFontSize) / 2) * 1rem;
}

js引用方式

统一使用外部引用

<script type="text/javascript" src="js/comicInfo.js"></script>

相关方法说明（按需使用）

组件地址：https://gtimg.ac.qq.com/hd/CPGuide/js/easy-kit.min.js

<script type='text/javascript' src='https://gtimg.ac.qq.com/hd/CPGuide/js/easy-kit.min.js'></script>
<script type="text/javascript">
// 需要直接调出客户端的分享菜单（只在腾讯动漫APP客户端内有效）
H5.share.appShare();

// 需要统计按钮统计 eventName 替换为活动名称（英文）、benName 替换为按钮的id
ek.ping.reportClick('event.'+'eventName'+'.'+'btnName');

// 针对是否在腾讯动漫APP内的判断
if(ek.isApp) {
    //在腾讯动漫APP(安卓+iOS)内执行的操作
}
if(ek.isAndroid){
    //在腾讯动漫APP（安卓）内执行的操作
}
if(ek.isIOS){
    //在腾讯动漫APP（iOS）内执行的操作
}
</script>

注意事项

分享图片地址需要进行地址转换，格式为 https://gtimg.ac.qq.com/hd/CPGuide/images/share.png?v=3ea5698dddf7ecee,其中‘images/share.png’的路径是相对路径，从当前文件开始计算，路径格式和普通html，css，js是一致的，比如：

<!--在同一个html文件下，js同理,直接计算相对路径，引用的图片为images下的share.png图片-->
<!--通过html引用 地址为 'images/share.png'-->
<img src='images/share.png'>
<!--通过#link引用 地址为 'images/share.png'，和<img> 引用的是同意张图-->
 img_url: "https://gtimg.ac.qq.com/hd/CPGuide/images/share.png?v=3ea5698dddf7ecee"

文件规范

文件编码

  1. 文件编码格式统一使用utf-8

文件目录

  1. 存放图片文件夹命名规范：images

  2. CSS文件夹命名规范：css（包含所有css）

  3. JS文件夹命名：js（包含所有js）

  4. html文件全部放置于根目录下

文件命名

  1. HTML文件命名：xxx.html（注意后缀为.html）

  2. 所有文件名统一使用小写开头的驼峰命名法（例子：thisIsName.html）

资源规范

图片

  1. 单张图片体积不能超过200K，图片格式包括.jpg/.gif/.png

  2. 图片资源需要压缩，.JPG压缩到50%，.png使用tinyPng压缩 https://tinypng.com/

  3. 详情页平均单页资源不超过300kb，总资源包大小不超过页数乘以300KB（不包括视频资源）

  4. 单张图片尺寸不超过2000*2000像素，超出时需要切分成多张雪碧图

  5. 图片资源综合超过500KB的页面需要有loading界面，loading界面图片资源不得超过150KB

背景音乐

  1. 格式：mp3

  2. 大小：小于80KB

  3. 建议：开头结尾音轨淡入淡出处理

视频

  1. 格式：mov/mp4/avi

  2. 大小：暂无要求

  3. 建议：分辨率>=960*540像素，视频码率>=1500KBps，画面比例4:3或16：9

兼容目标

  1. 主流移动设备：Iphone4+，三星，魅族，华为，红米，小米1s以上及主流安卓千元机型

  2. 操作系统：iOS7.0+与Android4.0+

  3. 需要特别注意页面能否在微信，手Q，腾讯动漫APP正常显示