vue3實現(xiàn)高德地圖天氣小組件

更新時間：2024年10月23日 10:17:07 作者：shix .

這篇文章主要為大家詳細(xì)介紹了如何使用vue3實現(xiàn)一個高德地圖天氣小組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

效果圖

使用方法

<weather-view type="rect-solid" :borderColor="['#7ACAEC', '#068BBD']"></weather-view>

天氣圖標(biāo)文件夾本來想全弄成svg動態(tài)圖片的,但找了很久都沒找到對應(yīng)的圖(只找到了幾個),于是就暫時擱置了

組件全代碼如下注意getWeather方法中的高德天氣key需要改成自己的

<template>
    <div class="dv-component-weather" :style="{ width: width, height: height }">
        <div class="dv-time">
            <span v-text="time"></span>
            <span v-text="date"></span>
        </div>
        <div class="dv-weather">
            <img :src="icon" />
            <div>
                <span v-text="weather"></span>
                <span v-text="temperature" class="temperature"></span>
                <span v-text="city"></span>
            </div>
        </div>
        <div class="dv-box-border">
            <dv-border-box-13 v-if="type == 'normal'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-13>
            <dv-border-box-12 v-if="type == 'rect-horn'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-12>
            <dv-border-box-10 v-if="type == 'rect-horn-big'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-10>
            <dv-border-box-8 v-if="type == 'rotate'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-8>
            <dv-border-box-9 v-if="type == 'rect'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-9>
            <dv-border-box-7 v-if="type == 'shadow'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-7>
            <dv-border-box-2 v-if="type == 'rect-solid'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-2>
        </div>
    </div>
</template>
<script>
import { ref, onMounted } from "vue";
/**
 * 獲取指定的cookie值
 * @param {string} name 要查詢的Cookie字段名
 */
function getCookie(name) {
    var arr,
        reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if ((arr = document.cookie.match(reg))) return decodeURIComponent(arr[2]);
    else return "";
}
/**
 * 刪除指定的cookie值
 * @param {string} name 要刪除的Cookie字段名
 */
function removeCookie(name) {
    let date = new Date();
    date.setTime(date.getTime() - 1);
    document.cookie = name + "=''" + "; expires=" + date.toUTCString();
}
/**
 * 格式化日期字符串
 * @param {string} 日期字符串 2021-04-10或可以轉(zhuǎn)換為日期的其他格式
 * @param {object} 配置項:hasTime-是否帶有時間 datelabel-日期分隔符 timelabel-時間分隔符 separator-日期與時間的分隔符
 */
