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

举报
愚公搬代码 发表于 2025/01/28 15:46:17 2025/01/28
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。
近期荣誉 2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳博主等。
博客内容 .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎 👍点赞、✍评论、⭐收藏

🚀前言

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

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

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

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

🔎1.天气预报数据

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

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

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

在这里插入图片描述

🦋1.2 删除冗余代码

接下来,需要将项目中的冗余代码删除,只保留必要的基础代码。以下是一个最基础的 app.jsindex.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: 'GET',  // 请求类型为 GET
      success: (res) => {
        callback(res, null);  // 请求成功回调
      },
      fail: (res) => {
        callback(null, res);  // 请求失败回调
      }
    });
  }
};

module.exports = network;

network.js 文件中,主要实现了通过 万维易源 的天气数据接口请求天气信息。你需要将 showapi_appidshowapi_sign 替换为你在万维易源网站申请的 API key 和密钥。

🦋1.4 在 index.js 中调用网络模块

为了验证网络模块的正确性,可以在 index.js 中添加一个测试按钮,调用 network.js 中的 getWeatherData 方法,并打印返回的数据。

☀️1.4.1 index.js

// pages/index.js
const networkModule = require('../../utils/network.js');

Page({
  data: {
    weatherData: {},  // 存储天气数据
    errorMessage: ''   // 错误信息
  },

  onLoad: function () {
    // 测试网络请求功能,获取上海的天气数据
    networkModule.network.getWeatherData('上海', (res, error) => {
      if (error) {
        console.error('请求失败', error);
        this.setData({ errorMessage: '请求天气数据失败' });
      } else {
        console.log('请求成功', res);
        this.setData({
          weatherData: res.data.showapi_res_body,
          errorMessage: ''
        });
      }
    });
  }
});

index.js 中:

  • 通过 networkModule.getWeatherData('上海', callback) 发起请求,获取上海的天气数据。
  • 如果请求成功,返回的数据会被保存在 weatherData 中,页面可以显示这些数据。
  • 如果请求失败,会打印错误信息,并显示在页面上。

在这里插入图片描述

🦋1.5 处理域名合法性校验问题

如果请求没有成功,通常是由于小程序默认启用了 域名合法性校验。你需要确保 API 域名已经在小程序的 开发者工具 中进行配置:

  1. 打开小程序的开发者工具。
  2. 项目设置 中找到 网络设置
  3. 合法域名 列表中,添加万维易源的 API 域名:https://route.showapi.com
  4. 确保配置无误后重新编译并测试。

🦋1.6 总结

通过以上步骤,你已经成功地将 万维易源 API 接入到小程序中,并能够请求天气数据。关键步骤如下:

  • 创建小程序并启用云开发。
  • 简化并清理默认模板中的冗余文件和代码。
  • 新建 utils/network.js 文件,封装请求天气数据的函数。
  • 在页面中调用该函数,并处理请求结果。

这样,你就能够在小程序中调用 万维易源 的接口获取天气数据,构建一个简洁、有效的天气查询功能。

🔎2.城市列表数据

🦋2.1 城市数据存储与上传

由于国内的城市数量和名称基本固定,可以使用一个 JSON 文件存储所有的省市信息。这个 JSON 文件可以上传到云存储中,之后通过云函数进行读取和解析。

☀️2.1.1 准备 cities.json 文件

cities.json 的文件,存储了国内所有省市的结构化数据。你可以直接使用该文件,或者根据需要自定义该文件的内容。

☀️2.1.2 上传 cities.json 文件到云存储

  1. 打开 云开发控制台
  2. 存储管理 模块下,选择 云文件
  3. 上传名为 cities.json 的文件到云存储中。

上传完成后,记下文件的 fileID,这个 ID 是你在云函数中读取文件时所需要用到的。

🦋2.2 创建云函数

你需要在工程的 cloudfunctions 文件夹中创建两个云函数:getProvincegetCities

☀️2.2.1 创建 getProvince 云函数

该云函数用于获取所有的一级地区(省)的数据。它会从云存储中读取 cities.json 文件,解析出所有省的名称,并返回给客户端。

cloudfunctions/getProvince/index.js

// 云函数入口文件
const cloud = require('wx-server-sdk');
cloud.init();

