大家好，又见面了，我是你们的朋友全栈君。

博主绪言

天气之子app主要功能是选择地区(省，市，区或者县)，然后获取当前信息，把所选择的地区信息显示在界面上，然后调用和风天气免费的API，获取当前选择地区的天气信息，并且获取天气图标，把所有获取的这些信息，美观地显示在界面上。以下是示例界面：

组件选择部署阶段

组件选择

根据上面的示例图，我们大概会用到picker组件(具体信息可见picker组件)

我会会使用到省市区选择器，因此选用这个属性。因为我们还需要根据我们选择的省市区部署到前端上面来，因此我们还需要绑定事件监听器，进行监听器方法的写作，由于地区内容会变，我门还需要在这个地方使用变量，以便于监听器函数对其进行改变。这个界面主要分为四个部分，分别为省市区，温度天气显示，天气图标显示，以及详细天气信息(湿度，气压，能见度，风向，风速，风力显示)，因此我门可以使用view视图容器分别写入这四个部分，依此，我门需要的组件有，pinker，文本text，图片image。
我门首先可以建立一个基本的模型，什么都不写，先把界面写出来再说，代码示例：

<view class="container">
<!-- 地区,底部弹起的选择器，mode决定类型,change为选择器所绑定的监听器方法名，region为一个变量，专门显示省市区 -->
<picker mode="region" bindchange="change"> 
<view>{
  
  {region}}</view>
</picker>
<!-- 文本区域,天气如何，天气需要根据监听器方法显示，因此也使用变量表示 -->
<text>{
  
  {now.tmp}}C° {
  
  {now.cond_txt}}</text>
<!-- 图片区域，图标会变，地址采用变量表示(此前我门把需要的图片放在同目录下的image文件当中) -->
<image src="/image/cond-icon-heweather/{
  
  {now.cond_code}}.png"></image>  
<!-- 天气详细信息，都使用变量表示 -->
<view class="detail">
<view class="item1">
<view class="item2">湿度</view>
<view class="item2">气压</view>
<view class="item2">能见度</view>
</view>
<view class="item1">
<view class="item2">{
  
  {now.hum}}%</view>
<view class="item2">{
  
  {now.pres}}Pa</view>
<view class="item2">{
  
  {now.vis}}Km</view>
</view>
<view class="item1">
<view class="item2">风向</view>
<view class="item2">风速</view>
<view class="item2">风力</view>
</view>
<view class="item1">
<view class="item2">{
  
  {now.wind_dir}}</view>
<view class="item2">{
  
  {now.wind_spd}}Km/h</view>
<view class="item2">{
  
  {now.wind_sc}}级</view>
</view>
</view>
</view>

组件变量安排

由于上面都使用变量显示，所有我门需要给变量设置一个初始值，那就以湖南省长沙市岳麓区为例吧，我门上一篇文章《微信小程序从入门到入坑当中》提到过，变量一般都是在js文件当中的data当中修改：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    region: ['湖南省','长沙市','岳麓区'],
    now:''
  },

组件布局

经过上面的组件选择，我是不忍心吧样例图放出来，因为没有组件布局，会一团糟，比较乱，因此适当的组件布局时很重要的。我们可以看到绪论里面的有样例图，里面总体部分时使用flex垂直布局，并且都是居中显示，样例代码如下：

/* pages/index/index.wxss */
.container{                       //整个视图容器的布局
  height: 100vh;                  //视图容器的高
  display: flex;
  flex-direction: column;         //视图容器当中所有组件垂直布局
  align-items: center;            //居中显示
  justify-content: space-around   //组件之间留有一定的间隙
}
.detail{                             //详细天气组件当中的布局
  display: flex;                     //flex布局
  flex-direction: column;           //垂直布局
  width: 100%;                      //整个部分占据屏幕宽度的百分之百
}
.item1{
  display: flex;
  flex-direction: row;
  margin: 20rpx;

}
.item2{
  width: 33.3%;
  text-align: center;
}
text{
  font-size: 50rpx;             //所有文本字体，颜色
  color: royalblue;
}
image{                        //设置图片的宽度高度
  width: 300rpx;
  height: 200rpx;
}

以下是示例图，由于变量需要调用API函数才能够变化，所有我们的示例界面是暂时把变量去掉，使用我们自己写的定制替代，这也初始效果更加好：

