第一次接觸微信小程序，結果發現其實小程序和NodeJs或者是其它的js框架挺類似的。所以現在的話我跟著視頻敲了一個天氣預報小程序練手，這里的話只是使用到前臺代碼，沒有寫后臺。效果圖如下：
這里的話一共使用到了兩個接口，一個是百度的位置接口，另外一個是天氣接口。
代碼如下：
index.js
//index.js//獲取應用實例var app = getApp()
Page({
data: {
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六',],
showday: ['今天','明天','']
}, //頁面加載完成
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;//經度
console.log("lat:"+lat); console.log("lng:"+lng);
that.getCity(lat,lng);//調用自己寫的函數獲得城市信息
},
})
}, //獲得城市
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
}); //調用自定義函數獲取天氣信息
that.getWeather(city);
}
})
}, //獲取天氣信息
getWeather:function(city){ var that = this; var url = "https://free-api.heweather.com/v5/weather"; var param={
key: '3ac2953e01864ad18f0e0c16d5ab7fa4',
city:city
}; //發出請求
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}}級</view>
</view>
<view class="item-sp"></view>
<view class="exp-item">
<view class="">相對濕度</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;}這個程序還是挺簡單的，只要將頁面布局出來后，只要在使用js的Page對象里面進行數據的交換就可以了。而且在Page里的data對象中的數據都可以使用{{}}的形式將里面的變量顯示出來，非常好用的模板方式，和vuejs有點像。