2023暑假小程序开发 实验2：天气查询小程序

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

准备工作

1、和风天气 API

API 用于在微信小程序中触发事件时从和风天气服务器获取天气数据

API 使用方法见和风天气官方文档：

文档 | 和风天气开发服务 (qweather.com)

获取城市 id：https://geoapi.qweather.com/v2/city/lookup?

获取城市天气：https://devapi.qweather.com/v7/weather/now?

2、其他

获取密钥 key，注册和风天气 和风天气 | 商业气象服务商, 天气预报，灾害预警，台风路径，卫星云图，天气API/SDK/APP, 天气插件, 历史天气, 气象可视化账号，即可获得

图标下载：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip

下载图标后，将图标存放到小程序 images/weather_icon 文件夹下，自建文件 夹也可以

3、配置微信小程序服务器域名

进入 微信公众平台 =》登录 =》开发管理 =》开发设置 =》找到 服务器域名 =》添加https://devapi.qweather.com。

4、wx.request

RequestTask | 微信开放文档

代码示例

wx.request({

url: 'example.php', //仅为示例，并非真实的接口地址

data: {

x: ' ',

y: ''

},

header: {

'content-type': 'application/json' // 默认值

},

success (res) {

console.log(res.data)

}

})

url 服务器接口地址，data 为上传的参数，header 请求头文件（有默认值）， success 为请求成功函数，参数 res 即为服务器根据请求信息返回的信息

编写小程序

1、初始化小程序

1）创建小程序项目，进入编辑界面

2）通过删除操作，最大程度上为编写小程序提供纯净的环境

        1 删除 logs 页面，此操作在 app.json 中进行

        2 删除 utils 文件夹、删除 pages 路径下存储 logs 界面的 logs 文件夹

        3 删除 index.wxml 和 index.wxss 全部代码

        4 删除 index.js 中全部代码，输入 page 选中自动补全选项 Page 函数

        5 删除 app.wxss 所有代码

        6 删除 app.js 中所有代码，输入 app 选中自动补全选项 App 函数

        7 编译，编译结果如图，这里对微信小程序标题栏进行了一下修改，标题 栏配置文件在         app.json 中

 

2、界面容器设计，在 index.wxml 的两个 view 之间进行页面布局，并通过 index.wxss 进行美化

.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-around; */
}
.detail{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.bar{
    display: flex;
    flex-direction: row;
    margin: 20rpx 0;
}
.box{
  width: 33.3%;
  text-align: center;
}
image{
  width: 500rpx;
  border-radius: 50%;
}
text{
  font-size: 80rpx;
  color: #3C5F81;
}

3、区域设计

图示为预期小程序布局设计，由地区选择器、天气概要，天气图标和天气详细情况构

 1）地区选择器，用于切换地区

<view class="container">
  <picker mode="region" bindchange='changeRegion'>
    <view>{{region}}</view>
  </picker>

2）天气概要（单行天气信息）

<text>{{now.temp}}℃ {{now.txt}}</text>

3）天气图标设计

 <image src="/images/{{now.icon}}.png"></image>

4）多行天气信息设计，这里显示风力风速参数重叠了，还需要在 wxss 进 行优化

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

4、逻辑实现，界面模板设计完毕，应该注入逻辑了，切换个人中心为游客模 式

1）更新省市区信息，使用微信小程序自带 API，可以快速实现地区切换， 先在 picker 组件添 加事件处理函数，再在 index.js 中实现该函数 region 存储城市信息，格式为：省市区/县

 

  data: {
    region:['甘肃省','兰州市','城关区'],
    now:''
  },
  changeRegion:function(e){
    this.setData({
      region:e.detail.value
    })
    this.getWeater();
  },

 

2）获取实况天气数据，这一步是小程序的重点，利用 wx.request 的 API 和风天气的两个 API，文章开篇已给出，可以获取当前城市的天气状况。 首先通过第一个 API 获取当前城市的 id，获取 id 和天气都需要你的 key， 获取方法也在文章开头，获取 id 成功后再将 id 和 key 作为参数通过第 二个 API 上传到和风天气服务器获取当前 id 城市的天气状况，若想知道 服务器返回给我们的内容结构，可以通过 console.log(参数)打印到控 制台查看。

编写完函数后，在 onload 函数和 regionChange 函数中调用该函数，以 实现天气的初始化和随地区变化而变化

getWeater: function(){
    var that=this;
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup',
      data:{
        location:that.data.region[1],
        key:'92f38c639e114a34ab9056d712b0025a'
      },
      success:function(res){
        console.log(res.data)
        that.setData({
          Place_ID:res.data.location[0].id
        })
        wx.request({
          url:'https://devapi.qweather.com/v7/weather/now?',
          data:{
            location:that.data.Place_ID,
            key:'92f38c639e114a34ab9056d712b0025a'
          },
          success:function(res){
            console.log(res.data.now)
            that.setData({
              now:res.data.now
            })
          }
        })
      }
    })
  },
  

3）更新页面天气信息，更新方法较为简单，只需要将原本的常量所在位 置替换为变量即可，图示中的 now 保存有当前城市的天气状况（即将服 务器返回的天气信息部分保存到 now），now.obj，obj 为 now 的一个键 值，now.obj 即为 obj 对应的值，obj 有哪些，在上面 2）中可以打印查 看，不要只依赖于文档，文档信息具有延迟性（代码上面已经展示） 

 

三、程序运行结果

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

四、问题总结与体会

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

1、和风获取特定城市天气状况 API 有所变化，需要两个 API 接口共同作用

https://geoapi.qweather.com/v2/city/lookup?

通过此 API 获取目标城市的 ID

https://devapi.qweather.com/v7/weather/now?

此 API 可以获取城市的天气状况，但是需要城市的 ID，因此需要先用上面的 API 来获取城市的编号。

2、在配置微信小程序服务器域名中，没有意识到可以加入多个服务器域名

 ​​​

3、收获

1. 设计页面模板：设计小程序的页面模板，包括页面的布局、样式和组件。可以使用小程序提供的组件库来构建页面，也可以自定义组件来满足特定需求。

2. 编写逻辑：在页面模板设计完成后，需要编写页面的逻辑代码，包括数据的获取、处理和展示。可以使用 小程序提供的 API 来实现不同的功能，如获取用户信息、发起网络请求、处理用户交互等。

3. 页面模板与逻辑连接：要将页面模板和逻辑代码进行连接，以实现页面的渲染和交互。在小程序中，可以使用 Page 函数来定义页面对象，并在其中定义 data 数据和各种生命周期函数（如 onLoad、onShow 等）来管理页面的状态和行为。