源码
https://github.com/junqiduhang/TEST
说明：key值改为自己的；文件夹lab02包含本实验源码
一、实验目标
1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。
二、实验步骤
准备工作
1、和风天气API
API用于在微信小程序中触发事件时从和风天气服务器获取天气数据
API使用方法见和风天气官方文档：
开发文档 | 和风天气开发平台 (qweather.com)
获取城市id：https://geoapi.qweather.com/v2/city/lookup?
获取城市天气：https://devapi.qweather.com/v7/weather/now?
2、其他
获取密钥key，注册和风天气https://www.qweather.com/账号，即可获得
图标下载：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip
下载图标后，将图标存放到小程序images/weather_icon文件夹下，自建文件夹也可以
3、配置微信小程序服务器域名
进入https://mp.weixin.qq.com/ =》登录 =》开发管理 =》开发设置 =》找到
服务器域名 =》添加https://devapi.qweather.com。
4、wx.request
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
代码示例
wx.request({
url: 'example.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
url服务器接口地址，data为上传的参数，header请求头文件（有默认值），success为请求成功函数，参数res即为服务器根据请求信息返回的信息
编写小程序
1、初始化小程序
1）创建小程序项目，进入编辑界面
2）通过删除操作，最大程度上为编写小程序提供纯净的环境
1删除logs页面，此操作在app.json中进行
2删除utils文件夹、删除pages路径下存储logs界面的logs文件夹
3删除index.wxml和index.wxss全部代码
4删除index.js中全部代码，输入page选中自动补全选项Page函数
5删除app.wxss所有代码
6删除app.js中所有代码，输入app选中自动补全选项App函数
7编译，编译结果如图，这里对微信小程序标题栏进行了一下修改，标题
栏配置文件在app.json中
2、界面容器设计，在index.wxml的两个view之间进行页面布局，并通过index.wxss进行美化
3、区域设计
图示为预期小程序布局设计，由地区选择器、天气概要，天气图标和天气详细情况构成
1）地区选择器，用于切换地区
2）天气概要（单行天气信息）
3）天气图标设计
4）多行天气信息设计，这里显示风力风速参数重叠了，还需要在wxss进行优化，提示.box中使用margin
4、逻辑实现，界面模板设计完毕，应该注入逻辑了，切换个人中心为游客模式
1）更新省市区信息，使用微信小程序自带API，可以快速实现地区切换
先在picker组件添加事件处理函数，再在index.js中实现该函数
region存储城市信息，格式为：省市区/县
2）获取实况天气数据
这一步是小程序的重点，利用wx.request的API
和风天气的两个API，文章开篇已给出，可以获取当前城市的天气状况。
首先通过第一个API获取当前城市的id，获取id和天气都需要你的key，获取方法也在文章开头，获取id成功后再将id和key作为参数通过第二个API上传到和风天气服务器获取当前id城市的天气状况，若想知道服务器返回给我们的内容结构，可以通过console.log(参数)打印到控制台查看。
编写完函数后，在onload函数和regionChange函数中调用该函数，以实现天气的初始化和随地区变化而变化。
3）更新页面天气信息
更新方法较为简单，只需要将原本的常量所在位置替换为变量即可，图示中的now保存有当前城市的天气状况（即将服务器返回的天气信息部分保存到now），now.obj，obj为now的一个键值，now.obj即为obj对应的值，obj有哪些，在上面2）中可以打印查看，不要只依赖于文档，文档信息具有延迟性
程序运行结果
