当前位置：首页 > news >正文

微信小程序生成一个天气查询的小程序

news 2025/8/4 17:26:12

微信小程序生成一个天气查询的小程序

基本的页面结构和逻辑

页面结构：包括一个输入框和一个查询按钮。
页面逻辑：在用户输入城市名称后，点击查询按钮，跳转到天气详情页面，并将城市名称作为参数传递。

主要代码

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;
}