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

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

  • 第一步创建一个项目
  • [第二步项目目录下找到 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}%`
          }
        });
      }
    });
  }
});

项目简介

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

相关推荐
腾马科技2 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
郑叔敲代码7 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
棋子一名10 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风11 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者811 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088911 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌12 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好26712 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
2501_9151063213 小时前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆13 小时前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序