开发一个微信小程序(4)：查询天气-获取某个城市的实时天气
开发一个微信小程序(4)：查询天气-获取某个城市的实时天气
从这一篇开始介绍如何实现一个查询天气小程序 准备工作： 1、申请和风天气开发者账号，并创建一个 Web API 类型的应用 (要调用和风天气 api 获取天气，关于如何使用和风天气api需要自行查阅文档，传送门：和风天气开发平台
https://dev.qweather.com/2、下载和风天气图标 (查询到天气时，前端展示对应天气图标，传送门：和风天气图标
https://icons.qweather.com/3、申请腾讯位置服务开发者账号(主要用于获取用户当前所在城市，传送门：腾讯位置服务开发指南
https://lbs.qq.com/mobile/androidMapSDK/developerGuide/getKeytips：在试验前，一定要把相关接口的域名添加到小程序的request合法域名中，不然是调不通的！！ 本篇来实现一个基础功能：在输入框中输入城市，点击查询，显示实时天气，如下
拆解一下步骤：
1、前端写一个输入框、一个按钮；
2、按钮绑定一个事件，当点击按钮触发查询请求，把输入框输入的参数传给后端，后端调用实时天气查询接口，返回结果；
3、前端渲染返回的数据；
下面是具体的步骤
1、前端定义输入框、查询按钮
打开 pages/weather/weather.wxml
定义一个输入框和一个按钮：
其中输入框绑定了一个名为 getInputValue 的方法，这个方法的作用是获取输入框内输入的值
按钮我是用<view>标签表示的，没有用常规的button标签，它绑定了 queryWeather 方法
<!--pages/weather/weather.wxml-->
<view class='search'>
<view class="search-container">
<input type="text" placeholder="请输入城市名" placeholder-class='placeho' bindinput="getInutValue" value=""/>
</view>
<view class="search-button" bindtap="queryWeather">
<!-- <view><text>点击</text></view> -->
<view><image src="../../images/operation.png"></image></view>
</view>
</view>2、编写 getInputValue 方法
打开 pages/weather/weather.js
先在data中定义一些参数
/**
* 页面的初始数据
*/
data: {
key: '79ab60ad0xxxxxxxxxx7a937',
city: '',
weather_now: {},
future: {},
twenty_four: {},
indices: {},
flag: false,
latitude_value: 1,
longitude_value: 12
},定义 getInputValue 方法，它的作用是获取输入框输入的值，拿到前端输入的城市后，后续查询城市对应的locationid时需要传入它
//获取输入框的值
getInputValue(e) {
console.log(e);
this.setData({
city: e.detail.value //获取页面input输入框输入的值，并传给city
})
console.log(this.data.city);
},3、编写 weather_now 方法
因为「查询天气」和「查询天气指数」的接口需要传入城市的locationid，所以在这个方法中需要先后调3个接口：
先调用获取城市 locationid 的接口，再调用「获取实时天气」的接口和「获取天气指数」的接口
//调用和风天气查询now天气接口
weather_now() {
//获取locationid
wx.request({
url: 'https://geoapi.qweather.com/v2/city/lookup',
method: 'GET',
data: {
key: this.data.key,
location: this.data.city //这个就是前端输入的城市名
},
success: (res) => {
console.log(res);
// return res.data.location[0].id
this.setData({
location: res.data.location[0].id //提取返回结果中的id
})
// 获取locationid后，查询当前天气，在success中发起请求
var location_id = this.data.location;
// console.log(location_id);
wx.request({
url: 'https://devapi.qweather.com/v7/weather/now',
method: 'GET',
data: {
key: this.data.key,
location: location_id
},
success: (res) => {
console.log(res);
this.setData({
weather_now: res.data.now,
flag: true
})
},
});
// 获取locationid后，查询天气指数
wx.request({
url: 'https://devapi.qweather.com/v7/indices/1d',
method: 'GET',
data: {
key: this.data.key,
location: location_id,
type: 3
},
success: (res) => {
console.log(res);
this.setData({
indices: res.data.daily,
flag: true
})
},
});
},
})
},编写queryWeather方法
//发起查询请求
queryWeather() {
this.weather_now()
},4、前端渲染数据
主要是把查询到的天气和天气指数展示出来
我提前下载好了和风天气图标，把它放到项目中，如下
因为天气查询接口的返回内容中包含天气图标代码，只需要引用即可
<!--pages/weather/weather.wxml-->
<view class='search'>
<view class="search-container">
<input type="text" placeholder="请输入城市名" placeholder-class='placeho' bindinput="getInputValue" value=""/>
</view>
<view class="search-button" bindtap="queryWeather">
<!-- <view><text>点击</text></view> -->
<view><image src="../../images/operation.png"></image></view>
</view>
</view>
<block wx:if="{{flag}}">
<view class="title"><text>实时天气</text> </view>
<view class="top-box">
<view class="weather-image">
<view class="">
<image wx:if="{{weather_now.icon}}" src="../../QWeather-Icons-1.1.1/icons/{{weather_now.icon}}.svg"></image>
</view>
<view class="weather-text">
<text class="temp" space="nbsp">{{weather_now.temp}} ℃</text>
<text class="text">{{weather_now.text}}</text>
<text class="wind">{{weather_now.windDir}}{{weather_now.windScale}}级</text>
</view>
</view>
<view class="indices">{{indices[0].text}}</view> <!-- 天气指数 -->
<view>这样就完成了天气查询的基本功能