微信小程序之天气查询小案例-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序之天气查询小案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本次小项目是关于微信小程序-动态查询天气(墨迹天气Api)

此次案例分为以下几个准备方面:

一.准备方面:

(1)如何发起请求?查看文档:RequestTask | 微信开放文档

(2)如何获取定位信息?查看文档:wx.getLocation(Object object) | 微信开放文档

(3)如何控制页面来实现数据实时渲染?查看文档:Page | 微信开放文档

(4)WXML语法条件参考:WXML | 微信开放文档

(5)墨迹天气api提供:https://autodev.openspeech.cn/csp/api/v2.1/weather

(6)对微信开发者工具的设置:查看下图:

二.当前页面的js代码解析(从内向外解析):

定义第一个函数,向墨迹天气api发起请求,并获取天气数据

>形参:location-存放定位信息(经纬度),city-查询的城市,sFun-请求成功的回调函数

 //获取天气(含api)
 function sendtemp(location, city, sFun) {
    //测试
    console.log(`https://autodev.openspeech.cn/csp/api/v2.1/weather?${city == ""?"":'city='+city+"&"}${location.latitude == ""?"":"latitude="+location.latitude+"&"}${location.longitude == ""?"":"longitude="+location.longitude+"&"}clientType=android&openId=aiuicus&sign=android`);

    //获取墨迹天气api
    wx.request({
      url: `https://autodev.openspeech.cn/csp/api/v2.1/weather?${city == ""?"":'city='+city+"&"}${location.latitude == ""?"":"latitude="+location.latitude+"&"}${location.longitude == ""?"":"longitude="+location.longitude+"&"}clientType=android&openId=aiuicus&sign=android`,
      success: result => sFun(result),
      header: {
        'content-type': 'application/json' // 默认值
      },
      fail: (err) => {},
      complete: (res) => {},
    })
  }

定义第二个函数来判断获取天气的方式,并且船舰location对象

>形参:city-查询的城市

作用:如果city为空串,则获取定位查询天气,如果是含有城市名称的字符串,则直接查询天气.

sFun-依然是获取墨迹天气api的成功回调函数

 //判断获取天气的方式(判断是否定位获取?)
  function getWeather(city, sFun) {
    //测试
    console.log(city);
    //创建定位对象
    var location = {
      latitude: "", //纬度
      longitude: "" //经度
    };
    if (city == "") {
      //当没有查询天气则定位获取 or 当查询城市为空时则采取定位获取
      wx.getLocation({
        type: "wgs84",
        success(res) {
          location = res;
          sendtemp(location, city, sFun);
        }
      })
    } else {
      //查询城市天气
      sendtemp(location, city, sFun);
    }
    
  }

Page对象的设置:

(1)当页面加载时(onload),触发定位获取天气的函数,传入空串的city,以及获取天气成功时的回调函数,也就是上两个函数的sFun,sFun这里的形参result实际上就是获取天气成功之后的数据对象.

---在这里定义sFun的函数,可提高代码的复用性,遵循了高内聚低耦合,大大减少了代码量.

(2)定义表单的提交时的函数:传入带有值或空串的city,回调函数跟之前的一样,如果有特殊的要求,还可以自由改变函数里的代码

--可能有些人会疑问为什么这里不再定义一个函数,来重复使用,提高代码复用性呢?

答:如果要重新定义一个函数,那么在以上每个函数的形参中我们都要传入一个this(这里指的是page本身),用$this来接收,然后在调用回调函数时,把$this传入才可以提高我们的代码复用性,也就是说this要绕一大圈才可以在回调函数中使用,作者认为这样的方式有点奇怪就没有再次提高代码的复用性,如果读者觉得不麻烦的话,其实也可以使用这样的方式.

  Page({

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      getWeather("", result => {
        if(result.data.code === 0){
          //code为0时,代表有查询的天气数据
          var res = result.data.data.list[0];
          this.setData({
            code: result.data.code, //用于条件判断
            list: result.data.data.list, //天气列表
            todayWeather: res, //今日天气
          })
        }
      });
    },
    /*
     表单的查询天气函数
    */
    search: function (e) {
      getWeather(e.detail.value.city, result => {
        //code为0时,代表有查询的天气数据
        if(result.data.code === 0){
          var res = result.data.data.list[0];
          this.setData({
            code: result.data.code, //用于条件判断
            list: result.data.data.list, //天气列表
            todayWeather: res, //今日天气
          })
        }
      });
    },
  })

三.这个内容就不做解析了,相信大家学习到这里已经有牢固的前端知识基础了.

(1)wxml:这里多了一些条件渲染还有表单使用的区别,大家可以查看以下两个文档了解一下就可以了

条件渲染:条件渲染 | 微信开放文档

列表渲染:列表渲染 | 微信开放文档

表单使用:form | 微信开放文档

<image src="../../images/beijing.jpeg" class="bg-image"/>
<view class="search">
  <form bindsubmit="search">
    <input type="text" name="city" placeholder="请输入城市"/>
    <button form-type="submit" type="primary" size="mini">查询天气</button>
  </form>
</view>
<view class="main">
  <view class="info" wx:if="{{code===0}}">
    <view class="temp">{{todayWeather.high}}℃</view>
    <view class="lowhigh">空气质量 {{todayWeather.airQuality}}</view>
    <view class="type">{{todayWeather.weather}}</view>
    <view class="city">{{todayWeather.province}} {{todayWeather.city}}
    </view>
    <view class="week">
      {{todayWeather.date}}
    </view>
    <view class="weather">
      {{ todayWeather.wind }}
    </view>
  </view>
</view>
<scroll-view class="list" scroll-x wx:if="{{code===0}}">
  <block wx:for="{{list}}" wx:key="index">
    <view class="item">
      <view>{{item.weather}}</view>
      <view>{{item.high}}℃/{{item.low}}℃</view>
      <view>{{item.date}}</view>
      <view>{{item.airQuality}}</view>
      <view>{{item.wind}}</view>
    </view>
  </block>
</scroll-view>

下附背景图(有水印,作者也没办法去掉.大家如果不想使用的话,可以直接删除含有背景的代码即可.)

(2)wxss:

.main {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
  margin-top: 20px;
}
.info view{
  margin-top: 10px;
  font-weight: 300;
}
.info .temp{
  font-weight: 400;
  font-size: 64px;
}
.info .lowhigh{
  font-size: 8px;
}
.info .type{
  font-size: 14px;
}
.info .city{
  font-weight: bold;
}
.info .week,.weather{
  font-size: 10px;
}
.search{
  display: flex;
  padding-top: 50rpx;
  justify-content: center;
}
.search form input{
  display: inline-block;
  border: 1px solid gray;
  height: 60rpx;
  margin-right: 10rpx;
  padding-left: 10rpx;
  border-radius: 10rpx;
}
.search form button{
  display: inline-block;
}

.list{
  margin-top: 100rpx;
  width: 100%;
  padding-top: 100rpx;
  border-top: 1px solid #cccccc;
  white-space: nowrap;
}

.item{
  display: inline-block;
  width: 30%;
  margin-right: 10rpx;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
  font-family: "微软雅黑";
}
.bg-image{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -999;
}

(3)代码的演示: