Offer 驾到，掘友接招！我正在参与2022春招系列活动-刷题打卡任务，点击查看活动详情。
这两天想实战一下小程序里面的响应式布局，就写了一个根据用户位置获取当地近七天的天气预报信息的小案例，这边文章就记录一下当时查询的一些内容，如css样式、使用到的接口等。
一、页面布局
关于页面的整体布局我是参照一个模板网址 dribbble里的的案例进行设计的，这里网站里面有很多前端网页和小程序的设计图，我使用了一个简约风的设计图，最后的实现效果如下图：
2、上半部分渐变色实现
background: linear-gradient(#4990e2, #87c1f1);
2、天气图标
天气图标使用的是svg格式图片
二、获取用户位置信息
1、使用小程序接口getLocation获取用户经纬度
2、使用百度地图接口根据经纬度信息获取位置的详细详细
url: "https://api.map.baidu.com/geocoder?location=" + latitude + "," + longitude + "&output=json",
- latitude：经度
- longitude：纬度
- output：请求响应回的数据格式
3、根据位置信息获取近七天的天气信息
获取天气信息使用的是天气API网站提供的接口，注册的话可以免费2000次的请求次数，同时也可以根据自身的需求购买其他服务，我这里使用的是免费次数
url: "https://www.tianqiapi.com/api?version=v9&appid="+that.data.appid+"&appsecret="+that.data.appsecret+"&city="+that.data.location,
- appid:注册后获得的id号
- appsecret：注册后获得的密钥
- city：城市名称（不带市）
获取到了天气数据后，再将响应的数据渲染到页面中的对应位置，至此，整个案例就完成了。
