和风天气api使用uniapp

在 UniApp 项目中集成和风天气 API，主要涉及以下几个方面：获取 API 接口地址、配置跨域请求、发送 HTTP 请求以及处理返回的数据。以下是详细实现步骤： ### 获取和风天气 API 的接口信息 首先，需要注册并获取和风天气的开发者账号，然后创建一个应用以获取对应的 API Key。和风天气提供了多种天气数据接口，例如实时天气、未来三天预报等。 常见的接口地址如下： - 实时天气：`https://devapi.qweather.com/v7/weather/now?location={location}&key={key}` - 未来三天天气：`https://devapi.qweather.com/v7/weather/3d?location={location}&key={key}` 其中，`{location}` 是城市名称或经纬度，`{key}` 是你的 API Key[^1]。 ### 配置 uni.request 请求 UniApp 提供了 `uni.request()` 方法用于发起网络请求，可以用来调用和风天气的 API。 ```javascript uni.request({ url: 'https://devapi.qweather.com/v7/weather/now?location=beijing&key=your_api_key', method: 'GET', success: (res) => { console.log('天气数据:', res.data); // 处理返回的数据 }, fail: (err) => { console.error('请求失败:', err); } }); ``` ### 跨域问题处理 由于 UniApp 在 H5 端运行时可能会遇到跨域限制，因此需要在服务器端进行 CORS 配置，或者通过本地代理解决该问题。可以在项目的 `vue.config.js` 文件中设置代理： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'https://devapi.qweather.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 然后修改请求 URL： ```javascript uni.request({ url: '/api/v7/weather/now?location=beijing&key=your_api_key', method: 'GET', success: (res) => { console.log('天气数据:', res.data); } }); ``` ### 数据解析与展示 API 返回的数据通常为 JSON 格式，包含温度、湿度、风速等信息。可以通过解析这些数据并在页面上展示： ```html <template> <view> <text>当前温度: {{ temperature }}℃</text> <text>天气状况: {{ weather }}</text> </view> </template> <script> export default { data() { return { temperature: '', weather: '' }; }, onLoad() { uni.request({ url: '/api/v7/weather/now?location=beijing&key=your_api_key', method: 'GET', success: (res) => { const data = res.data; this.temperature = data.now.temp; this.weather = data.now.text; } }); } }; </script> ``` ### 安全性建议 为了保护 API Key，避免直接暴露在前端代码中，建议使用后端代理方式调用和风天气 API，并将结果返回给 UniApp 前端。 ---