实验2：天气查询小程序

提示：文章写完后，目录可以自动生成，如何生成可参考右

---

前言

---

一、实验目标

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

二、实验步骤

1、登录和风天气官方网址，在和风天气中进行API密钥申请

具体步骤为：注册账户->进入控制台->应用管理->创建应用->免费开发->填写应用名称->得到个人认证key

2、服务器域名配置

小程序运行时要借用“和风天气”中的相关信息，因此我们需要将相关域名添加到管理员后台白名单中，我们所需要的域名地址有两个

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

登录mp.weixin.qq.com进入开发设置模板，在“服务器域名”栏中将以上两个地址添加到request合法域名中。

3、创建项目，添加images文件夹，用于存放天气图标素材

4、导航栏设计

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

{

 "pages": [

  "pages/index/index"

 ],

 "window": {

  "navigationBarBackgroundColor": "#3883FA",

  "navigationBarTextStyle": "black",

  "navigationBarTitleText": "墨墨天气",

  "backgroundColor": "#eeeeee",

  "backgroundTextStyle": "light",

  "enablePullDownRefresh": false

 },

 "sitemapLocation": "sitemap.json"

}

导航栏标题为“墨墨天气”，背景为“#3883FA蓝色”，预览效果如图：

5、页面设计

index.wxss文件

/**index.wxss**/
//背景容器样式
.container {

 height: 100vh;

 display: flex;

 flex-direction: column;

 align-items: center;

 justify-content: space-around;

}
//文本样式
.container text {

 font-size: 80rpx;

 color: #3c5f81;

}
//图标样式
.container image {

 width: 220rpx;

}
//整体样式
.detail {

 width: 100%;

 display: flex;

 flex-direction: column;

}
//单元行样式
.bar {

 display: flex;

 flex-direction: row;

 margin: 20rpx 0;

}
//单元格样式
.box{

 width: 33.3%;

 text-align: center;

}

index.wxml文件

<!--index.wxml-->
<view class="container">
    //地域选择器
  <picker mode='region' bindchange='changeRegion'>
    <view>{{region}}</view>
  </picker>
//单行天气信息
  <text>{{now.temp}}℃{{now.text}}</text>
//天气图标
  <image src="/images/icons/{{now.icon}}.svg"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>

6、逻辑实现

阅读和风天气的开发文档查找到城市的十进制位置ID，作为页面的初始数据，用chanangeRegion函数更新省市区信息，其中要调用到getWeather，获取实况天气数据，而要想获取实况天气数据我们需要用wx.request 接口的方法，在getWeather函数中利用getlocation调用地址’https://geoapi.qweather.com/v2/city/lookup地名&key’，来获取城市的十进制位置ID，进而调用地址’https://devapi.qweather.com/v7/weather/nowcityID&key’,达到获取某地区的实况天气

以下为index.js文件代码

// index.js
//页面初始数据
Page({
  data: {
      region: ['山东省', '青岛市', '崂山区'],
      cityID: "101120202"
   },
//更新省、市、区信息
  changeRegion: function (e) {
      this.setData({
          region: e.detail.value
      });
      this.getWeather();
  },
    //获取实况天气数据
  getWeather: function () {
      var that = this;
      that.getlocation();
      wx.request({
          url: 'https://devapi.qweather.com/v7/weather/now',
          data: {
              location: that.data.cityID,
              key:'你的'
          },
          success: function (res) {
              console.log(res.data['now']);
              that.setData({
                  now: res.data['now']
              });
          }
      })
  },
  getlocation: function () {
      var that = this;
      wx.request({
          url: 'https://geoapi.qweather.com/v2/city/lookup',
          data: {
              location: that.data.region[2],
              key:'你的'
          },
          success: function (res) {
              that.data.cityID = res.data.location[0]['id']
          },
      })
  },
  onLoad: function (options) {
      this.getWeather();
      this.getlocation();
   },
})

7、更新页面天气信息

将wxml页面上所有的临时数据都替换成{{now.属性}}

index.wxml代码

<!--index.wxml-->
<view class="container">
  <picker mode='region' bindchange='changeRegion'>
    <view>{{region}}</view>
  </picker>
  <text>{{now.temp}}℃{{now.text}}</text>
  <image src="/images/icons/{{now.icon}}.svg"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>

三、 程序运行结果

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

运行后我们可以看到该区域的信息及实时天气状况

预览

更换城市

---

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

问题总结

1、调用接口时，运用原先方法无法实现，查找开发者文档

获取地区的location十进制，再调用地址’https://devapi.qweather.com/v7/weather/nowcityID&key’,获取某地区的实况天气

2、出现如下错误，查找搜索后发现是原来的图片库已更新。

在地址https://github.com/qwd/Icons/releases中重新下载图标，问题得以解决

体会

学习老师所发的视频跟教程，一步步来，中间出现过一些问题，但都得以解决，看着一个小程序从无到有，内心无比的激动，移动软件开发是一门十分有意思的课程，在自己敲代码的过程中，对java逐渐熟悉，期待接下来的每一个实验，希望自己的能力能不断提高✨💖