uni-app: 多種組合天氣，如何製作不同的場景
- 2019 年 10 月 10 日
- 筆記
通過本章節你能學到那些？
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); } }
總結
本文，相關知識點，其實之前的文章中都有更詳盡的說明，這裡只是運用了一下，所以，大家如果要學習的更通透，可以多看看以前的文章。
最後，謝謝大家支持。
