欢迎光临，了解微信小程序开发，就上易用通！

当前位置 : 易用通 > 小程序模板
微信小程序demo实战教程：仿UC天气预报微信小程序demo实战教程：仿UC天气预报
立即下载

微信小程序demo实战教程：仿UC天气预报

模板分类 ： 小程序模板 模板编号 ： Y532 源码文件 ： 完全开源 下载权限 ： VIP会员
模板大小 ：  模板指数 ：  ℃ 更新时间 ： 2018-02-24 16:44 模板等级 ： ☆☆☆☆☆

模板截图：

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

界面主要分为四部分

微信小程序demo实战教程：仿UC天气预报(图1)

 

第一部分

微信小程序demo实战教程：仿UC天气预报(图2)

 

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

  1. <view class="newTopView">
  2. <!--左边添加当前城市名字，点击跳转选择城市 右边添加刷新当前天气-->
  3. </view>
第二部分： 微信小程序demo实战教程：仿UC天气预报(图3) 
  1. <view class="topView">
  2.     <view class="degreeView">
  3.     <!--当前温度-->
  4.       <text class="degree">{{currentTemperature}}</text>
  5.       <!--度数图标-->
  6.       <image class="circle" src="../../image/circle.png"></image>
  7.     </view>
  8.     <view class="detailInfo">
  9.       <view class="degreeView">
  10.       <!--夜间天气情况-->
  11.         <text class="detailInfoDegree">{{nightAirTemperature}}</text>
  12.         <image class="detailInfoCircle" src="../../image/circle.png" />
  13.         <text class="detailInfoLine">/</text>
  14.         <!--白天天气-->
  15.         <text class="detailInfoDegree">{{dayAirTemperature}}</text>
  16.         <!-- style优先级比class高会覆盖class中相同属性 -->
  17.         <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
  18.         <!-- 当前天气名字 -->
  19.         <text class="detailInfoName">{{weather}}</text>
  20.       </view>
  21.     </view>
  22.   </view>
第三部分： 微信小程序demo实战教程：仿UC天气预报(图4) 
  1. <!-- 中间部分 -->
  2.   <view class="centerView">
  3.     <view class="centerItem" style="margin-right: 25rpx;">
  4.       <image class="centerItemImage" src="../../image/leaf.png" />
  5.       <!-- 相同属性抽出来！ -->
  6.       <!--污染指数-->
  7.       <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{aqi}}</text>
  8.       <!--污染指数对应name-->
  9.       <text class="centerItemText">{{quality}}</text>
  10.     </view>
  11.     <view class="centerItem" style="margin-left: 25rpx">
  12.       <image class="centerItemImage" src="../../image/wind.png" />
  13.       <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{windPower}}</text>
  14.       <!--风-->
  15.       <text class="centerItemText">{{windDirection}}</text>
  16.     </view>
  17.   </view>
复制代码
第四部分： 微信小程序demo实战教程：仿UC天气预报(图5) 
  1. <!-- 底部view -->
  2.   <view class="bottomView">
  3.   <!--数据返回的不是数组 在js中拼接的数组-->
  4.     <block wx:for-items="{{list}}">
  5.       <view class="bottomItemView">
  6.         <image class="bottomImage" src="{{item.day_weather_pic}}" style="margin-bottom: 15rpx;" />
  7.         <text wx:if="{{item.weekday == 1}}" class="bottomText">星期一</text>
  8.         <text wx:elif="{{item.weekday == 2}}" class="bottomText">星期二</text>
  9.         <text wx:elif="{{item.weekday == 3}}" class="bottomText">星期三</text>
  10.         <text wx:elif="{{item.weekday == 4}}" class="bottomText">星期四</text>
  11.         <text wx:elif="{{item.weekday == 5}}" class="bottomText">星期五</text>
  12.         <text wx:elif="{{item.weekday == 6}}" class="bottomText">星期六</text>
  13.         <text wx:else="{{item.weekday == 7}}" class="bottomText">星期日</text>
  14.         <view class="degreeView" style="margin-top: 20rpx;">
  15.           <text class="detailInfoDegree">{{item.night_air_temperature}}</text>
  16.           <image class="detailInfoCircle" src="../../image/circle.png" />
  17.           <text class="detailInfoLine">/</text> 
  18.           <text class="detailInfoDegree">{{item.day_air_temperature}}</text>
  19.           <!-- style优先级比class高会覆盖class中相同属性 -->
  20.           <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
  21.         </view>
  22.       </view>
