第一次接觸微信小程序，結(jié)果發(fā)現(xiàn)其實(shí)小程序和NodeJs或者是其它的js框架挺類(lèi)似的。所以現(xiàn)在的話(huà)我跟著視頻敲了一個(gè)天氣預(yù)報(bào)小程序練手，這里的話(huà)只是使用到前臺(tái)代碼，沒(méi)有寫(xiě)后臺(tái)。效果圖如下：
這里的話(huà)一共使用到了兩個(gè)接口，一個(gè)是百度的位置接口，另外一個(gè)是天氣接口。
代碼如下：
index.js
//index.js//獲取應(yīng)用實(shí)例var app = getApp()
Page({
data: {
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六',],
showday: ['今天','明天','']
}, //頁(yè)面加載完成
onLoad:function(){ var that = this; var date = new Date();
date.setDate(date.getDate()+2); this.setData({ 'showday[2]':this.data.weekday[date.getDay()]
}); console.log(this.data.showday);
wx.getLocation({
type:"wgs84",
success: function(res) { var lat = res.latitude;//緯度
var lng = res.longitude;//經(jīng)度
console.log("lat:"+lat); console.log("lng:"+lng);
that.getCity(lat,lng);//調(diào)用自己寫(xiě)的函數(shù)獲得城市信息
},
})
}, //獲得城市
getCity:function(lat,lng){ var that = this; var url ="http://api.map.baidu.com/geocoder/v2/"; var param = {
ak:'QgDjg59KnbdsL14plwnoP5rUAGKyDYPe',
location:lat+','+lng,
output:'json'
};
wx.request({
url: url,
data:param,
success:function(res){ console.log(res); var city = res.data.result.addressComponent.district; var street = res.data.result.addressComponent.street;
that.setData({
city:city,
street:street
}); //調(diào)用自定義函數(shù)獲取天氣信息
that.getWeather(city);
}
})
}, //獲取天氣信息
getWeather:function(city){ var that = this; var url = "https://free-api.heweather.com/v5/weather"; var param={
key: '3ac2953e01864ad18f0e0c16d5ab7fa4',
city:city
}; //發(fā)出請(qǐng)求
wx.request({
url: url,
data:param,
success:function(res){ console.log(res);
that.setData({
now: res.data.HeWeather5["0"].now,
forecast: res.data.HeWeather5["0"].daily_forecast
});
}
})
}
})//key3ac2953e01864ad18f0e0c16d5ab7fa4index.wxml
<!--index.wxml--><image class="bg" mode="aspectFill" src="../../img/day.jpg"></image><view class="wrapper">
<view class="now">
<view class="now-tmp">
<view class="city">{{city}}</view>
<view class="street">{{street}}</view>
<view class="tmp">{{now.tmp}}°</view>
<view class="type">{{now.cond.txt}} | 空氣 良</view>
</view>
<view class="now-exp">
<view class="exp-item">
<view class="">{{now.wind.dir}}</view>
<view class="">{{now.wind.sc}}級(jí)</view>
</view>
<view class="item-sp"></view>
<view class="exp-item">
<view class="">相對(duì)濕度</view>
<view class="">{{now.hum}}%</view>
</view>
<view class="item-sp"></view>
<view class="exp-item">
<view class="">體感溫度</view>
<view class="">{{now.fl}}°</view>
</view>
</view>
</view>
<view class="forecast">
<block wx:for="{{forecast}}" wx:for-item="fc">
<view class="cast-item">
<view class="cast-day">{{showday[index]}}</view>
<view class="cast-type">
<image class="type-img" src="../../img/icons/{{fc.cond.code_d}}.png"></image>
{{fc.cond.txt_d}} | 良 </view>
<view class="cast-tmp">
{{fc.tmp.max}}° / {{fc.tmp.min}}° </view>
</view>
</block>
</view></view>
index.wxss
/**index.wxss**/.wrapper{ width:100%; height:100%; box-sizing: border-box; position: absolute; top:0; left:0; padding:50rpx; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}.now{ height:600rpx; color:#fff; font-size: 0.85rem; display: flex; flex-direction: column;}.tmp{ font-size: 4rem;}.bg{ height: 700rpx; width: 750rpx;}.now-exp{ display: flex; flex-direction: row; justify-content: space-around;}.now-tmp{ flex-grow: 1;/*表示剩余的空間都分配給該元素*/}.exp-item{ font-size: 1.2rem; text-align: center;}.item-sp{ width:5rpx; background-color: #fff;}.forecast{ margin-top: 50rpx;}.type-img{ width:50rpx; height:50rpx; vertical-align: middle;}.cast-item{ display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1rpx solid #ccc; padding: 40rpx 0;}這個(gè)程序還是挺簡(jiǎn)單的，只要將頁(yè)面布局出來(lái)后，只要在使用js的Page對(duì)象里面進(jìn)行數(shù)據(jù)的交換就可以了。而且在Page里的data對(duì)象中的數(shù)據(jù)都可以使用{{}}的形式將里面的變量顯示出來(lái)，非常好用的模板方式，和vuejs有點(diǎn)像。