中国天气网实时天气api自定义ui

柔光的暖阳◎ 2022-11-14 12:00 215阅读 0赞

![请输入图片描述][img20210223102612.png]  
需求：展示当前地区的天气和温度  
`api`采用中国天气网的Api接口，天气网只提供了自定义的插件，没有提供详细的`api`,这里先选择一个基础得插件：  
![请输入图片描述][img20210223103344.png]  
根据需求自定义插件配置，然后新建一个`html`复制`code`，打开`F12`\-`network`查看请求：  
![请输入图片描述][img20210223103654.png]  
`https://apip.weatherdt.com/v2/plugin/data/h5?key=zl6uurOJp7&location=101210401&lang=cn`这个就是我需要的`api`,`key`对应的就是你注册生成`kye`值，`location`为你的地址码。返回参数内`now`对象就是我想要的数据。这里如果要展示天气的图片，只需要将`cond_code`拼接图片的url即可。  
例如：`const png = 'https://apip.weatherdt.com/20200701/icon/c/${data.now.cond_code}d.png'`  
`data.now.cond_code`后天的d代表白天，如果是晚上替换为n即可。  
(这里的符号为模板字符串\`)

const initWether = () => { 
        $.get('https://apip.weatherdt.com/v2/plugin/data/h5?key=zl6uurOJp7&location=101210401&lang=cn',function(data,status) { 
            if(status === 'success') { 
                const png =  /`https://apip.weatherdt.com/20200701/icon/c/${ data.now.cond_code}d.png/`
                const cloud = data.now.cond_txt
                const tmp = data.now.tmp + '℃'
                // 下面根据实际的情况展示即可
                $('#weatherImg').attr('src',png)
                $('#weather .active:first').html(cloud)
                $('#weather .tmp:first').html(tmp)
            }
        });
    }
    initWether()

[img20210223102612.png]: /images/20221022/777bef13356640fb8c6a0f01d78c7f6f.png
[img20210223103344.png]: /images/20221022/43a6b6658096435595279e949d85c982.png
[img20210223103654.png]: /images/20221022/7a4348edcccf4c6191d22f6aa9ba2486.png