实时获取天气小程序

最新推荐文章于 2025-03-19 15:37:25 发布
最新推荐文章于 2025-03-19 15:37:25 发布
阅读量2.6k 收藏 45
点赞数 16
文章标签： 小程序 notepad++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73966002/article/details/141356613
版权

一、实验目标

1、学习使用快速启动模板创建小程序的方法。

2、学习不使用模板手动创建小程序的方法。

3.学习使用微信小程序完成天气查询的工作。

二、实验步骤

1.API密钥申请

首先访问和风天气 | 商业气象服务商, 天气预报，灾害预警，台风路径，卫星云图，天气API/SDK/APP, 天气插件, 历史天气, 气象可视化 (qweather.com)，然后注册登录，登录后就可以访问https://console.qweather.com/，点击项目管理，然后创建项目即可，最后的结果是这样的：

选择免费订阅：
在这里插入图片描述

注册成功就是这样：

在这里插入图片描述

2.API域名调用

这个是免费订阅的api接口：devapi.qweather.com/v7/weather/now，它需要两个或者更多的参数才能有访问的结果，其中一个是location，还有一个是key，location是对应的城市的编号，而key则是我们免费订阅的密钥，具体可以在此查询：
在这里插入图片描述

点击即可查询，但是注意密钥不要泄露。

例如查询devapi.qweather.com/v7/weather/now?location=101010100&key=6c468480cc4e455f9a3930212f5224f5，在浏览器输入即可得到以下答复
在这里插入图片描述

这是一些数据的参数和返回值：

在这里插入图片描述
在这里插入图片描述

3.服务器域名配置

访问微信开发平台，找到开发管理->开发设置，往下滑找到服务器域名，然后在第一个那填写

  • https://devapi.qweather.com
  • https://geoapi.qweather.com

保存即可
在这里插入图片描述

4.项目创建

1.按照图示创建项目即可，注意不要使用任何模板
在这里插入图片描述

2.删除和修改文件：

​ 1）删除index.wxml和index.wxss的全部代码

​ 2）删除index.js的代码，然后输入page补全代码：
在这里插入图片描述

​ 3）删除app.js的代码，输入app补全函数，具体操作同上

3.导航栏设计

在app.json文件中增加以下代码：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackground": "#3883FA",
    "navigationBarTitleText": "今日天气"
  }
}

最后渲染的结果如下：
在这里插入图片描述

4.创建一个imags目录，然后在这个目录下在建一个二级目录weather_icon，然后去和风天气官网下载好天气图片，解压在二级目录下即可，如下图显示：
在这里插入图片描述

5.页面设计

首先在index.wxml文件中增加以下代码：

<view class="container">
</view>

然后在app.wxss文件中增加以下代码：

.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

这样一来我们的容器就设置好了，然后我们需要将index.wxml文件中修改添加一下内容：

<view class="container">
  <!-- 区域1：地区选择器 -->
  <picker mode="region"bindchange = 'regionChange'>
    <view>{{region}}</view>
  </picker>

  <!-- 区域2：单行天气信息 -->
  <text> {{now.temp}}°C {{now.cond_txt}} </text>

  <!-- 区域3：天气图标 -->
  <image src= "/imags/weather_icon/{{now.icon}}.png" mode="widthFix"></image>

  <!-- 区域4：多行天气信息 -->
  <view class="detail">
    <view class="bar">
      <view class="box">湿度</view>
      <view class="box">气压</view>
      <view class="box">能见度</view>
    </view>>
    <view class="bar">
      <view class="box">{{now.humidity}} %</view>
      <view class="box">{{now.pressure}} hPa</view>
      <view class="box">{{now.vis}} km</view>
     </view>
     <view class="bar">
      <view class="box">风向</view>
      <view class="box">风速</view>
      <view class="box">风力</view>
     </view>
     <view class="bar">
      <view class="box">{{now.windDir}}</view>
      <view class="box">{{now.windSpeed}} km/h</view>
      <view class="box">{{now.windScale}} 级</view>
     </view>
  </view>
</view>

然后我们需要在index.wxss文件中增加以下内容：

/* 图标样式 */
image{
  width: 220rpx;
}

这样我们的初始默认结果就是：

在这里插入图片描述

6.逻辑实现

首先在index.wxml中增加组件，追加自定义bindchange事件，具体修改如下：

<!-- 区域1：地区选择器 -->
  <picker mode="region"bindchange = 'regionChange'>
    <view>{{region}}</view>
  </picker>

然后我们需要再index.js文件中增加内容：

 data: {
    region:['安徽省','芜湖市','镜湖区']
  },
  regionChange:function(e){
    this.setData({region: e.detail.value});
    this.getWeather();
  },

然后的结果如下显示：
在这里插入图片描述
在这里插入图片描述

