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

接着上文：

上文最后的箭头函数最后用于思考。

获取返回数据 res 并在 console 中打印后，我们可以逐层展开数据res。看到气温可以由 res.data.result.now.temp 获得，而天气可以由 res.data.result.now.weather 获得。wx.request 保证了 API 返回的所有数据都存储在 res.data 中, 而天气 API 将数据存储在返回数据的 result 中。因此我用下面的代码将气温和天气从返回数据中提取并打印出来。

let result = res.data.result
let temp = result.now.temp
let weather = result.now.weather
console.log(temp, weather)

我查找了微信的官方文档找到了关于数据绑定的方法：此处是微信官方文档的地址

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

WXML 中的动态数据均来自对应 Page 的 data。
<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

这里在 Page 的 Data 中定义了 message 变量，在 WXML 中使用双大括号来展示变量 message.

编辑器中将原来设计好的变量填写进去：

<view class="weather-wrapper">

<view class="temp">{{nowTemp}}</view>

<view class="weather">{{nowWeather}}</view>

<image class = "weather-bg"
src="/images/sunny-bg.png" mode="scaleToFill"></image>

</view>

在index.js中定义data和其相应的Temp，Weather:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    nowTemp:14,
    nowWeather:"多云"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    console.log("Hello World!")
    wx.request({
      url: 'https://test-miniprogram.com/api/weather/now',
      data:{"city":"广州市"},

    })
    
  },

此时：

//在 WXML 中
<view class="temp">{{nowTemp}}</view>
<view class="weather">{{nowWeather}}</view>

//在 Page 中
data: {
  nowTemp: '14°',
  nowWeather: '阴天'
}

阅读 setData() 的官方文档我们看到

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

注意：1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。

这里逻辑层就是指 js 代码，视图层就是指 wxml 和 wxss 代码。setData() 会首先更新 this.data 的值，然后使用新的 this.data 数据来渲染页面。setData() 会在改变 this.data() 后直接返回，而不会等待渲染结束后再返回。如果你对这里的同步异步还不是特别的了解，也没有关系，我们会慢慢接触到更多更多的异步调用的。另一个重要的事情是，我们需要调用 this.setData 函数来更新 Data 中的数据而不是去直接修改 this.data 。文档专门用加黑的字体告诉我们不要这么做。

因此我执行了

this.setData({
    nowTemp: temp,
    nowWeather: weather
})

气温和天气成功显示在了小程序页面上。同时我发现，从服务器中拿到的 temp没有符号 ° , 需要加上。从服务器中拿到的 weather 是英文的，而我希望在页面上显示中文的。因此我需要建立一个对应将英文转化为中文。对服务器返回的数据进行一定的处理（运算，映射等）再显示在页面上是十分常见的操作，想必也不会难倒你。

因此，我建立了一个常数变量将服务器中返回的天气对应到中文。

const weatherMap = {
  'sunny': '晴天',
  'cloudy': '多云',
  'overcast': '阴',
  'lightrain': '小雨',
  'heavyrain': '大雨',
  'snow': '雪'
}

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

猜你喜欢