E企盈营销工具技术服务商 热线:4006-838-530

个人微信小程序(生活服务)——天气页面

E企盈直播平台营销卖货系统

续上文的开发指南:http://blog.csdn.net/u013948010/article/details/78530173 这篇主要是讲一下天气主页面的设计实现。index界面获取数据主页面的index.js函数已经实现了访问和风天气接口,并把数据存入全局变量中,上一篇也有说到:  weatherData  air所以天气页面直接取这两个全局数据就可以了。 主页面获取天气数据的代码//获取天气  getWeather:function(e){    var city = this.data.location.slice(0, 2); //分割字符串    var that = this;    var url = “https://free-api.heweather.com/s6/weather”;    var param = {      key: “你的key”,      location: city    };    //发出请求    wx.request({      url: url,      data: param,      header: {        ‘content-type’: ‘application/json’      },      success: function (res) {        console.log(res);        app.globalData.weatherData = res.data.HeWeather6[0];        that.setData({          weatherData: app.globalData.weatherData.now, //今天天气情况数组          dress: res.data.HeWeather6[0].lifestyle[1] //生活指数        });      }    })  },  getAir: function (e){    var city = this.data.location.slice(0, 2); //分割字符串    var that = this;    var url = “https://free-api.heweather.com/s6/air/now”;    var param = {      key: “你的key”,      location: city    };    //发出请求    wx.request({      url: url,      data: param,      header: {        ‘content-type’: ‘application/json’      },      success: function (res) {        console.log(res);        app.globalData.air = res.data.HeWeather6[0].air_now_city;        that.setData({          air: app.globalData.air        });      }    })  },天气页面设计天气页面大概是这样子的:上面是今日天气详情显示,下面是近三日的天气情况。 背景图片是自己找的,存入images/weather/文件夹中:image class=”bg” mode=”aspectFill” src=”../../images/weather/day.jpg”/image天气小图标是在和风天气网站上根据天气代码下载的,存入images/weather/文件夹中:image class=”typeImg” src=”../../images/weather/{{fc.cond_code_d}}.png”weather.wxml设计!–index.wxml–image class=”bg” mode=”aspectFill” src=”../../images/weather/day.jpg”/imageview class=”wrapper”  view class=”curWeather”    view class=”curTemperature”      view class=”tmp”{{now.tmp}}°/view      view class=”city”{{city}}{{district}}/view      view class=”type”{{now.cond_txt}} | 空气 {{quality.qlty}}/view    /view    view class=”curExtern”      view class=”wind”        view class=””{{now.wind_dir}}/view        view wx:if=”{{now.wind.sc==’微风’}}” class=”val”{{“=”}}2级/view        view wx:else class=”val”{{now.wind_sc}}级/view      /view      view class=”line”/view      view class=”relWet”        view class=””相对湿度/view        view class=”val”{{now.hum}}%/view      /view      view class=”line”/view      view class=”humanTmp”        view class=””体感温度/view        view class=”val”{{now.fl}}°/view      /view    /view  /view  view class=”forecast”    block wx:for=”{{forecast}}” wx:for-index=”index” wx:for-item=”fc”      view class=”castItem”        view class=”castDay”{{showday[index]}}/view        view class=”castType”          image class=”typeImg” src=”../../images/weather/{{fc.cond_code_d}}.png”/image          {{fc.cond_txt_d}} | {{fc.wind_sc}}        /view        view class=”castTmp”          {{fc.tmp_max}}° / {{fc.tmp_min}}°        /view      /view    /block  /view/viewweather.wxss设计/**index.wxss**/.wrapper{  width:100%;  height:100%;  box-sizing: border-box;  position:absolute;/*绝对定位*/  top:0;  left:0;  padding:30rpx;  font-family: ‘Lucida Sans’, ‘Lucida Sans Regular’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Geneva, Verdana, sans-serif;}.curWeather{  height:650rpx;  display: flex;  flex-direction: column;/*纵向*/}.bg{  height:700rpx;   width:750rpx;}.curTemperature{  color:#fff;  font-size: 0.8em;  flex-grow: 1;/*表示将剩余的空间分配给它*/}.tmp{  font-size: 5em;}.curExtern{  display: flex;  flex-direction: row;/*横向*/  justify-content: space-around;  color:#fff;}.val{  text-align: center;  font-size: 1.2em;}.line{  border:0.9rpx solid #fff;}.typeImg{  width:50rpx;  height:50rpx;  vertical-align: middle;}.castItem{  display: flex;  flex-direction: row;  justify-content: space-between;  border-bottom: 1rpx solid #ccc;   padding:50rpx 10rpx;}.forecast{  color:#8BC34A;  /*background: #aaa;*/  margin-top:40rpx;}天气页面逻辑设计weather.js设计  数据直接获取全局数据:     that.setData({        city: app.globalData.defaultCity, //今天天气情况数组          district: app.globalData.defaultCounty //生活指数      });//index.js//获取应用实例var app = getApp()Page({  data: {    weekday: [‘周日’, ‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’],    showday: [‘今天’, ‘明天’, ”],    city:”, //城市    district:”, //区域    now:”,    forecast:”,//三日天气预报    quality:” //空气质量  },  onShow: function () {    var that = this;    var city = app.globalData.defaultCity.slice(0, 2);    that.setData({      city: app.globalData.defaultCity, //今天天气情况数组      district: app.globalData.defaultCounty //生活指数    });    that.getWeather(city);//获得天气  },  //当页面加载完成  onLoad: function () {    var that = this;    var date = new Date();    console.log(date.getDay());    that.setData({      ‘showday[2]’: this.data.weekday[(date.getDay() + 2) % 7],    });    console.log(this.data.showday);  },  //获取天气  getWeather: function (city) {    var that = this;    that.setData({          now: app.globalData.weatherData.now, //今天天气情况数组          forecast: app.globalData.weatherData.daily_forecast,          quality: app.globalData.air    });  },});

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 个人微信小程序(生活服务)——天气页面
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