QQ天气H5-前端完整解析
- 2019 年 12 月 4 日
- 筆記
本文作者：IMWeb coverguo 原文出处：IMWeb社区 未经同意，禁止转载
前言： 什么是手Q天气
手Q天气是在手Q 6.0版本以上新增的功能，页面会展现当天的气温情况，已经五天温度折线图以及24小时温度图表等。 并且为了更好的交互效果，天气页面会根据8种不同的天气信息，展现相应的天气动画。如下雨下雪，飘云，日光闪烁等动画效果。
在开发手Q天气的时候，学习到许多，发现有许多地方值得写一下。以下是我的总结。
一、REM整体布局
我们知道对于移动端来说，分辨率适配是个常见的问题，设计师往往给与我们的是iphone6（750px）的视觉稿。而对于天气页面来说采用REM来整体布局是个十分不错的选择。
rem 是什么
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。rem计算的规则是依赖根元素。
基本写法
如下面定义html的节点
/*定义html根元素字体大小*/ html{ font-size:10px; } /*定义子元素,采用rem作为单位*/ .sonDom { width: 6rem; /*相当于 6*10=60px*/ height: 3rem; /*相当于 3*10=30px*/ line-height: 3rem; /*相当于 3*10=30px*/ font-size: 1.2rem; /*相当于 1.2*10=12px*/ border-radius: .5rem; /*相当于0.5*10=5px*/ }
从上面可以看出，rem其实相当于一个划算单位
举个例子，我们平时理解的 1米=10分米=100厘米
同理可得： 1rem = 根元素font-size的值
这里一开始设置了 html根元素font-size为10px,即 1rem = 10px
通过上面的，我们可以得出
可以通过改变html的font-size的值而等比改变所有用了rem单位的元素。
而这个正是rem实现完美的分辨率适配的原理。
如何动态更改根元素font-size值
为了实现分辨率适配，我们需要用根据屏幕的大小动态去计算根元素的font-size的值 目前普遍的是两种方法：
1、通过媒体查询方式
通过媒体查询的方式，能够满足大部分场景，只需要把常用的屏幕宽度考虑进去即可
/*默认为20px*/ html { font-size : 20px; } /*判断宽度设置不同的html font-size值去覆盖默认值*/ @media only screen and (min-width: 320px){ html { font-size: 10px; } } @media only screen and (min-width: 375){ html { font-size: 16; } } @media only screen and (min-width: 414px){ html { font-size: 20px; } }
2、通过js设置
如果希望把所有屏幕大小给考虑进去，可以考虑使用js来计算（天气H5也是使用js来换算）,如下面的代码
//设置fontsize var doc = document, win = window; function initFontSize () { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; //window.innerWidth; if (!clientWidth) return; fontSizeRate = (clientWidth / 375); var baseFontSize = 15 * fontSizeRate; docEl.style.fontSize = baseFontSize + 'px'; }; recalc(); if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); };
rem换算
我们在开发的时候，往往不希望涉及到rem的换算，如一个设计稿按钮是120px，如果我们根节点font-size是14px, 计算 120/14=8.571rem。感觉还是挺麻烦得 而这些工作是可以通过sass等预处理器或者构建去完成
如下面 翔神写的fis插件
https://github.com/imweb/fis-parser-rem
效果图
如下面， rem的适配效果还是挺不错的
rem需注意点
在移动端使用rem的话，兼容性没问题的。但还是存在着一些需要注意的地方：
1、小数数值处理
不同浏览器计算rem转换为px数值时，对于小数点后的数值的处理是有所偏差，rem计算偏差的根源是浏览器内核数字类型的区别，如果浏览器的内核数字类型是float类型，能够较好地支持有小数点的数值。当浏览器内核数字类型是int类型，不支持小数点，会对数字进行四舍五入，这样就会有偏差。如果元素越大偏差得就越明显！
2、雪碧图rem
使用rem的同时又涉及到雪碧图时，由上面我们可以得知，rem的换算成px的尺寸非严格精确尺寸，如果雪碧图如果图标之间的距离过小，就可能导致图标过界，因此图与图之间的间隙需要留相应大一点。
3、单纯的rem没解决高度适配的问题。
单纯的rem没解决高度适配的问题，当然目前也没有特别多高度适配的场景，因此建议如果需要在使用rem基础上还做相应的高度适配，就要通过相应的js去辅助啦。
2、弹性盒子局部布局
我们发现，过去对于页面均分的布局时，我们比较常用下面的方式：
- 使用float浮动子元素的方法，但需要注意清除浮动
- 或者是设置子元素为inline-block,但需要注意设置子元素margin值
或许我们可以考虑下css3弹性盒子模型。
兼容性
让人惊喜的是目前的主流智能移动设备操作系统Android和ios的内嵌浏览器对其也有不错的支持。对移动开发来说这真是太美好了，至少对于不太喜欢使用float，padding的我来说是这样的。
手Q天气的使用
如下面这样的布局整个div分成5个部分，每个部分占据同样的宽度。
上面的html结构如下
通过弹性盒子模型，设置其css代码如下：
/*设置容器为盒子*/ .info-day-list { display: -webkit-box; padding: 1rem 0; } /*设置item*/ .info-day-item { -webkit-box-flex: 1; /*设置item占据的比例*/ width: 1%; font-size: 1.4rem; line-height: 3rem; text-align: center; }
通过上面，可以发现，弹性盒子将模块的所拥有的空间进行我们自定义比例去分配。上面每个item设置的 box-flex都为1，故其都有父容器剩余空间1比重的宽度。
需注意点
1、弹性盒子模型div块因为文字内容不同而不均分
在开发的时候，我发现在使用弹性盒子模型时，如果涉及到文字的时候需要注意
由于天气的描述文字长度不同，如西南风和微风，分别是三个字和两个字。会有不同的宽度而导致不均分
如上面css所示，我设置了子元素width为1%（只有设置了item是统一的width就行，不一定需要是1%）就可以解决这个问题
HTML5 canvas
我们可以看到在页面中带有温度折线图以及下雪下雨的动画，这个时候我们发现使用dom去绘制这样稍微复杂的动画时，性能并不好也不好操作。这时候我们可以考虑使用到HTML5的canvas画布去实现了。这样可规避渲染树的计算，使渲染更快
由于代码比较篇幅较长，这里只给最终生成效果哈。
折线图表
下雨下雪动画
效果如下, 发现使用canvas在绘制这些动画的时候，还是十分方便的。
具体实现可以看下面这个文章 – 前端如何呼风唤雨
canvas需注意点
1、canvas高清屏模糊
在绘制折线图的时候，我们发现，折线图在高清屏下十分模糊，这是为什么呢？
熟悉retina屏的同学应该都知道，在浏览器的window变量中有一个devicePixelRatio的属性，该属性决定了浏览器会用几个（通常是2个）像素点来渲染1个像素，举例来说，假设devicePixelRatio的值为2，一张100×100像素大小的图片，在retina屏幕下，会用2个像素点的宽度去渲染图片的1个像素点，因此该图片在retina屏幕上实际会占据200×200像素的空间，相当于图片被放大了一倍，因此图片会变得模糊。
因此我们的解决方案时：更加屏幕像素比devicePixelRatio的小同比方法canvas
如下面代码
//兼容高清屏幕，canvas画布像素也要相应改变 var c = document.getElementById("canvas"); //获取devicePixelRatio var DPR = window.devicePixelRatio;画布宽高 //同比设置画板宽高 c.width = = canvasWidth * DPR; c.height = canvasHeight * DPR;
2、内存占用
canvas对内存的消耗是挺大的，如非必要还是不要使用多个canvas
css3 transition animation
我们可以使用CSS3的transition和animation来实现许多交互效果。
使用transition实现滑动Slider
在天气内页有个星座slider，如下面
通过设置每个卡片的类名，使其切换不同的位置
.star-icon-outside-l { z-index: 20; -webkit-transform: translateX(-18.8rem) scale(.673); transform: translateX(-18.8rem) scale(.673); } .star-icon-outside-r { z-index: 20; -webkit-transform: translateX(8.5rem) scale(.673); transform: translateX(8.5rem) scale(.673); } .star-icon-beside-l { z-index: 40; -webkit-transform: translateX(-12.5rem) scale(.851); -webkit-transform: translateX(-12.5rem) scale(.851); } .star-icon-beside-r { z-index: 40; -webkit-transform: translateX(2.35rem) scale(.851); transform: translateX(2.35rem) scale(.851); } .star-icon-hide-l { z-index: 10; -webkit-transform: translateX(-25rem) scale(.673); transform: translateX(-25rem) scale(.673); } .star-icon-hide-r { z-index: 10; -webkit-transform: translateX(17rem) scale(.673); transform: translateX(17rem) scale(.673); } .star-icon-cur { z-index: 90; -webkit-transform: translateX(-5.05rem) scale(1); transform: translateX(-5.05rem) scale(1); }
animation循环动画
1、渐隐渐现
@-webkit-keyframes toggleShow { 0% { opacity: 0; } 11% { opacity: 0; } 12.5% { opacity: 1; } 20%{ opacity: 0; } 100%{ opacity: 0; } }
2、放大收缩
@-webkit-keyframes shine { 0% { -webkit-transform: scale(1,1); } 50% { -webkit-transform: scale(1.2,1.2); } 100% { -webkit-transform: scale(1,1); } }
3、飘动
@-webkit-keyframes moveToLeft /* Safari 和 Chrome */ { from {-webkit-transform: translate(0);} to {-webkit-transform: translate(-33.33333333%);} }
优化
我们知道，在移动端开发，性能和加载速度是十分重要的，这里我们就需要考虑所有前端能优化的点,做好了优化， 才能时你这个页面更好的展示。以下是相关的优化内容
基本动画优化
基本的动画优化，如使用transform的translate来代替left等位移操作 3D加速等，
合理使用RAF(requestAnimationFrame)
使用raf能解决脚本问题引起的丢帧，卡顿问题,并且支持中间状态监听
//首页判断是否可以使用requestAnimFrame来替换setTimeout window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(callback) { return window.setTimeout(callback, 1000 / 30); };
canvas优化
使用canvas实现下雨下雪效果，是通过一帧一帧地去重绘下落的雨滴或者雪花。这里雪花雨滴越多，对手机的性能要求就越高。
因此我们需要对不同的手机进行处理，对于一些稍微低端的手机进行一些降级处理和优化。 根据渲染情况，相应的减少雨滴和雪花的个数，减少渲染计算时间
//判断每次update的时间差，如果发现时间长过长，则相应地减少动画的最大雪花个数 if (new Date - lastTime > 30 && drops.length < OPTS.maxNum && OPTS.maxNum > 21) { OPTS.maxNum -= 10; }
内存优化
由于我们打开天气广告时，是新开一个webview的 因此我们需要暂停被遮住的天气webview的天气动画，减少内存消耗
if(mqq&&mqq.iOS&&mqq.addEventListener){ mqq.addEventListener("qbrowserVisibilityChange", function(e){ cancelAnimationFrame(drp_ticker); if(!e.hidden){ update(); } }); }
合理使用缓存
为了加快二次加载页面的速度，我们就需要使用好缓存。
天气的数据，都会用localstorage缓存起来
第二次短时间加载则会使用localstorage的数据，加快二次加载速度。
//判断是否有可用的缓存 if (checkCache('weather-local_weather_info')) { //有则使用缓存 Page.processData(local_weather_info); weather_info = local_weather_info; } else { //没有缓存则去请求 Vinda.getData('data-weatherInfo', function(data) { if (data && data.retcode == 0) { Page.processData(data); //将天气信息存储进来，新增时间戳，用于缓存新鲜度的判断 $.extend(data.result, { searchTime: +Date.now(), city: city }); //每次获取都会更新缓存 $S.save({ key: 'local_weather_info', value: data }); }); }
预加载
DNS预解析
我们可以通过dns 预解析prefetch，提前解析，减少dns请求时间
<link rel="dns-prefetch" href="//pub.idqqimg.com" />
CGI预加载
由于天气页面是强数据页面，对于cgi数据是强依赖的。因为提前预先加载cgi能够使我们更快地去渲染页面而不是等先拉取页面js再去执行页面js去请求cgi的这样的顺序。
代码优化
dom对象池复用
在天气内页有个星座slider，如下面
我们知道总共有12个星座，但我这里却只使用了7个dom（5个可见，2个分别是隐藏的），通过复用来实现循环的12个月。虽然这里并没有减少很多dom的数量，但我觉得dom对象池复用的思想能给多dom节点的的场景带来质的飞跃。
异步加载权重较低的模块
由于整个天气又有折线图，又有动画，又有下雨下雪等东西。因此我们需要对页面进行模块划分。每个部分都是一个模块 我i将天气页面大致分成下面几个模块
//页面总模块 var Page = {/**/}; //头部模块 var headerMod = {/**/}; //时间维度的温度变化图 var timeDegreeMod = {/**/}; //广告模块 var adsMod = {/**/}; //一周天气情况图 var detailMod = {/**/}; //天气动画模块 var AnimationMod ={/**/}
然后通过总模块去管理子模块，由于模块的划分，我们可以很轻松的根据页面展示权重和先后顺序，分别去渲染和异步加载相应的模块
var Page = { render: function(){ //渲染基本页面 headerMod.render(); timeDegreeMod.render(); detailMod.render(); //加载完天气信息才去加载广告； adsMod.getAds(); //由于权重较低，因此异步加载下雨下雪的动画部分组件 require.async('./setAnimation', function(AMod) { AnimationMod = AMod; AnimationMod.init(); }); } }
其余基本优化
雪碧图，文件合并等减少请求数
资源压缩，代码压缩减少请求体积。
内联css, js置后等渲染无阻塞
兼容点
在开发手Q天气时，还遇到下面一些需要兼容和注意的点：
ios 广点通app广告处理逻辑兼容
由于手Q天气涉及到广告，大部分广点通广告是只需要点击链接跳转就可以了
但有些广告由于是app广告,需要引导用户去下载，故在ios上则需要做些兼容。在ios手机需要通过以下判断，改为呼起app store下载页面
//判断是否为手Q打开且为ios且为app下载广告 var isIosAppAds = mqq.iOS && mqq.device.isMobileQQ() && producttype == 19; //如果是app ios 广告， //则jsonp请求广点通给的跳转链接,获取跳转appstore的tencent串 if (self.isIosAppAds) { $.ajax({ url: adsMod.jump_url, data: { acttype: 1, }, dataType: 'jsonp', success: function(o) { if (o && o.ret >= 0) { var data = o.data || {}; if (data.dstlink) { //通过手Q接口呼起app mqq.app.launchApp({ name: data.dstlink //self.dstlink }); } } } }); } else { //默认打开新webview即可 mqq.ui.openUrl({ url: adsMod.jump_url, target: 1, style: 0 }); }
X5内核兼容点
由于我们的场景是在手Q上打开，故需要兼容X5内核上的规范。
在X5 tbs.1x版本时，伪元素是不能做动画的。
在X5 tbs.1x版本时，不支持transition-timing-function 的ease-out曲线
目前了解，貌似到了X5 tbs.2x版本正在开始灰度支持。
更多x5上的问题，可以通过以下链接去查看QQ浏览器官网的 X5技术指南
非a标签跳转 bug
因为天气页面有许多跳转上报，需要先上报再跳转，然后我之前是这样写的
<div id="js-jump-xxx" onclick="reportAndJump();"></div>
但这样写发现在低版本的android机上，只能发起上报请求而不能进行链接跳转
后来经排查，发现低端android机只能使用a标签进行跳转操作
<a id="js-jump-xxx" onclick="reportAndJump();"></a>
不足
- 由于页面涉及到比较多的动画和canvas，故对内存的消耗比较高，这方面一直没有很好去解决低内存手机的内存消耗问题
- 页面动画渲染和代码仍需雕琢。当时刚入职，许多方面还是一知半解。故自我觉得仍然有许多可以优化的地方。。。
总结
QQ天气H5是我毕业来到腾讯的第一个独立开发的项目。虽然现在已经交接了。但我时不时都会去看下这个项目的动态和代码提交记录。QQ天气H5这个项目，让我在刚入职时学会了许多。虽然写得并不是很好啦。
