前段时间接触了mui，于是便做了一个H5天气app。

1.预览

已经用HBuilder打包成app在手机运行。

分别对应春夏秋冬。

2.背景的实现

背景的实现依靠了两个div，HTML如下：

<div class="weather-cover"></div>
<div class="weather-content"></div>

其中，cover是季节壁纸（准备了春夏秋冬四张），其CSS如下：

.weather-cover {width: 100vw;height: 100vh;background: center no-repeat;background-size: 100% 100%; z-index: -10;
}.weather-cover-spring {background-image: url(../img/autumn.jpg);
}.weather-cover-summer {background-image: url(../img/summer.jpg);
}.weather-cover-autumn {background-image: url(../img/autumn.jpg);
}.weather-cover-winter {background-image: url(../img/winter.jpg);
}

从CSS代码就可以看出我是用哪个季节的背景就添加哪个className。那么怎么添加className呢？
很简单，根据月份来判断：

var currMonth = new Date().getMonth() + 1; //获取月份判断季节if (2 <= currMonth && currMonth <= 4) {$('.weather-cover')[0].className += " " +' weather-cover-spring';
} else if (5 <= currMonth && currMonth <= 7) {$('.weather-cover')[0].className += " " +' weather-cover-summer';
} else if (8 <= currMonth && currMonth <= 10) {$('.weather-cover')[0].className += " " +' weather-cover-autumn';
} else {$('.weather-cover')[0].className += " " +' weather-cover-winter';
}

背景的问题解决了，但是为了所有天气信息的直观显示（字体为白色），我为weather-content这个div设置了背景做蒙层：

.weather-content {width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.3);position: fixed;left: 0;top: 0;
}

3.沉浸式状态栏的设置

我只打包了安卓平台，所以只说安卓版本。

打开应用的manifest.json文件，切换到代码视图，在plus -> distribute -> google 下添加ImmersedStatusbar节点并设置值为true。

注意调试的时候是无效的，打包成app后安装运行是有效果的。

4.数据请求

天气信息使用了NOWApi，简单举例下：

mui.ajax({type:   'get',async:  'false',url: '',dataType: 'json',jsonp: 'callback',jsonpCallback: 'data',success: function (data) {//}
});

5.关于$函数

$并不是使用了jQuery，而是我自定义的一个简单函数，便于获取dom节点用的。

//自定义$
function $(name) {var obj;if (name.match(/^#/)) {obj = document.getElementById(name.substr(1));} else if (name.match(/^\./)) {obj = document.getElementsByClassName(name.substr(1));} else {obj = document.getElementsByTagName(name);}return obj;
}

6.源码地址

源码我放在了我的GitHub上，希望喜欢的小伙伴点个star吧。^_^

H5App-美丽天气相关推荐

到西藏工作，出差，旅行，出游，体验，好奇一切的一切，大全科绝对是经典教科书类，上面见不到的全面了解，西藏的生活
到西藏工作,出差,旅行,出游,体验,好奇一切的一切,大全科!!绝对是经典"教科书"类,上面见不到的!全面了解,西藏的生活水平,和注意事项,是去西藏,拉萨前的必读性文章. 因为全,所 ...
到西藏工作，出差，旅行，出游，体验，好奇一切的一切，大全科!!绝对是经典“教科书”类，上面见不到的!全面了解，西藏的生活水平，和注意事项，是去西藏，拉萨前的必读性文章。
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 到西藏工 ...
bars 除障句完整_2020年实用的治愈系晚安QQ问候语汇总75句
2020年实用的治愈系晚安QQ问候语汇总75句真正爱你的男人,不管你打他骂他叫他滚甚至说分手,他都会赖在你身边.因为他知道,没了他在,你会独自哭泣.晚安!以下是小编搜索整理的治愈系晚安问候语75句, ...
获取海岛预报、近海、旅游城市、美丽海岛、海水浴场预报包括海温、海浪等值根据海洋观测站点id获取3天海洋预报。雷达单站数据根据经纬度获取任意点的天气数据含分钟预报、小时预报，空气质量、生活指数、天气
今日新增至126,接口还在不断扩展更新中 qq群:305694703 史上最全天气数据接口包括环境.气象.预警.水文.预报.实况.格点,落区.等值面.雷达.云图.空气质量实况及预报.气候统计.雷电分布 ...
linux桌面天气,Ubuntu桌面美化：添加Gmail +天气预报插件[图文]
如果你希望你有新邮件时自动通知在您的Ubuntu桌面上,或者在任何时候都希望天气信息在您的Ubuntu桌面上?或者还希望有关你的硬件信息在您的桌面上?使你的Ubuntu桌面看起来美丽的雷人?那么请跟我 ...
十大迷你iPhone天气应用
为什么80%的码农都做不了架构师?>>> 日期:2013-8-2 来源:GBin1.com 天气特别是指大气情况这样的状态通常包括温度,风,云,湿度和降雨等.上述情况下的天气 ...
Python 分析天气，告诉你中秋应该去哪里
本文投稿自:萝卜大杂烩中秋佳节将近,不知道各位小伙伴儿有没有想好去哪里玩呢.不过说实在的,每到节假日,到处都是人山人海,那句"我动也不能动",还不时的出现在我的耳畔呢. 但是又说 ...
Live Wallpaper HD for Mac(天气动态壁纸软件)
Live Wallpaper HD for Mac是Mac平台上一款具有动态壁纸.详细天气预报.模拟时钟功能的天气动态壁纸软件,Live Wallpaper HD 中文破解版包含14张高清动态手机或电 ...
美丽的窗花java分形_美丽的窗花教案
我家住在白云山下上山的路口上,由于今年冬天天气寒冷,加上我家装的是双窗,室内外温差较大,在外层窗子玻璃上结了一层冰,形成了一种独特的美景,仿佛给我家窗子上贴上了美丽的窗花.旱上仔细观察,这层冰上有各种 ...
《当程序员的那些狗日日子》（六十一）美丽的天际
<当程序员的那些狗日日子>(六十一)美丽的天际注:这一篇之后,全文完结,后面还会再写一篇<后记>,以记录我在写作中的一些心情和感受,以及我想对各位支持和关注的朋友说的话. 我 ...

H5App-美丽天气