一、实验目标

1、掌握服务器域名配置和临时服务器部署；

2、掌握 wx.request 接口的用法。

二、实验步骤

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

  1. API密钥申请。这里选择了可以提供全球气象数据服务接口的和风天气API,其官方网址为“https: / /www.heweather.com/”。我们选择免费用户类型进行注册后就可以申请添加数据key，我们需要记录此个人认证key。目前免费用户可以调用的最新版接口地址为“https ：//free-api.heweather.com/s6/”，其服务器节点在中国境内。该接口地址后面追加不同的关键词将获取不同种类的气象数据信息，例如alarm为天气自然灾害预警。
  2. 进行服务器域名配置。我们需要登录mp. weixin. qq. com进入管理员后台，单击“设置”按钮,切换至“开发设置”面板，在“服务器域名”栏中可以添加或修改需要进行网络通信的服务器域名地址。将当前需要使用的接口添加到“request合法域名”中，配置完成后再登录小程序开发工具就允许小程序与指定的服务器域名地址之间的网络通信了。添加完成后如下图所示。
  3. 创建一个新的项目，并手动修改配置文件。步骤同实验一相似，同时注意添加images文件，并将小程序所用图标添加进去。配置好后的项目结构如下图所示。
  4. 进行导航栏的设计。我们通过navigationBarTitleText设置导航栏标题，设置为：今日天气，使用navigationBarBackgroundColor改变导航栏背景颜色，改变成蓝色。设计好的导航栏如下图所示。
  5. 下一步我们进行页面设计，整个页面主要分为四个区域，四个区域全部放在页面容器里，由于四个区域需要实现垂直放置，所以我们在背景容器样式中使用垂直布局”flex-direction: column“，背景样式代码如下图图一所示。接下来我们将四个区域填写完整，大纲如下图图二所示，其中区域四的实现较为复杂，分为四行的四个小部分，将这四个小部分垂直排列就可以实现了。四个区域写好后小程序页面如图三所示。
  6. 为了实现更新省市区的详细信息，我们在data中设置了region，由于地区选择器的返回结果是数组的形式，所以定义region为包含了三个元素的数组，在这里我们也可以设定初始城市信息。同时我们需要在js文件中自定义bindchange事件，用于监听选项变化。


  7. 在JS文件中使用自定义函数getWeather进行实况天气数据的获取。我们填入接口地址和key之后就可以获取到天气的有关信息了，我们再使用that.setData({now:res.data.HeWeather6[0].now});将天气的相关属性存到js文件的data中。此时重新运行将在 AppData面板中查到已经被记录的天气数据，之后只需要将这些数据更新到页面上即可显示出来。
  8. 接下来我们更新页面天气信息，只需要将将WXML页面上所有的临时数据都替换成{{ now.属性}}的形式就可以实现了。如下图所示。
  9. 最后一步，需要注意的是,在网速受限的情况下可能不能立刻获取到数据，因此最好在JS文件的data 中为now规定初始数据，在获取到实际数据前可以临时显示这些数据。

三、程序运行结果

列出程序的最终运行结果及截图。

<img src="C:\Users\by\AppData\Roaming\Typora\typora-user-images\image-20220818150738243.png" alt="image-20220818150738243" style="zoom:80%;" />

四、问题总 结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

  1. 在实验过程中，向和风天气发送请求时，出现了status为permission denied的问题，经过查询发现此问题为我们无访问权限，没有购买所访问的这部分服务，之后我们更换一个key问题就解决了。下图中，图一为出现的问题，图二三为更改key之后问题得到解决。
  2. 通过本次实验，我掌握了服务器域名配置和临时服务器部署，例如如何将域名在微信官方平台上配置成request合法域名，如何获取可key来向和风天气发送请求，还有一点需要注意的是：因为要向和风天气发送请求，如果保持登录状态将无法发送请求，切换为游客模式即可；同时我也掌握了 wx.request 接口的用法，在接口中设置api地址和访问密钥即可获取。