“微天气” - 一个基于微信小程序的智能天气预报体验

一、引言

微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与我们一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。本文以设计了天气预报的的微信小程序，实现对全国各地天气情况的快速查询。

二、项目内容

该项目是基于微信小程序实现了一个实时显示天气状况的系统，该系统所研究的的问题如下：

1. 系统运行平台的选取。该系统主要采用Javascript进行web开发。

2. 确定系统的基本功能，该设计主要包括基本天气显示模块、预报城市模块和其他天气指标。基本天气显示模块有图标、温度和天气情况；预报城市模块包含手动设置和自动设置；其他天气指标单元，主要包括湿度、气压、能见度、风向、风速和风力等情况。

3. 实时天气API网络接口配置。系统需要从云端实时的获取全国4000+个市县区天气数据，并对获取的数据进行解析。

4. 对系统进行详细的介绍和分析。根据系统所实现的功能，进行模块前后端的设计。

三、项目实现

3.1 环境准备

在开发微信小程序前要做好相应的环境，包括账号注册、APPID的获取和开发环境（微信开发者工具）的安装。

图1：微信开发平台界面

2.2 项目构建

扫码登录后，就可以创建项目，并进行信息配置，主要包括项目名称、位置和APPID等。之后便可以进入主界面，主要包括五个分区，编译生成页面区、资源目录区、代码编辑区、调试输出区和基本设置分区，这五大分区协同实现系统设计。

图2：微信开发平台编辑界面

3.3 小程序框架目录

小程序框架提供了自救的视觉图层描述语言WXML和WXSS，以及JavaScript；并在视图层和逻辑层之间提供数据传输和时间系统，让开发者能够专注于逻辑和数据。

系统一共有三个全局文件，分别是app.json，app.js和app.wxss，三者名字不可更改。其中app.json用来对微信小程序进行全局配置，决定页面的路径、窗口表现、设置网络超时时间、设置多Tab等。app.js作为项目的入口文件，用于创建应用程序对象。app.wxss是一个全局的样式文件，在这个文件里面定义的样式，对每个页面均有效。

Pages字段用于描述当前小程序所有页面的路径，是为了让微信客户端知道当前小程序定义在那个目录下。且每个页面也包含4个配置文件，以index为例，则有index.ts，index.json，index.wxml和index.wxss，它们分别负责页面的逻辑实现、标题栏和状态栏、管理页面内容和页面排布等。

3.4 页面设计

该模块主要包括基本天气显示模块、预报城市模块和其他天气指标。基本天气显示模块主要包括文字内容和图标等，采用的主要语法为’内容’和，其中前者主要负责显示文本内容，后者显示对应路径下的图片。

便于实现对全国多个城市的选择预报，我们引入了一个选择组件，它是从底部弹起的滚动选择器组件，目前根据mode属性值的不同共支持5种选择器，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器。若省略mode值不写，则默认效果是普通选择器。当mode=’region’时为省市区选择器效果。

为了提供更加丰富的天气信息，该系统也报告了城市的湿度、气压、能见度、风向、风速和风力等情况，也采用’内容’组件时间。最后通过index.wxss实现对页面的优化排布，实现如图3所示。

图3：城市选择界面（左）；天气预报系统主界面（右）

3.5 数据的获取于处理

该系统的目标是根据用户需要，能够从云端实时的获取全国各个市县区天气数据，和风天气提供了全国4000+个市县区和海外15万个城市实时天气数据，包括实时温度、体感温度、风力风向、相对湿度、大气压强、降水量、能见度、露点温度、云量等数据。本实验通过API网络接口配置，实现对所需数据（温度，湿度等）的读取。

