天气查询小程序

天气查询小程序

一、实验目标

1、掌握服务器域名配置和临时服务器部署；

2、掌握 wx.request 接口的用法。

二、实验步骤

1、API密钥申请

在这个和风天气开发平台

https://dev.qweather.com/

上注册账号，登录，然后打开控制台，点击“应用管理”，按照提示创建应用，选择免费开发版的Web API。

然后就能看到我们的KEY了。

2、API调用方法

打开和风天气的API开发文档，查看调用方法

https://dev.qweather.com/docs/api/weather/weather-now/

我们使用的是开发版这个调用方式，key就是我们第一步申请到的KEY。location就是我们要查询的城市。在s6版本中可以使用城市拼音查询，现版本只能使用locationID或者经纬度查询。所以我们还需要调用另一个API来查询locationID，后面再讲。

总的来说，调用这个实时天气的API的方法就是

https://devapi.qweather.com/v7/weather/now?location=[locationID]&key=[your KEY]

另外，官方文档中还给出了各种参数的描述，以及错误代码的含义等

3、服务器域名配置

每一个小程序在于指定域名地址进行网络通信前都必须要将该域名地址添加到管理员后台白名单中。

打开网址

https://mp.weixin.qq.com/

登录后找到服务器域名配置，在requst合法域名里将API的地址

https://devapi.qweather.com

添加上去。

4、项目创建

随意创建一个项目模板选择“JavaScript基础模板”。

5、创建页面文件

基础模板初始化会自动生成一个简易的小程序，我们不需要这些多余的页面和文件，接下来我们将第一页“index”之外的和多余的代码删除。

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

（2）删除utils文件夹和pages下的logs文件夹及其内部所有内容

（3）删除index.wxml和index.wxss、app.wxss中全部代码

（4）删除index.js中全部代码，并且输入关键词page，找到后面带有“function”字样的，选中让其自动补全函数

（5）删除app.js中全部代码，并且输入关键词app，找到后面带有“function”字样的，选中让其自动补全函数

6、创建其他文件

我们开始创建一个文件夹，用来存放天气图标素材。素材下载地址请访问下面网址，这是和风天气免费提供天气图标的下载地址，里面有图标代码说明

https://dev.qweather.com/docs/resource/icons/

在项目目录的pages下创建images文件夹，再在images下创建weather_icon文件夹，将素材图片放在weather_icon下。

我这里是为了管理方便才创建了两个文件夹，实际上创建多少个多行。

7、导航栏设计

小程序默认是白底黑字的效果，我们可以在app.json里更改效果。

将"window"改为下面的代码：

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#3883fa",
    "navigationBarTitleText": "今日天气",
    "navigationBarTextStyle":"white"
  },

backgroundTextStyle有两种参数可以选择：light和dark。浅色和深色

navigationBarBackgroundColor是设置导航栏背景颜色的，参数有许多可以选择，可以在官方开发文档里找到颜色对应的参数。

点击查看颜色对应参数

navigationBarTitleText则是导航栏上的文字

navigationBarTextStyle是该文字的颜色。

修改后的效果如下：

8、页面设计

在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">
    <view>北京市</view>
  </picker>
</view>

然后使用 组件实现单行天气信息，在index.wxml中修改代码为：

<view class = "container">
  <!--区域1：地区选择器-->
  <picker mode="region">
    <view>北京市</view>
  </picker>
  <!--区域2：单行天气信息-->
  <text>19°C 晴</text>
</view>

将index.wxss代码修改为：

/*文本样式*/
text{
  font-size:80rpx;
  color:#3c5f81;
}

之后是天气图标设计，在index.wxml中修改代码为：

<view class = "container">
  <!--区域1：地区选择器-->
  <picker mode="region">
    <view>北京市</view>
  </picker>
  <!--区域2：单行天气信息-->
  <text>19°C 晴</text>
  <!--区域3：天气图标-->
  <image src = "/pages/images/weather_icon/999.png"mode = "widthFix">
  </image>
</view>

image src是图片的所在路径。

然后在index.wxss中修改image参数，添加下面代码

image{
  width: 220rpx;
}

最后就是设计多行天气信息了，就是湿度、气压之类的信息。

将index.wxml中的代码修改为：

<view class = "container">
  <!--区域1：地区选择器-->
  <picker mode="region"bindchange = "regionChange">
    <view>{{region}}</view>
  </picker>
  <!--区域2：单行天气信息-->
  <text>{{now.temp}} °C</text>
  <!--区域3：天气图标-->
  <image src = "/pages/images/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中添加代码：

/*区域4整体样式*/
.detail{
  width:100%;
  display: flex;
  flex-direction: column;
}
/*区域4单元行样式*/
.bar{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}
/*区域4单元格样式*/
.box{
  width: 33.3%;
  text-align: center;
}

整个页面设计完成，最终的效果图如下：

9、更新省、市、区信息

修改index.wxml中的组件，将默认文本改为动态数据，并追加事件

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

在index.js文件中data属性中添加下面代码，这是初始的城市数据

data: {
    region:['山东省','青岛市','崂山区'],
    locationID: 101120202,
    now:{
      temp: 0,
      text:'未知',
      icon:'999',
      humidity: 0,
      pressure: 0,
      vis: 0,
      windDir: 0,
      windSpeed: 0,
      windScale: 0
    }
  },

在data下面再添加一个新的函数

/**
   * 更新省、市、区信息
   */
  regionChange:function(e){
    this.setData({region:e.detail.value});
  },

10、获取实况天气数据

在index.js中使用自定义函数getWrather获取实况天气。将index.js添加函数：

 /**
   * 获取实况天气数据
   */
  getWeather:function(){
    var that = this;
      //获取城市ID
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup',
      data:{
        location: that.data.region[2],
        adm:that.data.region[1],
        key : 'your key'
      },
      success:(res)=> {
        this.setData({locationID: res.data.location[0].id})
      }
    })
    //获取实时天气
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now',
      data:{
        location: that.data.locationID,
        key: 'your key'
      },
      success:(res)=> {
        this.setData({now: res.data.now});
      }
    })
  },

同时，将regionChange函数和onLoad函数修改为下面这样

 /**
   * 更新省、市、区信息
   */
  regionChange:function(e){
    this.setData({region:e.detail.value});
    this.getWeather();
  },
      
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWeather();
  },

运行时如果报没有添加域名的错误，则使用游客登陆即可。

三、程序运行结果

四、问题总结与体会

问题1：

实验文档中有些接口已经不能使用了，比如和风天气实时天气的API，调用方法已经发生了改变，参数也有一些变化，不能通过中文或者拼音作为参数。必须要知道locationID或者经纬度才能查询。

解决方法：

查询和风天气API开发手册，可以先调用另一个城市信息查询API得到locationID，再调用实时天气API。

问题2：

在success回调中按照实验文档的写法调用this.setData({ });时，报错：TypeError: Cannot read property 'setData' of undefined。。

解决方法：

不使用success:function(res){},

而使用success:(res) =>{}

问题3：

实时天气API的返回数据的名称发生了改变，按照实验文档的方法来会报错，“未定义”

解决方法：

将data中的now内的变量名称改成新的名字。