小程序调用百度api天气接口后续

没看前面文章的朋友可以先看这篇小程序调用百度api天气接口https://www.jianshu.com/p/efce23cd4ef7

 
  {{weatherData}}
   
    
      未来3天天气
    
  

js在前面的基础上加了个futureWeather

var bmap = require('../../libs/bmap-wx.min.js');

Page({
  data: {
    weatherData: '',
    futureWeather: ''
  },
  onLoad: function () {
    var that = this;
    // 新建百度地图对象 
    var BMap = new bmap.BMapWX({
      ak: 'CKF2o6SbXP1vVFDNdKURwujq4ixaQElm'
    });
    var fail = function (data) {
      console.log(data)
    };
    var success = function (data) {
      var weatherData = data.currentWeather[0];
      console.log(weatherData);
      var futureWeather = JSON.stringify(data.originalData.results[0].weather_data);
      console.log(futureWeather);  
      weatherData = '城市：' + weatherData.currentCity  +'\n'+ 'PM2.5：' + weatherData.pm25 + '\n' + '日期：' + weatherData.date + '\n' + '温度：' + weatherData.temperature + '\n' + '天气：' + weatherData.weatherDesc + '\n' + '风力：' + weatherData.wind + '\n';
      that.setData({
        weatherData: weatherData,
        futureWeather: futureWeather 
      });
    }
    // 发起weather请求 
    BMap.weather({
      fail: fail,
      success: success
    });
  }
})

展示页面效果

image.png

多了个未来三天天气，小伙伴们应该明白了，刚刚的futureWeather 就是未来三天天气的数据，接下来我们在另一个页面把未来三天天气展示出来
wxml

  
    
      
          {{item.date}}
          
            
            
          
          
            {{item.temperature}}
            {{item.weather}}
            {{item.wind}}
          
       
    
  

js

//js
Page({
  data: {
    futureWeather:[]
  },
  onLoad: function (options) {
    let futureWeather = JSON.parse(options.futureWeather);
    this.setData({
      futureWeather: futureWeather
    });
    console.log(futureWeather);
  }
})

json里面不能有注释

{
  "navigationBarTitleText": "未来三天天气"
}

把css也贴出来吧

//css
.bg{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.weatherList{
  width: 90%;
  margin: 10px 0;
  padding: 20px 0;
  box-shadow: 0px 0px 30px rgba(0,0,0,.3);
  border-radius: 8px;
  text-align: center;
}
.weatherList .date{
  
}
.weatherList .image image{
  width: 50px;
  height: 40px;
  margin-top: 10px;
  border-radius: 10px;
}
.weatherList .image .day{
  margin-left: -10px;
}
.weatherList .image .night{
  margin-left: 10px;
}
.weatherList .message{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.weatherList .message .temperature{
  
}
.weatherList .message .weather{
  margin-left: 10px;
}
.weatherList .message .wind{
  margin-left: 10px;
}

展示页面

weather.gif

如果还不够明白，那就来真机体验一下吧

Allan生活服务.jpg

gzh.jpg

每日分享前端技术知识，致力于帮助更多前端人翻过一座座山，踏过一个个坑。