大家好，我是陈楠酒肆，今天我为大家分享的是小程序获取当前的天气预报，我们先看看效果图
效果图
在实现这个效果之前我们需要引用一个JS文件，就是amap-wx.js，这个文件可以在我的交流群里下载。由于这里我使用了高德地图密钥，因此，大家还需要在高德网站上注册一个账号，并获取相应的密钥，有关这点，我会单独拉出来将，在此只做抛砖引玉。
好了，下面进入正题，假设大家有了高德地图的密钥，那么下面我们该如何实现呢。
JS文件如下：
const amapFile = require('../../utils/amap-wx.js'); //引用amap-wx.js文件
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
weather: [], //天气对象
markersData: {
latitude: '',//纬度
longitude: '',//经度
key: "你的密钥"//申请的高德地图key
},
city:'',
address:'',
address2:'',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
that.loadInfo(); //执行函数
},
//获取当前位置的经纬度
loadInfo: function () {
var that = this;
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
var latitude = res.latitude//维度
var longitude = res.longitude//经度
that.loadCity(latitude, longitude);
}
})
},
//把当前位置的经纬度传给高德地图，调用高德API获取当前地理位置，天气情况等信息
loadCity: function (latitude, longitude) {
var that = this;
var myAmapFun = new amapFile.AMapWX({ key: that.data.markersData.key });
myAmapFun.getRegeo({
location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'
success: function (data) {
console.log("开始数据");
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("开始数据2");
console.log(data);
//成功回调
},
fail: function (info) {
//失败回调
console.log("开始数据3");
console.log(info)
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
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>城市风向：{{weather.winddirection.data}}</view>
<view>城市风力：{{weather.windpower.data}}</view>
以上就是核心内容，小程序运行起来的效果是：
image
以上就是核心代码，有什么不明白的地方可以给我留言。
网友评论