24夏——移动软件开发——2-天气小程序

姓名和学号？	冯欣怡
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验2：天气查询小程序
Gitee仓库地址？	Fxinyi/1_24_summer_WeiXinMiniprogram_weather (gitee.com)

一、实验目标

1、学习使用快速启动模板创建小程序的方法；

2、学习不使用模板手动创建小程序的方法。

二、实验步骤

1. 准备和风天气 API

（1） 注册和风天气

打开和风天气官网注册账号

登录 | 和风天气 (qweather.com)

（2）创建项目和KEY

在控制台的左侧导航中，选择项目管理，并点击右上角的“创建项目”按钮。

在创建项目时，选择免费订阅，一个账号只有一个免费订阅。

我们返回项目管理，可以看到创建的项目，点击查看，然后复制key

（3）测试API获取天气

在浏览器中输入下列API地址

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

然后就看到了json格式的信息，表示成功，我们后续使用

2. 设置布局

页面包括四部分

第一部分是省市区选择

第二部分：气温

第三部分：天气图标 第四部分：6个天气指标

设计此页面布局，首先设置一个容器，class=container；设置高度100%，垂直布局，弹性分布，居中对齐以及其他的小细节自由选择。

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

然后四区域分别对应

（1）省市区选择器

（2）温度-文本设计

.text1{
  padding: 5%;
}

(3) 图片格式

.img{
  height: 60px;
  width: 60px;
  border-radius: 10px;
}

设置长宽边缘柔滑

（4）详细信息-detail【bar（box）】组合

detail区域内4条bar

一跳bar内3个box

detail 宽度100% 布满整个页面，内部的bar排布是弹性竖直排列

.detail{
  width:100%;
  display:flex;
  flex-direction: column;
  padding:5%;
}

bar内部的box以弹性横向排布，设置合适大小

.bar{
  display:flex;
  flex-direction: row;
  height: 60rpx;
  margin: 5-rpx 0;
}

box平分，每个33.3%

.box{
  width :33.3%;
  text-align:center;
}

设置data默认值

// index.js
Page({
  data: {
    region:['山东省', '青岛市','黄岛区'],    //定义一个空数组用来存放选择地具体是哪一个省市区
    now:[],
    city :[],
    adm:[],
    id: 0,
        now: {
            temp: 0,//温度
            text:'未知',//内容
            icon:'999',//天气代码
            humidity: 0,//湿度
            pressure: 0,
            vis: 0,
            windDir: 0,
            windScale: 0,
            windSpeed: 0
          }
},

3. 获取省市区

地区选择器用微信的picker组件

<picker mode="region" bindchange="getUserProvince">
      选择省市区:<text wx:for="{{region}}">{{item}} </text>
</picker>

自动弹出省市区选择框进行选择，bindchange绑定一个函数getUserProvince，如果地区信息改变就触发此函数。

.js函数：

{
   this.setData({
       region:e.detail.value,   //将用户选择的省市区赋值给region
       city:e.detail.value[2],
   }),
   console.log(this.data.city)
   this.getID(e);
},

获取detail的参数region，获取region的最后一位，city，后续寻找他的id。

调用getID函数，寻找这个省市区对应的ID

4. 获取该地区ID

用wx.request给获取地区网站api发送请求

这个地区网站可以用地区名找ID

参数是我们的key和刚刚得到的city。

有这个city它就会返回对应的ID

获取成功得到一串的地区信息，选择第一个

getID:function()
{
  var that = this;
​
  wx.request({
    url: 'https://geoapi.qweather.com/v2/city/lookup',
    data:{
      key :'07681d7*****************',
      location: this.data.city,
    },
    success:function(res) {
      that.setData({id:res.data.location[0].id})
      that.getWeather()
    },
  })
},

这个ID是和风天气api需要的，这样我们就可以调用getweather函数，在里面询问这个ID的天气信息。

5. 获取天气信息

getWeather:function()
{
  var that = this;
  wx.request({
    url: 'https://devapi.qweather.com/v7/weather/now',
    data:{
      key :'07681d7399c74999ab945c1e0f66c401',
      location: that.data.id,
    },
    success:function(res) {
      console.log(res.data);
      that.setData({now:res.data.now})
    }
  })
},

与获取ID类似，发送给api询问，参数是我们id和key。

这样就获取到了天气信息。

6.显示天气信息

修改页面，添加引用{{now.某某}}

<text class="text1">
{{now.temp}}℃
</text>
<image class="img" src="/icon/{{now.icon}}.svg">
</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}}</view>
<view class='box'>{{now.vis}}</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.windScale}}km/h</view>
<view class='box'>{{now.windSpeed}}</view>
</view>
  </view>
  </view>

三、程序运行结果

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

进入：

选择城市：

结果：

四、问题总结与体会

通过这次实验，我深刻体会到了集成外部API的复杂性和挑战性，但同时也收获了满满的成就感。我学会了如何发起API请求、解析响应数据，以及如何处理可能出现的各种错误。这些技能对我来说都是非常重要的，因为它们不仅是我作为开发者必备的基本功，也是我在未来项目中能够高效工作的关键。

在和风天气API的使用过程中，我确实遇到了一个小插曲。一开始，我发现和风天气的天气查询需要通过地区ID来进行，而不是我原本以为的地区名。这让我感到有些困惑，因为这意味着我需要先通过地区名获取到对应的地区ID，才能进行下一步的天气查询。但是，我并没有因此而放弃，而是开始仔细阅读和风天气的官方文档。最终，我在文档中找到了解决方案，即通过城市搜索API来根据地区名获取地区ID。这个过程虽然有些曲折，但也让我更加深刻地体会到了阅读和理解API文档的重要性。

这次实验不仅让我对集成外部API有了更深入的了解，也让我对小程序开发有了更全面的认识。我意识到，开发一个小程序并不仅仅是编写代码那么简单，还需要考虑到用户体验、数据交互、错误处理等多个方面。而这次实验，正是让我在实践中体会到了这些方面的挑战和乐趣。

总的来说，这次实验对我来说是一次非常宝贵的经历。它不仅提升了我的技术技能，还让我更加明白了作为一个开发者所需要具备的能力和素质。我相信，在未来的开发中，我会继续积累这样的经验，不断提升自己的技术水平，为用户创造更加优质的小程序体验。