实现一个城市天气查询功能的小程序

已于 2022-05-08 22:09:18 修改
阅读量1k 收藏 6
点赞数 3
文章标签： 小程序 前端
于 2022-05-08 22:05:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/farel/article/details/124654130
版权

小程序实训笔记

前言

这是在实训中自己总结的一些经验：

通过微信开发者工具来创造一个小程序，并实现天气查询功能

一、获取API接口信息和数据

在小程序中通过引用外部API接口来获取数据，并展示于前端。我使用的聚合数据API来，在这里并不推荐使用聚合数据（因为注册后需要实名信息，比较复杂并且每日只有十次请求机会）
在这里插入图片描述进入测试后、点击发送请求获取数据
在这里插入图片描述暂时把请求到的JS数据复制到一个文本文件夹中，之后写前端后会使用

{
	"reason":"查询成功!",
	"result":{
		"city":"长沙",
		"realtime":{
			"temperature":"21",
			"humidity":"97",
			"info":"晴",
			"wid":"00",
			"direct":"东北风",
			"power":"2级",
			"aqi":"57"
		},
		"future":[
			{
				"date":"2022-05-08",
				"temperature":"20\/25℃",
				"weather":"中雨转小雨",
				"wid":{
					"day":"08",
					"night":"07"
				},
				"direct":"西北风转南风"
			},
			{
				"date":"2022-05-09",
				"temperature":"18\/25℃",
				"weather":"小雨转大雨",
				"wid":{
					"day":"07",
					"night":"09"
				},
				"direct":"东北风"
			},
			{
				"date":"2022-05-10",
				"temperature":"18\/21℃",
				"weather":"中雨转小雨",
				"wid":{
					"day":"08",
					"night":"07"
				},
				"direct":"北风"
			},
			{
				"date":"2022-05-11",
				"temperature":"19\/24℃",
				"weather":"小雨转中雨",
				"wid":{
					"day":"07",
					"night":"08"
				},
				"direct":"西风转北风"
			},
			{
				"date":"2022-05-12",
				"temperature":"20\/25℃",
				"weather":"小雨",
				"wid":{
					"day":"07",
					"night":"07"
				},
				"direct":"北风"
			}
		]
	},
	"error_code":0
}

二、设计前端CSS样式

1.效果展示图

展示图如下（图片随着数据的变化而变化）：
在这里插入图片描述

2.代码部分

wxml部分：

<!-- 天气查询 -->
<view class="function" style="margin-top: 40rpx;">
  <view class="calculate">
     <!--标题-->
     <view class="list">
      <view class="img" bindtap="navigator">
        <image src="../../images/index/edit.png"></image>
      </view>
      <view class="font">
      天气查询
      </view> 
    </view> 
    <view class="splitline1"></view>
    <view class="search"> 
    <picker class="chooseCity" mode="region"  bindchange="chooseCity" value="{{city}}" >
      <image src="../../images/index/city.png" class="cityTip"/>
    </picker>
    <input class="searchInput" value="{{city[1]}}" placeholder="请输入城市名" bindinput="searchInput"/>
    <view class="searchBtnView" bindtap="search">
      <view class="searchBtn" > 搜索</view>
    </view>
    </view>
    <view class="splitline2" wx:if="{{!isGetWeather}}"></view>
    <!-- 显示天气情况 -->
    <view class="weatherView1" wx:if="{{isGetWeather}}" >
      <view class="silver" style="background-image:url('../../images/weather/{{realtime.wid}}.png'); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;">
              <!-- 显示城市 -->
              <view class="weather-pronvice" >{{city[0]}}</view>
        <view class="weather-city">{{city[1]}}  {{city[2]}}</view>
        <!-- 显示温度、天气质量 -->
        <view class="weather-tem">{{realtime.temperature}}°</view>
        <view class="weather-conditions">{{realtime.info}} | 空气 {{realtime.quality}}</view>
        <!-- 显示风级、相对湿度、体感温度 -->
        <view class="thingView">
          <view class="weather-windView">
            <view class="wind-direction">风级</view>
            <view class="wind-leve">{{realtime.power}}</view>
          </view>
          <view class="splitline3"></view>
          <view class="weather-humidityView">
            <view class="humidity-title">相对湿度</view>
            <view class="humidity-content">{{realtime.humidity}}%</view>
          </view>
          <view class="splitline3"></view>
          <view class="weather-apparentView">
            <view class="apparent-title">体感温度</view>
            <view class="apparent-content">{{realtime.apparent}}°</view>
          </view>
        </view>
      </view>
      <!-- 显示几天天气大致温度 -->
      <view class="weather-day">
        <view class="weather-body">
          <view class="day-title">今天</view>
          <view class="day-icon">
            <image src="{{future[0].img}}"/>
          </view>
          <view class="day-content">{{future[0].weather[0]}}</view>
          <view class="day-tem">最低{{future[0].temperature[0]}}°/最高{{future[0].temperature[1]}}°</view>
        </view>
        <view class="splitline4"></view>
        <view class="weather-body">
          <view class="day-title">明天</view>
          <view class="day-icon">
            <image src="{{future[1].img}}"/>
          </view>
          <view class="day-content">{{future[1].weather[0]}}</view>
          <view class="day-tem">最低{{future[1].temperature[0]}}°/最高{{future[1].temperature[1]}}°</view>
        </view>
        <view class="splitline4"></view>
        <view class="weather-body">
          <view class="day-title">后天</view>
          <view class="day-icon">
            <image src="{{future[2].img}}"/>
          </view>
          <view class="day-content">{{future[2].weather[0]}}</view>
          <view class="day-tem">最低{{future[2].temperature[0]}}°/最高{{future[2].temperature[1]}}°</view>
        </view>
      </view>
    </view>
    <view wx:else style="height: 480rpx;width: auto;text-align: center;">
      <image src="../../images/index/noContent.png" style="width: 350rpx; height: 350rpx;margin-top: 50rpx;"></image>
      <view style="color: gray;">暂无查询结果</view>
    </view>
  </view>