js后端逻辑处理环节

API处理环节

我们使用的天气资源API来源于和风天气，具体可以进去了解点击进入官网，进入官网以后首先注册一个自己的账号，然后绑定微信，实名认证就可以使用了。之后进入开发文档：

选择API->常规天气处理：

我们若要在微信小程序当中调用这个接口，首先找到请求URL(个人使用的话还是建议使用免费版的URL)，文档里也有说明，里面主要有{weather-type}和{parameters}，前者代表天气数据类型，我们需要的是实况天气数据，因此选择now，后者代表请求的数据参数，我们是根据城市地区查询天气的，因此需要location参数即可，具体格式，文档以及说的很清楚了。点击进入,
url:https://free-api.heweather.net/s6/weather/{weather-type}?{parameters}
比如说我需要请求湖南省长沙市的天气数据，请求的url应该为：
https://free-api.heweather.net/s6/weather/now?location=changsha&key=你自己的用户认证key。
用户认证key怎么获取：
进入控制台，点击应用管理，创建应用即可，应用类型选择web API。之后复制你的key即可。

输入我们的key值以后，我们可以访问上面那个网址,这时会出现一个网页，显示所有当地天气信息：

怎么让微信小程序访问呢？
我们进入并且登陆微信公众平台，选择开发->开发设置->服务器域名添加,我们需要添加和风天气接口域名:https://free-api.heweather.net

之后小程序就可以访问API了。

函数处理环节

我们进入核心环节，把之前的定制都改为变量，我们之前定义了一个picker的事件函数change，我们可以在这个方法中调用天气获取的函数，并且把获取的信息：比如地域更新显示在界面上。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    region: ['湖南省','长沙市','岳麓区'],
    now:''                         //各个变量的数据都是now的不同的部分，分别调用
  },
change:function(e){
  this.setData({                 //获得detail.value，即地域信息
    region: e.detail.value
  })
  this.getWeather();    //更新天气

},
getWeather:function(e){
  var that = this;    //this不可以之间在微信API函数内部使用，把this赋值到that里面
  wx.request({  //查询天气时地域会变化，因此url也会变化即里面的parameters参数，我们可以分开处理，如下：
    url: 'https://free-api.heweather.net/s6/weather/now?',   //主要url
    data:{                                 //http请求当中的参数
      // location:that.data.region[1]+that.data.region[2],
      location: that.data.region[1],       //地域参数
      key:'写入你自己的key'                //key参数
    },
    success:function(res){                //如果天气获取函数运行成功，把获取到的结果放入到res对象当中
      // console.log(res.data)
      that.setData({ 
        now:res.data.HeWeather6[0].now        //调用res当中的实时天气数据
      })
    }
  })
}
,

至于这个request函数，开发文档里面也有，大家具体可以参考这里
注意！！！这个时候，有一个问题，就是我们定义了一个变量，那么初始打开程序的时候变量值不知道是啥，又怎么显示呢，这个时候我们就需要在js文件里面的onlaod函数调用天气获取函数：

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

     this.getWeather();
  },
//只要页面一加载，小程序一启动，就会触发这个函数，自动调用天气获取函数，就能够得到我们默认的湖南省长沙市岳麓区的天气数据，并且显示在界面上。

最终样例就形成了，至于大家还要添加什么功能或者优化界面就是后续的事。

结束语

既然我们可以这也调用和风天气的API，实时获取数据，那么我们是不是可以获取某一个快递平台API的数据查找快递信息，那么我们是不是可以调用某一个医院API的数据或者国家卫生局API的数据实时调查各个地方疫情数据呢，到底是不是，大家感兴趣的可以去试试，方法大同小异，可以类比这个方法实现，当然其中会遇到很多bug，会很头疼，不要怕，挺过去，咬牙不放，一天时间足够了。最后，希望大家寒假愉快，码出自己的一片天地，用键盘为武汉加油！！！(这篇文章写于寒假，最近从个人博客中导入到CSDN)
与这篇文章一个系列的还有：
微信小程序从入门到入坑
云开发：让你拥有自己的第一个的AI人脸识别小程序
最后，欢迎大家关注我的个人博客，在下所有的文章都是从个人博客导入进来的，文章会首先更新在个人博客里。希望我的博客能够给大家带来收获！