天气查询小程序

一、实验目标

开发一个可以查询全国天气的小程序

二、实验步骤

（1）页面样式设计（.wxml)

<!--index.wxml-->

<view class="container">

  <!--地区-->

  <picker mode="region" bindchange="bindRegionChange">

    <view>{{region}}</view>

  </picker>

  <!--天气信息-->

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

  <!--天气图标-->

  <image src="/pages/index/images/icons/{{now.icon}}.svg" 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>

（2）页面样式(.wxss)

/**index.wxss**/

.container{

  height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-around;

}

text{

  font-size: 80rpx;

  color: #000000;

}

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;

}

（3）逻辑层（.js)

当地区改变更改地区后执行一次天气更新:

加载也要执行一次天气更新:

更改天气的函数：

访问天气的请求URL如下：

这里需要将地区的名字进行转换。因为utils.js里地区的名字不包含‘区’字，而我们设置时有‘区’字。所以先去掉‘区’，然后调用utils.js里的getLocationID函数得到查询地区的ID。然后发起请求。得到数据后在后端更改数据。

 

 

 

 

 

三、程序运行结果

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

 

四、问题总结与体会

（1）网址更新问题：文档给的网址都是旧的网址。一开始总是访问不到。直到去官网开发文档查看才发现更改了网址。

（2）请求URL格式问题：同样查官方文档

 

（3）地区名字转换问题： 需要将地区的名字进行转换。因为utils.js里地区的名字不包含‘区’字，而我们设置时有‘区’字。所以先去掉‘区’。再调用函数求ID。