在项目中添加天气预报功能

查看当地的天气情况 调用七日的天气预报情况 天气预报

注册账号获取appid和APPSecret使用 https://www.tianqiapi.com/api

图标可以直接在网站上下载

<!-- 天气模块 -->
<template>
    <div class="weather">
        <div class="amap-page-container" style="display:inline-block;width:0;height:0;">
          
        </div>
      
        <div>
            <p class="cityname" >{{weathercity.city}}</p>
            <el-popover
           
                placement="bottom"
                trigger="click">
                <div class="weatherMessageList">
                    <ul>
                        <li v-for="(item,i) in weathercity.data" :key="i">
                            <p>{{item.week}}</p>
                            <p>{{item.date}}</p>
                            <img v-if="item.wea_img=='xue'" src="../assets/img/xue.png" class='avatar' alt=""/>
                            <img v-if="item.wea_img=='lei'" src="../assets/img/lei.png" class='avatar' alt=""/>
                            <img v-if="item.wea_img=='shachen'" src="../assets/img/shachen.png" class='avatar' alt=""/>
                            <img v-if="item.wea_img=='wu'" src="../assets/img/wu.png" class='avatar' alt=""/>
                            <img v-if="item.wea_img=='bingbao'" src="../assets/img/bingbao.png" class='avatar' alt=""/>
                            <img v-if="item.wea_img=='yun'" src="../assets/img/yun.png" class='avatar' alt=""/>
                            <img v-if="item.wea_img=='yu'" src="../assets/img/yu.png" class='avatar' alt=""/>
                            <img v-if="item.wea_img=='yin'" src="../assets/img/yin.png" class='avatar' alt=""/>
                            <img v-if="item.wea_img=='qing'" src="../assets/img/qing.png" class='avatar' alt=""/>
                            <p>{{item.tem1}}~ {{item.tem2}}</p>
                            <p>{{item.wea}}</p>
                            <p><span v-for="(win,wi) in item.win" :key="wi"><span v-if="wi==1">~</span>{{win}}<span v-if="wi==1">(晚)</span><span v-if="wi==0">(早)</span></span></p>
                            <p>{{item.win_speed}}</p>
                        </li>
                    </ul>
                </div>
                <p class="weatherList" slot="reference" title="七日天气">七日天气</p>
            </el-popover>
        </div>
          <div class="weatherMessage">
            <img v-if="nowDayWeather.wea_img=='xue'" src="../assets/img/xue.png" class='avatar' alt=""/>
            <img v-if="nowDayWeather.wea_img=='lei'" src="../assets/img/lei.png" class='avatar' alt=""/>
            <img v-if="nowDayWeather.wea_img=='shachen'" src="../assets/img/shachen.png" class='avatar' alt=""/>
            <img v-if="nowDayWeather.wea_img=='wu'" src="../assets/img/wu.png" class='avatar' alt=""/>
            <img v-if="nowDayWeather.wea_img=='bingbao'" src="../assets/img/bingbao.png" class='avatar' alt=""/>
            <img v-if="nowDayWeather.wea_img=='yun'" src="../assets/img/yun.png" class='avatar' alt=""/>
            <img v-if="nowDayWeather.wea_img=='yu'" src="../assets/img/yu.png" class='avatar' alt=""/>
            <img v-if="nowDayWeather.wea_img=='yin'" src="../assets/img/yin.png" class='avatar' alt=""/>
            <img v-if="nowDayWeather.wea_img=='qing'" src="../assets/img/qing.png" class='avatar' alt=""/>
            <div>
                <p>{{nowDayWeather.wea}}</p>
                <p>{{nowDayWeather.tem1}}~ {{nowDayWeather.tem2}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
   
    export default {
        name:"HomeSon",
        data: function(){
            let self = this;
            return {
                ipAddress:'',
                ProjectAddress:"",
                lng:'114.313304',
                lat:'34.797508',
                getNowAddress:false,
                weathercity:'',
                weatherList:{},
                nowDayWeather:{},
                center: [114.313304, 34.797508],
                city:'',
                weather_arrs:[
                            {"APPID":"48341999","APPSecret":"QnOJ3FrY"},
                             {"APPID":"59891282","APPSecret":"4eogz5aN"},

                        ],
            
            }
        },
        methods: {
            get_data: function(){
                
        let that=this;
        const foowwLocalStorage = {
             set: function (key, value, ttl_ms) {
            var data = { value: value, expirse: new Date(ttl_ms).getTime() };
              localStorage.setItem(key, JSON.stringify(data));
             },
             get: function (key) {
                 var data = JSON.parse(localStorage.getItem(key));
                 if (data !== null) {
                     
                     if (data.expirse != null && data.expirse < new Date().getTime()) {
                         localStorage.removeItem(key);
                     } else {
                         return data.value;
                     }
                 }
                 return null;
             }
        }
                let i=parseInt(Math.random()*1+2, 10)   
                  let obj=that.weather_arrs[i]
                
                const params={
                    version:'v1',
                    appid:obj.APPID,
                    appsecret:obj.APPSecret,
                    city:'上海'
                }

                var datas = foowwLocalStorage.get("weather");
                if (datas) {
                     that.weatherList=datas.data;
                    that.weathercity=datas
                    that.nowDayWeather=datas.data[0];
                }else{
                that.Ajax.gets("https://www.tianqiapi.com/api",params).then(function(response){
                    
                    var date = new Date().getTime();
                    foowwLocalStorage.set("weather", response, date + 3600000);
                    that.weatherList=response.data;
                    that.weathercity=response
                    
                    that.nowDayWeather=response.data[0];
                })
                }
                
            },
           
            
        },
         
        created(){
            
            this.get_data();
            
        },
        
        

    }
</script>
<style lang="less" scoped>
    .weather{
        display:inline-block;
        width:auto;
        vertical-align: middle;
        padding: 0 10px ;
        // float:right;
        overflow:hidden;
        >div{
            float:right;
        }
    }
    .weatherList{
        line-height: 20px;
        text-align: center;
        font-size: 14px;
        cursor:pointer;
    }
    .cityname{
        line-height: 20px;
        text-align: center;
        font-size: 14px;
    }
    .weatherMessage{
        margin:0 20px;
        overflow:hidden;
        img{
            width: 40px;
            height: 40px;
            vertical-align: middle;
            display: inline-block;
            float:left;
        }
        >div{
            float:left;
            margin-left:10px;
            p{
                line-height: 20px;
                font-size: 14px;
            }
        }
    }
    .weatherMessageList>ul{
       display:flex;
        justify-items: flex-start;
        li{
            width:150px;
            text-align:center;
            img{
                width:60px;
                margin:0 auto;
                height:60px;
            }
        }
    }
</style>