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

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

<!--在weather.html修改成这样，其实就只是加了一个跳转按钮-->
<view class="weather"> 
  <text>{{weatherData}}</text>
  <navigator style='width:400rpx;display:inline-block;margin-top:30rpx;' url="../weekWeather/weekWeather?futureWeather={{futureWeather}}"> 
    <button class="weui-btn" style='color:#666;width:400rpx;'>
      未来3天天气
    </button>
  </navigator>
</view>

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

<!--wxml-->
<scroll-view scroll-y style="height: 100vh;">
  <view class='bg'>
    <block wx:for="{{futureWeather}}" wx:key="{{index}}">
      <view class='weatherList'>
          <view class='date'>{{item.date}}</view>
          <view class='image'>
            <image class='day' src='{{item.dayPictureUrl}}'></image>
            <image class='night' src='{{item.nightPictureUrl}}'></image>
          </view>
          <view class='message'>
            <view class='temperature'>{{item.temperature}}</view>
            <view class='weather'>{{item.weather}}</view>
            <view class='wind'>{{item.wind}}</view>
          </view>
      </view> 
    </block>
  </view>
</scroll-view>

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