微信小程序之（天气预报）

最新推荐文章于 2025-06-11 16:25:26 发布

转载最新推荐文章于 2025-06-11 16:25:26 发布 · 1.7k 阅读

这里写图片描述

这个案例是仿UC中天气界面做的中间也有点出入，预留了显示当前城市名字和刷新图标的位置，自己可以写下，也可以添加搜索城市。值得注意的是100%这个设置好像已经不好使了，可以通过获取设备的高度通过数据绑定设置高度。地址：https://github.com/shuncaigao/Weather

界面主要分为四部分：

这里写图片描述

第一部分

这里写图片描述

这里是预留的一块可以自行添加补充下

<view class="newTopView">
<!--左边添加当前城市名字，点击跳转选择城市 右边添加刷新当前天气-->
</view>
 1
2
3
 1
2
3

第二部分：

这里写图片描述

 <view class="topView">
    <view class="degreeView">
    <!--当前温度-->
      <text class="degree">{{currentTemperature}}</text>
      <!--度数图标-->
      <image class="circle" src="../../image/circle.png"></image>
    </view>
    <view class="detailInfo">
      <view class="degreeView">
      <!--夜间天气情况-->
        <text class="detailInfoDegree">{{nightAirTemperature}}</text>
        <image class="detailInfoCircle" src="../../image/circle.png" />
        <text class="detailInfoLine">/</text>
        <!--白天天气-->
        <text class="detailInfoDegree">{{dayAirTemperature}}</text>
        <!-- style优先级比class高会覆盖class中相同属性 -->
        <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
        <!-- 当前天气名字 -->
        <text class="detailInfoName">{{weather}}</text>
      </view>
    </view>
  </view>
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

第三部分：

这里写图片描述

  <!-- 中间部分 -->
  <view class="centerView">
    <view class="centerItem" style="margin-right: 25rpx;">
      <image class="centerItemImage" src="../../image/leaf.png" />
      <!-- 相同属性抽出来！ -->
      <!--污染指数-->
      <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{aqi}}</text>
      <!--污染指数对应name-->
      <text class="centerItemText">{{quality}}</text>
    </view>
    <view class="centerItem" style="margin-left: 25rpx">
      <image class="centerItemImage" src="../../image/wind.png" />
      <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{windPower}}</text>
      <!--风-->
      <text class="centerItemText">{{windDirection}}</text>
    </view>
  </view>
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

第四部分：