</view>

css部分：

.function{
  margin-top: -100rpx;
  margin-left: auto;
  margin-right: auto;
  width: 670rpx;
  height: auto;
  background-color: #fff;
  border-top-right-radius: 25rpx;
  border-top-left-radius: 25rpx;
  border-bottom-right-radius: 15rpx;
  border-bottom-left-radius: 15rpx;
}
.function .calculate .splitline1{
  width: 100%;
  height: 1rpx;
  background-color: #cecdcd;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  margin-left: auto;
  margin-right: auto;
}
.function .img image{
  width: 70rpx;
  height: 70rpx;
  margin-top: 15rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}
.function .font{
  margin-top: 22rpx;
  font-size: 40rpx;
  font-weight: bold;
}
.function .list{
  display: flex;
  justify-content: left;
}
.search{
  display: flex;
  margin-bottom: 15rpx;
}
.chooseCity{
  align-items: center;
  margin-right: 25rpx;
}
.cityTip{
  margin-left: 15rpx;
  margin-top: 5rpx;
  margin-bottom: 5rpx;
  width: 35rpx;
  height: 35rpx;
}
.searchInput{
  height: 40rpx;
  border-radius: 10rpx;
  align-items: center;
}
.searchBtnView{
  width: 180rpx;
  height: 55rpx;
  background-color: #9fe49f;
  border-radius: 10rpx;
}
.searchBtn{
  margin-top: 6rpx ;
  margin-right: 2rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: 800;
  color: #fff;
}
.function .weatherView1{
  width: auto;
  height: auto;
}
.weatherView1 .silver{
  background-color:silver;
  height: auto;
  border-radius: 15rpx;
}
.weatherView1 .weather-pronvice{ 
  padding-top: 45rpx;
  padding-left: 40rpx;
  color: #fff;
  font-size: 45rpx;
  font-weight: bold;
}
.weatherView1 .weather-city{
  padding-top: 5rpx;
  padding-left: 40rpx;
  color: #fff;
  font-size: 38rpx;
}
.weatherView1 .weather-tem{
  padding-left: 40rpx;
  padding-top: 5rpx;
  color: #fff;
  font-size: 160rpx;
  font-weight: bold;
}
.weatherView1 .weather-conditions{
  padding-left: 40rpx;
  color: #fff;
  font-size: 40rpx;
}
.weatherView1 .thingView{
  padding-top: 100rpx;
  display: flex;
  padding-bottom: 50rpx;
}
.weather-windView .wind-direction{
  padding-left: 55rpx;
  color: #fff;
  font-size: 36rpx;
}
.weather-windView .wind-leve{
  padding-top: 2rpx;
  padding-left: 45rpx;
  color: #fff;
  font-size: 48rpx;
  font-weight: bold;
}
.splitline3{
  margin-left: 55rpx;
  width: 2rpx;
  height: 120rpx;
  background-color: white;
}
.weather-humidityView{
  padding-left: 50rpx;
}
.weather-humidityView .humidity-title{
  color: #fff;
  font-size: 36rpx;
}
.weather-humidityView .humidity-content{
  padding-top: 2rpx;
  padding-left: 24rpx;
  color: #fff;
  font-size: 48rpx;
  font-weight: bold;
}
.weather-apparentView{
  padding-left: 40rpx;
}
.weather-apparentView .apparent-title{
  color: #fff;
  font-size: 36rpx;
}
.weather-apparentView .apparent-content{
  padding-top: 2rpx;
  padding-left: 24rpx;
  color: #fff;
  font-size: 48rpx;
  font-weight: bold;
}
.weather-day{
  background-color: #fff;
  border-radius: 15rpx;
}
.weather-day .weather-body{
  display: flex;
  height: 120rpx;
}
.weather-body .day-title{
  display: flex;
  height: 100%;
  width: 20%;
  align-items: center;
  justify-content: center;
  font-size: 34rpx;
}
.splitline4{
  height: 1rpx;
  width: 98%;
  background-color: rgb(219, 223, 223);
  margin-left: auto;
  margin-right: auto;
}
.weather-body .day-icon{
  display: flex;
  height: 100%;
  width: 10%;
  align-items: center;
  justify-content: center;
}
.day-icon image{
  width: 55rpx;
  height: 55rpx;
}
.weather-body .day-content{
  display: flex;
  height: 100%;
  width: 25%;
  padding-left: 1%;
  padding-right: 1%;
  align-items: center;
  justify-content: center;
  font-size: 34rpx;
}
.weather-body .day-tem{
  padding-left: 4%;
  padding-right: 2%;
  display: flex;
  height: 100%;
  width: 45%;
  align-items: center;
  font-size: 32rpx;
}

前端所使用到的小图标这里就不贴上来了，需要的可以自己去阿里矢量官网下载，免费的，还有就是背景图是在百度扣的

js部分：

const utils = require('../utils/utils.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    city:[],
    isGetWeather: false,
    realtime:{},
		future:[]
  },  
  // 获取定位
  chooseCity:function(e){
    this.setData({
      city:e.detail.value,
      isGetWeather:false
    })
  },
  /* 查询天气 */
  searchInput:function(e){
    let arr= this.data.city;
    arr[0]= '';
    arr[1]=e.detail.value;
    this.setData({
      city:arr,
      isGetWeather:false
    })
  },
  search:function(e){
    var that = this;
    if(Object.keys(that.data.city).length>0){
      let choose = that.data.city[1].split("市")[0];
      
      wx.request({
        url: 'http://apis.juhe.cn/simpleWeather/query?key=这里需要修改成自己的key &city=' + choose, 
        success:function(res){
          console.log(res)
          if(res.data.result !=null){
            that.setData({
              realtime:res.data.result.realtime,
              future:res.data.result.future
            })
			//数据处理部分
           if(Object.keys(that.data.realtime).length>0&&Object.keys(that.data.future).length>0){
              let arr1 = that.data.realtime;
              let arr2 = that.data.future;
              let quality;
              if(that.data.realtime.aqi>0&&that.data.realtime.aqi<=50){
                quality = "优"
              }else if(that.data.realtime.aqi>51&&that.data.realtime.aqi<=100){
                quality = "良"
              }else if(that.data.realtime.aqi>101&&that.data.realtime.aqi<=150){
                quality = "轻度污染"
              }else if(that.data.realtime.aqi>151&&that.data.realtime.aqi<=200){
                quality = "中度污染"
              }else if(that.data.realtime.aqi>201&&that.data.realtime.aqi<=300){
                quality = "重度污染"
              }else if(that.data.realtime.aqi>301){
                quality = "严重污染"
              }
              if(that.data.realtime.temperature>0){
                arr1.apparent= parseInt(that.data.realtime.temperature) + 2 
              }else{
                arr1.apparent= parseInt(that.data.realtime.temperature) - 2 
              }
              arr1.wid= utils.formatSole(new Date())
              for(let i=0;i<that.data.future.length;i++){
                let a,b,c;
                a = that.data.future[i].temperature.split("\/");
                b = a[1].split("℃");
                a[1] = b[0];
                arr2[i].temperature = a;
                c = that.data.future[i].weather.split("转")
                arr2[i].weather = c;
                arr2[i].img ="../../images/weather/" +arr2[i].weather[0] +".png";
                that.setData({
                  future:arr2
                })
              }
              arr1.quality = quality;
              that.setData({
                realtime:arr1,
                isGetWeather:true
              })
            }
          } else{
            wx.showModal({
              title:'提示',
              content:res.data.reason,
              showCancel:false
            })
          }
        },
        fail(){
          wx.showModal({
            title:'提示',
            content:'查询失败',
            showCancel:false
          })
        }
      })
     
    } else{
      wx.showModal({
        title:'提示',
        content:'请输入地区',
        showCancel:false
      })
    }
  },
})

