《移动软件开发》 小程序网络API：天气查询

使用小程序网络API 的相关应用制作一款天气查询小程序。

一、实验目标

1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

注意：

本实验来自于周文洁老师的《微信小程序开发实战》第五章。主要介绍使用小程序
网络API 的相关应用制作一款天气查询小程序。
 
注意事项： 
1、本实验中，需要使用和风天气API，需要注册用户，大家请自行阅读和风天气官
方文档：https://dev.qweather.com/docs/api/weather/weather-now/ 
2、实验中需要的天气图片、utils.js 下载地址为：
https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip 
3、因为要向和风天气发送请求，如果保持登录状态将无法发送请求，切换为游客模式即可。

1.1 准备工作

1.1.1 API 密钥申请

介绍如何申请获得开源API的密钥。（以下内容使用和风天气API，网址为‘https://www.heweather.com/’）

1.1.1.1 注册账号

略

1.1.1.2 获取API密钥

点击左上角的“三” → “项目管理”

项目名称：任意

选择订阅：免费订阅

设置KEY：适用平台：Web API

key名称：任意

接下开就会获得密钥KEY(点击蓝色的查看即可获得密钥)

1.1.2 地区ID的获取

我们后面需要将地区的名称转化为ID方便查询，原因后面会揭晓

使用网址：https://geoapi.qweather.com（暂时忽略）

1.1.3 服务器域名配置

小程序与指定域名地址进行网络通信需要将该域名添加至白名单

1.1.3.1 登录 mp.weixin.qq.com

左侧导航栏中 “管理” → “开发管理”

下翻至服务器域名

点击修改，扫码身份验证后进入配置服务器域名

填写

https://devapi.qweather.com;https://geoapi.qweather.com;

注意

(1)可能网页会在最后自动补充“;”

(2)第一个网址是我们查询天气的API网址，第二个网址是将地址名称转化为地址ID的网址

1.2 项目创建

填写名称、目录、选择AppID，选择不使用云服务，模板选择JS基础模板

1.3 页面配置

1.3.1 创建页面文件

（1）将app.json中pages属性中的“pages/logs/logs"删除

1.3.2 删除和修改文件

（1）删除utils文件夹及其内部所有内容

（2）删除pages文件夹下的logs目录及其内部所有内容

（3）删除index.wxml和index.wxss中的所有代码

（4）删除index.js中的所有代码，并且输入关键词”page“找到第二个选项按回车键让其自动补全函数

（5）删除app.wxss中的所有代码

（6）删除app.js中的全部代码，并且输入关键词”app“找到第二个选项按回车键让其自动补全函数

1.3.3 创建其他文件

（1）下载天气图标

https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip

（2）直接解压到项目文件夹中（如我这里就是“2222”项目文件夹）

（解压后有三个文件夹都包含全套图标，选择一套喜欢的图标后要将其余两个删除，不然会文件过大报错）

（3）在文件操作系统中将第二级目录，即图标（.png）的父目录更名为 weather_icon

部分目录结构如下：

1.4 视图设计

1.4.1 导航栏设计

更改导航栏背景颜色和标题

修改文件