微信小程序入门2 和风天气 picker组件 弹性布局

首先看一下项目成果
挡挡挡

代码展示
index.wxml

<view class='container'>
  <picker mode='region' bindchange="changeRegion" >
  <view>{{region}}</view>
  </picker>
  <text>{{now.tmp}}度 {{now.cond_txt}}</text>
  <image  wx:if="{{now.cond_code}}" 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>

picker 从底部弹起的滚动选择器
– region 省市区选择器
–详细参考https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
–bandchange 失去焦点自动触发的事件

index.wxss

.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around
}
.detail{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.bar{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}
.box{
  width: 33.3%;
  text-align: center;
}
text{
  font-size: 80rpx;
  color: #3c5f81;
}
image{
  width: 220rpx;
  height: 220rpx;
  border-radius: 50%
}

布局方式采用弹性布局

index.js //只展示了有改变的部分

data: {
    region: ['安徽省','六安市','舒城县'], 默认显示的地址
    now:''
  },
  changeRegion(e){
     this.setData({
      region: e.detail.value
    })
    this.getWeather();//更新天气
  },

  getWeather(){
    var that=this;  //this不可以在wxAPi函数内部使用
    wx.request({
      url: 'https://free-api.heweather.net/s6/weather/now?', 
      data:{
        location:that.data.region[1],
        key:'xxx'
      },
      success:function(res){
           that.setData({
          now: res.data.HeWeather6[0].now
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWeather()
  },

和风天气接口
1.key每个人是不一样的，需要自己注册账号获取
2.只要获取市的地址就可以 获取当地的天气
4.data是拼接在url后面的 但是地址在变 所以写在了data里面
默认和风天气免费版接口
https://free-api.heweather.net/s6/weather/{weather-type}?{parameters}
weather-type参数可选
parameters必填项是location和key

3.其次微信开发者账号中需要配置服务器端域名
和风天气的域名 如图

具体参考链接
https://console.heweather.com/app/index

有问题随时滴滴我！