微信小程序-天气预报案例分享

以下是一个简单的微信小程序示例，可以显示一个按钮和点击按钮后的天气查询结果：

// app.js
App({
  onLaunch: function () {
    // 小程序启动时执行的代码
  },
  globalData: {
    weatherData: null,
  }
})

<!-- index.wxml -->
<view class="container">
  <button bindtap="getWeatherData">查询天气</button>
  <text>当前天气为: {{ weatherData.current.temperature }}℃</text>
</view>

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
}

// index.js
Page({
  data: {
    weatherData: null,
  },
  getWeatherData: function () {
    const app = getApp()
    wx.request({
      url: 'https://api.example.com/weather', // 替换为实际的天气查询接口地址
      method: 'GET',
      success: (res) => {
        app.globalData.weatherData = res.data
        this.setData({ weatherData: app.globalData.weatherData })
      },
      fail: (err) => {
        console.log(err)
      }
    })
  }
})

这个小程序有一个页面，页面上有一个按钮。当用户点击按钮时，程序会调用getWeatherData函数，向指定的天气查询接口发送GET请求。如果请求成功，将返回的数据存储在全局变量weatherData中，并更新页面以显示当前天气信息。如果请求失败，将在控制台中打印错误信息。请注意，在真实应用中，您需要将https://api.example.com/weather替换为实际的天气查询接口地址。