您的位置:首页 > 移动开发 > 微信开发

微信小程序获取天气api,实现天气查询功能

2020-06-24 22:00 92 查看

api 地址 https://free-api.heweather.net

我使用的是和风天气免费调取天气的API地址

我们需要进行免费注册,注册后我们进入控制台,拿到key值

**在这我们还需要所调用的api地址放在开发者合法域名中,这需要格外注意
**
下面就是实现思路,定义基本变量,然后通过wx.request取到数据后,我们通过this.setData方法将局部变量变为全局变量,然后通过双向绑定映射到页面上
下面看下代码吧

1. wxml

<view class="mtop" >
<button >{{weather}}</button>
</view>

2.wxss

.mtop{
margin-top: 180rpx;
}

3.js

Page({

/**
* 页面的初始数据
*/
data: {
weather:""
},
getWeather() {
var that=this;
wx.request({
url: 'https://free-api.heweather.net/s6/weather/now',
data: {
location: '南京',
key: "b586b23c37b14a83907b6db62e8c9c22"
},
success: function (res) {
that.setData({
weather: res.data.HeWeather6[0].now.cond_txt
})
console.log(res.data)

}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getWeather();
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

我们可以看下返回的结果

最简单的api查询天气就完成了
总结:1:wx.request的使用
2:尽量学会官方api文档使用
3:var that=this的使用

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: