2023年夏季《移动软件开发》实验二 | 天气查询小游戏

Xxxlz777

已于 2023-08-22 18:34:09 修改

阅读量93

点赞数

分类专栏：移动软件开发文章标签： json 微信小程序

于 2023-08-22 18:32:13 首次发布

本文链接：https://blog.csdn.net/m0_62460077/article/details/132431907

版权

移动软件开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2022年夏季《移动软件开发》实验报告

姓名：学号：

姓名和学号？
本实验属于哪门课程？	中国海洋大学23夏《移动软件开发》
实验名称？	实验2：天气查询小程序
博客地址？	XXXXXXX
Github仓库地址？	XXXXXXX

一、实验目标

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

二、实验步骤

1.准备工作

1.API密钥申请

如何申请获得开源API的密钥：选择了可以提供全球气象数据服务接口的和风天气API,其官方网址为“https://www.qweather.com/”

（在“天气API”处进入进行注册）用户选择“免费用户”类型，使用邮箱进行注册并激活后可以获取三天之内全球各地区的实时天气，免费接口调用流量为1000次/天、频率为200次/分钟。
注册完毕之后可以访问“控制台 | 和风天气 (qweather.com)”来查看账号信息，**用户登录后，点击创建项目，进行账号创建后，返回项目管理，点击查看，**即可看到开发者申请到的个人认证key.

在这里插入图片描述

记录上述页面中的个人认证key,该信息在小程序发出网络请求时会作为身份识别的标识一并发送给和风天气的第三方服务器。

**可看到，我的个人认证key为：**2d285e05e2dc4d15beb868b10d693a02

至此，开源API的密钥申请就已经顺利完成

2. API调用方法

1.获取实时天气信息

1.获取URL（开发版），（免费查询天气接口）

https://devapi.qweather.com/v7/weather/now?location=101010100&key=【你的_api_key】

发现在获取城市信息的过程中出现了错误

则使用了新的链接地址：
在这里插入图片描述

https://geoapi.qweather.com/v2/city/lookup?key=这里填你的key&location=要查询的城市名字

可得到获取的城市信息：

在这里插入图片描述

2.获取LocationID

则在上述图中，使用网址可以得到获取的天气信息（显示出为天气的网址）及城市id

有待思考：为什么显示不出天气的具体温度信息等东西呢

3. 服务器域名配置

每一个小程序在与指定域名地址进行网络通信前都必须将该域名地址添加到管理员后台白名单中，因此本示例需要对域名地址https://geoapi.qweather.com进行服务器配置。

小程序开发者登录微信公众平台 (qq.com)进入管理员后台，单击“开发”按钮，切换至“开发管理”面板，查找到“开发设置”；

在这里插入图片描述

在“服务器域名”栏中可以添加或修改需要进行网络通信的服务器域名地址
1. 得到如下所示的页面：

在这里插入图片描述

将当前需要使用的接口添加到“request合法域名”中，配置完成后再登录小程序开发工具就允许小程序与指定的服务器域名地址之间的网络通信了，注意每个月可以申请修改50次。

在这里插入图片描述

2.项目创建

如图所示：

3.页面配置

1.创建页面文件

项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为idex,表示小程序运行的第一个页面；其他页面名称可以自定义。本项目只需要保留首页(index)即可。
具体操作如下：
1. 将app.json文件内pages属性中的“pages//logs/logs”删除，并删除上一行末尾的逗号。
2. 按快捷键Ctrl+S保存当前修改。
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PNhSA0BR-1692695595088)(C:\Users\LENOVO\AppData\Roaming\Typora\typora-user-images\image-20230822100933323.png)]$

2.删除和修改文件

具体操作如下：
1. 删除utils文件夹及其内部所有内容。
2. 删除pages文件夹下的logs目录及其内部所有内容。
3. 删除index.wxml和index.wxss中的全部代码。
4. 删除index,.js中的全部代码，并且输入关键词page找到第二个选项按回车键让其自动补全函数。

在这里插入图片描述

删除app.wxss中的全部代码。
删除app.js中的全部代码，并且输入关键词app找到第一个选项按回车键让其自动补全函数。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-moEHEuNq-1692695595089)(C:\Users\LENOVO\AppData\Roaming\Typora\typora-user-images\image-20230822101152755.png)]$

3.创建其他文件

创建其他自定义文件，本项目还需要一个文件夹用于存放天气图标素材。文件夹名称为：images，单击目录结构左上角的十号创建文件夹并命名为images。
本项目用到的图标素材共计75个，均来源于和风天气官网，网址为：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip。
其中图标文件名为对应的天气代码，扩展名均为.png。需要注意的是，部分图标文件名带有字母n,表示夜间天气图标，例如100n.png。
右击目录结构中的images文件夹，选择“硬盘打开”，在该文件夹中新建二级目录weather_icon,然后将图标文件全部复制、粘贴进去。完成后的目录结构如图所示。
配置布局至此全部完成，进行页面和视图设计。

4.视图设计

1.导航栏设计

小程序默认导航栏是黑底白字的效果，因此需要在app.json中自定义导航栏标题和背景颜色。更改后的app.json文件代码如下：

"pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTitleText": "今日天气",
    "navigationBarTextStyle":"white"
  },

