在codepen发现一个很好看的天气卡片,正好自己正在整理阿里服务上的项目,然后开始了一番折腾

codepen地址

移植

copy

第一步:这个简单,首先把codepen中的js、css、html全部copy到自己的项目。

整理api

这里用到的时候腾讯天气api

获取当前地理信息

获取天气信息

由于腾讯api对跨域请求有限制,这里找了一个api代理 bird

http://bird.ioliu.cn/v2/?url=https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5