项目实训（四）：

      本次的报告主要说明一下先前所说的功能区里的天气页面的实现，该页面的效果图如下图所示，它可以通过第三方API实时获取当前地点的天气情况与气候指数，并给出相应的穿衣防护建议。另外，该页面的实现参考于视频：天气预报小程序更新_哔哩哔哩_bilibili

（1）：页面的布局。

            类似于先前所作的主页面的布局看可以看到该页面由上方的地点、时间提示区，中间的天气数据展示区和最下方的穿衣与防护建议区组成，具体的实现十分类似于之前报告中所说的主页面，因此不在这里多说，下方的代码图展示一下中间天气数据区的具体实现。

（2）：获取第三方API插件的功能支持。

            这里使用到的API插件是和风天气，需要先在他的API官网——>项目管理——>控制台（控制台 | 和风天气 (qweather.com)）里获取key，如下图所示，注意这里对于小程序真正有用的是Web API。这里所获取的key需要在后面配置在.js文件里从而获取API的服务。

         此外需要在微信小程序平台（小程序 (qq.com)）里，开发管理——>开发设置中修改服务器域名，把和风天气获取天气信息所用到的两个网址（https://geoapi.qweather.com和https://devapi.qweather.com），设置为request合法的域名，如下图所示。其中第3、第4行就是我们要用到的服务器域名。

                         

（3）：下载和风天气图标。

           为了更好的呈现天气情况，和风天气API有一套天气图标（如上图我使用到的多云图标），我们可以在以下网址中下载：和风天气图标 ~ 开源、漂亮的天气图标库，支持SVG和Web Font，兼容和风天气API，适用于任何需要天气图标的项目。 (qweather.com)

  

      下载完成后，将其压缩在微信小程序天气页面的同目录文件下即可，如下图所示：

     图中的wea_pic就是我所下载好的天气图标文件包。

     至此有关该天气页面的一切准备措施和wxml页面布局就都完成好了，在下次的周报中我将详细说明该页面.js文件的具体配置，从而完成该页面业务逻辑的最终实现。