上述代码可以更改所有页面的导航栏标题文本为“今日天气”、背景颜色为蓝色(#3883FA)。

可得效果如图所示：

在这里插入图片描述

2.页面设计

页面上主要包含4个区域，具体内容解释如下。
1. 区域1：地区选择器，用户可以自行选择查询的省、市、区；
2. 区域2：显示当前城市的温度和天气状态的文字说明；
3. 区域3：显示当前城市的天气图标；
4. 区域4：分多行显示其他天气信息，例如湿度、气压、能见度和风向等。
注意，面板之间需要有一定的间隔距离。
计划使用如下组件。
1. 页面整体：组件，并定义class=‘container’;
2. 区域1：组件；
3. 区域2：组件；
4. 区域3：组件；
5. 区域4：组件，并定义class=‘detail’;
6. 区域4内单元行：4个组件，并定义class=bar’;
7. 区域4内单元格：每行3个组件，并定义class=‘box’。

1.整体容器设计

首先定义页面容器(),WXML(pages/index,/index.wxml)代码片段如下：
```
<view class='container'>
</view>
```

在app.wxss中设置容器样式，代码如下：

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

在这里插入图片描述

2.区域一（地区选择器）设计

区域一需要使用组件来实现一个地区选择器，用户可以点击切换选择其他城市。

代码修改如下：

<view class='container'>
<!--区域一：地区选择器-->
<piceker mode='region'>
<view>北京市</view>
</piceker>
</view>

在这里插入图片描述

3.区域二（文本）设计

区域二需要使用一个组件实现一个单行天气信息，包括目前的城市的温度和天气状况。
代码片段及修改信息所得结果如下图：

3.区域三（天气图标）设计

需要使用组件展示天气图标
代码及结果展示如下：

4.区域四（多行天气信息）设计

使用组件展示多行代码信息。

代码展示及结果如下所示：

//wxml代码
<!--区域四：多行天气信息-->
<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'>0 %</view>
<view class='box'>0 hPa</view>
<view class='box'>0 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'>0 </view>
<view class='box'>0 km</view>
<view class='box'>0 级</view>
</view>
</view>
</view>

在这里插入图片描述

//wxss代码
.detail{
  width:100%;
  display:flex;
  flex-direction:column;
}
.bar{
  display:flex;
  flex-direction:row;
  margin:20rpx 0;
}
.box{
  width:33.3%;
  text-align:center;
}

在这里插入图片描述

5.逻辑实现

1.更新省、市、区信息

首先修改组件中的“北京市”为{{region},然后为组件追加自定义bindchange事件，用于监听选项变化。
代码片段修改及结果展示如下：

在这里插入图片描述

2.获取实况天气数据

index.js代码如下：

Page({

  /**
   * 页面的初始数据
   */
  data: {
      region: ["山东省", "青岛市", "黄岛区"],
      now: {
          temp: "0",
          text: "未知",
          icon: "999",
          humidity: "0",
          pressure: "0",
          vis: "0",
          windDir: "0",
          windSpeed: "0",
          windScale: "0"
      }//注意，这个地方的名称需要和网页上的变量名称一致

  },
  regionChange: function (e) {
      this.setData({
          region: e.detail.value
      });
      this.getWeather()
  },

  getWeather: function () {
      let that = this;
      new Promise((resolve, reject) => {
          wx.request({
              url: 'https://geoapi.qweather.com/v2/city/lookup',
              data: {
                  location: this.data.region[1],
                  key: '23eb2b712c534b0e9cf9fd37bfb43363'
              },
              success: function (res) {
                  resolve(res.data.location[0].id);
              }
          })
      }).then((id) => {
          wx.request({
              url: 'https://devapi.qweather.com/v7/weather/now',
              data: {
                  location: id,
                  key: '23eb2b712c534b0e9cf9fd37bfb43363'
              },
              success: function (res) {
                  console.log(res.data);
                  that.setData({ now: res.data.now });
              }
          })
      })
  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      this.getWeather();

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

在这里插入图片描述

出现问题，在未修改之前，可以得到对应的输出，但修改之后出现错误：

后进行更改，最后成功得到获取页面信息。

3.更新页面天气信息

将页面上所有的临时数据都替换成{{now.}}形式：eg:{{now.temp}}：
需要注意的是，在网速受限的情况下可能不能立刻获取到数据，因此最好在JS文件的data中为now规定初始数据，在获取到实际数据前可以临时显示这些数据。

在这里插入图片描述

三、程序运行结果

列出程序的最终运行结果及截图。

在这里插入图片描述

四、问题总结与体会

一.问题

1.出现渲染层网络层错误：

在这里插入图片描述

因为异步请求需要一定的时间，而小程序一进页面就开始加载，请求速度没跟上，这时页面显示加载的时候image里面的值是空的，就会出现渲染层、网络层错误。

解决方法：进行
采用 wx.if 对变量进行操作：
```
<image wx:if="{{now.icon.length>0}}" src="/image/Weatherpic/{{now.icon}}.png"></image>
```
注意：自己给图片src中设置的变量名是什么那么 wx:if 的值就要相对应的，例如，我自己设置的变量名是 now.icon，那么我的 wx:if 的值也要是 now.icon 。