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

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

基本的页面结构和逻辑

页面结构:包括一个输入框和一个查询按钮。

页面逻辑:在用户输入城市名称后,点击查询按钮,跳转到天气详情页面,并将城市名称作为参数传递。

主要代码

index.js

javascript 复制代码
// 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

javascript 复制代码
<!-- index.wxml -->
<view class="container">
  <input type="text" placeholder="请输入城市名称" bindinput="onInput"></input>
  <button bindtap="onSearch">查询</button>
</view>

index.wxss

javascript 复制代码
/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

天气详情页面(pages/weather)

weather.js

javascript 复制代码
// 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

javascript 复制代码
<!-- weather.wxml -->
<view class="container">
  <view class="weather-info">{{ weather }}</view>
</view>

weather.wxss

javascript 复制代码
/* weather.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.weather-info {
  font-size: 20px;
}

解释

首页和天气详情页。用户可以在首页输入城市名称后,点击查询按钮跳转到天气详情页面,并展示该城市的实时天气信息。

请注意,实际使用中,您需要将请求天气数据的 API 地址和参数进行替换为真实可用的天气数据接口。

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

相关推荐
難釋懷7 小时前
微信小程序全局配置
微信小程序·小程序
Enti7c7 小时前
微信小程序核心知识点速览
微信小程序·小程序
2501_9159184120 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域21 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷21 小时前
第一个小程序
小程序
春哥的研究所21 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld21 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点1 天前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖1 天前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发1 天前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb