vue天气卡片制做

时间 2019-11-09

标签 vue 天气卡片制做繁體版

原文原文链接

利用`vue`组件制做一个实时天气信息卡片

效果图以下

文件布局很简单

思想

首先在线引入vue和用来交互的axios
~~使用jquery中的ajax也能够~~
在线引一句诗词增长观赏性
从获取实时的天气数据渲染卡片
根据当前天气信息展示对应的icon

一、在HTML中直接引入在线的框架文件javascript

<!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>
复制代码

2、在index.js文件中使用vue构建组件css

(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('实时天气数据获取渲染正常'); }) }, } } }) })() 复制代码

3、最后在CSS中更改样式html

/* 公共样式便于统一 */
* {
    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图标的能够点击这里下载到本地

vue天气卡片制做

利用vue组件制做一个实时天气信息卡片

效果图以下

文件布局很简单

补充

利用`vue`组件制做一个实时天气信息卡片