H5App-美丽天气

最新推荐文章于 2025-04-15 08:30:00 发布

原创最新推荐文章于 2025-04-15 08:30:00 发布 · 1w 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css #app #hbuilder

Web开发专栏收录该内容

16 篇文章

订阅专栏

本文介绍了使用HTML、CSS和HBuilder制作一个H5天气App的过程，包括预览效果、背景图片切换、沉浸式状态栏设置、数据请求及自定义$函数的使用，并提供了源码地址。

前段时间接触了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;
}