第七章：在小程序裏查詢天氣（上）

作者：知曉雲 - 小程序開發快人一步
來源：知曉課堂

在本章節，我們會帶領大家開發一個基於地理位置查詢天氣的小程序。通過本章節，你會學習使用小程序位置 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 組件上的參數：

現在，兩個頁面的 WXML 已經寫好。在下一章，我們將正式利用小程序的接口，爲它們增加查詢天氣的功能。

相關閱讀

第一章：一文了解小程序
第二章：手把手，動手編寫一個簡單小程序（上）
第三章：手把手，動手編寫一個簡單小程序（下）
第四章：如何開發一款內容展示類小程序（上）
第五章：如何開發一款內容展示類小程序（下）
第六章：小程序多媒體相關能力

關注「知曉雲」公衆號，點擊菜單欄「知曉雲」-「知曉課堂」，獲取更多開發教程。