5、构建带样式与测试的天气应用

构建带样式与测试的天气应用

1. 地理定位与天气数据请求

1.1 触发地理定位请求

为了让用户主动发起地理定位请求，可在模板中添加一个按钮，使用 onClick 指令执行 getGeolocation 函数。

1.2 获取天气数据

在获取到坐标后，可开始请求本地化的天气数据。这里使用公共天气 API（https://www.weatherapi.com/），使用该服务需先请求一个 API 密钥。注册账户后，免费套餐每月允许进行 1000000 次请求，通常足够使用。

将 API 密钥存储在项目根目录下的 .env 文件中，内容如下：

VITE_APP_WEATHER_API_KEY=Replace this with the key

VITE_APP_ 前缀确保 Vite 自动将该变量暴露给应用。需要注意的是，在基于客户端的 Web 应用中，密钥默认会暴露，因为它会附加在 API 调用中，可通过浏览器的网络请求进行检查。在生产环境中，可能需要通过自己的后端代理请求，以向公众隐藏任何机密信息。

1.3 构建 API 调用

根据 API 文档，构建获取天气数据的请求地址：

https://api.weatherapi.com/v1/current.json?key=