微信小程序开发之——天气查询-实现(2)

发表于 分类于 ， ， 阅读时长 ≈ 4 分钟

一 概述

  • 天气查询——界面搭建
  • 天气查询——逻辑实现
  • 天气查询——效果展示

二 界面搭建

2.1 布局文件(weather.wml)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!--pages/weather/weather.wxml-->
<view class="container">
  <!--头部-搜索框-->
  <view class="top">
    <input placeholder="输入城市名进行搜索" bindinput="bindKeyInput" />
    <view class="icon">
      <icon type="search" size="25" bindtap="search"></icon>
    </view>
  </view>
  <!--中间-城市及日期-->
  <view class="body">
    <!--城市-->
    <view class="city">
      <text>{{city}}</text>
    </view>
    <!--日期-->
    <view class="today">
      <text>{{date}}</text>
    </view>
    <!--天气图片-->
    <view class="type">
      <text>{{type}}</text>
      <image src="{{pic}}" mode="aspectFill" style="width: 400rpx;height: 400rpx;" />
    </view>
  </view>
  <!--底部-气温及天气-->
  <view class="bottom">
    <!--左边(高温低温)-->
    <view class="weather">
      <text>{{weather}}</text>
    </view>
    <view class="wind">
      <text>{{wind}}</text>
    </view>
  </view>
</view>

2.2 页面样式文件(weather.wxss)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
page {
  background-color: #5a9cd8;
  color: white;
}
.container {
  margin: 50rpx;
}

.top {
  display: flex;
  padding: 20rpx;
  flex-direction: row;
  background-color: #efefef;
  position: absolute;
  top: 50rpx;
  border-radius: 10rpx;
  width: 90%;
}

.input {
  width: 90%;
  font-size: 32rpx;
}

.icon {
  width: 10%;
  position: absolute;
  right: 10rpx;
}

.body {
  text-align: center;
  display: flex;
  flex-direction: column;
}
.type{
  display: flex;
  flex-direction: column;
  font-size: 60rpx;
  text-align: center;
}
.city {
  font-size: 80rpx;
}

.today {
  font-size: 34rpx;
}

.bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.weather {
  font-size: 38rpx;
  width: 100%;
}

/* .right {
  display: flex;
  flex-direction: column;
} */

.wind {
  font-size: 40rpx;
}

.temp {
  font-size: 40rpx;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

input {
  color: #333;
}

三 逻辑实现-weather.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// pages/weather/weather.js
var defaultcity, getweather, gettemp, getwind, getpic, gettype,getdate;
var vurl = 'http://wthrcdn.etouch.cn/weather_mini?city='

Page({

  /**
   * 页面的初始数据
   */
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    defaultcity = '北京'
    this.weather()
  },
  weather() {
    wx.showLoading({
      title: 'Loading',
    })
    wx.request({
      url: vurl + defaultcity,
      success: res => {
        console.log(res.data)
        if (!res.data) {
          wx.showToast({
            title: '获取天气接口失败',
          })
          wx.hideLoading()
        }
        //头部-日期
        getdate = res.data.data.forecast[0].date

        //图片
        getpic =''
        gettype=res.data.data.forecast[0].type
        switch(gettype){
          case '小雨':
            getpic='/images/rain.png'
          break;
          case '阴':
            getpic='/images/yin.png'
          break;
          case '多云':
            getpic='/images/duoyun.png'
          break;
          case '晴':
            getpic='/images/qing.png'
          break;
          default:
           console.log("default");
        }
        //底部
        getweather = res.data.data.forecast[0].high + '\n' + res.data.data.forecast[0].low
        gettemp = res.data.data.forecast[0].high
        getwind = res.data.data.forecast[0].fengxiang + '，' + res.data.data.forecast[0].fengli.replace(/<\!\[CDATA\[(.*)\]\]>/, '$1')
        this.setData({
          city: defaultcity,
          weather: getweather,
          temp: gettemp,
          wind: getwind,
          pic: getpic,
          type: gettype,
          date: getdate
        })
        wx.hideLoading()
      }
    })
  },
  bindKeyInput(e){
    defaultcity=e.detail.value
  },
  search(){
    this.weather()
  }
})

四 效果图

五 源码

  • 源码参考