7.获取实际的天气数据

我们需要自定义getWeather函数实时获取天气，所以我们在index.js文件中修改代码：

getWeather:function(){
    var that = this;
    
    // 先通过地名获取 Location ID
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup',
      data: {
        location: that.data.region[1],  // 使用地名
        key: '6c468480cc4e455f9a3930212f5224f5'
      },
      success: function(res) {
        // 获取 Location ID
        var locationId = res.data.location[0].id;
        
        // 使用 Location ID 查询天气
        wx.request({
          url: 'https://devapi.qweather.com/v7/weather/now',
          data: {
            location: locationId,
            key: '6c468480cc4e455f9a3930212f5224f5',
            adm: that.data.region[1] // 使用地名
          },
          success: function(res) {
            console.log(res.data);
            that.setData({now:res.data.now});
          }
        })
      }
    });
  },

初始流程： 小程序的 getWeather 函数原本直接使用地名（如“芜湖市”）来获取天气信息。然而，和风天气 API 实际上更倾向于通过一个唯一的 Location ID（位置编号）来查询天气，而不是直接使用地名。因此，需要首先将地名转换为相应的编号。

获取 Location ID： 为了实现这一点，首先需要调用和风天气提供的 GeoAPI 接口。这个接口允许用户通过提供地名（例如“芜湖市”）来获取对应的 Location ID。小程序通过发送一个 HTTP 请求，传递地名参数和 API 密钥，查询到地名对应的 Location ID。

使用 Location ID 查询天气： 一旦得到了 Location ID，小程序就可以使用这个 ID 进行天气查询。再一次发出请求，这次是向和风天气的天气查询接口发送请求，提供 Location ID 和 API 密钥来获取对应位置的实时天气数据。

返回实时结果如下：
在这里插入图片描述

然后将所有的临时数据修改为{{now.属性}}具体如下：

<view class="container">
  <!-- 区域1：地区选择器 -->
  <picker mode="region"bindchange = 'regionChange'>
    <view>{{region}}</view>
  </picker>

  <!-- 区域2：单行天气信息 -->
  <text> {{now.temp}}°C {{now.cond_txt}} </text>

  <!-- 区域3：天气图标 -->
  <image src= "/imags/weather_icon/{{now.icon}}.png" mode="widthFix"></image>

  <!-- 区域4：多行天气信息 -->
  <view class="detail">
    <view class="bar">
      <view class="box">湿度</view>
      <view class="box">气压</view>
      <view class="box">能见度</view>
    </view>>
    <view class="bar">
      <view class="box">{{now.humidity}} %</view>
      <view class="box">{{now.pressure}} hPa</view>
      <view class="box">{{now.vis}} km</view>
     </view>
     <view class="bar">
      <view class="box">风向</view>
      <view class="box">风速</view>
      <view class="box">风力</view>
     </view>
     <view class="bar">
      <view class="box">{{now.windDir}}</view>
      <view class="box">{{now.windSpeed}} km/h</view>
      <view class="box">{{now.windScale}} 级</view>
     </view>
  </view>
</view>

这样这个实验就算是完美完成了。

三、程序运行结果

在这里插入图片描述
在这里插入图片描述

四、问题总结与体会

问题与解决办法

1. 地名转换为 Location ID

问题： 原始给出的解决办法是使用地名，但是现在调用查询必须是地名的标号，所以我们必须重新写一个程序，将地名转化为编号。

解决办法：

  • 使用https://geoapi.qweather.com/v2/city/lookup来查询地名所对应的编号，然后再查询一次，将编号对应进去，查询新的结果即可。
2. API 返回错误或无数据

问题： 调用 API 获取天气信息时，返回错误或没有数据（例如 API 返回空对象）。

解决办法：

  • 检查 API 返回值： 在每次请求后，仔细检查返回值，捕获和处理可能的错误信息，确保用户能够得到准确的反馈。
  • 设置默认数据： 当 API 无法提供数据时，显示默认天气信息或提示用户稍后重试。

收获和体会

1.深入理解 API 使用： 通过调用和风天气 API，将获得如何正确构建和发送 HTTP 请求、处理响应数据的经验。我了解到不同类型的 API 请求和它们的使用场景。

2.实验对比： 对比上次的实验，我这次发现实验的步骤大差不差，但是有些细节方面的内容变得更加细致，原始的操作文档也无法满足我们现在的编写要求，文档时间比较久远，比如说查询天气的api的参数:location,文档说明的是地名，但是现在我们所使用的参数则是地名的对应的编号，所以这个地方就和我们之前的区别比较大，还有就是我们对实时数据进行赋值的时候，发现它的数据名字是对不上的，需要自己在调试appdata中找到正确的名字，然后自己修改，通过这次实验，我也加深了自己创建小程序的理解和感悟，对这些知识有了更加多的认识。

