本文实例为大家分享了微信小程序实现天气预报功能的具体代码，供大家参考，具体内容如下

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

界面主要分为四部分：

第一部分

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

视图类='牛顿视图'！-左边添加当前城市名字，点击跳转选择城市右边添加刷新当前天气-/视图第二部分：

view class=' topView ' view class=' degreeView '！-当前温度-text class=' degree"{当前温度} }/text！-度数图标-image class=' circle ' src=' http :/./图像/圆圈。png '/image/view view class=' detailInfo ' view class=' degreeView '！-夜间天气情况-text class=' detailInfoDegree ' { night airtemperature } }/text image class=' detailInfoCircle ' src=' http :/./图像/圆圈。png '/text class=' detailInfoLine '/text！-白天天气-text class=' detailInfoDegree ' { Dayairtemperature } }/text！表示"…式样的”:家庭式|教堂式优先级比班级高会覆盖班级中相同属性-image class=' detailInfoCircle ' style=' margin-left : 57 rpx；右边距： 40 rpx ' src=' http :/./image/circle.png' /！-当前天气名字-text class=' detailInfoName ' { weather } }/text/view/view/view第三部分：

！-中间部分-view class=' CentER view ' view class=' CentER item ' style=' margin-right : 25 rpx；'image class=' CenteItemimage ' src=' http :/./image/leaf.png' /！-相同属性抽出来！- !-污染指数-text class=' centitemtext ' style=' margin-left : 10 rpx；右边距： 10 rpx"{ aqi } }/text！-污染指数对应name-text class=' CenteItemText ' { quality } }/text/view view class=' centeitemitem ' style=' margin-left : 25 rpx ' image class=' CenteItemimage ' src=' http :/./图像/风。png '/text class=' centitemtext ' style=' margin-left : 10 rpx；右边距： 10 rpx"{ WindPower } }/text！-风-text class=' CenteItemText ' { wind direction } }/text/view/view第四部分：

！-底部视图-视图类='bottomView '！-数据返回的不是数组在射流研究…中拼接的数组-block wx : for-items=' { { list } } ' view class=' bottom item view ' image class=' bottom image ' src=' http 3360 { { item }。day _ weather _ pic } } ' style=' margin-bottom : 15 rpx；'/text wx : if=' { { item。weekday==1 } } ' class=' bottom text '星期一/text text wx : elif=' { { item。weekday==2 } } ' class=' bottom text '星期二/text text wx : elif=' { { item。weekday==3 } } ' class=' bottom text '星期三/text text wx : elif=' { { item。weekday==4 } } ' class=' bottom text '星期四/text text wx : elif=' { { item。weekday==5 } } ' class=' bottom text '星期五/text text wx : elif=' { { item。weekday==6 } } ' class=' bottom text '星期六/text text wx : else=' { { item。weekday==7 } } ' class=' bottom text '星期日/text view class=' degreeView ' style=' margin-top : 20 rpx；'text class=' detailInfoDegree ' { item。night _ air _ temperature } }/text image class=' detailInfoCircle ' src=' http :/./图像/圆圈。png '/text class=' detailInfoLine '/text text class=' detailInfoDegree ' { item。day _ air _ temperature } }/text！表示"…式样的”:家庭式|教堂式优先级比班级高会覆盖班级中相同属性-image class=' detailInfoCircle ' style=' margin-left : 57 rpx；右边距： 40 rpx ' src=' http :/./图像/圆圈。png '/view/view js