这里写图片描述

 <!-- 底部view -->
  <view class="bottomView">
  <!--数据返回的不是数组 在js中拼接的数组-->
    <block wx:for-items="{{list}}">
      <view class="bottomItemView">
        <image class="bottomImage" src="{{item.day_weather_pic}}" style="margin-bottom: 15rpx;" />
        <text wx:if="{{item.weekday == 1}}" class="bottomText">星期一</text>
        <text wx:elif="{{item.weekday == 2}}" class="bottomText">星期二</text>
        <text wx:elif="{{item.weekday == 3}}" class="bottomText">星期三</text>
        <text wx:elif="{{item.weekday == 4}}" class="bottomText">星期四</text>
        <text wx:elif="{{item.weekday == 5}}" class="bottomText">星期五</text>
        <text wx:elif="{{item.weekday == 6}}" class="bottomText">星期六</text>
        <text wx:else="{{item.weekday == 7}}" class="bottomText">星期日</text>
        <view class="degreeView" style="margin-top: 20rpx;">
          <text class="detailInfoDegree">{{item.night_air_temperature}}</text>
          <image class="detailInfoCircle" src="../../image/circle.png" />
          <text class="detailInfoLine">/</text> 
          <text class="detailInfoDegree">{{item.day_air_temperature}}</text>
          <!-- style优先级比class高会覆盖class中相同属性 -->
          <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
        </view>
      </view>
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    //加载状态
    loadingHidden: false,
    //当前温度
    currentTemperature: '',
    //夜间温度
    nightAirTemperature: '',
    //白天温度
    dayAirTemperature: '',
    //当前天气
    weather: '',
    //污染指数
    aqi: '',
    //污染程度
    quality: '',
    //风力
    windPower: '',
    //风向
    windDirection: '',
    //因为数据返回不是数组所以要自己封装一个数组
    list: [],
    height: 0,


  },

  onLoad: function () {
    console.log('onLoad')
    var that = this

    //100%好像不好使 可以获取设备高度
    wx.getSystemInfo({
      success: function (res) {
        that.data.height = res.windowHeight;
      }
    })

    wx.getLocation({
      success: function (res) {
        //通过经纬度请求数据
        wx.request({
          //这个网站有免费API赶紧收藏
          url: 'http://route.showapi.com/9-5',
          data: {
            showapi_appid: '11697',
            showapi_sign: '6c0c15c5ec61454dac5288cea2d32881',
            //
            from: '5',
            lng: res.longitude,
            lat: res.latitude,
            //获取一周情况 0是不获取
            needMoreDay: '1',
            needIndex: '1'
          },
          success: function (res) {
            console.log(res)
            console.log(res.data.showapi_res_body.now.api)
            that.setData({
              //改变加载状态
              loadingHidden: true,

              currentTemperature: res.data.showapi_res_body.now.temperature,
              nightAirTemperature: res.data.showapi_res_body.f1.night_air_temperature,
              dayAirTemperature: res.data.showapi_res_body.f1.day_air_temperature,
              weather: res.data.showapi_res_body.now.weather,
              aqi: res.data.showapi_res_body.now.aqi,
              quality: res.data.showapi_res_body.now.aqiDetail.quality,
              windPower: res.data.showapi_res_body.now.wind_power,
              windDirection: res.data.showapi_res_body.now.wind_direction,
              //拼接数组
              list: [
                {
                  'day_weather_pic': res.data.showapi_res_body.f1.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f1.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f1.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f1.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f2.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f2.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f2.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f2.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f3.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f3.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f3.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f3.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f4.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f4.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f4.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f4.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f5.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f5.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f5.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f5.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f6.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f6.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f6.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f6.night_air_temperature
                },
                {
                  'day_weather_pic': res.data.showapi_res_body.f7.day_weather_pic,
                  'weekday': res.data.showapi_res_body.f7.weekday,
                  'day_air_temperature': res.data.showapi_res_body.f7.day_air_temperature,
                  'night_air_temperature': res.data.showapi_res_body.f7.night_air_temperature
                }

              ]
            })
          }
        })

      }
    })

  }
})

 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

wxss

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

.newTopView {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*  头部样式上半部分*/
.topView {
  flex-direction: column;
  align-self: center;
  margin-top: -450rpx;
}
/*当前度数样式*/
.degreeView {
  flex-direction: row;
  position: relative;
}
/*当前温度度数图标*/
.circle {
  width: 35rpx;
  height: 35rpx;  
  position: absolute;
  left: 130rpx;
} 
/*当前度数数组*/
.degree {
  color: white;
  font-size: 130rpx
}

/*详细View样式*/
.detailInfoView {
  flex-direction: row;
}
/*当前最高和最低温度度数图标*/
.detailInfoCircle {
  width: 20rpx;
  height: 20rpx;  
  position: absolute;
  left: 30rpx;
} 

/*当前度数数组*/
.detailInfoDegree {
  color: white;
  font-size: 30rpx
}

/*斜线*/
.detailInfoLine {
  color: white;
  margin-left: 15rpx;
  font-size: 30rpx;
}
/*比如阴天 晴天，暴雨*/
.detailInfoName {
  font-size: 30rpx;
  color: white;
  margin-left: 20rpx;
  align-self: center
}

/*中间view样式*/
.centerView {
  display: flex;
  flex-direction: row;
  margin-top: -550rpx;
  justify-content: center;
  align-items: center;
}

/*中间view分为两个view*/
.centerItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
/*Item中图片样式*/
.centerItemImage {
  width: 25rpx;
  height: 25rpx;
}
/*文字样式*/
.centerItemText {
  font-size: 28rpx;
  color: white;
}

/*底部view样式*/
.bottomView {
  margin-top: -200rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}


.bottomItemView {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 200rpx;
}

/*最近七天样式*/
.bottomImage {
  width: 70rpx;
  height: 70rpx;
}

.bottomText {
  font-size: 28rpx;
  color: white;
}

 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124