第七章：在小程序里查询天气（上）

做者：知晓云 - 小程序开发快人一步
来源：知晓课堂

在本章节，咱们会带领你们开发一个基于地理位置查询天气的小程序。经过本章节，你会学习使用小程序位置 API、map 地图组件，wx.request() API等。

页面构建

咱们开发的小程序有两个页面：天气详情页面和地图页面，天气详情页面用于查看指定城市的天气情况，而地图页面用于选取城市。两个页面经过底栏 tab 来相互切换。

天气详情页面

这个页面主要是展现特定城市当前的天气情况，默认展现当前城市的天气状况。

该页面的 UI 以下图：

地图页面

这个页面在地图上标注了全国34个省会城市，经过点击对应城市的 marker，能够查看该城市的天气状况。

该页面的 UI 以下图：

构建界面

ok，如今已经对咱们所要开发的小程序有个大体概念了，接下来就开始编码工做了。

Tab 页面切换

咱们先配置小程序的底部 Tab，方便接下来咱们切换页面，以下图，在 app.json 中加入以下代码。

这里解释下上图配置：

l color tab 上的文字默认颜色

l selectedColor tab 上的文字选中时的颜色

l backgroundColor tab 的背景色

l borderStyle tabbar上边框的颜色

l list tab 按钮数组

l list.pagePath 页面路径，必须在 pages 中先定义

l list.text tab 按钮文本

配置完成后，便可经过点击 Tab 来切换页面了。

WXML 页面元素

接下来，咱们来编写两个页面的相关 WXML 代码。

<view>
 <view>
  <view>
   <image src='../../image/weather-icon/0.png' mode='aspectFill'></image>
  </view>
  <view>
   <view>
    <view class="weui-cells weui-cells_after-title">
     <view class="weui-cell weui-cell_input">
      <view>
       <view>城市</view>
      </view>
      <view>
       <input type="text" disabled="{{true}}" value="广州市" name="city"></input>
      </view>
     </view>
     <view class="weui-cell weui-cell_input">
      <view>
       <view>天气状况</view>
      </view>
      <view>
       <input type="text" disabled="{{true}}" value="晴朗" name="latitude"></input>
      </view>
     </view>
     <view class="weui-cell weui-cell_input">
      <view>
       <view>气温</view>
      </view>
      <view>
       <input type="text" disabled="{{true}}" value="21°" name="name"></input>
      </view>
     </view>
    </view>
   </view>
  </view>
 </view>
</view>复制代码

接下来是地图页面的构建过程。在 map.wxml 给 map 组件绑定数据和回调事件：

<map
        style="width: 100%; height: 300px;"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
        markers="{{markers}}"
        bindmarkertap="switchCity"
        scale='8'
        >复制代码

我解释一下 map 组件上的参数：

参数名	内容	说明
style	width: 100%; height: 300px;	设置 map 组件的 css 样式
latitude	{{latitude}}	纬度
longitude	{{longitude}}	经度
markers	{{markers}}	坐标点标记数组
bindmarkertap	switchCity	点击地图回调
scale	8	地图缩放值

如今，两个页面的 WXML 已经写好。在下一章，咱们将正式利用小程序的接口，为它们增长查询天气的功能。

相关阅读

第一章：一文了解小程序

第二章：手把手，动手编写一个简单小程序（上）

第三章：手把手，动手编写一个简单小程序（下）

第四章：如何开发一款内容展现类小程序（上）

第五章：如何开发一款内容展现类小程序（下）

第六章：小程序多媒体相关能力

关注「知晓云」公众号，点击菜单栏「知晓云」-「知晓课堂」，获取更多开发教程。