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

一、实验目标

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

二、实验步骤

2.1 准备工作

1、本实验中，需要使用和风天气API，需要注册用户，需要自行阅读和风天气官方文档：https://dev.qweather.com/docs/api/weather/weather-now/
2、实验中需要的天气图片、utils.js下载地址为：https://gaopursuit.oss-cnbeijing.aliyuncs.com/2022/demo2_file.zip
3、因为要向和风天气发送请求，如果保持登录状态将无法发送请求，切换为游客模式即可。

2.1.1 API 密钥申请

用户选择“免费用户”类型,使用邮箱进行注册并激活后可以获取三天之内全球各地区的实时天气,免费接口调用流量为 1000次/天、频率为 200次/分钟,该数据基本上可以满足读者的开发学习需求。
注册完毕之后可以访问“https://console.heweather.com/my/service” 来查看账号信息 ，用户登录后即可看到开发者申请到的个人认证key。
开发者需记录上述页面中的个人认证key,该信息在小程序发出网络请求时会作为身份识别的标识一并发送给和风天气的第三方服务器。至此,开源API的密钥申请就已经顺利完成。
origin_url=image.png&pos_id=img-Xiy3dZ8f-1724158775079)

2.1.2 API 调用方法

目前免费用户可以调用的最新版接口地址为(https://devapi.qweather.com/v7/weather/now?"),其服务器节点在中国境内。该接口地址后面追加不同的关键词将获取不同种类的气象数据信息,例如alarm为天气自然灾害预警读者可以访问官方文档(https://dev.heweather.com/docs/api/)了解各类关键词的使用方法。

2.1.3 服务器域名配置

每一个小程序在与指定域名地址进行网络通信前都必须将该域名地址添加到管理员后台白名单中,因此本示例需要对域名地址“https://free-api.heweather.com”进行服务器配置。
将当前需要使用的接口添加到“request 合法域名”中,配置完成后再登录小程序开发工具就允许小程序与指定的服务器域名地址之间的网络通信了。

2.2 项目创建

2.3 页面配置

2.3.1 创建页面文件以及删除和修改文件

项目创建完毕后,在根目录中会生成文件夹 pages用于存放页面文件。一般来说首页默认命名为 index,表示小程序运行的第一个页面;其他页面名称可以自定义。本项目只需要保留首页(index)即可，
具体操作如下
(1)将 app.json 文件内 pages 属性中的“pages/logs/logs”删除,并删除上一行末尾的逗号。
(2)删除utils 文件夹及其内部所有内容。
(3)删除 pages 文件夹下的 logs 目录及其内部所有内容。
(4)删除 index.wxml和 index.wxss 中的全部代码。
(5)删除 index.js中的全部代码,并且输人关键词 page 找到第二个选项按回车键让其自动补全函数
(6)删除 app.wxss 中的全部代码。
(7)删除 app.js中的全部代码,并且输入关键词 app 找到第一个选项按回车键让其自动补全函数。

2.3.2 创建其他文件

创建一个images文件夹，里面用于存储各种天气图标，将下载好的weather_icon图片文件夹放入其中。

2.4 视图设计

2.4.1 导航栏设计

在app.json中自定义导航栏标题和背景颜色。更改后的app.json文件代码如下：

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

2.4.2 页面设计

页面上主要包含4个区域，分别为:
区域1:地区选择器，用户可以自行选择查询的省、市、区；
区域2:显示当前城市的温度和天气状态的文字说明；
区域3:显示当前城市的天气图标；
区域4:分多行显示其他天气信息，例如湿度、气压、能见度和风向等。
计划使用如下组件：
页面整体：view组件，并定义class=‘container’;
区域1:picker组件；
区域2:text组件；
区域3:image组件；
区域4:view组件，并定义class=‘detail’;
区域4内单元行：4个view组件，并定义class=‘bar’;
区域4内单元格：每行3个view组件，并定义class=‘box’。
编写后的wxml文件代码如下

<view class='container'> 
<picker mode ='region'> 
<view>北京市</view> 
</picker> 
<text>19℃晴</text> 
 <image src='/images/weather_icon/999.png'mode='widthFix'></image> 
<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/h</view> 
<view class='box'>0 级</view> 
</view> 
</view> 
</view>

2.4.3 布局设计

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

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

2.文本设计
修改字体和颜色，index.wxss中代码片段如下：

text{ 
  font-size: 80rpx; 
  color:#3C5F81; 
} 

3.天气图标设计
index.wxss中代码片段如下:

 image{ 
width:220rpx; 
}

4.多行天气信息设计
detail为整体样式，bar为单元行样式，box为单元格样式。index.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;
}

效果如图

2.5 逻辑实现

2.5.1 更新省、市、区信息

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

 <picker mode ='region'bindchange='regionChange'> 
<view>{{region}}</view> 
  </picker> 

又因为地区选择器的返回结果是数组的形式，所以在js文件的data中定义region为包含了省、市、区3个项目的数组，初始城市信息自定义。js文件代码片段修改如下：

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

2.5.2 获取实况天气数据

将下载的util.js放入项目文件夹中。

index.js代码片段修改如下：

getWeather:function(){ 
var that =this; 
    wx.request({ 
url:'https://devapi.qweather.com/v7/weather/now?', 
data:{ 
location:util.getLocationID(that.data.region[1]), 
key:'88778e425e314f32a5a55ddab7094b95' 
      }, 
success:function(res){ 
console.log(res.data); 
      } 
    }) 
  }, 

将上述函数在生命周期函数onLoad和自定义函数regionChange中分别进行调用，表示当页面加载时和切换城市
时均主动获取一次实况天气数据。index.js代码片段修改如下：

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

此时重新运行会在Console控制台得到第三方服务器发回的JSON数据

2.5.3更新页面天气信息。

将index.wxml上所有的临时数据都替换成{{now.属性}}的形式。index.wxml代码片段修改如下：

<view class='container'> 
<picker mode ='region'bindchange='regionChange'> 
<view>{{region}}</view> 
</picker> 
<text>{{now.temp}}℃{{now.text}}</text> 
<image src='/images/weather_icon/{{now.icon}}.png'mode='widthFix'></image> 
<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.js文件的data中为now设置初始值，以保证在获取到实际数据前临时显示数据，index.js代码片段修改如下：

data: { 
region:['北京市','北京市','东城区'], 
now:{ 
temp:0, 
text:'未知', 
icon:'999', 
humidity:0, 
pressure:0, 
vis:0, 
windDir:0, 
windSpeed:0, 
windScale:0 
    } 
  }, 

至此整个小程序已经制作完成

三、程序运行结果

修改地址后

由此可知该项目已经完美完成！

四、问题总结与体会

遇到的问题：
在按照教程文档将index.wxml上所有的临时数据都替换成{{now.属性}}的形式后，调试运行发现只能显示出能见度。经过研究发现原因是教程文档上的属性名称并不完全正确，正确的属性名称应该在AppData中查看。
在获取实况天气数据时发生了错误，我通过检查发现和风天气网的接口地址url不是最新版本，查阅官网后得到最新的url应该改正为为"https://devapi.qweather.com/v7/weather/now?"，改正后即可。

总结心得
学习天气查询小程序的过程，不仅是一次技术实践的旅程，也是深入理解用户需求、数据处理、以及前后端交互的宝贵经历。这个实验提升了我的编程能力同时也加深了我对移动应用开发流程的理解。