学习笔记7

获取天气的详细描述

.js

//index.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)

}

});

}

})

 

 

.wxml

<!-- nav -->

<view class='nav'>

<image class='img' src='../../assets/icons/icon.png'></image>

<input class='ipt' placeholder-class='pla' placeholder='请输入城市名，快速查询天气信息' bindconfirm="finish" value='{{value}}'></input>

</view>

<!-- ENDnav -->

 

<!-- user -->

<view class='user'>

 

<view class='userAvatar'>

<open-data type="userAvatarUrl"></open-data>

</view>

 

<open-data class="userNick" type="userNickName"></open-data>

</view>

<!-- END user -->

 

<!-- location -->

<view class='map'>

 

<view class='l-box'>

<image class="img" src='../../assets/icons/location.png'></image>

<text class='loc'>{{weather.city}}</text>

</view>

<text class='r-box'>{{date}} {{weather.update_time}} 更新</text>

</view>

<!-- END location -->

 

<!-- weather -->

<view class='info'>

<view class='tem'>

{{weather.tem}} <text>℃</text>

</view>

<text class='wea'>{{weather.wea}}</text>

<text class='air_level'>空气质量:{{weather.air_level}}</text>

</view>

<!-- END weather -->

 

<!-- 7日天气 -->

<view class="weekday">7日天气</view>

 

<scroll-view class="scroll-view_H" scroll-x="true">

<view class="scroll-view-item_H" wx:for="{{weatherweek.data}}">

<view>{{item.date}}</view>

<view>{{item.tem2}}~{{item.tem1}}</view>

<view class='wea'>{{item.wea}}<image class='wea_img' src='../../weaicon/{{item.wea_img}}.png'></image></view>

<view>{{item.win[0]}}{{item.win_speed}}</view> 

</view>

</scroll-view>

 

<!-- 描述 -->

<view class="detail">

<view class="item">

<text>温度(℃)</text>

<text>{{weather.tem}}</text>

</view>

<view class="item">

<text>湿度(%)</text>

<text>{{humidity}}</text>

</view> 

<view class="item">

<text>PM2.5</text>

<text>{{weather.air_pm25}}</text>

</view>

<view class="item">

<text>气压(hPa)</text>

<text>{{weather.pressure}}</text>

</view> 

<view class="item">

<text>风向</text>

<text>{{weather.win}}</text>

</view> 

<view class="item">

<text>风速</text>

<text>{{weather.win_meter}}</text></view> 

<view class="item">

<text>风速等级</text>

<text>{{weather.win_speed}}</text>

</view> 

 

<view class="item">

<text>能见度</text>

<text>{{weather.visibility}}</text>

</view> 

</view>

 

<view class='system'>

<view id='life'><text>生活指数</text></view>

<view>

<text>舒适度指数</text>

<text class='comfort'>较不舒适</text>

</view>

<view>

<text>穿衣指数</text>

<text class='clothes'>炎热</text>

</view>

<view>

<text>感冒指数</text>

<text class='faver'> 少发</text>

</view>

 

<view>

<text>运动指数 </text>

<text class='sport'>较不宜</text>

</view>

 

<view>

<text>旅游指数 </text>

<text class='sport'>较适宜</text>

</view>

 

<view>

<text>紫外线指数 </text>

<text class='sport'>最弱</text>

</view>

<view>

<text>洗车指数 </text>

<text class='sport'>不宜</text>

</view>

<view>

<text>空气污染指数 </text>

<text class='sport'>较差</text>

</view>

</view>

 

.wxss

/**index.wxss**/

page{

height: 160%;

background:url(http://pic1.win4000.com/mobile/f/55821f0be38fa.jpg) no-repeat 0 0;

background-size: 100% 200%;

}

.nav{

display: flex;

justify-content: center;

align-items: center;

position: relative;

}

.nav>.ipt{

width: 90%;

border-bottom: 2rpx solid rgba(253, 253, 253, 0.726);

padding-left: 60rpx;

box-sizing: border-box;

}

.pla{

font-size: 26rpx;

color: rgba(255, 255, 255, 0.411);

}

.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 #ddd;

}

.user>.userNick{

font-size: 28rpx;

color: rgba(255, 255, 255, 0.411);

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;

color: white;

}

.map .img{

width: 35rpx;

height: 35rpx;

}

.map .loc{

font-size: 54rpx;

margin-left: 15rpx;

color: rgba(255, 255, 255, 0.411);

}

.map .r-box{

font-size: 26rpx;

color: rgba(255, 255, 255, 0.411);

}

/* END location */

 

/* weather */

.info{

height: 562rpx;

display: flex;

flex-direction: column;

justify-content: flex-end;

align-items: center;

}

.info .tem{

height: 400rpx;

line-height: 400rpx;

font-size: 120rpx;

color: rgb(241, 233, 233);

position: relative;

}

.info .tem text{

position:absolute;

right:-30rpx;

top:-30rpx;

font-size:30rpx;

}

.info .wea{

color:rgb(241, 233, 233);

}

.info .air_level{

margin: 40rpx;

font-size: 30rpx;

color: rgb(241, 233, 233);

}

/* END weather */

 

/* weekday */

.weekday{

color: rgb(46, 45, 45);

text-align: center;

font-size: 28rpx;

margin: 10rpx 0;

padding-bottom: 10rpx;

border-bottom: 1rpx solid #ddd;

}

.scroll-view_H{

white-space: nowrap;

}

.scroll-view-item_H{

width: 30%;

display: inline-block;

margin: rpx;

}

.scroll-view-item_H>view{

text-align: center;

font-size: 22rpx;

margin-bottom: 10rpx;

}

.wea{

display: flex;

align-items: center;

justify-content: center;

}

.wea_img{

margin: 5rpx 0rpx 5rpx 8rpx;

width: 24rpx;

height: 24rpx;

}

 

/* detail */

.detail{

margin: 28rpx 0;

display: flex;

flex-wrap: wrap;

border-left:1rpx solid #ddd;

border-top:1rpx solid #ddd;

box-sizing: border-box;

}

.detail>.item{

padding: 10rpx 0;

height: 100rpx;

flex-basis: 25%;

font-size: 26rpx;

border-right: 1rpx solid #ddd;

border-bottom: 1rpx solid #ddd;

box-sizing: border-box;

display: flex;

justify-content: space-around;

flex-direction: column;

align-items: center;

}

 

.system{

padding-left: 20rpx;

}

.system>view{

font-size: 30rpx;

padding-right:50rpx;

height: 100rpx;

display: flex;

justify-content: space-between;

align-items: center;

border-bottom: 1rpx solid #ddd;

}