大家好，我是陳楠酒肆俏竞，今天我為大家分享的是小程序獲取當前的天氣預(yù)報篷朵，我們先看看效果圖
效果圖
在實現(xiàn)這個效果之前我們需要引用一個JS文件，就是amap-wx.js糠聪，這個文件可以在我的交流群里下載荒椭。由于這里我使用了高德地圖密鑰，因此舰蟆，大家還需要在高德網(wǎng)站上注冊一個賬號趣惠，并獲取相應(yīng)的密鑰狸棍，有關(guān)這點，我會單獨拉出來將味悄，在此只做拋磚引玉草戈。
好了，下面進入正題侍瑟，假設(shè)大家有了高德地圖的密鑰猾瘸，那么下面我們該如何實現(xiàn)呢。
JS文件如下：
const amapFile = require('../../utils/amap-wx.js'); //引用amap-wx.js文件
const app = getApp();
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
weather: [], //天氣對象
markersData: {
latitude: '',//緯度
longitude: '',//經(jīng)度
key: "你的密鑰"http://申請的高德地圖key
},
city:'',
address:'',
address2:'',
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
that.loadInfo(); //執(zhí)行函數(shù)
},
//獲取當前位置的經(jīng)緯度
loadInfo: function () {
var that = this;
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的經(jīng)緯度
success: function (res) {
var latitude = res.latitude//維度
var longitude = res.longitude//經(jīng)度
that.loadCity(latitude, longitude);
}
})
},
//把當前位置的經(jīng)緯度傳給高德地圖丢习，調(diào)用高德API獲取當前地理位置，天氣情況等信息
loadCity: function (latitude, longitude) {
var that = this;
var myAmapFun = new amapFile.AMapWX({ key: that.data.markersData.key });
myAmapFun.getRegeo({
location: '' + longitude + ',' + latitude + '',//location的格式為'經(jīng)度,緯度'
success: function (data) {
console.log("開始數(shù)據(jù)");
console.log(data[0]['regeocodeData']['addressComponent']['city']);
that.setData({
city: data[0]['regeocodeData']['addressComponent']['city'],
address:data[0]['desc'],
address2: data[0]['name']
});
console.log(data);
},
fail: function (info) { }
});
myAmapFun.getWeather({
success: function (data) {
that.setData({
weather: data
})
console.log("開始數(shù)據(jù)2");
console.log(data);
//成功回調(diào)
},
fail: function (info) {
//失敗回調(diào)
console.log("開始數(shù)據(jù)3");
console.log(info)
}
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
wxml文件如下：
<view>所屬城市：{{weather.city.data}}</view>
<view>城市濕度：{{weather.humidity.data}}</view>
<view>城市溫度：{{weather.temperature.data}}</view>
<view>城市天氣：{{weather.weather.data}}</view>
<view>城市風(fēng)向：{{weather.winddirection.data}}</view>
<view>城市風(fēng)力：{{weather.windpower.data}}</view>
以上就是核心內(nèi)容淮悼，小程序運行起來的效果是：
image
以上就是核心代碼咐低，有什么不明白的地方可以給我留言。
