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

微信小程序实战教程:仿UC天气预报由小鱼微信小程序精心整理,并分享给大家。喜欢该资源的小伙伴请下载使用,注册、回复、每日签到、点赞送大量积分,满足您免费下载的愿望

这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市。值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度。
地址:https://github.com/shuncaigao/Weather
下载地址 微信小程序实战教程:仿UC天气预报 Weather-master.zip (937.43 KB, 下载次数: 30)

界面主要分为四部分

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

第一部分

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

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

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

复制代码

第二部分:
微信小程序实战教程:仿UC天气预报

  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>

复制代码

第三部分:
微信小程序实战教程:仿UC天气预报

  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>

复制代码

第四部分:
微信小程序实战教程:仿UC天气预报

  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.   onLoad: function () {
  29.     console.log(‘onLoad’)
  30.     var that = this
  31.     //100%好像不好使 可以获取设备高度
  32.     wx.getSystemInfo({
  33.       success: function (res) {
  34.         that.data.height = res.windowHeight;
  35.       }
  36.     })
  37.     wx.getLocation({
  38.       success: function (res) {
  39.         //通过经纬度请求数据
  40.         wx.request({
  41.           //这个网站有免费API赶紧收藏
  42.           url: ‘http://route.showapi.com/9-5′,
  43.           data: {
  44.             showapi_appid: ‘11697’,
  45.             showapi_sign: ‘6c0c15c5ec61454dac5288cea2d32881’,
  46.             //
  47.             from: ‘5’,
  48.             lng: res.longitude,
  49.             lat: res.latitude,
  50.             //获取一周情况 0是不获取
  51.             needMoreDay: ‘1’,
  52.             needIndex: ‘1’
  53.           },
  54.           success: function (res) {
  55.             console.log(res)
  56.             console.log(res.data.showapi_res_body.now.api)
  57.             that.setData({
  58.               //改变加载状态
  59.               loadingHidden: true,
  60.               currentTemperature: res.data.showapi_res_body.now.temperature,
  61.               nightAirTemperature: res.data.showapi_res_body.f1.night_air_temperature,
  62.               dayAirTemperature: res.data.showapi_res_body.f1.day_air_temperature,
  63.               weather: res.data.showapi_res_body.now.weather,
  64.               aqi: res.data.showapi_res_body.now.aqi,
  65.               quality: res.data.showapi_res_body.now.aqiDetail.quality,
  66.               windPower: res.data.showapi_res_body.now.wind_power,
  67.               windDirection: res.data.showapi_res_body.now.wind_direction,
  68.               //拼接数组
  69.               list: [
  70.                 {
  71.                   ‘day_weather_pic’: res.data.showapi_res_body.f1.day_weather_pic,
  72.                   ‘weekday’: res.data.showapi_res_body.f1.weekday,
  73.                   ‘day_air_temperature’: res.data.showapi_res_body.f1.day_air_temperature,
  74.                   ‘night_air_temperature’: res.data.showapi_res_body.f1.night_air_temperature
  75.                 },
  76.                 {
  77.                   ‘day_weather_pic’: res.data.showapi_res_body.f2.day_weather_pic,
  78.                   ‘weekday’: res.data.showapi_res_body.f2.weekday,
  79.                   ‘day_air_temperature’: res.data.showapi_res_body.f2.day_air_temperature,
  80.                   ‘night_air_temperature’: res.data.showapi_res_body.f2.night_air_temperature
  81.                 },
  82.                 {
  83.                   ‘day_weather_pic’: res.data.showapi_res_body.f3.day_weather_pic,
  84.                   ‘weekday’: res.data.showapi_res_body.f3.weekday,
  85.                   ‘day_air_temperature’: res.data.showapi_res_body.f3.day_air_temperature,
  86.                   ‘night_air_temperature’: res.data.showapi_res_body.f3.night_air_temperature
  87.                 },
  88.                 {
  89.                   ‘day_weather_pic’: res.data.showapi_res_body.f4.day_weather_pic,
  90.                   ‘weekday’: res.data.showapi_res_body.f4.weekday,
  91.                   ‘day_air_temperature’: res.data.showapi_res_body.f4.day_air_temperature,
  92.                   ‘night_air_temperature’: res.data.showapi_res_body.f4.night_air_temperature
  93.                 },
  94.                 {
  95.                   ‘day_weather_pic’: res.data.showapi_res_body.f5.day_weather_pic,
  96.                   ‘weekday’: res.data.showapi_res_body.f5.weekday,
  97.                   ‘day_air_temperature’: res.data.showapi_res_body.f5.day_air_temperature,
  98.                   ‘night_air_temperature’: res.data.showapi_res_body.f5.night_air_temperature
  99.                 },
  100.                 {
  101.                   ‘day_weather_pic’: res.data.showapi_res_body.f6.day_weather_pic,
  102.                   ‘weekday’: res.data.showapi_res_body.f6.weekday,
  103.                   ‘day_air_temperature’: res.data.showapi_res_body.f6.day_air_temperature,
  104.                   ‘night_air_temperature’: res.data.showapi_res_body.f6.night_air_temperature
  105.                 },
  106.                 {
  107.                   ‘day_weather_pic’: res.data.showapi_res_body.f7.day_weather_pic,
  108.                   ‘weekday’: res.data.showapi_res_body.f7.weekday,
  109.                   ‘day_air_temperature’: res.data.showapi_res_body.f7.day_air_temperature,
  110.                   ‘night_air_temperature’: res.data.showapi_res_body.f7.night_air_temperature
  111.                 }
  112.               ]
  113.             })
  114.           }
  115.         })
  116.       }
  117.     })
  118.   }
  119. })

