欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > “微天气”微信小程序实战开发过程

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:789

HTML5自适应律师工作室类网

2020-04-04   浏览:654

高端HTML5响应式企业通用网

2020-05-06   浏览:560

html5响应式外贸网站英文版

2020-05-08   浏览:545

HTML5影视传媒文化公司类网

2020-05-12   浏览:543

“微天气”微信小程序实战开发过程

发布时间:2021-01-05  

在智能手机软件的装机量中,天气预报类的APP排在比较靠前的位置。说明用户对天气的关注度很高。因为人们无论是工作还是度假旅游等各种活动都需要根据自然天气来安排。本文将带大家开发一个“微天气”小程序,方便微信网友随时查看天气。

天气预报API

要开发天气预报类APP,首先要考虑的问题就是天气预报数据的来源。有了天气预报的数据来源,才能按需要在微信小程序中显示出来。其实,微信小程序就是一个显示天气信息的前端系统,而天气预报API就是后端系统。由于天气预报API可以在网上免费获取,因此,本案例中开发者不需要开发后端系统,只需要根据API的要求进行访问即可。

目前,互联网上提供的天气预报API比较多,笔者将几个主要的API列举出来,读者可根据需要使用(当然,本案例只使用其中一个即可)。

中国天气网天气预报接口

要查询天气预报,当然是以中央气象台的数据为权威。中央气象台通过“中国天气”网站对外发布全国各地天气预报,国内各大门户网站的天气预报数据都是从这个网站获取的。如图1所示就是中国气象局的天气预报网站——中国天气网。

图片描述

图1 中国天气网

在图1所示的中国天气网中可查看全国乃至世界各地的天气预报信息,在上方查询输入框中输入一个城市名称进行查询,就可查看到详细天气预报数据。例如,输入“上海”单击右端的查询按钮,就可看到如图2所示的上海当天的详细预报。

从图2所示浏览器的地址栏可看到其地址为:

#search

这个URL地址中的101020100是上海的一个编码,如果换成其他城市(如101270101——成都的编码),则可看到其他城市的天气预报信息。

图片描述

图2 查询上海的天气预报

对于城市编码这个数据,可以从网站上收集到,将其保存到一个文本文件中,查询时从文件中读入即可。例如,将收集到的城市编码按以下格式保存到city.txt文件中。

北京,101010100|北京海淀,101010200|北京朝阳,101010300|北京顺义,101010400|北京怀柔,101010500|北京通州,101010600|北京昌平,101010700|北京延庆,101010800|北京丰台,101010900|北京石景山,101011000|北京大兴,101011100|北京房山,101011200|北京密云,101011300|北京门头沟,101011400|北京平谷,101011500|上海,101020100|上海闵行,101020200|上海宝山,101020300|上海嘉定,101020500|……

在上面的数据格式中,每一个区域名称和编码之间用逗号分隔,而区域之间用竖线分隔。这样做的好处是可用Python中的split函数分隔数据,具体方法详见后面的代码。

知道城市编码后,就可通过城市编码去访问对应的网页,得到该城市的天气预报数据。首先想到的方法当然是用wx.request方法打开对应的网页,获取HTML数据,然后进行分析。不过,这里对HTML进行分析的过程非常麻烦,且效率不高。

不过,中国天气网提供了专用的数据接口,通过访问这些数据接口API,可获得JSON数据。这样,就不会有其他杂乱的HTML代码来干扰。而微信小程序对JSON数据是可以直接解析的,因此,使用这些API接口是最方便的。

1. 天气实况信息

要获取天气实况信息,可通过以下接口:

其中,数字部分是城市编码,101010100是北京的编码,因此,上面的接口查询到的是北京的天气实况信息(如果换成101020100,则返回的是上海的天气实况信息)。

在浏览器中输入以上URL地址,可得到如图3所示的结果。

图片描述

图3 查询北京的天气预报

图3所示返回的是JSON数据,不过,这里作为文本显示,不太容易看得清,整理一下格式,得到的JSON数据如下所示:

{ "weatherinfo": { "city": "北京", "cityid": "101010100", "temp": "18", "WD": "东南风", "WS": "1级", "SD": "17%", "WSE": "1", "time": "17:05", "isRadar": "1", "Radar": "JC_RADAR_AZ9010_JB", "njd": "暂无实况", "qy": "1011", "rain": "0" } }