微信小程序生成一个天气查询的小程序
基本的页面结构和逻辑
页面结构：包括一个输入框和一个查询按钮。
页面逻辑：在用户输入城市名称后，点击查询按钮，跳转到天气详情页面，并将城市名称作为参数传递。
主要代码
index.js
// index.js
Page({
data: {
city: ''
},
onInput: function(e) {
this.setData({
city: e.detail.value
});
},
onSearch: function() {
wx.navigateTo({
url: '/pages/weather?city=' + this.data.city
});
}
});
index.wxml
<!-- index.wxml -->
<view class="container">
<input type="text" placeholder="请输入城市名称" bindinput="onInput"></input>
<button bindtap="onSearch">查询</button>
</view>
index.wxss
/* index.wxss */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
天气详情页面(pages/weather)
weather.js
// weather.js
Page({
data: {
city: '',
weather: ''
},
onLoad: function(options) {
const city = options.city;
this.setData({
city: city
});
// 请求天气数据
wx.request({
url: 'https://api.weather.com/v1/current?city=' + city,
success: res => {
this.setData({
weather: res.data.weather
});
}
});
}
});
weather.wxml
<!-- weather.wxml -->
<view class="container">
<view class="weather-info">{
{
weather }}</view>
</view>
weather.wxss
/* weather.wxss */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.weather-info {
font-size: 20px;
}
解释
首页和天气详情页。用户可以在首页输入城市名称后，点击查询按钮跳转到天气详情页面，并展示该城市的实时天气信息。
请注意，实际使用中，您需要将请求天气数据的 API 地址和参数进行替换为真实可用的天气数据接口。
到这里也就结束了，希望对您有所帮助。
