vue3 + tailwindcss + 和风天气api 完成一个天气组件

前言

菜鸡小前端终于找到新工作啦，对于我来说又是一个充满未知的新开始，不过现公司的规模注定好多事情不能像以前一样有前辈们帮我顶住了，所以我要加油努力提升自己💪！

刚入职第一天就给了我一版设计稿，要我尽快把delay的进度赶上，感叹之前gap了那么久，都不知道从何下手了，于是乎，我决定先从设计稿里的天气组件入手。但是就这个组件，花了我两天研究才写出来，菜鸡哭泣😭，我会尽量详细地把踩的坑记录下来，希望不要再踩了！

由于需要快速开发，我选择了vue3和tailwindcss来完成，项目代码最后会给链接。

准备工作

需要天气数据，所以选择了国内的和风天气（其实还有很多，比如国外的openWeatherMap也挺好的），和风天气是目前国内天气api提供数据较为全面的一个平台，且大部分api免费使用，所以很适合用来开发。

1、首先注册一个和风天气的账号，并进入控制台

和风天气官网：https://dev.qweather.com/
控制台长这样：（八块八是开发时调api失败了以为和风天气要收费才充的，可以不用充值，不过某些api的确是要收费的）

2、进行开发者认证（虽然不知道对调用api有无影响，但是我还是先认证了一下）

进入设置>用户信息 就能找到开发者认证，有个人和企业两种，自己根据需要选择，审核还是比较快的

3、创建项目key

这是最重要的步骤，也是我踩坑的一个地方，我当初使用和风天气的时候最先发现有一个插件页面，如下图：
创建插件会生成一些代码，代码中就会包含一个key，但是你千万别以为这就是生成key了，这个key除了在插件里使用，根本无法调用和风天气的api，会报403，所以真正的步骤也需要在控制台完成。

进入项目管理，点击右上角的创建项目，根据需求创建项目，这样生成的key才是能够调用和风天气api的！！！

4、使用注意事项

当准备工作就绪了，一定要去读一读官方的开发文档，里面会有很多注意事项，例如接口最终上线需要在https协议下才能请求，各种错误状态码的含义，我认为重点在“最佳实践”中都有提到。
开发文档：https://dev.qweather.com/docs/

5、如何开发

api的参数基本上都必须要上述提到的key以及位置信息，所以项目中封装好自己的请求拦截器是很有必要的，获取位置信息则可以使用h5的navigator.geolocation.getCurrentPosition的方法。因为写样式不太好啊，所以使用了tailwindcss，真的超好用，强烈推荐！

项目代码

https://github.com/SicaWang/weather_of_qweather