uni-app: 多种组合天气，如何制做不一样的场景

经过本章节你能学到那些？

一、moment.js 使用（分白天和夜晚2种场景） 二、indexOf（根据天气字段分割成多种天气场景） 三、vue 组件（组件传值等） 四、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>
复制代码

Vue动态绑定Class的几种方式

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);
  }
}
复制代码

总结

本文，相关知识点，其实以前的文章中都有更详尽的说明，这里只是运用了一下，因此，你们若是要学习的更通透，能够多看看之前的文章。

最后，谢谢你们支持。

喜欢的能够关注我哦!

原文地址：www.javanx.cn/20190927/un…