专栏首页web秀uni-app: 多种组合天气,如何制作不同的场景

uni-app: 多种组合天气,如何制作不同的场景

通过本章节你能学到那些?

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>

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);
  }
}

总结

本文,相关知识点,其实之前的文章中都有更详尽的说明,这里只是运用了一下,所以,大家如果要学习的更通透,可以多看看以前的文章。

最后,谢谢大家支持。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 什么是 Java 对象深拷贝?面试必问!

    浅拷贝只是拷贝了源对象的地址,所以源对象的值发生变化时,拷贝对象的值也会发生变化。

    Java技术栈
  • 三千字讲清TypeScript与React的实战技巧

    很多时候虽然我们了解了TypeScript相关的基础知识,但是这不足以保证我们在实际项目中可以灵活运用,比如现在绝大部分前端开发者的项目都是依赖于框架的,因此我...

    桃翁
  • 使用pt-fifo-split 工具往mysql插入海量数据

    http://www.cnblogs.com/chenny7/p/4253337.html

    二狗不要跑
  • 全排列输出(递归实现)

    处理递归的时候,采用两个字符串变量,一个存放固定前缀,一个 存放剩下的待处理的字符串。如:

    孟君
  • Prometheus使用[笔记]

    suveng
  • 为什么要选择使用TypeScript,看了就知道原因!

    TypeScript 是 JavaScript 的超集(超集:包含关系,比如 C++ 是 C 的超集,TypeScript 是由 JavaScript 发展而来...

    张晓衡
  • running Extension project directly on ABAP server without Launchpad

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • JSP还有必要学吗?这篇文章告诉你

    前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型...

    孤独键客
  • JS高级测试: 010*2 这个表达式的运算结果是多少?

    radix 可选。规定表示数字的基数,是 2 ~ 36 之间的整数。若省略该参数,则使用基数 10。但是要注意,如果该参数是 10 以外的其他值,则 ECMAS...

    舒克
  • How to fix error when creating extension project in WebIDE

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券