天气查询小程序

​一、实验目标

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

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

二、实验步骤

一、准备工作

1. API密钥申请

   在“和风天气”网站中注册后进入控制台，获得密钥；

    

2. 服务器域名配置

   将URL网址加入微信平台的request合法域名。

    

二、 视图设计

1. 导航栏设计：在app.json中自定义导航栏标题和背景颜色。

    

1. 页面设计

   • 整体设计：定义页面容器，设置容器样式；

   • 地区选择设计、文本设计：使用text组件实现单行天气信息（包括当前城市的温度和天气状况）；使用picker组件实现地区选择器，点击可切换其他城市；

   

    

   • 天气图标设计：使用image组件展示当前城市的天气图标（引入给定文件中的image图像）

      

      

   • 多行天气信息设计：使用view组件展示天气信息

     

      

三、逻辑实现

1. 更新省、市、区信息：将picker组件中的“北京市”改为动态变化的{{region}}，再为picker组件追加自定义的bindchange事件（用于监听选项变化）。

    

2. 获取实时天气数据：在JS文件中使用自定义函数getWeather进行获取（以城市作为查询数据）。

   

    

   在这里遇到了一个问题，直接用文档中所给的getWeather函数编译会出现错误，之后去网上搜索了一下发现要用到util.js这个文件，里面有各个城市的城市ID以及getLocationID函数。在index.js文件中引用该函数，可以成功获取对应城市的实况数据。

3. 更新页面天气信息：根据上一步在console中得到的数据变换参数，将临时数据替换成{{now,属性}}的形式。

    

1. 添加临时数据：在网速较慢时，可以先显示这些临时数据。

   

三、程序运行结果

最终运行结果如下：

 

四、问题总结与体会

1. 在获取实况数据时要用到util.js文件中的getLocationID函数，根据城市ID获取对应城市的实况天气数据；

2. 在引用自定义函数时一定要注意字母大小写，有时在这些小错误上会耽误很长时间。

3. 这次实验让我领略到制作小程序的快乐，无论是插入可爱的小图标还是获取实时的天气数据都让我觉得很神奇，这让我对写小程序更加感兴趣了。