js部分：
  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.   data: {
  6.     //加载状态
  7.     loadingHidden: false,
  8.     //当前温度
  9.     currentTemperature: '',
  10.     //夜间温度
  11.     nightAirTemperature: '',
  12.     //白天温度
  13.     dayAirTemperature: '',
  14.     //当前天气
  15.     weather: '',
  16.     //污染指数
  17.     aqi: '',
  18.     //污染程度
  19.     quality: '',
  20.     //风力
  21.     windPower: '',
  22.     //风向
  23.     windDirection: '',
  24.     //因为数据返回不是数组所以要自己封装一个数组
  25.     list: [],
  26.     height: 0,
  27.  
  28.  
  29.   },
  30.  
  31.   onLoad: function () {
  32.     console.log('onLoad')
  33.     var that = this
  34.  
  35.     //100%好像不好使 可以获取设备高度
  36.     wx.getSystemInfo({
  37.       success: function (res) {
  38.         that.data.height = res.windowHeight;
  39.       }
  40.     })
  41.  
  42.     wx.getLocation({
  43.       success: function (res) {
  44.         //通过经纬度请求数据
  45.         wx.request({
  46.           //这个网站有免费API赶紧收藏
  47.           url: 'http://route.showapi.com/9-5',
  48.           data: {
  49.             showapi_appid: '11697',
  50.             showapi_sign: '6c0c15c5ec61454dac5288cea2d32881',
  51.             //
  52.             from: '5',
  53.             lng: res.longitude,
  54.             lat: res.latitude,
  55.             //获取一周情况 0是不获取
  56.             needMoreDay: '1',
  57.             needIndex: '1'
  58.           },
  59.           success: function (res) {
  60.             console.log(res)
  61.             console.log(res.data.showapi_res_body.now.api)
  62.             that.setData({
  63.               //改变加载状态
  64.               loadingHidden: true,
  65.  
  66.               currentTemperature: res.data.showapi_res_body.now.temperature,
  67.               nightAirTemperature: res.data.showapi_res_body.f1.night_air_temperature,
  68.               dayAirTemperature: res.data.showapi_res_body.f1.day_air_temperature,
  69.               weather: res.data.showapi_res_body.now.weather,
  70.               aqi: res.data.showapi_res_body.now.aqi,
  71.               quality: res.data.showapi_res_body.now.aqiDetail.quality,
  72.               windPower: res.data.showapi_res_body.now.wind_power,
  73.               windDirection: res.data.showapi_res_body.now.wind_direction,
  74.               //拼接数组
  75.               list: [
  76.                 {
  77.                   'day_weather_pic': res.data.showapi_res_body.f1.day_weather_pic,
  78.                   'weekday': res.data.showapi_res_body.f1.weekday,
  79.                   'day_air_temperature': res.data.showapi_res_body.f1.day_air_temperature,
  80.                   'night_air_temperature': res.data.showapi_res_body.f1.night_air_temperature
  81.                 },
  82.                 {
  83.                   'day_weather_pic': res.data.showapi_res_body.f2.day_weather_pic,
  84.                   'weekday': res.data.showapi_res_body.f2.weekday,
  85.                   'day_air_temperature': res.data.showapi_res_body.f2.day_air_temperature,
  86.                   'night_air_temperature': res.data.showapi_res_body.f2.night_air_temperature
  87.                 },
  88.                 {
  89.                   'day_weather_pic': res.data.showapi_res_body.f3.day_weather_pic,
  90.                   'weekday': res.data.showapi_res_body.f3.weekday,
  91.                   'day_air_temperature': res.data.showapi_res_body.f3.day_air_temperature,
  92.                   'night_air_temperature': res.data.showapi_res_body.f3.night_air_temperature
  93.                 },
  94.                 {
  95.                   'day_weather_pic': res.data.showapi_res_body.f4.day_weather_pic,
  96.                   'weekday': res.data.showapi_res_body.f4.weekday,
  97.                   'day_air_temperature': res.data.showapi_res_body.f4.day_air_temperature,
  98.                   'night_air_temperature': res.data.showapi_res_body.f4.night_air_temperature
  99.                 },
  100.                 {
  101.                   'day_weather_pic': res.data.showapi_res_body.f5.day_weather_pic,
  102.                   'weekday': res.data.showapi_res_body.f5.weekday,
  103.                   'day_air_temperature': res.data.showapi_res_body.f5.day_air_temperature,
  104.                   'night_air_temperature': res.data.showapi_res_body.f5.night_air_temperature
  105.                 },
  106.                 {
  107.                   'day_weather_pic': res.data.showapi_res_body.f6.day_weather_pic,
  108.                   'weekday': res.data.showapi_res_body.f6.weekday,
  109.                   'day_air_temperature': res.data.showapi_res_body.f6.day_air_temperature,
  110.                   'night_air_temperature': res.data.showapi_res_body.f6.night_air_temperature
  111.                 },
  112.                 {
  113.                   'day_weather_pic': res.data.showapi_res_body.f7.day_weather_pic,
  114.                   'weekday': res.data.showapi_res_body.f7.weekday,
  115.                   'day_air_temperature': res.data.showapi_res_body.f7.day_air_temperature,
  116.                   'night_air_temperature': res.data.showapi_res_body.f7.night_air_temperature
  117.                 }
  118.  
  119.               ]
  120.             })
  121.           }
  122.         })
  123.  
  124.       }
  125.     })
  126.  
  127.   }
  128. })
