天气查询小程序

1.前期准备

1.1picker组件

picker是从底部弹起的滚动选择器组件,目前根据mode属性值的不同共支持5种选择器,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器。若省略mode值不写,则默认效果是普通选择器。

天气查询小程序
天气查询小程序
除了上述通用的属性,对于不同的mode,picker拥有不同的属性。
这个小程序主要使用的是当mode=’region’时的省市区选择器效果(最低版本为1.4.0)

天气查询小程序

1.2网络API

和风天气:提供的API接口
根据网站的相关代码提示和接口信息制作url
回到微信公众平台,添加服务器域名

步骤:
(1)百度搜索 “和风天气官网”
天气查询小程序
(2)点击进入官网 -->点击天气API进行注册–>注册成功后登录控制台 --> 点击应用管理 ,选择新建应用 (名称随便写) -->添加key(类型选择Web API)

点击进入官网
天气查询小程序
点击天气API进行注册

天气查询小程序
天气查询小程序
注册成功后登陆控制台

天气查询小程序
点击应用管理,选择新建应用

天气查询小程序
添加key(类型选择Web API)
天气查询小程序
把key记录下来

(3)获取天气的小图标: 点击开发文档–>参考资料–>天气代码和图标 -->点击图片打包下载到桌面–>解压(只解压_MACOSX下面的图片)到项目的images文件下

(4)获取天气信息:选择文档的API -->选择常规天气数据
请求URL:
免费版:https://free-api.heweather.net/s6/weather/{weather-type}?{parameters}

商业版https://api.heweather.net/s6/weather/now?location=beijing&key=xx

天气查询小程序

我们使用免费版,例如查询北京的数据:
https://free-api.heweather.net/s6/weather/now?location=beijing&key=
01db9ba239584d93878c71dbf77956f3

(5)登录微信公众平台:开发–>开发设置–>服务器域名 -->扫码登录–>设置request合法域名
天气查询小程序

2.代码实现

app.json中定义代码如下

天气查询小程序

index.wxml中代码如下

天气查询小程序
天气查询小程序
index.wxss中代码如下
天气查询小程序
index.js中代码如下

天气查询小程序
天气查询小程序

3.功能介绍

在picker组件中绑定事件bindchange,当触发事件时changeRegion函数会被执行,同时还会收到一个事件对象event。
天气查询小程序
天气查询小程序
在index.js中的changeRegion函数执行时会改变原来的定义在index.wxml中的region变量值,并且会调用天气函数getWeather()进行天气更新

天气查询小程序
天气函数中调用了微信提供的专属API接口wx.request进行网络请求
wx.request中属性如下

天气查询小程序
其中url为必传,请求网络接口地址
data为请求参数,根据请求的接口实际需要参数来传递
success函数为调用成功时的回调函数,此时一般会传入一个对象值用于给我们使用

因此此时可以填入我们之前获取的和风天气的url地址,必传参数location和key,key是我们创建应用时得到的key
天气查询小程序
res为调用回调函数成功时传给我们的对象,先在控制台输出查看一下,此时在该函数中修改在data中的变量值now,然后可根据now的属性修改在index.wxml中定义的各个变量值

天气查询小程序

天气查询小程序
天气查询小程序

在onLoad函数中调用getWeather函数表示页面每刷新一次会调用一次getWeather函数,这样避免了在没有使用picker组件去触发事件时页面刷新带来的变量now为空的情况,从而使页面数据加载不出来

天气查询小程序

天气查询小程序

4.界面展示

天气查询小程序
天气查询小程序
天气查询小程序