|
在智能手机软件的装机量中，天气预报类的APP排在比较靠前的位置。说明用户对天气的关注度很高。因为人们无论是工作还是度假旅游等各种活动都需要根据自然天气来安排。本文将带大家开发一个“微天气”小程序，方便微信网友随时查看天气。
天气预报API
要开发天气预报类APP，首先要考虑的问题就是天气预报数据的来源。有了天气预报的数据来源，才能按需要在微信小程序中显示出来。其实，微信小程序就是一个显示天气信息的前端系统，而天气预报API就是后端系统。由于天气预报API可以在网上免费获取，因此，本案例中开发者不需要开发后端系统，只需要根据API的要求进行访问即可。
目前，互联网上提供的天气预报API比较多，笔者将几个主要的API列举出来，读者可根据需要使用（当然，本案例只使用其中一个即可）。
中国天气网天气预报接口
要查询天气预报，当然是以中央气象台的数据为权威。中央气象台通过“中国天气”网站对外发布全国各地天气预报，国内各大门户网站的天气预报数据都是从这个网站获取的。如图1所示就是中国气象局的天气预报网站——中国天气网。
图1 中国天气网
在图1所示的中国天气网中可查看全国乃至世界各地的天气预报信息，在上方查询输入框中输入一个城市名称进行查询，就可查看到详细天气预报数据。例如，输入“上海”单击右端的查询按钮，就可看到如图2所示的上海当天的详细预报。
从图2所示浏览器的地址栏可看到其地址为：
http://www.weather.com.cn/weather1d/101020100.shtml#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. 天气实况信息
要获取天气实况信息，可通过以下接口：
http://www.weather.com.cn/data/sk/101010100.html
其中，数字部分是城市编码，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"
}
}
可看出，返回的JSON对象中有一个weatherinfo对象，其中的各属性分别表示了天气预报中的一项信息，如city是城市名称，temp是当前温度，WD风向，WS是风速……
2. 全天天气预报
要获取全天天气预报的信息，可通过以下接口：
http://www.weather.com.cn/data/cityinfo/101010100.html
其中，数字部分是城市编码，101010100是北京的编码，因此，上面的接口查询到的是北京的天气信息。访问该接口返回的JSON数据如下所示：
{
"weatherinfo": {
"city": "北京",
"cityid": "101010100",
"temp1": "-2℃",
"temp2": "16℃",
"weather": "晴",
"img1": "n0.gif",
"img2": "d0.gif",
"ptime": "18:00"
}
}
3.天气详情
使用以下接口可获取最详尽的天气预报信息。
http://m.weather.com.cn/data/101010100.html
以上接口返回的JSON数据格式如下：
{
"weatherinfo": {
"city": "北京",
"city_en": "beijing",
"date_y": "2016年11月16日",
"date": "",
"week": "星期四",
"fchh": "11",
"cityid": "101010100",
"temp1": "2℃~-7℃",
"temp2": "1℃~-7℃",
"temp3": "4℃~-7℃",
"temp4": "7℃~-5℃",
"temp5": "5℃~-3℃",
"temp6": "5℃~-2℃",
"tempF1": "35.6℉~19.4℉",
"tempF2": "33.8℉~19.4℉",
"tempF3": "39.2℉~19.4℉",
"tempF4": "44.6℉~23℉",
"tempF5": "41℉~26.6℉",
"tempF6": "41℉~28.4℉",
"weather1": "晴",
"weather2": "晴",
"weather3": "晴",
"weather4": "晴转多云",
"weather5": "多云",
"weather6": "多云转阴",
"img1": "0",
"img2": "99",
"img3": "0",
"img4": "99",
"img5": "0",
"img6": "99",
"img7": "0",
"img8": "1",
"img9": "1",
"img10": "99",
"img11": "1",
"img12": "2",
"img_single": "0",
"img_title1": "晴",
"img_title2": "晴",
"img_title3": "晴",
"img_title4": "晴",
"img_title5": "晴",
"img_title6": "晴",
"img_title7": "晴",
"img_title8": "多云",
"img_title9": "多云",
"img_title10": "多云",
"img_title11": "多云",
"img_title12": "阴",
"img_title_single": "晴",
"wind1": "北风3-4级转微风",
"wind2": "微风",
"wind3": "微风",
"wind4": "微风",
"wind5": "微风",
"wind6": "微风",
"fx1": "北风",
"fx2": "微风",
"fl1": "3-4级转小于3级",
"fl2": "小于3级",
"fl3": "小于3级",
"fl4": "小于3级",
"fl5": "小于3级",
"fl6": "小于3级",
"index": "冷",
"index_d": "天气冷，建议着棉衣、皮夹克加羊毛衫等冬季服装。年老体弱者宜着厚棉衣或冬大衣。",
"index48": "冷",
"index48_d": "天气冷，建议着棉衣、皮夹克加羊毛衫等冬季服装。年老体弱者宜着厚棉衣或冬大衣。",
"index_uv": "弱",
"index48_uv": "弱",
"index_xc": "适宜",
"index_tr": "一般",
"index_co": "较不舒适",
"st1": "1",
"st2": "-8",
"st3": "2",
"st4": "-4",
"st5": "5",
"st6": "-5",
"index_cl": "较不宜",
"index_ls": "基本适宜",
"index_ag": "极不易发"
}
}
不过，现在中国天气网已不能通过这个接口获取数据了。
中华万年历的天气预报接口
中华万年历的天气预报接口地址如下：
http://wthrcdn.etouch.cn/weather_mini?city=北京
该接口很简单，只需要给出城市的名称即可，不像中囯天气网的接口还需要根据城市名称去查询城市编码，然后再去访问接口。接口返回的数据也是JSON格式，具体形式如下所示：
{
"desc": "OK",
"status": 1000,
"data": {
"wendu": "15",
"ganmao": "昼夜温差较大，较易发生感冒，请适当增减衣服。体质较弱的朋友请注意防护。",
"forecast": [{
"fengxiang": "北风",
"fengli": "3-4级",
"high": "高温 14℃",
"type": "晴",
"low": "低温 3℃",
"date": "19日星期六"
},
{
"fengxiang": "无持续风向",
"fengli": "微风级",
"high": "高温 4℃",
"type": "雨夹雪",
"low": "低温 -1℃",
"date": "20日星期天"
},
{
"fengxiang": "北风",
"fengli": "3-4级",
"high": "高温 0℃",
"type": "小雪",
"low": "低温 -7℃",
"date": "21日星期一"
},
{
"fengxiang": "北风",
"fengli": "3-4级",
"high": "高温 -3℃",
"type": "晴",
"low": "低温 -9℃",
"date": "22日星期二"
},
{
"fengxiang": "无持续风向",
"fengli": "微风级",
"high": "高温 -3℃",
"type": "多云",
"low": "低温 -10℃",
"date": "23日星期三"
}],
"yesterday": {
"fl": "微风",
"fx": "无持续风向",
"high": "高温 10℃",
"type": "霾",
"low": "低温 6℃",
"date": "18日星期五"
},
"aqi": "40",
"city": "北京"
}
}
可以看出，以上返回的JSON数据很多，有当天的温度wendu、感冒描述ganmao，还有forecast数组中保存的最近5天的天气数据，以及yesterday中保存的昨日天气数据。
只需要一个接口就可获得详细的天气信息，因此，本案例选择使用该API接口。
界面设计
本案例要求界面简单，尽量在一个页面中显示当前天气、最近五天的天气，同时，还要提供按城市名称查询的功能，可显示出所查询城市的天气预报信息。UI设计如图4所示。
图4 UI设计
在图4所示UI中，上方显示所查询城市的名称，右侧显示当前日期。接着以较大字号显示查询城市的温度和感冒描述。下方排着5个小卡片显示最近5天的天气信息，最下方接收用户输入要查询的城市名称，单击“查询”按钮即可查询指定城市的天气预报信息。
当刚打开该小程序时，由于用户还没有输入查询城市名称，需要设置一个默认城市名称，以方便显示初始的天气预报信息。
编写界面代码
选择好使用的API并设计好UI界面的布局之后，就可以创建微信小程序项目，并编写界面代码和逻辑层的JavaScript代码了。
创建项目
首先按以下步骤创建出项目。
（1）创建名为ch11的项目目录。
（2）启动微信小程序开发工具，在启动界面中单击“添加项目”按钮，打开如图5所示的对话框。
（3）在图5所示对话框中填写好相应的项目名称，并选择保存项目的目录，单击“添加项目”按钮即可创建好一个项目的框架。
图5 添加项目
本项目只有一个页面，因此也就不需要再添加其他页面，将index页面中已有的内容删除，然后再在index页面中编写WXML和JS代码即可。
（4）修改显示标题，打开app.json文件，修改成以下内容：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "微天气",
"navigationBarTextStyle":"black"
}
}
编写界面代码
根据图4所示的UI设计，打开index.wxml文件，删除该文件原有内容，输入以下wxml代码。
<view class="content">
<view class="info">
<view class="city">{{city}} ({{today}})</view>
<view class="temp">{{weather.wendu}}℃</view>
<view class="weather">{{weather.ganmao}}</view>
</view>
<view class="yesterday">
<view class="detail"><text class="yesterday-title">昨天</text>
{{weather.yesterday.date}}</view>
<view class="detail"> {{weather.yesterday.type}}
{{weather.yesterday.fx}}
{{weather.yesterday.fl}}
{{weather.yesterday.low}}
{{weather.yesterday.high}}
</view>
</view>
<view class="forecast" >
<view class="next-day" wx:key="{{index}}" wx:for="{{weather.forecast}}" >
<view class="detail date">{{item.date}}</view>
<view class="detail">{{item.type}}</view>
<view class="detail">{{item.high}}</view>
<view class="detail">{{item.low}}</view>
<view class="detail">{{item.fengxiang}}</view>
<view class="detail">{{item.fengli}}</view>
</view>
</view>
<view class="search-area">
<input bindinput="inputing" placeholder="请输入城市名称"
value="{{inputCity}}" />
<button type="primary" size="mini" bindtap="bindSearch">查询</button>
</view>
</view>
以上wxml代码添加了注释，每一部分的作用都在注释中进行了描述。
编写界面样式代码
保存以上wxml代码之后，在开发工具左侧的预览区中并没有看到如图4中的UI效果。为了达到设计的布局效果，需要编写样式代码对wxml组件进行控制。其实，在上面的wxml代码中，已经为各组件设置了class属性，接下来只需要在index.wxss中针对每一个class编写相应的样式代码即可，具体代码如下：
.content{
height: 100%;
width:100%;
display:flex;
flex-direction:column;
font-family: 微软雅黑, 宋体;
box-sizing:
邀请
原作者: 模板之家
来自: 网络收集
| 
