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

微信小程序生成一个天气查询的小程序 基本的页面结构和逻辑

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

主要代码

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: ' api.weather /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 地址和参数进行替换为真实可用的天气数据接口。

到这里也就结束了，希望对您有所帮助。