教你实现一个天气实时查询微信小程序

博主绪言

天气之子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 c