实时开发查看天气微信小程序——从网络获取数据(3) part 3

const weatherMap = {
  'sunny':'晴天',//添加多种天气状况
  'cloudy':'多云',
  'overcast':'阴',
  'lightrain':'小雨',
  'heavyrain':'大雨',
  'snow':'雪'
}

设置动态的更改背景图片：

<image class = "weather-bg"
src="{{nowWeatherBackground}}" mode="scaleToFill"></image>

然后在index.js中设置Page中的变量将其改成动态变量，设置默认值：

success:res =>{
        let result = res.data.result
        let temp = result.now.temp
        let weather = 
result.now.weather
        console.log(temp,weather)
        this.setData({
          nowTemp:temp + '°',
          nowWeather:weatherMap
[weather],
        nowWeatherBackground:
'/images/'+ weather +'-bg.png'
        })
      }

此处把天气的变化变成一个动态的值。

动态更新导航栏颜色

让导航栏的背景颜色和图片的颜色一致：

在app.js中根据不同的天气背景颜色改变导航栏的颜色，因此我们需要在index.js中建立相关颜色的映射，

const weatheColorMap = {
  'sunny': '#cdeefd',
  'cloudy': '#deeef6',
  'overcast': '#c6ced2',
  'lightrain': '#bdd5e1',
  'heavyrain': '#c5ccd0',
  'snow': '#aae1fc'
}

谷歌搜索：wx.setNavigationBarColor(OBJECT)

得到官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/setNavigationBarColor.html

官方文档中有一个示例代码：

这个代码我们就可以直接复制拿来使用，因为我们没有使用动画所以不使用animation，获得下列代码：

 wx.setNavigationBarColor({
          frontColor: '#000000',
          backgroundColor:
weatherColorMap[weather]
        })

onPullDownRefresh 实现下拉刷新

在官方的文档中这样写的下拉刷新页面：

https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html

现在我们要实现下拉刷新这个功能，这在传统的手机应用开发中并不简单，需要完成以下几件事情

• 监听屏幕的下拉手势，
• 调用网络 API 获取数据，
• 调用网络的同时，在屏幕上给出提示（例如点点点或者圈圈），来告诉用户正在获取数据。
• 数据返回后关闭提示，
• 数据返回后在页面上显示新的数据。

幸运的是，在微信小程序开发中实现下拉刷新并不是很难的事情，只需要在配置中开启下拉刷新功能，那么在执行下拉手势时，就会自动调用 onPullDownRefresh() 函数。就好像小程序刚开启时会调用 onLoad() 一样。 我们可以参照 下拉刷新的官方文档 完成这一任务。

配置开启下拉刷新

我们在文档中看到，

需要在 config 的window选项中开启 enablePullDownRefresh。

我们在 app.json 的 window 中添加配置

"window":{
    "enablePullDownRefresh": true
}

我们可以在 Page 中添加 onPullDownRefresh() 函数，执行 console.log("refresh executed!") 语句确认函数被成功调用。为了将"点点点"显示出来，我还在配置 backgroundTextStyle 为 dark

下拉刷新时调用天气 API

确认成功后，我们要在 onPullDownRefresh() 函数中调用天气 API，我们当然可以把 onLoad() 中的 wx.request() 复制粘贴到 onPullDownRefresh() 中，但同样的代码在两个或更多的地方出现是非常不好的编码习惯。通常我们都应该将代码封装起来，取一个有意义的函数名，在多个地方调用这个函数。因此我将 wx.request(...) 封装在了 getNow() 函数中，分别在 onLoad() 和 onPullDownRefresh() 中调用。