3.需要说明的几个点：

1.在pages目录创建一个utils文件夹用于放utils.js文件（用来查询当前时间，返回时间信息）
const utils = require(‘…/utils/utils.js’)所用的文件就是下面这部分代码

const formatTime = date =>{
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second =date.getSeconds()
  return [year,month,day].map(formatNumber).join('-') + ' ' +[hour,minute].map(formatNumber).join(':')
}

const formatNumber = n =>{
  n = n.toString()
  return n[1] ? n: '0' + n
}
const formatDate = date =>{
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return [year,month,day].map(formatNumber).join('-')
}
const formatSole = date =>{
  const hours = date.getHours();
  let text ;
  if (hours >= 0 && hours <= 6) {
    text = "01";
  } else if (hours > 6 && hours <= 18) {
    text = "00";
  }else if(hours >18&& hours<=24){
    text = "01";
  }
  return text;
}
module.exports = {
  formatTime : formatTime,
  formatDate: formatDate,
  formatSole : formatSole
}

2.使用wx.request来请求外部链接接口需要在微信公众平台设置域名信息以及开发者工具勾选信息，否则将无法查询接口。
勾选如下信息：
在这里插入图片描述
在微信公众平台上，点击开发管理，找到服务器域名，点击修改，然后保存并提交
在这里插入图片描述
在这里插入图片描述在这里插入图片描述3.修改请求地址的key值，改成自己的key就可以使用接口啦
在这里插入图片描述

总结

关于这部分小程序来说，简单的实现了一个请求外部接口API来获取天气数据，并将数据处理后显示在前端界面上，再把样式做的美观一些，需要注意的地方就是图片存储位置需要更改以及图片名称需要更改不然就会报错。

