天气小程序

天气小程序

一、实验目标

1、掌握服务器域名配置和临时服务器部署；

2、掌握 wx.request 接口的用法。

二、实验步骤

1.准备工作

（1）API密钥申请

注册和风天气台账号进入我的控制台进行申请密钥

（2）服务器域名配置

进入管理员后台，进入到开发设置，在服务器域名中添加或修改需要进行网络通信的服务器域名地址。

2.创建项目并完成页面配置

（1）创建新项目

（2）创建页面文件

将app.json文件内pages属性中的“pages/logs/logs“删除，并删除上一行末尾的逗号并保存。

（3）删除并修改文件

①删除utils文件夹及其内部所有内容

②删除pages文件夹下的logs目录及其内部所有内容。

③删除index.wxml和index.wxss中的全部代码。

④删除index.js中的全部代码，并且输入关键词page找到第二个选项按回车键让其自动补全函数。

⑤删除app.wxss中的全部代码，

⑥删除app.js中的全部代码，并且输入关键词app找到第一个选项按回车键让其自动补全函数。

（4）创建其他文件

创建images文件存放天气图标素材。

​

3.视图设置

（1）导航栏设计

在app.json中定义导航栏标题文本为”今日天气“，背景颜色为蓝色（#3883FA）

（2）页面设计

①页面包含的4个区域：

·页面整体：组件，并定义class=‘container’，在app.wxss中设置容器样式，
·区域1：地区选择器，用户可以自行选择查询的省、市、区，使用组件；
·区域2：显示当前城市的温度和天气状态的文字说明，使用 组件；
·区域3：显示当前城市的天气图标，使用 组件；
·区域4：分多行显示其他天气信息，例如湿度、气压、见度和风向等，使用组件。

在index.wxss中设置显示样式，

4.逻辑实现

（1）更新省，市，区信息

首先为组件追加自定义bindchange事件，用于监听选项变化，
自定义初始城市

（2）获取实况天气数据

在js文件中使用自定义函数getWeather进行实况天气数据的获取，天气查询以城市作为查询依据。并将该函数在生命周期函数onLoad和自定义函数regionChange中分别进行调用。实况天气数据在HeWeather6[0].now属性中，更新getWeather函数，将改属性存在Js文件中的data中。

（3）更新页面天气信息

将WXML页面上所有的临时数据都替换成{{now.属性}}

三、程序代码

`在这里插入代码片// index.js
Page({
  
   
    regionChange: function(e){
      this.setData({region: e.detail.value});
      this.getWeather();          //更新天气
    },
    /*
    *生命周期函数--监听页面加载
    */
    onLoad: function(options) {
      this.getWeather();          //更新天气
    },
    
    /**
    *获取实况天气数据
    */
    getWeather: function() {
      var that = this;
      wx.request({
        url: 'https://free-api.heweather.com/s6/weather/now',
        data:{
          location: that.data.region[1],
          key: '个人密钥'
        },
        success: function(res){
          that.setData({now:res.data.HeWeather6[0].now});
        }
    })
  },
    
  /**
  *页面的初始数据
  */
  data: {
    region: ['山东省', '青岛市', '崂山区'],
    now: {
      tmp: 0,
      cond_txt: '未知',
      cond_code: '999',
      hum: 0,
      pres: 0,
      vis: 0,
      wind_dir: 0,
      wind_spd: 0,
      wind_sc: 0
    }
  },
})

<!--index.wxml-->
<view class="container">
  <!--区域1:地区选择器-->
  <picker mode = 'region' bindchange = 'regionChange'>
    <view>{{region}}</view>
  </picker >

  <!--区域2:单行天气信息-->
  <text>{{now.tmp}}℃ {{now.cond_txt}}</text>

  <!--区域3:天气图标-->
  <image src = '/images/weather_icon_s2/{{now.cond_code}}.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.hum}}</view>
      <view class = 'box'>{{now.pres}}</view>
      <view class = 'box'>{{now.vis}}</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.wind_dir}}</view>
      <view class = 'box'>{{now.wind_spd}}</view>
      <view class = 'box'>{{now.wind_sc}}</view>
    </view>
  </view>
</view>


/*index.js*/
/*文本样式*/
text{
  font-size: 80rpx;
  color:#3C5F81;
}

/*图标样式*/
image{
  width: 220rpx;
}

/*区域4整休样式*/
.detail{
  width: 100%;
  display: flex;
  flex-direction: column;
}
/*区域4单元行样式*/
.bar{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}
/*区域4单元格样式*/
.box{
  width: 33.3%;
  text-align: center;
}

/*app.json*/
{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#3883FA",
        "navigationBarTitleText": "今日天气",
        "navigationBarTextStyle": "white"
    }
    
}

/**app.wxss**/
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}