天气随行，两日速成你的微信小程序

2023-10-17 11:38:44

前言

天气预报是日常生活中必不可少的，市面上也不乏诸多成熟的天气应用。然而，若能亲手打造一款属于自己的天气小程序，不仅别有一番成就感，还能让你更深入地了解小程序开发的过程。本文将以两天时间为限，指导你从零开始构建一个天气小程序，助你踏上小程序开发之旅。

第一日：数据获取与解析

1. 准备工作

在开始之前，请确保你已经完成了以下准备工作：

注册微信小程序账号并下载微信开发者工具。
开通云开发功能（可选，可提升数据存储和处理能力）。

2. Weather API 简介

我们将使用 OpenWeather 的免费 API 获取天气数据。该 API 提供丰富的天气信息，包括当前天气、预报和历史数据。

3. 获取 API Key

前往 OpenWeather 官网注册并获取 API Key。这个 Key 将用于访问 API 并获取天气数据。

4. HTTP 请求

在小程序中使用 wx.request 发起 HTTP 请求获取天气数据。请求地址和参数如下：

const apiKey = 'YOUR_API_KEY'; // 替换为你的 API Key
const url = `https://api.openweathermap.org/data/2.5/weather?q=上海&appid=${apiKey}`;

wx.request({
  url: url,
  method: 'GET',
  success(res) {
    console.log(res.data);
  },
  fail(err) {
    console.error(err);
  }
});

5. JSON 解析

获取到的天气数据为 JSON 格式。使用 JSON.parse() 解析数据，提取我们需要的信息，如当前温度、湿度和天气状况。

wx.request({
  url: url,
  method: 'GET',
  success(res) {
    const weatherData = res.data;
    const temperature = weatherData.main.temp;
    const humidity = weatherData.main.humidity;
    const description = weatherData.weather[0].description;
    console.log(`Temperature: ${temperature}, Humidity: ${humidity}, Description: ${description}`);
  },
  fail(err) {
    console.error(err);
  }
});

第二日：界面设计与数据可视化

1. 布局设计

使用微信小程序的 WXML 和 WXSS 进行布局设计。创建一个简洁明了的界面，展示当前天气信息和未来预报。

<!-- index.wxml -->
<view class="container">
  <text>Current Temperature: {{temperature}}</text>
  <text>Humidity: {{humidity}}</text>
  <text>Weather: {{description}}</text>
</view>

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

2. Canvas 绘制

借助 Canvas 强大的绘图功能，我们可以绘制图表和图形来可视化天气数据。例如，我们可以绘制温度变化折线图或风速雷达图。

// 在页面中添加 canvas 元素
<canvas canvas-id="myCanvas" style="width: 100%; height: 300px;"></canvas>

// 绘制简单的折线图示例
const ctx = wx.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(0, 150); // 起点坐标
ctx.lineTo(100, 50); // 终点坐标
ctx.stroke(); // 绘制线条

3. 数据绑定

将获取到的天气数据绑定到小程序界面中。使用小程序框架提供的 data 和 setData 机制，实现数据与界面的双向绑定。

Page({
  data: {
    temperature: '',
    humidity: '',
    description: ''
  },
  onLoad() {
    const apiKey = 'YOUR_API_KEY'; // 替换为你的 API Key
    const url = `https://api.openweathermap.org/data/2.5/weather?q=上海&appid=${apiKey}`;
    wx.request({
      url: url,
      method: 'GET',
      success(res) {
        const weatherData = res.data;
        this.setData({
          temperature: weatherData.main.temp,
          humidity: weatherData.main.humidity,
          description: weatherData.weather[0].description
        });
      },
      fail(err) {
        console.error(err);
      }
    });
  }
});

4. 用户交互

添加用户交互功能，如下拉刷新或切换城市，以提升小程序的易用性。

Page({
  data: {
    temperature: '',
    humidity: '',
    description: '',
    city: '上海'
  },
  onLoad() {
    this.fetchWeather();
  },
  fetchWeather() {
    const apiKey = 'YOUR_API_KEY'; // 替换为你的 API Key
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.data.city}&appid=${apiKey}`;
    wx.request({
      url: url,
      method: 'GET',
      success(res) {
        const weatherData = res.data;
        this.setData({
          temperature: weatherData.main.temp,
          humidity: weatherData.main.humidity,
          description: weatherData.weather[0].description
        });
      },
      fail(err) {
        console.error(err);
      }
    });
  },
  changeCity(event) {
    this.setData({ city: event.detail.value }, () => {
      this.fetchWeather();
    });
  }
});