微信小程序开发制作天气预报

微信小程序开发制作天气预报是一个常见且实用的项目。下面是开发步骤和相关技术的介绍：

### 1. 环境搭建
首先，你需要在微信公众平台上注册一个小程序账号，并下载微信开发者工具。安装完成后，创建一个新的小程序项目。

### 2. 获取天气预报数据
你需要使用一个提供天气预报API的服务，比如和风天气或OpenWeatherMap。注册并获取API密钥。

### 3. 前端开发
在前端部分，你需要设计小程序的界面，并使用微信小程序的WXML和WXSS来编写页面结构和样式。

<!-- pages/index/index.wxml -->
<view class="container">
  <view class="weather">
    <text class="city">{{city}}</text>
    <text class="temperature">{{temperature}}°C</text>
    <text class="description">{{description}}</text>
  </view>
</view>

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

### 4. 后端开发
在微信小程序中，可以使用云开发功能来处理API请求和响应。你需要在`app.js`中初始化云开发环境，并在云函数中编写获取天气数据的逻辑。

// app.js
App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        traceUser: true,
      })
    }
  }
})

// cloud/functions/getWeather/index.js
const cloud = require('wx-server-sdk')
cloud.init()
const rp = require('request-promise')

exports.main = async (event, context) => {
  const { city } = event
  const apiKey = 'YOUR_API_KEY'
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=zh_cn`

  try {
    const res = await rp(url)
    return res
  } catch (error) {
    return error
  }
}

### 5. 调用云函数
在前端页面中，调用云函数并处理返回的数据。

// pages/index/index.js
Page({
  data: {
    city: '',
    temperature: '',
    description: ''
  },
  onLoad: function () {
    this.getWeatherData('Beijing')
  },
  getWeatherData: function (city) {
    wx.cloud.callFunction({
      name: 'getWeather',
      data: {
        city: city
      },
      success: res => {
        const weatherData = JSON.parse(res.result)
        this.setData({
          city: weatherData.name,
          temperature: weatherData.main.temp,
          description: weatherData.weather[0].description
        })
      },
      fail: err => {
        console.error(err)
      }
    })
  }
})

### 6. 测试与发布
完成开发后，使用微信开发者工具进行测试，确保所有功能正常。最后，将小程序提交审核，审核通过后即可发布上线。