npm 包 weather-hui 使用教程

阅读时长 8 分钟读完

简介

weather-hui 是一款前端基于 npm 包的天气查询插件,可以方便地通过编程方式获取不同城市的天气信息。

安装

使用 npm 进行安装:

使用方法

初始化

在使用 weather-hui 之前,需要先对其进行初始化。

你需要传入你所使用的 API_KEY ,该插件使用的是 和风天气接口 提供的天气数据。

获取天气信息

接着,就可以根据城市名来获取天气信息了。

其中的 getWeather 方法需要传入两个参数,第一个表示所查询天气的城市名称,第二个则是回调函数,其参数中,err 表示是否有出错信息,weather 则表示获取到天气的信息。

天气信息格式

获取到天气信息后,其格式如下:

-- -------------------- ---- -------
-
    -------- - ------
        ------ -------------- ------
        ----------- ----- ------
        -------------- ----- ------
        ------------- ----- --------
        ------- ----- ------
        ------ -------------- ------
        ------ --------------- ------
        ----- ------- -----------
    --
    --------- - ------
        ------ ----------- ------- ------
        ------ ----------- ------ -------
    --
    --------- ----- -------
    ------ - ------
        -------- ---- ----
        ------------ ------ --------
        ----------- ---- --------
        ----- ----- ------
        ------ ----- ------
        ------- ------ -----
        ------- ------- ------
        ------ ----- ----
        ------ ----- -----
        ----------- ------ ---------
        ----------- ------ ----
        ---------- ---- ----
        ----------- ---- ----------
    -
-

天气变量

返回的天气信息中,包含多个变量,以下是各变量的描述:

变量名 描述
basic 城市基本信息
cid 城市 ID
location 城市名称
parent_city 该城市的上级城市
admin_area 所属行政区域
cnty 国家名称
lat 城市纬度
lon 城市经度
tz 城市所在时区偏移量
update 更新时间信息
loc 当地时间
utc UTC 时间
status 返回状态码
now 实况天气
cloud 云量,百分比
cond_code 实况天气状况代码,如 “100” 为晴天
cond_txt 实况天气状况描述,如 “晴”
fl 体感温度
hum 相对湿度,百分比
pcpn 降水量,毫米
pres 大气压强,百帕
tmp 温度,摄氏度
vis 能见度,公里
wind_deg 风向360角度
wind_dir 风向
wind_sc 风力
wind_spd 风速,公里/小时

示例代码

下面的代码演示了如何获取上海今天的天气信息。

-- -------------------- ---- -------
----- ------- - -----------------------
----- ------- - -
    -------- -----
--
----- ------------- - --- -----------------

------------------------------ ------------- -------- -
  -- ----- -
    -------------------
  - ---- -
    ----------------- - ------------------------
    ----------------- - --------------- - -----
    ------------------- - ----------------------
    ------------------- - --------------- - -----
    ----------------- - ------------------- - -----
    ------------------ - --------------- - ------
  -
---

输出结果如下:

小结

通过本文,我们了解了 weather-hui 这个插件的使用方法,并通过示例代码,展示了如何获取天气信息。如果您需要在自己的项目中获取天气信息,那么 weather-hui 就是一个不错的选择。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600562ee81e8991b448e0a5d

纠错
反馈