微信小程序实现一个天气预报应用程序
第一步创建一个项目
第二步项目目录下找到 pages/index/index.wxml 文件
<view class="container">
<view class="header">
<input class="input" placeholder="请输入城市名称" bindinput="onInput" value="{
{ inputValue }}" />
<button class="button" bindtap="searchWeather">查询</button>
</view>
<view class="weather-info" wx:if="{
{ weatherData }}">
<view class="city">{
{
weatherData.city }}</view>
<view class="temperature">温度：{
{
weatherData.temperature }}℃</view>
<view class="weather">{
{
weatherData.weather }}</view>
<view class="wind">风向：{
{
weatherData.wind }}</view>
<view class="humidity">湿度：{
{
weatherData.humidity }}</view>
</view>
</view>
第三步在 pages/index/index.wxss 文件中写入样式
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.input {
flex-grow: 1;
padding: 10px;
border: 1px solid #CCC;
border-radius: 4px;
}
.button {
padding: 10px 20px;
margin-left: 10px;
background-color: #007AFF;
color: #FFF;
border-radius: 4px;
}
.weather-info {
display: flex;
flex-direction: column;
align-items: center;
}
.city {
font-size: 24px;
margin-bottom: 10px;
}
.temperature {
font-size: 16px;
margin-bottom: 10px;
}
.weather {
font-size: 16px;
margin-bottom: 10px;
}
.wind {
font-size: 16px;
margin-bottom: 10px;
}
.humidity {
font-size: 16px;
margin-bottom: 10px;
}
第四步在 pages/index/index.js 文件中添加以下代码
Page({
data: {
inputValue: '', // 输入框的值
weatherData: null // 天气数据
},
onInput(e) {
this.setData({
inputValue: e.detail.value
});
},
searchWeather() {
const that = this;
wx.request({
url: 'https://api.weatherapi.com/v1/current.json',
data: {
key: 'YOUR_API_KEY',
q: this.data.inputValue,
aqi: 'no'
},
success(res) {
const weather = res.data.current;
that.setData({
weatherData: {
city: res.data.location.name,
temperature: weather.temp_c,
weather: weather.condition.text,
wind: `${
weather.wind_dir} ${
weather.wind_kph}km/h`,
humidity: `${
weather.humidity}%`
}
});
}
});
}
});
项目简介
这个示例展示了一个天气预报应用程序，包括一个输入框和一个查询按钮，用于查询指定城市的实时天气信息。在下方显示了城市名称、温度、天气状况、风向和湿度。