WXSS：
  1. .container {
  2.   display: flex;
  3.   flex-direction: column;
  4.   justify-content: space-between;
  5.  
  6. }
  7.  
  8. .newTopView {
  9.   display: flex;
  10.   flex-direction: row;
  11.   justify-content: space-between;
  12. }
  13.  
  14. /*  头部样式上半部分*/
  15. .topView {
  16.   flex-direction: column;
  17.   align-self: center;
  18.   margin-top: -450rpx;
  19. }
  20. /*当前度数样式*/
  21. .degreeView {
  22.   flex-direction: row;
  23.   position: relative;
  24. }
  25. /*当前温度度数图标*/
  26. .circle {
  27.   width: 35rpx;
  28.   height: 35rpx;  
  29.   position: absolute;
  30.   left: 130rpx;
  31. } 
  32. /*当前度数数组*/
  33. .degree {
  34.   color: white;
  35.   font-size: 130rpx
  36. }
  37.  
  38. /*详细View样式*/
  39. .detailInfoView {
  40.   flex-direction: row;
  41. }
  42. /*当前最高和最低温度度数图标*/
  43. .detailInfoCircle {
  44.   width: 20rpx;
  45.   height: 20rpx;  
  46.   position: absolute;
  47.   left: 30rpx;
  48. } 
  49.  
  50. /*当前度数数组*/
  51. .detailInfoDegree {
  52.   color: white;
  53.   font-size: 30rpx
  54. }
  55.  
  56. /*斜线*/
  57. .detailInfoLine {
  58.   color: white;
  59.   margin-left: 15rpx;
  60.   font-size: 30rpx;
  61. }
  62. /*比如阴天 晴天，暴雨*/
  63. .detailInfoName {
  64.   font-size: 30rpx;
  65.   color: white;
  66.   margin-left: 20rpx;
  67.   align-self: center
  68. }
  69.  
  70. /*中间view样式*/
  71. .centerView {
  72.   display: flex;
  73.   flex-direction: row;
  74.   margin-top: -550rpx;
  75.   justify-content: center;
  76.   align-items: center;
  77. }
  78.  
  79. /*中间view分为两个view*/
  80. .centerItem {
  81.   display: flex;
  82.   flex-direction: row;
  83.   align-items: center;
  84.   justify-content: center;
  85. }
  86. /*Item中图片样式*/
  87. .centerItemImage {
  88.   width: 25rpx;
  89.   height: 25rpx;
  90. }
  91. /*文字样式*/
  92. .centerItemText {
  93.   font-size: 28rpx;
  94.   color: white;
  95. }
  96.  
  97. /*底部view样式*/
  98. .bottomView {
  99.   margin-top: -200rpx;
  100.   display: flex;
  101.   flex-direction: row;
  102.   justify-content: space-around;
  103.   align-items: center;
  104. }
  105.  
  106.  
  107. .bottomItemView {
  108.   display: flex;
  109.   flex-direction: column;
  110.   align-items: center;
  111.   margin-bottom: 200rpx;
  112. }
  113.  
  114. /*最近七天样式*/
  115. .bottomImage {
  116.   width: 70rpx;
  117.   height: 70rpx;
  118. }
  119.  
  120. .bottomText {
  121.   font-size: 28rpx;
  122.   color: white;
  123. }

加入收藏
立即下载
分享到微信朋友圈
X

免责声明：

1. 本站所有素材（未指定商用），仅限学习交流，请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集，模板和图片版权归原作者及原出处所有。
3. 未经合法授权，会员不得以任何形式发布、传播、复制、转售该素材。

他的发布 已发布2511

推荐标签

下载该资源用户也下载了

- 随便看看 -
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有