【原生前端】快速建造一个漂亮的天气APP1.页面展示 首页 搜索页面 2.页面搭建 首先在 vscode 中新建inde

1.页面展示

首页

搜索页面

2.页面搭建

要用到的图标资源： 我用夸克网盘分享了「icons」，点击链接即可保存。打开「夸克APP」，无需下载在线播放视频，畅享原画5倍速，支持电视投屏。 链接：pan.quark.cn/s/7c4727cb1…

首先在 vscode 中新建index.html与style.css，并在inidex.html中引入style.css文件

然后搭建基本页面骨架,页面骨架分为三个部分。顶部的搜索栏，中间的天气，以及底部的未来天气部分。

2.1 顶部搜索栏

首先实现搜索栏

    <div class="container">
        <!-- Search section -->
        <div class="search-section">
            <div class="input-wrapper">
                <span class="material-symbols-rounded">search</span>
                <input type="search" placeholder="Enter a city name" class="search-input">
            </div>
            <button class="location-button">
                <span class="material-symbols-rounded">my_location</span>
            </button>
        </div>
    </div>

小图标采用google fonts实现，并采用rounded样式

显示小图标

要使用小图标可以直接在google fonts中搜索需要的图标，然后点击 copy code 并粘贴在head标签内

然后新建一个material-symbols-rounded的类填写上图标类别即可显示图标。

<span class="material-symbols-rounded">search</span>

2.2 当前天气

首先是HTML骨架

        <div class="weather-section">
            <!-- Current weather -->
            <div class="current-weather">
                <img src="icons/clouds.svg" alt="" class="weather-icon">
                <h2 class="temperature">20<span>°C</span></h2>
                <p class="description">Partly Cloudly</p>
            </div>

            <!-- Hourly weather forecast list -->
             <div class="hourly-weather">
                <ul class="weather-list">
                    <li class="weather-item">
                        <p class="description">00:00</p>
                        <img src="icons/clouds.svg" alt="" class="weather-icon">
                        <p class="temperature">20°</p>
                    </li>
                    <li class="weather-item">
                        <p class="description">00:00</p>
                        <img src="icons/clouds.svg" alt="" class="weather-icon">
                        <p class="temperature">20°</p>
                    </li>
                </ul>
             </div>
        </div>

2.3 导入字体

在style.css中导入Montserrat字体,并重置CSS设置

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

2.4 css

编写body部分使得container居中

body{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5f5f5f;
}
.container{
    background-color: #fff;
}

编写hourly-weather的图标布局,使其为水平方向布局

.hourly-weather .weather-list {
    display: flex;
}
.hourly-weather .weather-item .weather-icon {
    width: 28px;
    aspect-ratio: 1;
}

在body标签上添加min-height属性，让container垂直居中

body {
//...
min-height:100vh
}

然后美化container显示效果

.container{
    background-color: #fff;
    border-radius: 10px;
    max-width: 425px;
    flex-grow: 1;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

然后接着美化search部分布局

.search-section {
    display: flex;
    padding: 25px;
    align-items: center;
}
.search-section .input-wrapper {
    height: 54px;
    width: 100%;
}

.search-section .search-input {
    height: 100%;
    width: 100%;
    outline: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 0 20px 0 50px;
    border-radius: 6px;
    border: 1px solid #beb0ff;
}

搜索小图标需要放在搜索框里，可以使用绝对布局实现。

.search-section .input-wrapper {
//...
position: relative
}
.search-section .input-wrapper span{
    position: absolute;
    top: 50%;
    left: 17px;
    pointer-events: none;
    transform: translateY(-50%);
}

美化按钮布局

.search-section {
gap:10px
}
.search-section .location-button{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 54px;
    width: 56px;
    outline: none;
    cursor: pointer;
    background-color: #fff;
    background-color: #fff;
    outline: none;
    border-radius: 6px;
    border:1px solid #beb0ff;
}
.search-section .location-button span{
    font-size: 1.3rem;//调整图标大小
}

添加hover特效

.search-section .location-button{
    //...
    transition: 0.3s ease;
}
.search-section .location-button:hover{
    color: #fff;
    background-color: #5f41e4;
    border-color: #5f41e4;
}

搜索框同样可以添加聚焦特效

接着对current-section进行布局

.weather-section .current-weather {
    display: flex;
    align-items: center;
    padding: 20px 0 50px;
    flex-direction: column;
}

.current-weather .weather-icon {
    width: 140px;
    aspect-ratio: 1;
}
.current-weather .temperature {
    font-size: 3.38rem;
    margin: 23px 0;
    display: flex;
}
.current-weather .temperature span {
    font-size: 1.56rem;
    font-weight: 500px;
    margin: 5px 0 0 2px ;
}
.current-weather .description {
    font-size: 1.25rem;
    font-weight: 500;
}

最后对余下部分进行布局

.hourly-weather .weather-list {
    display: flex;
    list-style: none;
    gap: 43px;
    overflow-x: auto;
}
.hourly-weather .weather-item .weather-icon {
    width: 28px;
    aspect-ratio: 1;
}
.hourly-weather {
    padding: 16px 25px;
    border-top: 1px solid #d5ccff;
}

滚动条有些难看，接着美化滚动条

然后对weather-item进行美化

.hourly-weather .weather-item{
    display: flex;
    gap: 7px;
    font-weight: 500;
    align-items: center;
    flex-direction: column;
}

将滚动条置于最底部：

.hourly-weather .weather-list {
//...
    padding-bottom: 16px;
    margin-bottom: -16px;
}

3.Js交互部分

3.1 获取搜索框输入值

按下Enter键后即可查询对应城市天气细节

const searchInput = document.querySelector(".search-input")


searchInput.addEventListener("keyup", (e)=>{
    const cityName = searchInput.value.trim()

    if(e.key == "Enter" && cityName){
        console.log(cityName);
    }
})

3.2天气API

按照高德地图天气API手册申请密钥 随后编写请求API代码

const getWeatherDetail = async (cityName) => {
    const city = '110101'

    const API_URL = `https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${city}&output=JSON`

    try {
        const response = await fetch(API_URL)
        const data = await response.json()
        
        
        const temperature = data['lives'][0]['temperature']
        console.log(temperature);

    } catch (error) {
        console.log(error);

    }
}

测试API成功后获取相应的数据

3.3 展示当前天气

在response中获取出temperature和description

//...
const currentWeatherDIV = document.querySelector(".current-weather")
const getWeatherDetail = async (cityName) => {
//...
//当前天气情况
        const temperature = data['lives'][0]['temperature']
        const description = data['lives'][0]['weather']
        //更新当前天气
       currentWeatherDIV.querySelector(".temperature").innerHTML = `${temperature}<span>°C</span>`
        currentWeatherDIV.querySelector(".description").innerText = description

}

然后更新天气图标，更新天气图标需要有一个转换表

const getWeatherDetail = async (cityName) => {
 const weatherIconMap={
        '晴':'clear',
        '雨':'rain',
        '雷':'thunder',
        '雷雨':'thunder_rain',
        '多云':'clouds',
        '雾':'mist',
        '雪':'snow'
    }
  //...
        const weatherIconKey = Object.keys(weatherIconMap).find(icon => description.includes(icon))
        const weatherIcon = weatherIconMap[weatherIconKey]
           //更新当前天气
        currentWeatherDIV.querySelector(".weather-icon").src = `icons/${weatherIcon}.svg` 
        //...
}

已经完成80%了，剩下的不整了，麻烦鼠了QAQ！