项目二：今日天气

效果#

重点#

picker组件#

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

　　<picker>是从底部弹起的滚动选择器组件，目前根据mode属性值的不同共支持5种选择器，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器。若省略mode值不写，则默认效果是普通选择器。

　　**省市区选择器** 当mode=’region’时为省市区选择器效果

天气API#

和风天气： https://dev.heweather.com/docs/api/ （自行注册账户）
　　　获得key：https://console.heweather.com/app/index

　　获得天气图标：https://dev.heweather.com/docs/refer/condition 【下载解压到项目中即可】

　　根据网站的相关代码提示和接口信息制作url： https://dev.heweather.com/docs/api/weather

1	`URL：https://free-api.heweather.net/s6/weather/now?location`

　　回到微信公众平台，添加服务器域名：

调用函数

this."函数名"(参数列表)

wx.requst({
　　url:
　　data:
　　success:function(e){
　　通常先在控制台输出查看一下
　　}
　　}) + 更改变量值

步骤#

目录结构#

代码#

<!-- pages/index/index.wxml -->
<view class="container"> 
<!--第一部分-->
  <picker mode="region" bindchange='regionChange'>
    <view class="col">{{region}}</view>
  </picker>
<!-- 第二部分 -->
  <text>{{now.tmp}}℃ {{now.cond_txt}}</text>
<!-- 第三部分 -->
  <image src="/images/{{now.cond_code}}.png"></image>
<!-- 第三部分 -->
  <view class="detail">
    <view class="colum">
      <view class="row">湿度</view>
      <view class="row">气压</view>
      <view class="row">能见度</view>
    </view>
    <view class="colum">
      <view class="row">{{now.hum}}%</view>
      <view class="row">{{now.pres}}hPa</view>
      <view class="row">{{now.vis}}Km</view>  
    </view>
    <view class="colum">
      <view class="row">风向</view>
      <view class="row">风速</view>
      <view class="row">风力</view>  
    </view>
    <view class="colum">
      <view class="row">{{now.wind_dir}}</view>
      <view class="row">{{now.wind_spd}}Km/h</view>
      <view class="row">{{now.wind_sc}}级</view> 
    </view>
  </view>
</view>

/* pages/index/index.wxss */
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.detail{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.col{
  color: rgb(16, 160, 47);
}
.colum{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}
.row{
  width: 33.3%;
  text-align: center;
}
image{
  width:520rpx;
}
text{
  font-size: 80rpx;
  color: rgb(250, 16, 28);
}

// pages/index/index.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    region:["河南省","南阳市","宛城区"],
    now:""
  },
  regionChange:function(e){
    this.setData(
      {region:e.detail.value}
    )
    this.getWeather();
  },
  getWeather:function(){
    var that=this; //this不可以直接在webAPI函数中使用
    wx.request({
      url: 'https://free-api.heweather.net/s6/weather/now?location',
      data:{
        location:that.data.region[1],
        key:"803d0078076840d1a08a6f1585675b96",
      },
      success:function(reslut){
        //console.log(reslut.data)
        that.setData({
          now:reslut.data.HeWeather6[0].now
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWeather();
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }
})

// app.json
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的天气",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "sitemapLocation": "sitemap.json"
}