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

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

在本章節，咱們會帶領你們開發一個基於地理位置查詢天氣的小程序。經過本章節，你會學習使用小程序位置 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 已經寫好。在下一章，咱們將正式利用小程序的接口，爲它們增長查詢天氣的功能。

相關閱讀

第一章：一文了解小程序

第二章：手把手，動手編寫一個簡單小程序（上）

第三章：手把手，動手編寫一個簡單小程序（下）

第四章：如何開發一款內容展現類小程序（上）

第五章：如何開發一款內容展現類小程序（下）

第六章：小程序多媒體相關能力

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