function dateFormatter(date, options) {
    options = options ? options : {};
    options.datelabel = options.datelabel ? options.datelabel : "-"; //日期分隔符
    options.timelabel = options.timelabel ? options.timelabel : ":"; //時間分隔符
    options.separator = options.separator ? options.separator : " "; //日期時間分隔符
    options.hasTime = options.hasTime ? options.hasTime : false; //返回值是否帶時間
    options.hasWeek = options.hasWeek ? options.hasWeek : false; //返回值是否帶星期
    options.hasTimeUnit = options.hasTimeUnit ? options.hasTimeUnit : false; //是否使用時間單位
    options.hasDateUnit = options.hasDateUnit ? options.hasDateUnit : false; //是否使用日期單位
    //是否返回格式化后的數(shù)組 若為true,則返回值為一個對象,formatter為自定義格式,array為格式化后的字符串信息
    options.hasArray = options.hasArray ? options.hasArray : false;
    let d = new Date(date);
    let year = d.getFullYear();
    let month = d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
    let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
    let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
    let minute = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
    let second = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
    let formatterArray = [];
    let formatter = "";
    if (options.hasDateUnit == true) {
        formatter = year + "年" + month + "月" + day + "日";
    } else {
        formatter = year + options.datelabel + month + options.datelabel + day;
    }
    formatterArray.push(formatter);
    if (options.hasTime == true && options.hasTimeUnit == false) {
        formatter += options.separator + hours + options.timelabel + minute + options.timelabel + second;
        formatterArray.push(hours + options.timelabel + minute + options.timelabel + second);
    } else if (options.hasTime == true && options.hasTimeUnit == true) {
        formatter += options.separator + hours + "時" + minute + "分" + second + "秒";
        formatterArray.push(hours + "時" + minute + "分" + second + "秒");
    } else if (options.hasTime == false && options.hasTimeUnit == false) {
        formatterArray.push(hours + options.timelabel + minute + options.timelabel + second);
    } else if (options.hasTime == false && options.hasTimeUnit == true) {
        formatterArray.push(hours + "時" + minute + "分" + second + "秒");
    }
    let weekList = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    if (options.hasWeek == true) {
        formatter += " " + weekList[d.getDay()];
        formatterArray.push(weekList[d.getDay()]);
    } else {
        formatterArray.push(weekList[d.getDay()]);
    }
    if (options.hasArray == true) {
        return {
            formatter: formatter,
            array: formatterArray,
        };
    }
    return formatter;
}
export default {
    name: "weatherView",
    setup(prop, ctx) {
        let time = ref("");
        let date = ref("");
        let weather = ref("");
        let temperature = ref("");
        let city = ref("");
        let icon = ref("");
        let getDateTime = () => {
            let d = dateFormatter(new Date(), { hasArray: true });
            time.value = d.array[1];
            date.value = d.array[0] + " " + d.array[2];
        };
        let setWeather = (data) => {
            city.value = data.city;
            weather.value = data.weather;
            temperature.value = data.temperature + "℃";
            icon.value = "./images/weather/" + data.weather + ".svg";
        };
        let getWeather = () => {
            let xhr = new XMLHttpRequest();
            // 個人key(每天30W次,每秒200并發(fā)): 8bed5b0020bc38b52cfa6166a7babffe
            xhr.open("get", "http://restapi.amap.com/v3/weather/weatherInfo?city=230100&key=此處填寫自己的高德天氣接口的key值");
            xhr.onload = (e) => {
                if (e.target.readyState == 4) {
                    let res = JSON.parse(e.target.responseText);
                    if (res.infocode === "10000") {
                        res = res.lives[0];
                        setWeather(res);
                        let info = {
                            city: res.city,
                            weather: res.weather,
                            temperature: res.temperature,
                        };
                        let delay = new Date();
                        delay.setHours(delay.getHours() + 1);
                        document.cookie = "_dv_gdweather=" + JSON.stringify(info) + "; expires=" + delay.toUTCString();
                    } else {
                        console.log("weather_error:", "infocode is " + res.infocode + "!");
                    }
                }
            };
            xhr.send();
        };
        onMounted(() => {
            getDateTime();
            let _dv_gdweather = getCookie("_dv_gdweather");
            if (!_dv_gdweather) {
                getWeather();
            } else {
                setWeather(JSON.parse(_dv_gdweather));
            }
            // 動態(tài)設(shè)置時間-每秒變化
            setInterval(() => {
                getDateTime();
            }, 1000);
            // 動態(tài)設(shè)置天氣-每小時
            setInterval(() => {
                getWeather();
            }, 1000 * 60 * 60 + 1);
        });
        return {
            icon,
            time,
            date,
            weather,
            city,
            temperature,
        };
    },
    props: {
        type: {
            type: String,
            default: "normal",
        },
        width: {
            type: String,
            default: "100%",
        },
        height: {
            type: String,
            default: "100%",
        },
        borderColor: {
            type: Array,
            default: () => {
                // return ["#295B6B", "#3C538F"];
                return ["#295B6B"];
            },
        },
        backColor: {
            type: String,
            default: "transparent",
        },
    },
};
</script>
<style lang="scss" scoped>
$font: 0.18rem;
.dv-component-weather {
    font-size: $font;
    // color: #fff;
    color: rgb(188, 239, 243);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.15rem;
    box-sizing: border-box;
    .dv-box-border {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .dv-time {
        // font-size: #{$font * 1.2};
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 53%;
        white-space: nowrap;
        position: relative;
        z-index: 2;
        span {
            &:first-child {
                font-size: #{$font * 1.8};
            }
            &:last-child {
                font-size: #{$font * 1};
            }
        }
    }
    .dv-weather {
        height: 100%;
        width: 47%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: #{$font * 0.8};
        position: relative;
        z-index: 2;
        img {
            width: 0.7rem;
            height: 0.7rem;
        }
        div {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            span {
                margin-bottom: 0.05rem;
                &:first-child {
                    font-size: #{$font * 0.7};
                }
                &:last-child {
                    font-size: #{$font * 0.7};
                    margin: 0;
                }
            }
        }
    }
}
</style>

到此這篇關(guān)于vue3實現(xiàn)高德地圖天氣小組件的文章就介紹到這了,更多相關(guān)vue3天氣組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: