今天做的是天气预报小程序的收尾工作,需要添加天气的详情以及生活小贴士,并设计好样式和布局,在页面中展示出来。引入并实例化SDK核心类,声明一个全局变量。页面初始化完整后调用接口,表单触发后先声明this,调用方法(该方法需要获取到经纬度),进行逆地址解析。
1.获取其他城市天气(例:北京市)
1.1实现方法
①要获取其他的城市的天气数据,需要传入经纬度。为了获取其他城市的经纬度,这里使用的地图的地理编码接口,输入城市名,输出经纬度,然后调用获取天气数据 API 即可。
②自定义获取城市的函数loadCity(),调用wx.request,在“百度地图开放平台”网站中注册自己的AK,通过获取城市信息的网址(http://api.map.baidu.com/geocoder/v2/?ak=自己的ak&location=纬度值,经度值&output=json)实现当前城市名称的获取。并在loadCity()函数中接着调用loadWeather()函数。
1.2程序截图
2.显示7天预报、具体天气数据、生活指数等信息。
2.1实现方法
①天气数据来自百度地图开放平台。
②自定义获取天气的函数loadWeather(),根据已有的城市名称,通过获取天气信息的网址实现天气信息的数据获取。
③未来天气部分通过import调用了自定义模板文件。然后分析项目中文件的源码。
2.2 程序代码
index.wxml
<!-- 7日天气 -->
<view class='title'>7 天预报</view>
<view class='guide' wx:if='{{cityDatas.daily_forecast}}'>
<view class='guides'>
<view class='item' wx:for='{{cityDatas.daily_forecast}}' wx:key='{{index}}'>
<view class='date i'>{{item.date}}</view>
<view class='temperature i'>{{item.tmp_max}}~{{item.tmp_min}}℃</view>
<view class='weather i'>
<text>{{item.cond_txt_d}}</text>
<image mode='widthFix' src='{{weatherIconUrl}}{{item.cond_code_d}}.png'></image>
</view>
<view class='wind i'>{{item.wind_dir}}{{item.wind_sc}}级</view>
</view>
</view>
</view>
<view class='details'>
<view class='detail' wx:for='{{detailsDic.key}}' wx:key='{{index}}'>
<view>{{detailsDic.val[item]}}</view>
<view>{{cityDatas.now[item]}}</view>
</view>
</view>
<view class='hourly' wx:if='{{hourlyDatas.length}}'>
<view class='title'>24 小时逐 3 小时预报</view>
<view class='hours'>
<swiper style='height:360rpx;' indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" duration="300" next-margin="50rpx">
<block wx:for="{{hourlyDatas}}" wx:key="{{index}}">
<swiper-item>
<view class='hour'>
<view class='detail'>
<view>温度(℃)</view>
<view>{{item.tmp}}</view>
</view>
<view class='detail'>
<view>天气</view>
<view class='weather'>
<text>{{item.cond_txt}}</text>
<image mode='widthFix' src='{{weatherIconUrl}}{{item.cond_code}}.png'></image>
</view>
</view>
<view class='detail'>
<view>相对湿度(%)</view>
<view>{{item.hum}}</view>
</view>
<view class='detail'>
<view>露点温度(℃)</view>
<view>{{item.dew}}</view>
</view>
<view class='detail'>
<view>降水概率</view>
<view>{{item.pop}}</view>
</view>
<view class='detail'>
<view>风向</view>
<view>{{item.wind_dir}}</view>
</view>
<view class='detail'>
<view>风向角度(deg)</view>
<view>{{item.wind_deg}}</view>
</view>
<view class='detail'>
<view>风力(级)</view>
<view>{{item.wind_sc}}</view>
</view>
<view class='detail'>
<view>风速(mk/h)</view>
<view>{{item.wind_spd}}</view>
</view>
<view class='detail'>
<view>气压(mb)</view>
<view>{{item.pres}}</view>
</view>
<view class='detail'>
<view>云量</view>
<view>{{item.cloud}}</view>
</view>
</view>
<view class='time'>{{item.time}}</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
<!-- <ad unit-id="adunit-785cc3f710cc3d4c"></ad> -->
<view class='livingIndex' wx:if='{{!setting.hiddenIndex}}'>
<view class='item' wx:for='{{cityDatas.lifestyle}}' wx:key='{{index}}'>
<image class='icon' src='/img/lifestyle_{{item.type}}.png'></image>
<view class='right'>
<view class='key'>{{lifestyles[item.type]}} {{item.brf}}</view>
<view class='value'>{{item.txt}}</view>
</view>
</view>
</view>
</view>
index.wxss
.guide .title,
.hourly .title {
border-bottom: 1rpx solid rgba(250, 250, 250, .2);
background: rgba(0, 0, 0, .6);
font-size: 24rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
}
.guide .item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 170rpx;
flex-shrink: 0;
}
.guide image {
width: 44rpx;
}
.guide .i {
padding-bottom: 20rpx;
}
.guide .i.weather,
.hour .weather {
display: flex;
justify-content: center;
align-items: center;
}
.guide .i image,
.hour .weather image {
width: 40rpx;
margin-left: 4rpx;
}
.hourly {
margin-bottom: 20rpx;
}
.hourly .hours {
padding: 20rpx 10rpx 0;
background: rgba(0, 0, 0, .6);
}
.hourly .hours .time {
font-size: 22rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
.details {
display: flex;
align-items: center;
flex-wrap: wrap;
background:rgba(0, 0, 0, .6);
margin-bottom:20rpx;
font-size: 24rpx;
}
.hour {
display: flex;
align-items: center;
flex-wrap: wrap;
background: rgb(107, 102, 102);
font-size: 24rpx;
box-sizing: border-box;
border-radius: 8rpx;
}
.hourly swiper-item {
box-sizing: border-box;
padding: 0 10rpx;
background: rgba(0, 0, 0, 0);
}
.details .detail,
.hour .detail {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 10rpx 0;
height: 100rpx;
width: 25%;
border-right: 1rpx solid rgba(250, 250, 250, 0.2);
border-bottom: 1rpx solid rgba(250, 250, 250, 0.2);
box-sizing: border-box;
}
.details .detail:nth-child(4n),
.hour .detail:nth-child(4n) {
border-right: none;
}
.details .detail:nth-child(n+9),
.hour .detail:nth-child(n+9) {
border-bottom: none;
}
.livingIndex {
/* border-bottom: 1rpx solid rgba(240, 240, 240, .4); */
background: rgba(0, 0, 0, .6);
margin-bottom: 20rpx;
}
.livingIndex .item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
border-bottom: 1rpx solid rgba(250, 250, 250, .2);
padding: 20rpx 0;
margin: 0 30rpx;
}
.livingIndex .item:last-child {
border-bottom: none;
}
.livingIndex .item .right {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1;
}
.livingIndex .item .value {
margin-top: 10rpx;
font-size: 24rpx;
}
.livingIndex .icon {
width: 80rpx;
height: 80rpx;
padding: 0 24rpx;
}
2.3程序截图