1.app.json页面
{
"pages":[
"pages/main/main"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "天气APP",
"navigationBarTextStyle":"black"
}
}
2.app.wxss
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
3.app.js
//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
4.首先通过经纬度查询本地城市,再通过城市名称查询出天气信息
loadInfo:function(){
var page=this;
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
console.log(latitude,longitude);
page.loadCity(latitude,longitude);
}
})
},
loadCity:function(latitude,longitude){
var page=this;
wx.request({
url: 'http://api.map.baidu.com/geocoder/v2/?ak=D6WOzHaymzVVKvgiy8UbhQEznkgeK6BD&location='+latitude+','+longitude+'&output=json',
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res);
var city = res.data.result.addressComponent.city;
city=city.replace("市","");
page.setData({city:city});
page.loadWeather(city);
}
});
},
loadWeather:function(city){
var page=this;
wx.request({
url: 'http://wthrcdn.etouch.cn/weather_mini?city='+city,
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res)
var future=res.data.data.forecast;
var todayInfo=future.shift();
var today=res.data.data;
today.todayInfo=todayInfo;
page.setData({today:today,future:future})
}
});
}
<view class="content">
<view class="today">
<view class="info">
<view class="temp"> {{today.wendu}}℃ </view>
<view class="weather"> {{today.todayInfo.type}} {{today.todayInfo.fengxiang}} {{today.todayInfo.fengli}}</view>
<view > 友情提示: {{today.ganmao}}</view>
<view class="city"> {{city}}</view>
</view>
</view>
<import src="../template/itemtpl"/>
<view class="future" >
<block wx:for="{{future}}">
<template is="future-item" data="{{item}}"/>
</block>
</view>
</view>
样式:
.content{
font-family : 微软雅黑,宋体;
font-size: 14px;
background-size:cover;
height: 100%;
width:100%;
background-image: url("../assets/img/bg.png");
color:#FFFFFF;
}
.info{
padding:20px;
background:#FFFFFF;
background:rgba(0, 0, 0, 0.5);
box-shadow:10px 10px 20px rgba(0,0,0,0.5);
}
.today{
padding-top: 50rpx;
height: 50%;
}
.city{
color:white;
font-size: 16px;
text-align: right;
margin-right:10rpx;
margin-top:30rpx;
}
.temp{
font-size: 50px;
text-align: center;
}
.weather{
text-align: center;
}
.future{
display: flex;
flex-direction: row;
height: 30%;
padding-left: 5rpx;
background:#FFFFFF;
background:rgba(0, 0, 0, 0.1);
box-shadow:10px 10px 20px rgba(0,0,0,0.5);
text-align: center;
padding-top:10rpx;
padding-bottom:20rpx;
}
.future-item{
min-height:100%;
width: 165rpx;
margin-left: 10rpx;
margin-right: 10rpx;
border: 1px solid coral;
border-radius:10px;
padding-top:10rpx;
}
.future-item view{
margin-top:10px;
}
6.展示未来天气使用了模板
<template name="future-item">
<view class="future-item" >
<view>{{item.date}} </view>
<view> {{item.type}} </view>
<view>{{item.fengxiang}} {{item.fengli}}</view>
<view> {{item.low}} </view>
<view> {{item.high}} </view>
</view>
</template>
需要源码可与我留言联系!!!