请求。URL为https://devapi.qweather.com/v7/weather/now?[请求参数]，该链接用于获取所需天气数据，其中请求参数包括必选和可选参数，如不填写可选参数将使用其默认值，参数之间使用&进行分隔。必选参数有key 和location ，Key是用户通过网站认证获得的，而且还支持数字签名的方式进行认证。为了实现对特定城市的数据获取，我们需要得到查询地区的LocationID，本设计主要通过请求URL：https://geoapi.heweather.net/v2/city/lookup?[请求参数]来获取LocationID，之后再通过上述https://devapi.qweather.com/v7/weather/now?[LocationID]&key来获得编号为LocationID的城市天气情况，以北京的实况天气为例，在浏览器中输入https://devapi.qweather.com/v7/weather/now?location=101010100&key=3d14f494489d4552a3114c1fdc2688b0，可获得北京天气的实时数据。如下：

{"code":"200",
"updateTime":"2022-06-07T21:12+08:00"
"fxLink":"http://hfx.link/2ax1",
"now":{
"obsTime":"2022-06-07T21:06+08:00",
"temp":"22",
"feelsLike":"16",
"icon":"104",
"text":"阴",
"wind360":"135",
"windDir":"东南风",
"windScale":"5"，
"windSpeed":"33",
"humidity":"42",
"precip":"0.0",
"pressure":"1002",
"vis":"26",
"cloud":"100",
"dew":"7"},
"refer":{
"sources":["QWeather","NMC","ECMWF"],
"license":["no commercial use"
]}}

以上数据为北京市的实时天气原始数据，还需要对该数据进行解析，获得本系统所需的关键数据，这些数据的的意义如表1所示。

表1 参数以及意义

参数	意义
now.obsTime	数据观测时间
now.temp	温度，默认单位：摄氏度
now.feelsLike	体感温度，默认单位：摄氏度
now.icon	天气状况和图标的代码
now.text	天气状况的文字描述，包括阴晴雨雪等天气状态的描述
now.wind360	风向360角度
now.windDir	风向
now.windScale	风力等级
now.windSpeed	风速，公里/小时
now.humidity	相对湿度，百分比数值
now.precip	当前小时累计降水量，默认单位：毫米
now.pressure	大气压强，默认单位：百帕
now.vis	能见度，默认单位：公里
now.cloud	云量，百分比数值。可能为空
now.dew	露点温度。可能为空

接下来便是如何从天气信息数据库中获取目标信息的代码实现，思路与上文分析一致，需要注意的是需要在微信开发者工具绑定请求网站的域名，如图4（左）所示，这样才能下载到所需的天气信息，如图4（右）：

  getWeater:function(){
    var that=this; //this不可以在微信api使用
    wx.request({
      url: 'https://geoapi.heweather.net/v2/city/lookup?',
      data:{
        location:that.data.region[2],
        key:'3d14f494489d4552a3114c1fdc2688b0',
      },
      success:function(res){    //如果城市ID找到了，则找对应ID的城市详细信息
        that.setData({Place_ID:res.data.location[0].id})  //将城市ID用变量存储
      wx.request({            //寻找城市的详细信息
        url: 'https://devapi.qweather.com/v7/weather/now?',
        
        data: {
          location:that.data.Place_ID,
          key:'3d14f494489d4552a3114c1fdc2688b0'
        },
        success:function(res){     //如果找到了
          console.log(res.data)
          that.setData({now:res.data.now})    //将详细信息用Place_Message存储
        }
      })
    }
  })
  }

图4：服务器域名设置（左）；下载获得数据（右）

3.6 实现与验证

在完成所用程序的编写后，需要对其编译获得最终的视图层，本实验将初始所在地定位河南省许昌市禹州市，初始界面如图5（左）所示，之后以查询吉林省长春市净月区天气为例，如图6（中，右）实现系统的验证。

图5：禹州市天气情况界面（左）；选择城市（中）；长春市南关区天气情况界面（右）

四、实验总结

本实验设计了一个可查询全国实时天气的微信小程序，使我充分了解了微信小程序这一轻量应用的重要实际意义，也系统学习了小程序设计的基本流程，在一定程度的提升了对问题的解决能力。未来将尝试增加一些新的功能，比如灾难预警和空气质量播报等。

完整代码下载：

1. 免费下载：扫码关注公众号回复0002
2. CSDN积分下载：微天气-一个基于微信小程序的智能天气预报体验+微信小程序+和风天气+文档及程序资源-CSDN文库