微信小程序開發顯示城市天氣
本案例實現動態顯示城市天氣的功能，案例效果如下：
首先分析制作的思路：
1.在app.json文件的pages數組裏加上main文件夾和template（模板）文件夾的路徑。
2.在main.js文件中，在onLoad()函數中調用loadInfo()函數。
3. 自定義獲取位置的函數loadInfo()，調用wx.getLocation，用於獲取當前的緯度（latitude）和經度（longitude）。在loadInfo()函數中接著調用loadCity()函數。
4. 自定義獲取城市的函數loadCity()，調用wx.request，在“百度地圖開放平臺”網站中註冊自己的AK，通過獲取城市信息的網址（http://api.map.baidu.com/geocoder/v2/?ak=自己的ak&location=緯度值,經度值&output=json）實現當前城市名稱的獲取。
在loadCity()函數中接著調用loadWeather()函數。
5.自定義獲取天氣的函數loadWeather(),根據已有的城市名稱，通過獲取天氣信息的網址（http://wthrcdn.etouch.cn/weather_mini?city=城市名）實現天氣信息的數據獲取。
6.在main.wxml文件中，未來天氣部分通過import調用了自定義模板文件itemtpl.wxml。
然後分析項目中文件的源碼。
app.json文件的代碼如下：
{
"pages":[
"pages/main/main",
"pages/template/itemtpl",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "天氣",
"navigationBarTextStyle":"black"
}
}
main.wxml的代碼如下：
<view class=‘cont‘>
<!-- 今日天氣-->
<view class=‘today‘>
<view class=‘info‘>
<view class=‘tempe‘>{{today.wendu}}°C</view>
<view class=‘weather‘>{{today.todayInfo.type}}{{today.todayInfo.fengxiang}}</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>
main.wxss文件的代碼如下：
/**/
.cont{
font-size:30rpx;
width:100%;
height:100%;
}
.today{
padding:50rpx 0 0 0;
height:50%;
}
.info{
padding:20rpx;
background:rgba(0,0,0,.8);
line-height: 1.5em;
color:#eee;
}
.tempe{
font-size:90rpx;
text-align: center;
margin:30rpx 0;
}
.weather{
text-align: center;
}
.city{
font-size:40rpx;
color:#f60;
text-align: right;
margin: 30rpx 10rpx 0 0;
}
.future{
display:flex;
flex-direction: row;
height:100%;
padding:20rpx 0 20rpx 10rpx;
background:rgba(0,0,0,.8);
text-align: center;
margin:50rpx 0 70rpx 0;
color:#eee;
}
.future-item{
min-height: 100%;
width:160rpx;
margin: 0 10rpx;
border:solid 1px #f90;
padding:10rpx 0 0 0;
line-height:2em;
}
main.js文件的代碼如下：
//
Page({
data: {
// weatherData:‘‘
city:"" ,
today:{},
future:{},
},
onLoad: function () {
this. loadInfo();
},
//自定義獲取位置
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=自己的AK &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,
});
}
})
}
})
itemtpl.wxml的代碼如下：
<!-- 模板文件-->
<template name="future-item">
<view class="future-item">
<view>{{item.date}}</view>
<view>{{item.type}}</view>
<view>{{item.fengxiang}}</view>
<view>{{item.low}}</view>
<view>{{item.high}}</view>
</view>
</template>
至此，案例制作完成。
轉自：https://www.toutiao.com/a6511667318601286157/
微信小程序開發顯示城市天氣