微信小程序获取天气信息
迪迦·奥特曼__的博客
11-05 815
1. 注册高德地图，获取key 2. 应用管理添加key 3. 下载高德地图的js文件（官方文档会有下载的路径） 4. 新建一个js 文件，存储key方便之后调用 var config = { key: '7e4cad29afb9468981d6bdf0bb8db3a8' } module.exports.Config = config; 5. 调用js文件，获取天气信息 var amapFile = require('../../libs/amap-wx.js'); var config = re
微信小程序获取天气(百度地图)
换日线的博客
04-13 1412
微信小程序获取天气(百度地图) 百度地图开放文档:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getweather 首先下载封装好的js:http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download .js // 引用百度地图微信小程序JSAPI模块 var bmap...
小白入门第二个微信小程序：天气查询
iahsjs的博客
08-20 1991
小白入门微信小程序：天气查询
用微信小程序调用API接口——实现天气预报
最新发布
l4221127的博客
03-19 1885
用微信小程序调用天气API实现简单的天气预报功能
【微信小程序：天气查询】
m0_67893784的博客
08-20 1315
困难：在Gitee上的文档没有图像，后来我把图像上传到Gitee后得到的链接就可以显示在文档中了，就是比较麻烦。收获和体会：使用了别人提供的API，蛮有意思的。
微信小程序获取实时天气
qq_18126657的博客
08-18 3965
微信小程序实现实时天气的获取
微信小程序开发笔记—天气获取显示
qq_45217381的博客
01-04 3511
本文主要介绍了如何实现微信小程序的天气获取和显示功能，内容全面，而且附有实现程序，有一定的参考价值。
微信小程序demo：天气预报，根据经纬度获取城市，获取天气
03-15
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
天气预报微信小程序源码
06-30
1. 实时天气获取 2. 未来三天天气展示 3. 高温显示 4. 小程序背景颜色修改(默认4个) 技术： 1. vue 2. uniapp 代码说明： 1. 替换 project.config.json 文件中 第 44行 appid 为 你的wx小程序id 2. 替换 .\common ...
微信小程序天气源码.zip
09-30
用户可以直接在微信内通过搜索或扫码的方式打开天气小程序，查看最新的天气情况。 对于企业和开发者来说，定制化的天气源码可以满足特定的业务需求，例如将天气信息与户外活动、旅游服务、气象服务等相结合。定制化...
微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
2401_84149496的博客
04-20 1422
申请到ak后，在我的应用里就能查看到2> 第二步：配置你的request合法域名配置域名请到微信公众平台的后台里设置解压后，里面有2个js文件，一个是常规没压缩的，另一个是压缩过的PS：由于小程序项目文件大小限制为1M，建议使用压缩版的js文件！4> 第四步：引入JS模块在项目根目录下新建一个路径，将百度的js文件拷贝到新建的路径下，完成。如下图所示，新建路径 “libs/bmap-wx” ，将 bmap-xw.min.js 文件拷贝至 “libs/bmap-wx” 路径下。
微信小程序Demo：天气预报
06-08
一个简单的天气预报开发小程序，首页banner为动图、带定位地图。
获取详细的实时天气情况
03-18
使用JSON，VS2010平台下的实时详细天气信息获取。
从中央气象台网站获取实时天气预报(C#源码)(已有新版)
09-29
（站点改版了，这个版本不能用了） 新版见：http://download.csdn.net/source/2037134 可以实时获取中央气象台网站的气象信息,完全源码,可根据自己需要修改。
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
01-03
本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能。分享给大家供大家参考，具体如下： 效果图 实现原理 采用高德地图微信小程序开发API（getWeather），如果 city 属性的值为空...
微信小程序调用天气信息
m0_59249795的博客
05-03 3589
在微信小程序中调用天气信息，下面是示例代码 wx.request({ url: 'example.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } }) 以和风天气为例 它可以通过开发文档查看调用很多信息基本上只用
微信小程序 通过获取地理位置查看天气
xniYa的博客
05-23 2672
微信小程序 通过获取地理位置查看天气
小程序：获取所在城市天气
weixin_60477441的博客
01-12 647
本篇文章需要用到wx.getLocation({}）;并且要在腾讯位置服务 申请密钥 （逆地址编码需要用到）首先我们需要去微信开发平台，对文档有一定了解。3.在app.json中配置。
实时天气显示的高地图小程序源码
开发者需要了解如何在小程序中发起网络请求，获取天气数据，并处理这些数据以供展示。 4. 数据展示与交互: 小程序源码需要包括天气信息的数据展示逻辑，如天气图标、温度、风速等数据的图形化展示，以及用户与天气...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值