《移动软件开发》实验二：天气查询小程序

原创 已于 2023-04-16 12:13:09 修改 · 1.6k 阅读 · 20 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#小程序 #前端 #服务器
于 2022-08-18 20:41:50 首次发布

2022年夏季《移动软件开发》实验二：天气查询小程序

一、实验目标

1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

二、实验步骤

1. 准备工作

1.1. API密钥申请

​ 进入和风天气官方网址：https://www.heweather.com,注册并激活免费类型的用户，可以看到申请到的个人认证key,个人认证key的作用为该信息在小程序发出网络请求时会作为身份识别的标识发送给和风天气的第三方服务器。我申请到的个人key如下。

在这里插入图片描述

1.2 API调用方法
获取实时天气

在这里插入图片描述

获取LocationID

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

1.3 服务器域名配置

​ 每一个小程序在与指定域名地址进行网络通讯前都必须将该域名地址添加到管理员后台名单，因此需要通过微信开发公众平台将需要通讯的两个域名加入到request合法域名中，如下如图所示。

在这里插入图片描述

2. 项目创建

创建空白文件夹weatherDemo用与存放小程序项目
在这里插入图片描述

3. 页面配置

3.1 创建页面文件
项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index，表示小程序运行的第一个页面，本项目只需要保留首页（index）即可。

​ 具体操作如下：