//index.js//获取应用实例var app=GetApp()Page({ data : {//加载状态loadingHidden: false，//当前温度currentTemperature: ' '，//夜间温度夜间气温： ' ',//白天温度dayAirTemperature: ' '，//当前天气weather: ' '，//污染指数aqi: ' '，//污染程度quality: ' '，//风力windPower: ' '，//风向windDirection: ' '，//因为数据返回不是数组所以要自己封装一个数组list: []，height: 0，}，OnLoad : function(){ console。日志(' OnLoad ')var=this//100%好像不好使可以获取设备高度wx。getsystem info({ success : function(RES){ that。数据。高度=RES .窗口高度；} })wx。GetLocation({ success : function(RES){//通过经纬度请求数据wx.request({ //这个网站有免费应用程序接口赶紧收藏URL : ' http://路由。显示API。com/9-5 '，数据： { show API _ appid : ' 11697 '，show API _ sign : ' 6c 0c 15 C5 EC 61454 da 5288 cea2d 32881 '，//from: '5 '，lng:经度，lat:纬度，//获取一周情况0是不获取needMoreDay: ' 1 '，needIndex: '1' }，成功：函数(RES){控制台。日志控制台。日志数据。显示API _ RES _ body。现在。API)即。setData({ //改变加载状态加载Hidden:真，当前温度re : RES .数据。显示API _ RES _ body。现在。温度，夜间气温e : RES .数据。显示API _ RES _ body。f1。夜间_空气_温度，白天_显示API _ RES _身体。f1。day _ air _ temperature，weather : RES .数据。显示API _ RES _ body。现在。天气，aqi 3360 RES .数据。显示API _ RES _ body拼接数组列表：[{ ' day _ weather _ pic ' : RES . data。显示API _ RES _ body。f1。day _ weather _ pic，' weekday ' : RES . data。显示API _ RES _ body。f1。工作日，‘day _ air _ temperature’: RES .数据。显示API _ RES _ body。f1。day _ air _ temperature ' : RES .数据。显示API _ RES . f1。夜间_空气_温度}，{ '白天_白天_温度'夜间_空气_温度' : RES . data。显示API _ RES _ body。F2。夜间_空气_温度}，{ '白天_天气_ pic ' : RES . data。显示API _ RES _ body。F3。day _ weather _ pic，' weekday ' : RES . data。显示API _ RES _ body。F3。白天_气温，‘夜间_气温’3:容器{ display : flex flex-direction :柱；正义-内容：空格；}.newTopView { display : flex flex-direction : row；正义-内容：空格；}/* 头部样式上半部分*/.topView { flex-direction : }列；对齐-自：中心；边距-top :-450 rpx；}/*当前度数样式*/.degreeView { flex-direction : row；相对位置：}/*当前温度度数图标*/.圆形{ width : 35 rpx h8 : 35 rpx绝对位置：left: 130rpx} /*当前度数数组*/.度{ color:白色；font-size: 130rpx}/*详细视角样式*/.detailInfoView { flex-direction : row；}/*当前最高和最低温度度数图标*/.detailInfoCircle { width : 20 rpx；高度： 20rpx绝对位置：left: 30rpx} /*当前度数数组*/.detailInfoDegree { color : white；font-size: 30rpx}/*斜线*/.detailInfoLine { color : white；左边距left : 15 rpx font-size : 30 rpx；}/*比如阴天晴天，暴雨*/.detailInfoName { font-size : 30 rpx；颜色：白色；左边距left : 20 rpx align-self : center }/*中间视角样式*/.center view { display : flex flex-direction : row；边距-top :-550 rpx；正义-内容：中心；align-items:居中；}/*中间视角分为两个查看*/。center item { display : flex flex-direction : }行；align-items:居中；正义-内容：中心；}/*项目中图片样式*/.centereiteimage { width : 25 rpx高度： 25rpx}/*文字样式*/.centitemtext { font-size : 28 rpx；颜色：白色；}/*底部视角样式*/.底视图{页边距-顶部：-200 rpx；display : flex flex-方向：行；证明内容：空间环绕；align-items:居中；}.底部ItemView { display : flex弯曲方向：柱；align-items:居中；保证金-底部： 200 rpx}/*最近七天样式*/.bottom image { width : 70 rpxhire : 70 rpx }。底部TExT { font-size : 28 rpx颜色：白色；}PS:

开发者工具无法显示问题：是因为视角没有获得高度，默认个高度或者直接修改页面结构中高度高度即可。

另外，本站在线工具小程序上有一款天气查询工具，还添加了城市选择的功能，感兴趣的朋友可以扫描如下小程序码查看：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。