天气查询小程序

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

         课程名称：中国海洋大学24夏 《移动软件开发》 实验2：天气查询小程序             

一、实验目标

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

二、实验步骤

1.预先准备

(1)首先登陆和风天气官网https://www.qweather.com进行注册，选择’免费用户’后访问*https://console.qweather.com/my/service *查看账号信息，在进入控制台创建一个新项目，就可申请得到个人认证key

点击查看就能得到用户key
免费用户调用接口语法格式：https://devapi.qweather.com/v7/weather/now?location=xxx&key=xxx
其中的location和key分别对应城市区域id号码以及刚刚申请的个人用户key

(2)通过mp.weixin.qq.com进入小程序开发者网页，在开发管理模块添加服务器域名，这里我们在request合法域名处添加如下两个域名

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

(3)下载附件中提供的天气图标压缩包并解压
https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip

2.创建小程序项目

(1)删除utils文件夹及其内部所有内容。
(2)删除 pages文件夹下的 logs目录及其内部所有内容。
(3)删除index. wxml和 index. wxss中的全部代码。
(4)删除 index. js中的全部代码,并且输入关键词“page”找到第二个选项按回车键让其自动补全函数。
(5)删除app. wxss中的全部代码。
(6)删除 app.js 中的全部代码,并且输入关键词“app”找到第一个选项按回车键让其自动补全函数。

3.对小程序的视图进行设计

app.json文件代码如下

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTitleText": "今日天气"
  }
}

WXML页面设计代码如下

<!--index.wxml-->
<view class='container'>
    <!--区域1：地区选择器-->
    <picker mode='region'bindchange ='regionChange'>
    <view>{{region}}</view>
    </picker>
    <!--区域2：单行天气信息-->
    <text>{{now.temp}}℃ {{now.text}}</text>
    <!--区域3:天气图标-->
    <image src='/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>

WXSS文件代码如下

/**index.wxss**/
.container{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

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

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

如此便可以实现初步区域外观规划

4.获取实时天气数据

 这里我们使用自定义函数getWeather获取实时天气数据，要注意的是，由于和风气象版本更新后以前的url中的location不在支持中文或者拼音输入，必须要通过其所规定的id序列号才能进行查询，因此通过阅读官方手册https://dev.qweather.com/docs/api/geoapi/city-lookup ,可以发现我们可以通过https://geoapi.qweather.com/v2/city/lookup 进行中文查询，得到的返回结果中可以获得该地区的id，再将该id作为前面getWeather的location参数传递，即可查询得到实时天气。

js文件代码如下:

// index.js
Page({
    data:{
        region:['福建省','泉州市','丰泽区'],
        locationID:'101230512',
        now:{
            temp:0,
            text:'未知',
            icon:'999',
            humidity:0,
            pressure:0,
            vis:0,
            windDir:0,
            windSpeed:0,
            windScale:0
        }
    },
    getID: function(){
        var that=this;
        wx.request({
              url: 'https://geoapi.qweather.com/v2/city/lookup',
              data:{
                  location:that.data.region[2],
                  key:'0cd0dd568bf244d4a8888845d7af2ad3'
              },
              success:function(res){
                  that.setData({locationID:res.data.location[0].id});
              }
            })
    },
    getWeather: function(){
        var that=this;
        wx.request({
              url: 'https://devapi.qweather.com/v7/weather/now',
              data:{
                  location:that.data.locationID,
                  key:'0cd0dd568bf244d4a8888845d7af2ad3'
              },
              success:function(res){
                  that.setData({now:res.data.now});
              }
            })
    },
    regionChange: function(e){
        this.setData({region: e.detail.value})
        this.getID();
        this.getWeather();
    },
    onLoad: function(options){
        this.getWeather();
    },
})

5.实验结果

三、程序运行结果

四、问题总结与体会

 在本次实验中按照实验方案在调整外观布局的时候不会遇见阻碍，但在进行实时数据获取的时候会因为原url已经失效的原因导致无法根据教程做出预期结果。在网上查询资料以及翻阅和风气象团队提供的建议手册后对其中的函数进行了调整，通过新增了一个getID函数先获取区域id在通过原方法查询天气。达成了最终实验目的。
 通过这次实验，熟练了微信小程序的开发过程和框架结构，对于各种工具的使用更有经验，同时还理解了版本更替，技术革新导致的升级迭代是永无止境的，还需通过后续实验不断磨练技术。