利用vue组件制作一个实时天气信息卡片
效果图如下
文件布局很简单
思想
- 首先在线引入
vue和用来交互的axios
使用jquery中的ajax也可以 - 在线引一句诗词增加观赏性
- 从获取实时的天气数据渲染卡片
- 根据当前天气信息展现对应的
icon
一 、在HTML中直接引入在线的框架文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>实时天气</title>
</head>
<body>
<div id="app">
<hxpweather></hxpweather><!--实时天气信息组件引用 -->
</div>
<template id="hxp-weather">
<!--生成实时天气信息卡片组件 -->
<div class="hxp-weather ">
<div class="hxp-weather-header">
<img :src="weather_weatherimg" alt="">
<a id="jinrishici-sentence">今日诗词....</a>
</div>
<div class=" hxp-weather-footer">
<div class="text-center hxp-weather-footer-left">
<h2>{{weather_real}}</h2>
<em>{{weather_date}}</em>
</div>
<div class="hxp-weather-footer-right">
<ol>
<li>今天：{{weather_week}}</li>
<li>天气：{{weather_weather}}</li>
<li>气温：{{weather_lowest}}/{{weather_highest}}</li>
<li>空气质量：{{weather_air_level}}</li>
</ol>
</div>
</div>
</div>
</template>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 在线引入vue -->
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<!-- 在线引入axios,这里使用ajax也可以 -->
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<!-- 随机生成一句诗 -->
<script src="index.js"></script>
</html>
二、在index.js文件中使用vue构建组件
(function () {
const key='key=0c7ebab2461621aeb2c34b3a82e4c702';
const header='http://api.tianapi.com/txapi';
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components: {
hxpweather: {
template: '#hxp-weather',
data: function () {
return {
weather_date: null,/*日期*/
weather_week: null,/*星期*/
weather_weather: null,/*天气*/
weather_weatherimg: ('img/'),/*天气图标*/
weather_real: null,/*实时温度*/
weather_highest: null,/*最高温*/
weather_lowest: null,/*最低温*/
weather_air_level: null,/*空气质量*/
}
},
methods: {
},
mounted() {
let city = 'city=郑州';
<!--这里可更改为任意城市信息-->
let word = 'tianqi';
const url = `${header}/${word}/?${key}&${city}`;
axios
.get(url)
.then(res => {
const data = res.data.newslist[0];
this.weather_date = data.date;
this.weather_week = data.week;
this.weather_weather = data.weather;
this.weather_weatherimg += data.weatherimg;
// 获取实时天气在卡片上展示本地icon
this.weather_real = data.real;
this.weather_highest = data.highest;
this.weather_lowest = data.lowest;
this.weather_air_level = data.air_level;
console.log('实时天气数据获取渲染正常');
})
},
}
}
})
})()
三、最后在CSS中更改样式
/* 公共样式便于统一 */
* {
padding: 0px;
margin: 0px;
}
ol li,
ul li {
list-style: none;
}
/* --------------天气卡片区------------ */
.hxp-weather {
margin: 1rem auto;
color: #394568;
background: linear-gradient(to bottom, #d1d8eb 40%, #222 100%);
border-radius: 5px;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
width: 80%;
height: 15rem;
align-items: flex-end;
transition: all 0.3s ease-in-out;
overflow: hidden;
font-family: "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.hxp-weather-header {
width: 100%;
height: 50%;
}
.hxp-weather-footer {
width: 100%;
height: 50%;
background: whitesmoke;
}
.hxp-weather-footer-left,
.hxp-weather-footer-right {
width: 50%;
height: 5rem;
float: left;
}
补充
- 这里的CSS样式是以移动端为基准，有其它需要可以自己更改样式
- 需要icon图标的可以点击这里下载到本地
