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…