// 云函数入口函数
exports.main = async (event, context) => {
  // 从云存储读取城市数据
  const fileID = 'cloud://cloud1-4ghg65i9b5531b77.636c-cloud1-4ghg6519b5531677-1308596385/cities.json';
  const res = await cloud.downloadFile({ fileID });
  const buffer = res.fileContent;
  const jsonString = buffer.toString('utf8');  // 将文件内容转为 UTF-8 字符串

  // 解析 JSON 数据
  const json = JSON.parse(jsonString);

  // 提取所有省的名称
  let result = [];
  json.forEach(item => {
    result.push(item.provinceName);  // 获取省名
  });

  return { result };
};

功能说明

  • 该云函数从云存储中下载 cities.json 文件。
  • 解析 JSON 数据并提取出每个省的名称。
  • 返回省名称的数组。

☀️2.2.2 创建 getCities 云函数

该云函数用于根据指定的省名称获取该省下的所有城市数据。它会从 cities.json 中获取与省相关的城市信息。

cloudfunctions/getCities/index.js

// 云函数入口文件
const cloud = require('wx-server-sdk');
cloud.init();

// 云函数入口函数
exports.main = async (event, context) => {
  const province = event.province;  // 获取传入的省名
  console.log(event);

  // 从云存储读取城市数据
  const fileID = 'cloud://cloud1-4ghg65i9b5531b77.636c-cloud1-4ghg651965531677-1308596385/cities.json';
  const res = await cloud.downloadFile({ fileID });
  const buffer = res.fileContent;
  const jsonString = buffer.toString('utf8');  // 将文件内容转为 UTF-8 字符串

  // 解析 JSON 数据
  const json = JSON.parse(jsonString);

  // 查找指定省的城市
  let result = [];
  json.forEach(item => {
    if (item.provinceName === province) {
      result.push(...item.city);  // 获取该省下的所有城市
    }
  });

  return { result };
};

功能说明

  • 该云函数接收一个省名称作为输入,读取云存储中的 cities.json 文件。
  • 解析文件数据后,找到与省名称匹配的城市信息,并返回该省的所有城市数据。

🦋2.3 在小程序端调用云函数

接下来,可以在小程序端调用这两个云函数来获取省市数据,并进行展示。

☀️2.3.1 调用 getProvince 云函数获取省列表

在小程序端,可以通过调用 getProvince 云函数来获取所有省的名称。

示例代码(index.js

// pages/index/index.js
Page({
  data: {
    provinces: []  // 存储省级数据
  },

  onLoad: function () {
    // 调用云函数获取所有省数据
    wx.cloud.callFunction({
      name: 'getProvince',
      success: res => {
        console.log('省数据:', res.result);
        this.setData({
          provinces: res.result
        });
      },
      fail: err => {
        console.error('获取省数据失败:', err);
      }
    });
  }
});

功能说明

  • onLoad 中调用 getProvince 云函数。
  • 获取所有省级数据,并将其保存到 provinces 中,更新页面显示。

☀️2.3.2 调用 getCities 云函数获取城市列表

当用户选择某个省后,可以调用 getCities 云函数,获取该省下的所有城市。

示例代码(index.js

// pages/index/index.js
Page({
  data: {
    cities: [],  // 存储城市数据
    selectedProvince: ''  // 存储选中的省名
  },

  onLoad: function () {
    // 调用云函数获取所有省数据
    wx.cloud.callFunction({
      name: 'getProvince',
      success: res => {
        console.log('省数据:', res.result);
        this.setData({
          provinces: res.result
        });
      },
      fail: err => {
        console.error('获取省数据失败:', err);
      }
    });
  },

  // 选择省时调用获取该省城市数据
  onProvinceSelect: function (e) {
    const province = e.currentTarget.dataset.province;
    this.setData({
      selectedProvince: province
    });

    // 调用云函数获取该省的城市数据
    wx.cloud.callFunction({
      name: 'getCities',
      data: { province: province },
      success: res => {
        console.log('城市数据:', res.result);
        this.setData({
          cities: res.result
        });
      },
      fail: err => {
        console.error('获取城市数据失败:', err);
      }
    });
  }
});

功能说明

  • 当用户选择某个省时,调用 getCities 云函数获取该省的所有城市,并将结果更新到页面。

🦋2.4 总结

通过上述步骤,你已经成功地创建了两个云函数:getProvincegetCities,分别用于获取所有省级数据和根据省名获取城市数据。然后,你在小程序端通过调用这些云函数,动态获取并展示省市数据。通过这种方式,你能够高效地管理和展示国内的省市信息。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。