【愚公系列】《微信小程序与云开发从入门到实践》051-天气预报小程序的开发（数据准备）

🚀前言

随着智能手机的普及和小程序生态的快速发展，天气预报小程序逐渐成为人们生活中获取天气信息的重要工具。用户希望随时随地了解最新的天气状况，以便更好地安排出行和日常活动。然而，要开发一款高质量的天气预报小程序，数据的准备和处理至关重要。

在本文中，我们将深入探讨天气预报小程序的开发过程中的数据准备阶段。我们将介绍获取天气数据的各种途径，包括公共API的选择、数据格式的处理和存储方案的设计。同时，我们还将讨论如何对数据进行清洗和转换，以确保其准确性和及时性。通过对数据源的精心选择和处理，开发者可以为用户提供可靠、实时的天气信息，从而提升用户体验。

🚀一、天气预报小程序的开发（数据准备）

天气预报应用本身比较简单，综合看来小程序端只需要两部分数据即可完成此项目。一部分对应城市的天气数据，一部分是国内城市列表数据。对应城市的天气数据可以通过万维易源网意提供的天气预报接口拿到，国内城市列表数据需要使用云开发技术来自主开发。

🔎1.天气预报数据

🦋1.1 创建小程序项目并启用云开发

首先，在创建小程序项目时，确保勾选了 启用云开发 选项。创建完成后，你会看到一些默认的云开发模板文件。由于这些模板包含了许多冗余文件，我们可以对文件结构进行整理，删除不必要的部分。

☀️1.1.1 整理后的目录结构如下

🦋1.2 删除冗余代码

接下来，需要将项目中的冗余代码删除，只保留必要的基础代码。以下是一个最基础的 app.js 和 index.js 示例：

☀️1.2.1 app.js（简化版）

App({
   
  onLaunch() {
   
    // 小程序初始化时执行的代码
  }
});

☀️1.2.2 index.js（简化版）

Page({
   
  data: {
   
    weatherData: {
   }
  },

  onLoad: function () {
   
    // 页面加载时进行数据请求
  }
});

🦋1.3 新建 utils/network.js 用于网络请求

在 miniprogram 文件夹下新建一个名为 utils 的文件夹，用来存放工具模块。然后，在 utils 文件夹下新建一个名为 network.js 的文件，用来封装天气数据请求的代码。

☀️1.3.1 network.js

// utils/network.js
const showapi_appid = "580xx";  // 替换为从万维易源获取的 appid
const showapi_sign = "74b9fcd59b844b98b6427dxxxxxf4e2e9";  // 替换为从万维易源获取的 sign

var network = {
   
  getWeatherData: function(area, callback) {
   
    // 请求天气数据
    let reg = wx.request({
   
      url: 'https://route.showapi.com/9-2',  // 万维易源天气数据接口
      data: {
   
        area: area,               // 传入城市名称
        needIndex: 1,             // 是否返回空气质量指数
        needMoreDay: 1,           // 是否返回未来几天的天气
        needAlarm: 1,             // 是否返回天气预警信息
        needHourData: 1,          // 是否返回逐小时天气数据
        showapi_appid: showapi_appid,  // 万维易源的 appid
        showapi_sign: showapi_sign,    // 万维易源的 sign
        showapi_timestamp: Date.now(), // 当前时间戳
        method: 'GET'             // 请求方法
      },
      method