​ (1）将 app.json 文件内 pages 属性中的“ pages / logs / logs ”删除，并删除上一行末尾的

逗号。
(2）按快捷键 Cirl + S 保存当前修改。

3.2 删除和修改文件

具体操作如下：

(1) 删除utils文件夹及其内部所有内容。

(2）删除 pages 文件夹下的 logs 目录及其内部所有内容。

(3）删除 index.Wxml 和 index.Wxss 中的全部代码。

(4）删除 index.js 中的全部代码，并且输人关键词“ page ”找到第二个选项按回车键让其自动补全函数。
(5）删除 app.wxss中的全部代码。
(6）删除app.js中的全部代码，并且输人关健间＂ pp ＂找到第一个选项按回车键让其日动补全函数。

至此，模板代码修改完毕。

3.3 创建其他文件

​ 将天气图标文件夹移动至/weatherDemo/images/weather_icon/文件夹下，形成如下目录结构

在这里插入图片描述

4 视图设计

4.1 导航栏设计

4.2 页面设计

​ 页面包含四个区域：区域1：地区选择器，用户可以自行选择查询的省、市、 区

​ 区域2：显示当前城市的温度和天气状态的文字说明

​ 区域3：显示当前城市天气的图标

​ 区域4：分多行显示其他天气，如气压、湿度、能见度等

4.2.1 整体容器设计

4.2.2 地区选择器设置

使用picker组件实现
在这里插入图片描述

4.2.3 文本设计

在这里插入图片描述

4.2.4 天气图标设计

在这里插入图片描述

4.2.5 多行天气设计

wxml部分代码如下
在这里插入图片描述

wxss部分代码如下
在这里插入图片描述

效果如下

在这里插入图片描述

5.逻辑实现

5.1 更新省市区信息

​ 初始信息设置为为山东省青岛市崂山区

在这里插入图片描述

5.2 获取实时天气数据

​ 获取天气数据，首先需要获取locationID，网址如下

在这里插入图片描述

通过wx.requset获取locationID，请求参数需要有key（个人认证），locaiton(位置坐标或位置名称)吗， 同时可以添加参数adm:限定行政区划，也可用于对重名城市进行过滤
在这里插入图片描述

5.2.1 获取地名

获取id前，需要请求地名获取，可以从picker组件中获取地名，具体函数如下
在这里插入图片描述

5.2.2 获取id

​ 将上一步中获取到的地名传给获取id的函数，用于获取id, 该步通过getLocationID函数实现,url 为网址， data中为所需参数，具体实现如下

`getLocationID(city,area){`

 `var that=this`

 `wx.request({`

  `url: 'https://geoapi.qweather.com/v2/city/lookup?',`

  `method:"GET",`

  `data:{`

  `location:area,`

  `adm:city,`

  `key:'00ecc66f369c457896b11aae1a4f94d3'`

  `},`

   `success:function(res){`

​    `that.getWeather(res.data.location[0].id)`

​    `that.setData({`

​     `localID:res.data.location[0].id`

   `})`

  `}`

 `})`

`},`
5.2.3 获取天气信息

​ 将上一步中获得的id传给getWeather()函数，通过wx.request请求获取天气信息，同时将天气信息修改并保存为本地值，具体代码实现如下

`getWeather:function(id){`

  `var that = this`

  `wx.request({`

   `url:'https://devapi.qweather.com/v7/weather/now?',`

   `data:{`

​    `location:id,`

​    `key:'00ecc66f369c457896b11aae1a4f94d3'`

​    `},`

​    `success(res){`

​    `var resdata=res.data.now`

​    `console.log(resdata);`

​    `that.setData({`

​     `tep:resdata.temp,`

​     `weather:resdata.text,`

​     `image:resdata.icon+'.png',`

​     `shidu:resdata.humidity+'%',`

​     `qiya:resdata.pressure+'hPa',`

​     `nengjiandu:resdata.vis+'km',`

​     `fengxiang:resdata.windDir,`

​     `fengsu:resdata.windSpeed+'km/h',`

​     `fengli:resdata.windScale+'级'`

​    `})`

   `}`

  `})`

 `},`
5.2.4 请求初始数据
通过onload函数中默认初始请求青岛崂山的天气数据

在这里插入图片描述

5.2.5 获取天气信息并加载到页面

​ 在实验结果中呈现

三、程序运行结果

1.获取到的天气信息

在这里插入图片描述

2.天气小程序初始页面

在这里插入图片描述

3.切换城市后的小程序页面

在这里插入图片描述

四、问题总结与体会

问题总结

遇到的问题： 使用和风天气s6访问页面数据被拒绝

解决方法：查询和风天气api文档，发现s6接口已经停用，改用v7接口获取天气数据

心得体会

​ 通过此次实验，我学习了服务器域名配置和临时服务器部署方法，学习并初步掌握了 wx.request 接口的用法，并使用wx.request接口获取到了和风天气api的天气信息，同时我也学习到了不少wtml和css以及javas的相关语法和内容，对于我《移动软件开发》这门课程的学习以及计算机专业的学习都有非常大的帮助。

附：js源码

Page({
  data: {
    region:['山东省','青岛市','崂山区'],
    temp:0,
    weather:'晴',
    imgsrc:'999',
    localID:101120202
  },

  
getLocationID(city,area){
  var that=this
  wx.request({
    url: 'https://geoapi.qweather.com/v2/city/lookup?',
    method:"GET",
    data:{
    location:area,
    adm:city,
    key:'00ecc66f369c457896b11aae1a4f94d3'
    },
      success:function(res){
        that.getWeather(res.data.location[0].id)
        that.setData({
          localID:res.data.location[0].id
      })
    }
  })
},

  getWeather:function(id){
    var that = this
    wx.request({
      url:'https://devapi.qweather.com/v7/weather/now?',
      data:{
        location:id,
        key:'00ecc66f369c457896b11aae1a4f94d3'
       },
       success(res){
        var resdata=res.data.now
        console.log(resdata);
        that.setData({
          tep:resdata.temp,
          weather:resdata.text,
          image:resdata.icon+'.png',
          shidu:resdata.humidity+'%',
          qiya:resdata.pressure+'hPa',
          nengjiandu:resdata.vis+'km',
          fengxiang:resdata.windDir,
          fengsu:resdata.windSpeed+'km/h',
          fengli:resdata.windScale+'级'
        })
      }
    })
  },

  regionChange: function(e){
    this.setData({region:e.detail.value});
    this.getLocationID(e.detail.value[1],e.detail.value[2])
    this.getWeather(this.localID);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getLocationID('青岛','崂山区')
    this.getWeather(101120202)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})



nShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

wxml源码


```xml
<view class="container">
  <!--区域1：地区选择器-->
  <picker mode='region' bindchange='regionChange'>
    <text wx:for="{{region}}">{{item}}</text>
  </picker>
  <!--区域2：单行天气显示-->
  <text>{{weather.temp}}℃  {{weather.text}}</text>
  <!--区域3：天气图标-->
  <image src="/images/weather_icon/{{weather.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">{{weather.humidity}}%</view>
      <view class="box">{{weather.pressure}}kPa</view>
      <view class="box">{{weather.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">{{weather.windDir}}</view>
      <view class="box">{{weather.windSpeed}}km/h</view>
      <view class="box">{{weather.windScale}}级</view>
    </view>
  </view>
</view>
和风天气API获取近6天天气并解析JSON
qq_43890604的博客
07-06 1698
和风天气API获取近6天天气并解析JSON
andriod 和风天气SDK获取实时天气（保姆级教程）
kim5659的博客
12-15 1万+
之前都是使用和风API获取天气数据，也可以，但SDK会了以后，更加简单直接。而且功能也比API更强大，代码更简洁。下面是我折腾差不多一周的成果，这些会了之后，获取天气预报，显示城市，天气图标什么的也都能简单的完成。今天先把这个发出去，过两天把其他 的做完了再发。 因为和风的天气代码和json格式不断的变，所以以下代码适用于4.8版SDK，其他版本我找到了不少，基本都不适用。因为我对JAVA几乎不懂，经过自己不断实验、摸索，最后成功。所以代码肯定不好看，很多也是抄别人的，但不是抄一个人的，所以这里表示感谢，
5分钟搞定和风天气API接入：大模型项目必备的天气数据获取指南
最新发布
weixin_29061041的博客
03-30 703
本文详细介绍了如何快速接入和风天气API，为大模型项目提供精准的天气数据支持。从API密钥申请到实际调用，再到数据解析与格式化输出，5分钟内即可完成基础接入。特别适合大模型开发者和技术团队快速集成天气功能，提升AI应用的实用性和场景适应能力。
小型天气预报Android,利用心知天气api实现
weixin_53861165的博客
09-08 1073
唯一的按钮绑定了onClick方法，如果按钮被点击，就会执行sendRequestWithOkHttp方法，在这个方法中，用匿名内部类新建了三个线程，，在线程运行的过程中，先创建了一个okhttp实例，它是一个处理网络请求的开源插件，分为get和post请求，Json对象就是多个属性被{}括起来的，下面就是我利用心知天气api生成的北京的未来两天的天气的json对象。在Java文件中，首先把刚才放置的控件都进行声明，同时也声明一个与其同名的String类型的变量，用于接收json中返回的值。
【微信小程序】使用和风天气接口api（全过程）——获取天气
热门推荐
weixin_60387745的博客
03-25 2万+
【微信小程序】使用和风天气接口api（全过程）——获取天气
使用和风天气接口api（全过程）——获取天气
qq_49080170的博客
01-15 9177
使用和风天气接口api（全过程）——获取天气
2024年夏季《移动软件开发》实验二：天气查询小程序
yvmanqi的博客
08-20 1459
1.描述实验过程中所遇到的问题，以及是如何解决的和风天气API：获取城市 id：https://geoapi.qweather.com/v2/city/lookup?获取城市天气：https://devapi.qweather.com/v7/weather/now?
移动软件开发实验二：天气查询小程序
m0_63773979的博客
08-23 893
在本次实验中，前面严格按照老师给的教程很顺利的就完成了，唯一的问题就是和风天气的官网网址有所变化，到最后逻辑实现那一部分刚开始出现了一个问题，就是无法获取到所选择地区的实时天气情况，后面通过查阅资料解决，通过本次实现，学会了服务器域名配置和临时服务器部署，同时对小程序的制作有了更深刻的了解。
2024年《移动软件开发》实验二：小程序网络API：天气查询
yyds133的博客
08-20 2334
本文介绍使用微信小程序，通过和风天气的API获得天气情况；将天气情况和24小时的天气情况展示出来。
ouc2022移动软件开发 实验二：天气查询小程序
woxizhendimi的博客
08-17 1275
天气查询小程序
和风天气常用api
qq_54818343的博客
02-28 2688
1.根据城市名获取和风天气id等信息。
【吐血整理】微信小程序如何接入天气预报查询 API
海碗吃饭的博客
03-17 1661
最近在准备面试，打算做一个天气预报查询的小程序来丰富自己的简历，在这里整理了一下我接入的过程，分享给大家也方便自己日后使用，强烈建议收藏！！！
小程序基本命令
aiven1637的博客
10-30 3532
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
如何获取和风天气Web API的KEY？（简要步骤）
weixin_62073160的博客
03-14 1万+
1.跳转到。
【Android】使用和风天气API获取天气数据吧！（天气预报系列之一）
2301_79344902的博客
09-08 5532
天气预报仅仅有数据肯定不够，至于UI等等后事如何，且听第二三四五六回分解。
和风天气API 申请 简要流程
奇妙方程式的博客
05-06 6063
和风天气API 申请 简要流程
和风天气 API 获取天气预报 2025/5/21
梦境虽美,却不长.
05-21 1762
打开 fxLink 网页 https://www.qweather.com/weather/"windDir": "东风","text": "晴",北京为例子,返回结果如下。URL请求格式为GET。
微信小程序基于和风天气的天气预报（自动和手动定位）
m0_63474919的博客
05-29 6306
最近在开发小程序，将自己写的分享给大家,希望能帮助到你们！
关于V7版本的和风天气API获取注意事项，以及arduinojson数据处理
perseverance51博客
12-28 4666
关于V7版本和风天气API获取注意事项
vue3 + tailwindcss + 和风天气api 完成一个天气组件
weixin_45729375的博客
10-22 1710
菜鸡小前端终于找到新工作啦，对于我来说又是一个充满未知的新开始，不过现公司的规模注定好多事情不能像以前一样有前辈们帮我顶住了，所以我要加油努力提升自己💪！刚入职第一天就给了我一版设计稿，要我尽快把delay的进度赶上，感叹之前gap了那么久，都不知道从何下手了，于是乎，我决定先从设计稿里的天气组件入手。但是就这个组件，花了我两天研究才写出来，菜鸡哭泣😭，我会尽量详细地把踩的坑记录下来，希望不要再踩了！由于需要快速开发，我选择了vue3和tailwindcss来完成，项目代码最后会给链接。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值