廢話不多說,直接上代碼
index.wxml
<!--index.wxml-->
<view class="container">
<text>{{weather.city.text}} : {{weather.city.data}}</text>
<text>{{weather.weather.text}} : {{weather.weather.data}}</text>
<text>{{weather.temperature.text}} : {{weather.temperature.data}} ℃</text>
<text>風速 : {{weather.winddirection.data}} {{weather.windpower.data}}</text>
<text>{{weather.humidity.text}} : {{weather.humidity.data}}</text>
</view>
index.wxss
/**index.wxss**/
.container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #4D8AD7;
color: #fff;
font-size: 18px;
padding-top: 30rpx;
padding-left: 30rpx;
}
.container text{
display: block;
margin: 30px;
}
index.js
//index.js
//擷取應用執行個體
var amapFile = require('../../utils/amap-wx.js');
Page({
data: {
weather: {}
},
onLoad: function () {
var that = this;
var myAmapFun = new amapFile.AMapWX({ key: '你的KEY' });
myAmapFun.getWeather({
success: function (data) {
that.setData({
weather: data
});
},
fail: function (info) {
// wx.showModal({title:info.errMsg})
}
})
}
})
高德開發平台:https://lbs.amap.com
天氣相關介紹:https://lbs.amap.com/api/wx/guide/get-data/weather
詳細參數介紹:https://lbs.amap.com/api/javascript-api/guide/services/weather