微信小程序实现一个天气预报应用程序

微信小程序实现一个天气预报应用程序

  • 第一步创建一个项目
  • [第二步项目目录下找到 pages/index/index.wxml 文件](#第二步项目目录下找到 pages/index/index.wxml 文件)
  • [第三步在 pages/index/index.wxss 文件中写入样式](#第三步在 pages/index/index.wxss 文件中写入样式)
  • [第四步在 pages/index/index.js 文件中添加以下代码](#第四步在 pages/index/index.js 文件中添加以下代码)
  • 项目简介

第一步创建一个项目

第二步项目目录下找到 pages/index/index.wxml 文件

javascript 复制代码
<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 文件中写入样式

javascript 复制代码
.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 文件中添加以下代码

javascript 复制代码
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}%`
          }
        });
      }
    });
  }
});

项目简介

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

相关推荐
Terio_my1 小时前
微信小程序-智慧社区项目开发完整技术文档(上)
微信小程序·小程序
從南走到北2 小时前
JAVA国际版任务悬赏发布接单系统源码支持IOS+Android+H5
android·java·ios·微信·微信小程序·小程序
游戏开发爱好者83 小时前
iOS 开发推送功能全流程详解 从 APNs 配置到上架发布的完整实践(含跨平台上传方案)
android·macos·ios·小程序·uni-app·cocoa·iphone
汤姆yu4 小时前
基于微信小程序的博物馆文创系统
微信小程序·小程序·博物馆
云起SAAS19 小时前
ai公司起名取名抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·ai公司起名取名
黑马源码库miui5208619 小时前
JAVA购物返利商品比价系统源码支持微信小程序
微信·微信小程序·小程序·1024程序员节
学会煎墙20 小时前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
淡淡蓝蓝21 小时前
uni-app小程序往飞书多维表格写入内容(包含图片)
小程序·uni-app·飞书
2501_915921431 天前
iOS混淆与IPA加固全流程(iOS混淆 IPA加固 Ipa Guard实战)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者81 天前
iOS 26 App 开发阶段性能优化 从多工具协作到数据驱动的实战体系
android·ios·小程序·uni-app·iphone·webview·1024程序员节