第一步创建一个项目

第二步项目目录下找到 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}%`}});}});}
});

项目简介

这个示例展示了一个天气预报应用程序，包括一个输入框和一个查询按钮，用于查询指定城市的实时天气信息。在下方显示了城市名称、温度、天气状况、风向和湿度。