【微信小程序：天气查询】

2024年夏季《移动软件开发》实验报告

实验名称	实验2：天气查询小程序
Gitee仓库地址	实验代码 (gitee.com)

一、实验目标

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

二、实验步骤

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

0.准备

添加合法域名

Key

在和风天气官网进行获得

下载天气图像

我下载的天气图像

1. 全局设计

app.json 文件

在pages文件夹下创建index页面

设置导航栏的背景颜色为#eeeeff，字体为黑色

{
  "pages": [
    "pages/index/index"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于获取本地天气" 
    }
  },
  
  "window":{
    "navigationBarBackgroundColor": "#2883FA",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText": "今日天气",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle":"light",
    "enablePullDownRefresh": false
  }
}

导航栏设计效果如下：

2. 创建文件夹images

用于存放天气图像，这里一共有三种类型

3. index页面的设计与功能实现

组件设计

整体页面分为四个区域

• 区域1：地区选择器，使用picker组件，点击即可更换地址
• 区域2：文本区域，显示温度和天气状况
• 区域3：图片区域，显示对应的天气图像
• 区域4：多行天气信息：显示多个具体的天气信息
• 显示的具体内容都存储在region属性中

<view class='container'>
  <!-- 区域1：地区选择器 -->
  <picker mode='region' bindchange='changeRegion'>
    <view>{{region}}</view>
  </picker>
  <!-- 区域2：文本 -->
  <text>{{region_Weather.temp}}℃ {{region_Weather.text}}</text>
  <!-- 区域3：图片 -->
  <image src='/images/weather_icon_s1_color/{{region_Weather.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'>{{region_Weather.humidity}}%</view>
      <view class='box'>{{region_Weather.pressure}}hPa</view>
      <view class='box'>{{region_Weather.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'>{{region_Weather.windDir}}</view>
      <view class='box'>{{region_Weather.windSpeed}} Km/h</view>
      <view class='box'>{{region_Weather.windScale}}级</view>
    </view>
  </view>
</view>

页面布局

在index.wxss中对页面布局进行设置

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.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;
}


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

image{
  width:300rpx;
}

设计效果如下：

功能实现

在index.js文件中完成，在Page({})中补充代码

1. 定义data对象

   region：当前地址，初始化为：[‘山东省’,‘青岛市’,‘黄岛区’]

   region_Weather：当前地址的天气信息，初始化为空

   data:{
       region:['山东省','青岛市','黄岛区'],
       region_Weather:[]
     },
   

2. 方法getWeather用于获取当前位置的实时天气信息

   • 先使用wx.request方法发送请求，传入地址名称，从和风天气获取该地址的ID号
   • 成功后保存该ID号到region_ID中，为获取天气信息做准备
   • 再使用wx.request方法发送新的请求，传入地址ID，从和风天气获取该城市的天气信息，保存到region_Weather数组中

   getWeather:function(){
       var that = this;
       wx.request({
         url:'https://geoapi.heweather.net/v2/city/lookup?',
         data:{
           location:that.data.region[2],
           key:'8284b396451149209fdae80067d3e28e'
         },
         success:function(res){
           //console.log(res)
           that.setData({
             region_ID:res.data.location[0].id
           })
           wx.request({
             url: 'https://devapi.qweather.com/v7/weather/now?',
             data:{
               location:that.data.region_ID,
               key:'8284b396451149209fdae80067d3e28e'
             },
             success:function(res){
               console.log(res.data.now)
               that.setData({
                 region_Weather:res.data.now
               })
             }
           },
           )
         }
       })
     }
   

   获取到的信息保存在数据中

   

3. 方法changeRegion用于更换地址

   • 修改完地址后调用getWeather()更新该地址的天气

   changeRegion:function(e){
       this.setData({
         region:e.detail.value
       })
       this.getWeather();//更新天气
     },
   

4. 生命周期函数

   保证一打开页面就能获取初始地址的天气信息

   onLoad:function(options){
       this.getWeather();//页面加载时就调用该函数
     },
   

三、程序运行结果

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

1.小程序初始页面

2.更换地址时的页面

3.地址更换后的页面

此时已经加载出当前地址的实时天气

四、问题总结与体会

困难：在Gitee上的文档没有图像，后来我把图像上传到Gitee后得到的链接就可以显示在文档中了，就是比较麻烦。

收获和体会：使用了别人提供的API，蛮有意思的。