这个案例是仿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

js

//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

PS：

开发者工具无法显示问题：是因为View没有获得高度，默认个高度或者直接修改wxml中height高度即可

微信小程序之（天气预报）相关推荐

1. 微信小程序实现天气预报功能（内置自动定位）（源码）

   文章目录 序言 样例图 和风天气API获取 微信小程序后台域名配置 页面代码 相关问题 源码 留言 序言 此小程序使用的是最新和风天气API. 样例图 和风天气API获取 在这个小程序中我使用的是和风 ...

2. 微信小程序实现天气预报功能(附源码)

   目录 前言 效果图 天气API获取 微信小程序后台域名配置 页面代码 注意问题(必看) 留言 前言 最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下. 效果图 天气API获取 这里我用 ...

3. 微信小程序实现天气预报功能（支持自动定位）（附源码）

   目录 前言 效果图 天气API获取 微信小程序后台域名配置 页面代码 注意问题(必看) 源码 留言 前言 由于和风天气API的更新,之前写的那篇文章 可能会出现版本不兼容的 情况.所以 更新了 这个 ...

4. 微信小程序之天气预报

   入门小程序之后跟着视频做了一个简易版的"天气预报",在手机运行的话能准确定位所在城市并查询到相应的天气状况,页面就一个,功能也不复杂,主要调用了百度地图api查询所在位置和和天气a ...

5. 微信小程序实例——天气预报开发笔记（进行中...）

   ★ 背景 [提示]:正在补充更新中- 首先,附上一张效果图. 之前就有关注过小程序的发展,感觉可以抽一点的时间来学习一下,通过官方文档以及提供的示例 Demo,发现兴趣挺高,不失为一个可以扩展自身技能 ...

6. 微信小程序（天气预报）开发文档

   相关Demo以放到github上 ---------飞机------------https://github.com/193Eric/XCXdemo.git 小程序技术文档 一．小程序应用分析 1.  ...

7. 微信小程序 - 简易天气预报

   预览图: 一.代码部分 1:WXML: <!--pages/weather/weather.wxml--> <view class="father_box"> ...

8. 微信小程序显示天气预报

   1问题描述 使用小程序使用天气api显示天气. 2算法描述 首先打开微信开发者工具创建一个新的小程序项目,但是可以不选择任何模板,进入新建的小程序,先将index中的js,wxml,wxss中的原有格 ...

9. 微信小程序 实现天气预报接入

   第一种方法: 1.后台接入第三方平台获取最近的天气预报信息 2.将数据返回给前端,此时返回信息的是最近所有的天气预报信息 例如(当前8月3号10点整 返回的会从当前8月3号10点整-8月5号10点整中 ...

10. c语言写天气预报程序,微信小程序实现天气预报功能

    获取应用实例 var app = getApp() Page({ data: { //加载状态 loadingHidden: false,//当前温度 currentTemperature: '',/ ...

最新文章

1. P1944 最长括号匹配（栈模拟/DP）
2. Java中从Orcle里取出数据时，为什么提示“无效的列索引”
3. 将 Windows10 中的 WSL 添加至右键菜单
4. svn 自动同步到web站点目录post-commit.bat
5. 学习教材《构建之法》遇到的问题及思路
6. 有以下程序C语言a b cdef,[工学]全国计算机二级笔试基础部分和C语言程序设计.doc...
7. 基于PHP的旅游网站的设计与实现论文
8. 数据库：关于BULK INSERT 学习笔记（1）
9. 因为计算机丢失d3dx10,Win7打开剑灵游戏提示丢失d3dx10_43.dll怎么解决
10. C# 调用讯飞实时语音转写
11. 移动机器人小众期刊Foundations and Trends in Roboics
12. 【Python05】Python转义字符
13. 【树莓派】搭建OpenWrt软路由，并作为旁路由的配置与应用方法
14. LC-3 中断实验 （深大计系1实验5）
15. android numberpicker 自定义,Android的自定义数字Picker控件-NumberPicker使用方法
16. 教教你如何配置汤姆猫 和 Java 环境变量的设置
17. Win7从文件服务器复制文件速度慢问题处理
18. thinkphp 启动worker
19. win7 virtualbox使用vagrant下载centos/7
20. 汉语编程的时代会到来吗？

热门文章

1. java中级工程师需要学习那些知识？
2. 基于网易云短信接口开发
3. 网易实况足球获取服务器信息,网易实况足球：游戏疑难杂症解惑，快速通过“老司机”的考核...
4. 给公司代码分配销售组织
5. 苹果笔推荐购买吗？苹果平替笔推荐
6. 老头怎么打边惩程咬金？
7. react native : Implementing unavailable method
8. 用于太阳能水蒸发的分层氮化钛纳米管网的制备和光热转化特性
9. html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
10. oracle单用户,如何将系统引导至单用户状态（运行级别 S）