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;
}
複製代碼