day 07 实习日志
一、学习内容
（一）学习怎么样定位到其他城市并获取该城市的天气
（二）学习怎么样去完善天气预报的其他功能
（三）完善天气预报页面的功能
二、课后作业
题目：完善天气预报页面：
展示部分源码：
.js
const app = getApp()
// 引入sdk核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
data: {
weather: {},//实况天气
weatherweek: [],//七日天气
value: null,
date: '',
humidity: ""
},
onLoad: function () {
var _this = this;
//实例话api核心类
qqmapsdk = new QQMapWX({
key: 'CGGBZ-KGUKS-SQFOI-6IT7J-ZB6WT-XUFLT'
});
// wx获取位置接口
wx.getLocation({
success: function (res) {
// 获取到经纬度
console.log(res);
// 逆地址解析
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (res) {
console.log(res.result.address_component.district.substr(0, 2));
_this.weathertoday(res.result.address_component.district.substr(0, 2));
_this.weatherweekday(res.result.address_component.district.substr(0, 2));
}
})
}
});
},
finish: function (e) {
var _this = this;
// console.log(e.detail.value);
if (e.detail.value.length != 0) {
_this.weathertoday(e.detail.value);
_this.weatherweekday(e.detail.value);
// 清空输入框的值
_this.setData({
value: ''
})
}
},
// 天气api实况天气
weathertoday: function (city) {
var _this = this;
wx.request({
url: 'https://www.tianqiapi.com/api/?version=v6',
data: {
'city': city
},
method: 'GET',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res.data.date.substr(5, 5));
_this.setData({
weather: res.data,
date: res.data.date.substr(5, 5),
humidity: res.data.humidity.substr(0, 2)
});
console.log("今日天气 =>", _this.data.weather)
}
});
},
// 天气api实况天气
weatherweekday: function (city) {
var _this = this;
wx.request({
url: 'https://www.tianqiapi.com/api/?version=v1',
data: {
'city': city
},
method: 'GET',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
_this.setData({
weatherweek: res.data
});
console.log("7日天气 =>", _this.data.weatherweek)
}
});
}
})
.wxss
page{
height: 100%;
/* background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561348370456&di=940bb674dcde1e5b24f8d372ac970f15&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F30%2F20160730120344_2rFBH.jpeg) no-repeat 0 0; */
background-size: 100% 100%;
background-color: #9966FF;
}
.nav{
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.nav>.ipt{
width: 90%;
border-bottom: 2rpx solid #000;
padding-left: 60rpx;
box-sizing: border-box;
}
.pla{
font-size: 26rpx;
}
.nav>.img{
width: 40rpx;
height: 40rpx;
position: absolute;
left: 45rpx;
top: 5rpx;
}
/* END nav */
/* userinfo */
.user{
margin: 20rpx 34rpx 0rpx;
display: flex;
align-items: center;
}
.user>.userAvatar{
width: 55rpx;
height: 55rpx;
border-radius: 50%;
overflow: hidden;
border: 1rpx solid #000;
}
.user>.userNick{
font-size: 28rpx;
color: #000;
margin-left: 20rpx;
/* font-weight: bold; */
}
/* END userinfo */
/* location */
.map{
margin: 0 40rpx;
display: flex;
align-items: center;
justify-content: space-between
}
.map .l-box{
display: flex;
align-items: center;
}
.map .img{
width: 35rpx;
height: 35rpx;
}
.map .loc{
font-size: 54rpx;
margin-left: 15rpx;
color: #000;
}
.map .r-box{
font-size: 26rpx;
color: #000;
}
/* END location */
/* weather */
.info{
height: 600rpx;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.info .tem{
height: 400rpx;
line-height: 400rpx;
font-size: 120rpx;
color: #fff;
position: relative;
}
程序结果：
三、学习总结
在这节课堂上老师通过分析我们前一天的天气预报API的搜索功能以及是滚动栏的功能，虽然比较难，但还是有同学能够做出来。这节课需要学习的是使用ip，发起请求，然后就能获取当前城市的天气，然后发现的ip定位是不准确的，之后要使用其他方法来获取其他城市的天气。
在课后完成作业的时候，发现作业还是有一点难度的，就是在之前的基础上再完善天气预报API的其他功能，因为接口比较多，也比较乱，作业完成度还行。