三木想养一只猫
关注
Java Web小案例：查询城市天气
Mr_qing的博客
11-05 1402
一、解决思路 1、首先获取泸州的城市代码 在返回的数据里，第一项的ref值就是泸州的城市代码：101271001 2、利用国家气象局提供的接口访问泸州的天气信息 二、准备工作 学会如何在Java程序里解析json。 准备jar包 连接：链接: 点击这里 提取码: 3nqw 1、创建Java项目JsonDemo ParseJsonString package net.qing.json; ...
微信小程序天气预报
前端小学生
04-07 2556
一个简单的微信小程序天气预报查询 仅以此记录自己学习小程序的过程，以及学习中所遇到的问题既解决过程给其他新手以参考 所需要用到的标签有input输入框，用来获取城市的名称 icon标签用来表示搜索图标，已经用来和接口发生响应 **前导知识 wx.request用来发起网络请求。默认超时时间和最大时间都是60s，一个微信小程序同时最多只能连接5个网络请求 下面用代码来演示一下wx.request的使用 wx.request({ url:'test', //api接口地址 data:{
天气查询小程序
weixin_50947533的博客
08-17 109
天气查询小程序
创建一个可以查询城市天气的微信小程序
最新发布
m0_74031588的博客
08-20 892
创建一个微信小程序，可以查询国内各地天气情况。
微信公众平台消息接口开发（4）天气预报
weixin_30723433的博客
02-07 455
微信公众平台 微信公众平台开发 消息接口 微信天气预报天气预报接口 中国天气网天气神 作者：http://www.cnblogs.com/txw1958/ 原文：http://www.cnblogs.com/txw1958/archive/2013/02/07/weixin-if4-weather-forecast.html 一、请求数据 首先需要能有取得天气数据的接口...
简洁天气预报小程序实现
abraham76的博客
10-22 1291
天气预报   随着微信小程序的兴起，很多工具类小程序应运而生，例如天气预报小程序。近日完成一款天气预报小程序，功能简单，代码量不算多，比较适合刚入门的新手作为练习项目。 效果如图：   有今日天气详细预报，以及生活指数相关建议。还有10天内的预报。就是天气提供的API接口可能有时不稳定。如果接口失效了，可以在网上找一个。百度搜索关键词：“天气预报api”，即可。不过免费的api没有一直稳定的，所以只能学习之用。   本小程序代码量不多，一共6个页面组成，比之前写的更规范，之前写的一个签到的小程序很不规范
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
01-03
本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能。分享给大家供大家参考，具体如下： 效果图 实现原理 采用高德地图微信小程序开发API（getWeather），如果 city 属性的值为空...
微信小程序实现天气预报功能
10-18
主要为大家详细介绍了微信小程序实现天气预报功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
探索小程序源码：实现城市天气查询功能
通过以上对小程序源码和城市天气小程序的介绍与分析，我们可以了解到开发此类小程序需要考虑的技术要点和实现细节，同时也能够深刻认识到小程序作为一种便捷的移动应用形式，在人们日常生活中所发挥的重要作用。
中国各城市天气查询程序
11-07
压缩包包含程序源代码、exe文件，和中国城市天气网编码表(json格式)； 主要实现的功能为用户输入城市名 如深圳，则会返回当前日期的深圳天气信息，包括日期，温度、天气类型，风向/风力、温馨贴士，使用天气网的接口...
城市天气数据获取接口
简单
04-02 927
http://gocubecloud.com/articles/2020/04/01/1585745655433 https://gitee.com/reed_huts/gowork
Java实现天气预报
12-19
java实现天气预报 包含了XML,dom4j的使用 易学易懂，你值得拥有
微信小程序-空气质量查询小程序
05-13
微信小程序-空气质量查询小程序
微信小程序自制天气预报和开发工具
08-17
想入门的小伙伴可以看下这个源码，很简单，易上手。搭建快。
微信小程序代码入门+项目实战（天气预报）
01-26
一： 1). 注册微信小程序账户 2). 安装微信开发者工具 3). 工具的基本使用 4). 小程序开发入门 二： 1). 项目页面搭建 2). 调用微信API获取用户地址 3). 调用公共天气API获取气象信息 4). 在页面中显示动态信息
微信小程序之天气查询小案例
weixin_65044153的博客
12-14 2651
本次小项目是关于微信小程序-动态查询天气(墨迹天气Api) 此次案例分为以下几个准备方面: 一.准备方面(微信小程序文档) 二.主要方面(如何获取天气) 三.次要方面(wxml,wxss,代码演示)
SpringBoot搭建天气预报微服务系统(单体架构)
呢喃北上的博客
04-28 3461
前言 本系列文章将简单的学习SpringCloud微服务相关知识，其实也是因为时间的原因，一直拖到现在，遂打算趁着假期，决定记录下来。 从天气预报微服务系统的单体架构——&amp;amp;amp;gt;分布式架构的演变过程中，一步一步，由浅及深的学习SpringCloud微服务的思想与其实现的组件。 本系列文章分为以下几个章节: SpringBoot搭建天气预报微服务系统(单体架构) SpringBoo...
心知天气api PHP,php调用心知天气API，实现微信自动回复
weixin_36448205的博客
03-26 335
一：1.定义一个专门用于发送api请求和处理api接收数据的类2.类中定义两个方法：1个用于生成连接api所用的url，一个用于连接api并且处理返回数据5.容易出问题的地方：1)在连接api和处理消息方法中，用cURL进行连接，tips：curl连接的时候不要使用服务器验证！！！,不设置hedding，不设置host，否则连接不了api，正确示范如官方提供的demo参考。2)api返回的是jso...
android天气小程序,微天气 - 开发一个完整的微信小程序
weixin_42298646的博客
05-26 242
继续来聊聊微信小程序的开发，这次带大家一起开发一个功能完整的微信小程序，希望能对大家有一些参考价值。微天气这次咱们一起开发一个天气预报小程序，之所以选这个类型，有两个原因。 一是天气类的小程序整体复杂度比较低，适合我们说明问题。 另外，这种类型的应用也更加适合微信小程序生态的场景，我的理解这个生态不适宜开发过于复杂的应用。 所以选了则个类型。咱们首先来看看最终效果，有个感官的认识：这个是在我的调试...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值