复制代码

WXSS:

  1. .container {
  2.   display: flex;
  3.   flex-direction: column;
  4.   justify-content: space-between;
  5. }
  6. .newTopView {
  7.   display: flex;
  8.   flex-direction: row;
  9.   justify-content: space-between;
  10. }
  11. /*  头部样式上半部分*/
  12. .topView {
  13.   flex-direction: column;
  14.   align-self: center;
  15.   margin-top: -450rpx;
  16. }
  17. /*当前度数样式*/
  18. .degreeView {
  19.   flex-direction: row;
  20.   position: relative;
  21. }
  22. /*当前温度度数图标*/
  23. .circle {
  24.   width: 35rpx;
  25.   height: 35rpx;  
  26.   position: absolute;
  27.   left: 130rpx;
  28. }
  29. /*当前度数数组*/
  30. .degree {
  31.   color: white;
  32.   font-size: 130rpx
  33. }
  34. /*详细View样式*/
  35. .detailInfoView {
  36.   flex-direction: row;
  37. }
  38. /*当前最高和最低温度度数图标*/
  39. .detailInfoCircle {
  40.   width: 20rpx;
  41.   height: 20rpx;  
  42.   position: absolute;
  43.   left: 30rpx;
  44. }
  45. /*当前度数数组*/
  46. .detailInfoDegree {
  47.   color: white;
  48.   font-size: 30rpx
  49. }
  50. /*斜线*/
  51. .detailInfoLine {
  52.   color: white;
  53.   margin-left: 15rpx;
  54.   font-size: 30rpx;
  55. }
  56. /*比如阴天 晴天,暴雨*/
  57. .detailInfoName {
  58.   font-size: 30rpx;
  59.   color: white;
  60.   margin-left: 20rpx;
  61.   align-self: center
  62. }
  63. /*中间view样式*/
  64. .centerView {
  65.   display: flex;
  66.   flex-direction: row;
  67.   margin-top: -550rpx;
  68.   justify-content: center;
  69.   align-items: center;
  70. }
  71. /*中间view分为两个view*/
  72. .centerItem {
  73.   display: flex;
  74.   flex-direction: row;
  75.   align-items: center;
  76.   justify-content: center;
  77. }
  78. /*Item中图片样式*/
  79. .centerItemImage {
  80.   width: 25rpx;
  81.   height: 25rpx;
  82. }
  83. /*文字样式*/
  84. .centerItemText {
  85.   font-size: 28rpx;
  86.   color: white;
  87. }
  88. /*底部view样式*/
  89. .bottomView {
  90.   margin-top: -200rpx;
  91.   display: flex;
  92.   flex-direction: row;
  93.   justify-content: space-around;
  94.   align-items: center;
  95. }
  96. .bottomItemView {
  97.   display: flex;
  98.   flex-direction: column;
  99.   align-items: center;
  100.   margin-bottom: 200rpx;
  101. }
  102. /*最近七天样式*/
  103. .bottomImage {
  104.   width: 70rpx;
  105.   height: 70rpx;
  106. }
  107. .bottomText {
  108.   font-size: 28rpx;
  109.   color: white;
  110. }

复制代码

小鱼源码网www.51xyyx.com

轻松一刻:

公司的前台美女哭着要辞职,同事们很奇怪问:“做得好好地,干嘛辞职啊?”美女大怒道:“我也不想辞职,但是公司有个王八蛋叫高潮,总是迟到!”经理劝道:“那你也不至于辞职啊!” 美女继续解释道:“他迟到不要紧,问题是每天都有人问我高潮来了没有?我真受不了了”
本文章内容归小鱼源码网所有,未经允许私自转载者必将追究责任
小鱼源码下载网,商业源码,专业客服,质量保证 » 微信小程序实战教程:仿UC天气预报

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

精品源码,商业服务,发布得积分,VIP免费下

开通会员 发布资源