OUC2024年夏季《移动软件开发》_天气查询小程序

一、实验目标

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

二、实验步骤

1.创建项目。删除模板自带的所有文件，并创建三个全局文件，分别是app.js，app.json，app.wxss。之后创建pages目录文件，在其中新建index目录文件，再在里面创建页面，会自动生成四个文件，分别是js、json、wxml、wxss。还要创建一个images文件夹，里面用于存储各种天气图标，将下载好的weather_icon图片文件夹放入其中。

2.导航栏设计。在app.json中自定义导航栏标题和背景颜色。更改后的app.json文件代码如下：

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

效果如下：

3.页面设计。
页面上主要包含4个区域，分别为
区域1:地区选择器，用户可以自行选择查询的省、市、区；
区域2:显示当前城市的温度和天气状态的文字说明；
区域3:显示当前城市的天气图标；
区域4:分多行显示其他天气信息，例如湿度、气压、能见度和风向等。
计划使用如下组件：
页面整体：view组件，并定义class='container';
区域1:picker组件；
区域2:text组件；
区域3:image组件；
区域4:view组件，并定义class='detail';
区域4内单元行：4个view组件，并定义class='bar';
区域4内单元格：每行3个view组件，并定义class='box'。
编写后的wxml文件代码如下：

<view class='container'>
  <picker mode ='region'>
    <view>北京市</view>
  </picker>
  <text>19℃晴</text>
  <image src='/images/weather_icon/999.png'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'>0 %</view>
     <view class='box'>0 hPa</view>
     <view class='box'>0 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'>0</view>
     <view class='box'>0 km/h</view>
     <view class='box'>0 级</view>
   </view>
 </view>
</view>

效果如下：

4.布局设计
（1）整体容器设计
在app.wxss中设置容器样式，代码如下：

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

（2）文本设计
修改字体和颜色，index.wxss中代码片段如下：

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

（3）天气图标设计
index.wxss中代码片段如下：

image{
  width:220rpx;
}

（4）多行天气信息设计
detail为整体样式，bar为单元行样式，box为单元格样式。index.wxss中代码片段如下：

.detail{
  width:100%;
  display:flex;
  flex-direction:column
}
.bar{
  display:flex;
  flex-direction:row;
  margin:20rpx 0;
}
.box{
  width:33.3%;
  text-align:center;
}

整体效果如下：

5.逻辑实现。
首先修改组件中的“北京市”为{{region}},然后为组件追加自定义bindchange事件，用于监听选项变化。wxml文件代码片段修改如下：

 <picker mode ='region'bindchange='regionChange'>
    <view>{{region}}</view>
  </picker>

由于地区选择器的返回结果是数组的形式，所以在js文件的data中定义region为包含了省、市、区3个项目的数组，初始城市信息自定义。js文件代码片段修改如下：

data: {
    region:['安徽省','芜湖市','镜湖区']
  },
  regionChange:function(e){
    this.setData({region:e.detail.value});
  },

效果如下：

6.申请API密钥
首先进入和风天气官网注册一个用户。
订阅项目，选择免费订阅，平台为Web API。

订阅完成后，点击查看即可得到KEY。

7.服务器域名配置。
进入小程序开发管理员后台，切换至开发管理面板，在“服务器域名”栏中添加需要进行网络通信的服务器域名地址，即https://devapi.qweather.com。

之后在小程序开发工具“详情”-“项目配置”-“域名信息”处点击更新即可。

8.获取实况天气数据。
先将下载的util.js放入项目文件夹中。

index.js代码片段修改如下：

getWeather:function(){
    var that =this;
    wx.request({
      url:'https://devapi.qweather.com/v7/weather/now?',
      data:{
        location:util.getLocationID(that.data.region[1]),
        key:'88778e425e314f32a5a55ddab7094b95'
      },
      success:function(res){
        console.log(res.data);
      }
    })
  },

将上述函数在生命周期函数onLoad和自定义函数regionChange中分别进行调用，表示当页面加载时和切换城市时均主动获取一次实况天气数据。index.js代码片段修改如下：

regionChange:function(e){
    this.setData({region:e.detail.value});
    this.getWeather();
  },
onLoad(options) {
    this.getWeather();
  },

重新运行会在Console控制台得到第三方服务器发回的JSON数据，如图：

可以看到，天气数据包含在now中。更新getWeather函数，将该属性存到JS文件的data中，index.js代码片段修改如下：

 success:function(res){
        that.setData({now:res.data.now});
      }

重新运行将在AppData面板中查到已经被记录的天气数据，如图：

9.更新页面天气信息。
将index.wxml上所有的临时数据都替换成{{now.属性}}的形式。index.wxml代码片段修改如下：

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

在index.js文件的data中为now设置初始值，以保证在获取到实际数据前临时显示数据，index.js代码片段修改如下：

data: {
    region:['北京市','北京市','东城区'],
    now:{
      temp:0,
      text:'未知',
      icon:'999',
      humidity:0,
      pressure:0,
      vis:0,
      windDir:0,
      windSpeed:0,
      windScale:0
    }
  },

至此整个小程序已经制作完成。

三、程序运行结果

在手机上进行真机调试，结果如下：

四、问题总结与体会

遇到的问题：
1.在第八步获取实况天气数据时发生错误，经检查发现和风天气网的接口地址url不是最新版本，查阅官网后得到最新的url为"https://devapi.qweather.com/v7/weather/now?"，改正后即可。
2.在第九步，按照教程文档将index.wxml上所有的临时数据都替换成{{now.属性}}的形式后，调试发现只能显示出能见度。原因是教程文档上的属性名称并不完全正确，正确的属性名称可以在AppData中查看。

将名称都纠正过来后即可。
总结与体会：
在完成该实验的过程中，我深刻体会到了小程序开发的复杂性和挑战性。通过实践，我不仅掌握了使用模板快速启动和手动创建小程序的方法，还学会了如何设计导航栏、页面布局以及处理API数据。在遇到问题时，我学会了如何通过查阅资料和调试来解决，比如修正API接口地址和属性名称。这些经历极大地提升了我的编程能力和问题解决能力，同时也加深了我对移动应用开发流程的理解。