通过本章节你能学到那些？
1、moment.js 使用（分白天和夜晚2种场景）
2、indexOf（根据天气字段分割成多种天气场景）
3、vue 组件（组件传值等）
4、css3（动画，绘制云朵、落雪等）
moment.js使用（分白天和夜晚2种场景）
moment.js详细使用教程：
moment.js日期时间管理的常用方法详细教程
这里我们只需要获取当前时间，是白天还是夜晚就可以了，所以可以很简单的处理(获取当前小时，判断所处范围即可)：
dayOrNight() {
let hour = moment().hour();
// 白天
if (hour >= 6 && hour < 18) {
return 1
} else { // 夜间
return 0
}
}
如果不用moment.js，原生js怎么处理呢？
var day = new Date();
var hours = day.getHours();
console.log(hours);
// 输出当前小时
那Date对象还有那些方法呢？方法非常多，这里就简单介绍非常常用的几个方法：
(1)、getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
(2)、getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
(3)、getFullYear() 从 Date 对象以四位数字返回年份。
(4)、getHours() 返回 Date 对象的小时 (0 ~ 23)。
(5)、getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
(6)、getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
(7)、getMonth() 从 Date 对象返回月份 (0 ~ 11)。
(8)、getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
(9)、getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
…
…
更多Date对象方法，请点击：
JavaScript中Date对象的那些事儿
这里，我们获取到当前时间是白天或者夜晚后，直接根据变量，添加class选择器，根据选择器设置不同背景图片即可。
<div :class="{night: !dayOrNight}"></div>
indexOf（根据天气字段分割成多种天气场景）
这是高德天气api返回给我们的天气数据，我们可以取到weater（多云）字段，根据它，来分割成多种场景。
weatherNum() {
let str = ['', '晴', '多云', '阴', '雨', '雷', '雪']
if (this.timeWeather.weather) { // 当前城市获取的天气
let scene = 0;
str.forEach((item, index) => {
if(this.timeWeather.weather.indexOf(item) > -1){
scene = index;
}
})
return scene
}
return 0
}
我们把天气简单的分成，晴、多云、阴、雨、雷、雪，简单的6个场景，如果觉得不够全面，可以根据高德提供的天气枚举，做的更详尽，这里只是简单举例。
weatherNum就是我们根据天气分配不同场景的依据。
vue 组件（组件传值等）
我们在根目录新建/components/scene.vue，/components/scene目录（存放具体的场景）
<!-- /components/scene.vue -->
<template>
<view class="scene">
<default-scend v-if="weather==0" :dayOrNight="dayOrNight"></default-scend>
<sun v-else-if="weather==1" :dayOrNight="dayOrNight"></sun>
<cloud v-else-if="weather==2 || weather==3" :dayOrNight="dayOrNight"></cloud>
<rain v-else-if="weather==4"></rain>
<thunder v-else-if="weather==5"></thunder>
<snow v-else-if="weather==6"></snow>
</view>
</template>
<script>
import defaultScend from './scene/default.vue'
import rain from './scene/rain.vue'
import sun from './scene/sun.vue'
import cloud from './scene/cloud.vue'
import thunder from './scene/thunder.vue'
import snow from './scene/snow.vue'
export default {
props: {
weather: {
type: [String, Number],
default: 0
},
dayOrNight: {
type: [String, Number],
default: 1
}
},
components: {
defaultScend,
rain,
sun,
cloud,
thunder,
snow
},
data() {
return {
};
}
}
</script>
8种vue组件通信方式详细解析实例
总有你能用上的插件（vue插件总结）
css3（动画，绘制云朵、落雪等）
css3 云朵（scss语法）
.cloudy {
background: #FFFFFF;
border-radius: 50%;
height: 50upx;
width: 50upx;
margin-left: -60upx;
box-shadow:
#FFFFFF 65upx -15upx 0 -5upx,
#FFFFFF 25upx -25upx,
#FFFFFF 30upx 10upx,
#FFFFFF 60upx 15upx 0 -10upx,
#FFFFFF 85upx 5upx 0 -5upx;
}
从浅到深的学习 CSS3阴影(box-shadow)
CSS3阴影、缩放实现简易的天气图标动画特效
CSS3线性渐变、阴影、缩放实现动画下雨效果
CSS画各种图形（五角星、吃豆人、太极图等）
css3落雪（scss语法）
$width:100vw;
$height:100vh;
@for $i from 1 through 10 {
$x: random();
$y: random();
$drop-width: 10upx+random(11);
$drop-stretch: 0.7+(random()*0.5);
$drop-delay: (random()*2.5) + 4;
$drop-time: (random()*0.3)+0.2;
.snow:nth-child(#{$i}) {
position: absolute;
left: $x * $width;
top: -20upx;
width: $drop-width;
height: $drop-width;
background: #fff;
border-radius: 100%;
animation: #{$drop-delay}s falling #{$drop-time}s ease-in infinite;
}
}
@keyframes falling {
from {}
to {
$drop-y: 800upx + random(100);
$drop-x: 10upx + random(2);
transform: translate($drop-x, $drop-y);
}
}
总结
本文，相关知识点，其实之前的文章中都有更详尽的说明，这里只是运用了一下，所以，大家如果要学习的更通透，可以多看看以前的文章。
最后，谢谢大家支持。
表情