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

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

在本章节，我们会带领大家开发一个基于地理位置查询天气的小程序。通过本章节，你会学习使用小程序位置 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=