小程序--获取全国各个省市的天气状况

声明：此博客仅为学习笔记方便自己复习，再次推荐b站up主蒙奇D一修，比较适合入门

一.前期准备

1.地址的选择

使用了picker组件
是从底部弹起的滚动选择器组件，目前根据mode属性值的不同共支持5种选择器，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器。若省略mode值不写，则默认效果是普通选择器。
省市区选择器
当**mode=‘region’**时为省市区选择器效果(最低版本为1.4.0)

2.获得省市的天气信息并显示出来

（1）. 网络API：
和风天气 ：提供API接口 ‘
根据网站的相关代码提示和接口信息制作url
回到微信公众平台 添加服务器域名
步骤：
（1）百度搜索 “和风天气官网” 选择第一个

（2）注册登录 -->登录以后选择天气api–>登录控制台 --> 应用管理 -->选择新建应用 (名称随便写) -->添加key(类型选择Web API)

PS:把key记录下来 很重要要用到
（3）获取天气的小图标： 点击开发文档–>参考资料–>天气代码和图标 -->点击图片打包下载到桌面–>解压（只解压_MACOSX下面的图片）到项目的images文件下
(4)获取天气信息：选择文档的API -->选择常规天气数据
请求URL：
免费版：https://free-api.heweather.net/s6/weather/{weather-type}?{parameters}
商业版https://api.heweather.net/s6/weather/now?location=beijing&key=xx
项目中使用版（查北京的）：https://free-api.heweather.net/s6/weather/now? location=beijing&key=37f2e203fc8a4237be51d3a0f1f2d4d2

(5)登录微信公众平台：开发–>开发设置–>服务器域名 -->扫码登录–>设置request合法域名( 一个月只能申请修改5次)

二.实现代码

1.index.wxml

<view class="container">
  <!-- 区域一 ：地区选择器-->
  <picker mode="region" bindchange="changeRegion">
      <view>{{region}}</view>
  </picker>
  <!-- 区域2：文本区域 -->
  <text>{{now.tmp}}℃{{now.cond_text}}</text>
  <!--区域三：图片区域-->
  <image src="/images/{{now.cond_code}}.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">{{now.hum}}%</view>
      <view class="box">{{now.pres}}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.wind_dir}}</view>
      <view class="box">{{now.wind_spd}} Km/h</view>
      <view class="box">{{now.wind_sc}}级</view>
    </view>
  </view>
</view>

2.index.wxss

.container{
  justify-content: space-around;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.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;
}

3.index.js

 /**
   * 页面的初始数据
   */
  data: {
      region:['湖南省','株洲市','天元区'],
      now:''
  },
  /**
   * 点击选择改变地址
  */
changeRegion:function(e){
  this.setData({
    region:e.detail.value
  })
  this.getWeater();
},
/* 请求网络*/
getWeater:function(){
  var that = this ;//this 不可以直接在微信API 函数内部使用
  wx.request({
    url: 'https://free-api.heweather.net/s6/weather/now?',
    data:{
      location:that.data.region[1],
      key:'37f2e203fc8a4237be51d3a0f1f2d4d2' 
    },
    success:function(res){
   //   console.log(res.data)
      that.setData({ now: res.data.HeWeather6[0].now})
    }
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWeater();
  },