一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

微信小程序-天气查询案例

实验目的

(一) 掌握微信小程序中常用组件的使用；

(二) 掌握微信小程序中的列表渲染；

(三) 掌握微信小程序中wx.request()API的使用。

实验内容

通过开发一个“天气查询”的案例来掌握常用组件的使用，以及如何从服务器获取数据后显示在页面中，如图所示：

在该小程序中可以完成如下功能：

(1) 页面默认显示“洛阳”城市的天气信息和温馨提示。

(2) 在输入框中输入城市，单击“搜索”按钮，在页面上显示相应的天气信息和温馨提示。

(3) 单击下面的“北京”、“上海”、“天津”和“深圳”城市，页面中显示相应的天气信息和温馨提示。

步骤1： 新建一个微信小程序项目

步骤2： 在项目的pages/index/index.json文件中设置导航栏信息和样式。

步骤3： 在项目的pages/index/index.wxml文件中编写页面代码，具体代码如下：

<view class="container">
    <view class="title">天气查询</view>
    <form bindsubmit="search">
    <view class="search">
        <input name="city" type="text" value="{{city}}" />
        <button type="warn" form-type="submit" size="mini">搜索</button>
    </view>
    </form>
    <view class="city">
        <text bindtap="changeCy" data-val="北京">北京</text>
        <text bindtap="changeCy" data-val="上海">上海</text>
        <text bindtap="changeCy" data-val="广州">广州</text>
        <text bindtap="changeCy" data-val="深圳">深圳</text>
    </view>
    <view class="info">
       <view class="weather" wx:for="{{weatherList}}" wx:key="index">
          <view>{{item.type}}</view>
          <view class="lh">{{item.low}}/{{item.high}}</view>
          <view class="date">{{item.date}}</view>
          <view>{{item.fengxiang}}</view>
       </view>
    </view>
    <view class="notice">温馨提示：{{message}}</view>
</view>

步骤4： 在项目的pages/index/index.wxss文件中编写页面样式，代码如下(可以根据自己爱好进行设置)：

page{
    background-color:#FDFDDA;
}
.container{
    margin:30rpx 20rpx 0rpx;
}
.title{
  text-align: center;
  font-size: 60rpx;
  color:red;
}
.search{
    margin-top:40rpx;
    margin-bottom:20rpx;
    display: flex;
}
.search>input{
    border:1rpx solid #ccc;
    height: 65rpx;
    flex-basis:80%;
    padding-left: 20rpx;
}
.search>button{
    height: 70rpx;
    flex-basis: 20%;
    font-size: 36rpx;
    line-height: 70rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
}
.city>text{
    margin-right: 40rpx;
    color:#ccc;
    font-size: 30rpx;
}
.info{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    padding-top:580rpx;
    justify-content: space-between;
    margin-top:100rpx;
    margin-bottom: 40rpx;
}
.info>.weather{
  font-size: 30rpx;
  flex-basis:20%;
  text-align: center;
}
.info>.weather>view{
    margin-bottom: 20rpx;
}
.info>.weather:first-child{
    position:absolute;
    width: 100%;
    text-align: center;
    top:0;
    font-size: 55rpx;
    color: #00f;
    border-bottom: 1rpx dashed #ccc;
}
.info>.weather:first-child>view{
    margin-bottom:60rpx;
}
.info>.weather>.lh,.info>.weather>.date{
    font-size:20rpx;
}
.info>.weather:first-child>.lh,.info>.weather:first-child>.date{
    font-size:55rpx;
}
.notice{
    font-size: 30rpx;
}

步骤5： 从网络服务器获取查询城市的天气预报数据。

①寻找一个天气接口。

② 给页面中的form绑定“bindsubmit="search"”事件，在项目的pages/index/index.js文件中添加如下代码：

Page({
  data: {
   city:'福州',
   weatherList:[],
   message:''
  },
  req:function(){
    wx.request({
      url: 'http://????/?city='+this.data.city,
      success:res=>{
        console.log(res.data.data);
        this.setData({
          weatherList:res.data.data.forecast,
          message:res.data.data.ganmao,
        });
      }
    })
  },
  search:function(e){
     var city=e.detail.value.city;
     console.log(city);
     this.setData({city});
     this.req();
    //  console.log(this.data.weatherList[0].low.substring(3,6));
  },
  onLoad:function(){
    this.req();
  }
  
})

返回数据如下：

步骤6： 将pages/index/index.js中data中的数据渲染到页面，本文中前面的代码已经是渲染过后的了。这时候就可以运行小程序，完成了在文本框输入城市，单击“搜索”查询天气的功能。

步骤7： 实现单击“北京”、“上海”、“天津”和“深圳”查询天气的功能。首先在text组件上添加“bindtap="changeCy"”事件，并设置data-val属性值为相应城市名称，然后在项目的pages/index/index.js文件中添加如下代码：

changeCy:function(e){
    this.setData({
      city:e.target.dataset.val
    });
    this.req();
  }

运行小程序，显示效果如前面图所示。

尾言

至此，整个小案例就完成了，如果觉得还不错的话，欢迎点赞收藏哦。