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为空的情况，从而使页面数据加载不出来