第八章：在小程序裏查詢天氣（下）

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

在上一節，我們已經簡單地完成一個天氣查詢小程序的靜態頁面，現在，我們就來爲它加上邏輯代碼。

獲取當前位置天氣

想象一下，當小程序加載，默認進入天氣詳情頁面，此時頁面初始化時應該做哪些工作呢？

初始化邏輯分3步走，具體如下：

1. 首先獲取當前地理位置信息，取得經緯度。

2. 調用騰訊地理位置逆解析服務，獲取當前位置信息。

3. 調用心知天氣 API，獲取當前城市天氣。

首先我們需要獲取當前地理位置信息。小程序提供了 wx.getLocation API，可以讓我們有能力獲取到當前使用者的地理位置信息。

wx.getLocation 使用方法如下：

wx.getLocation({

   success: function (res) { // success 屬性是獲取成功回調函數
    console.log(res)
    that.setData({
     hasLocation: true,
     location: formatLocation(res.longitude, res.latitude)
    })
   }
  })

我解釋一下上述語句：我們給 wx.getLocation 函數傳遞了一個對象，對象中有 success 屬性，該屬性爲一個 Function 類型，用於綁定獲取地理位置成功事件的回調，在這個回調事件中，我們可以拿到一個 res 對象，res 對象包含 longitude 和 latitude，分別是經度、緯度。

接下來我們要通過經緯度獲取城市信息，這裏我們使用地理位置逆解析服務，使用前需要在騰訊地圖註冊，申請 API，然後請求 http://apis.map.qq.com/ws/geocoder/v1/?location=，取得當前城市信息。

發起請求的代碼如下：

wx.request({
   url: 'http://apis.map.qq.com/ws/geocoder/v1/',
   data: {
    location: '39.984154,116.307490'
   },
   success: function(result) {
    // ...
   },
   fail: function({errMsg}) {
    // ...
   }
  })

我們使用 wx.request API，這個 API 讓我們擁有發起網絡請求的能力，這樣我們就可以通過訪問騰訊地圖提供的 restful API 來解析經緯度數據了。

下面是參數說明：

l url：小程序請求 URL

l data ：query 參數，location 爲經緯度信息

l success：成功回調

l fail：失敗回調

在成功回調中我們可以，接下來就可以根據城市來獲取天氣信息了，調用心知天氣 API 前同樣需要在心知天氣註冊並申請 API KEY。

我們依然使用 wx.request API

wx.request({
   url: 'https://api.seniverse.com/v3/weather/now.json',
   data: {
    key: 'API_KEY',
    location: '北京'
   },
   success: function(result) {
    // ...
   },
   fail: function({errMsg}) {
    // ...
   }
  }}

接下來我們繼續開發地圖頁面，我們使用 map 組件，這個組件可以在頁面上創建一個可交互的地圖。

根據地圖獲取天氣信息

頁面結構搭建完畢後，我們開始編寫頁面邏輯。 這個頁面的重點在於初始化 map 組件，主要有兩步：

1. 創建 map 組件並顯示。

2. 在 map 組件上創建每個城市的標記點。

在 demo 中提供了全國省會城市的經緯度信息，在地圖頁面 目錄下，名稱爲 loc.js，城市經緯度信息結構如下：

{
  name:'廣州市', // 城市名稱
  latlng:'113.264385,23.129112' // 對應的城市經緯度信息
}

然後我們在map.js引入該文件，將其轉換成 marker數組，用於在頁面上顯示標記：

const locData = require('./loc.js')
var markers = locData.map(loc=>{
  let latlng = loc.latlng.split(',') // 經緯度信息原本是以字符串形式保存，這裏要將其分割成2部分
  return {
    id: loc.name,
    latitude: parseFloat(latlng[1]), // 經緯度信息需要轉換成數值型
    longitude: parseFloat(latlng[0]),// 經緯度信息需要轉換成數值型
    name: loc.name,
    iconPath:'/image/location.png',
  }
})

當用戶點擊 marker，我們可以用 wx.switchTab API 導航到天氣詳情頁，並帶上城市信息，這裏由於 switchTab API 的限制，無法在 URL 中傳遞參數，因此我們在全局對象 app 上設置 currentCity 屬性來保存當前選中城市。

var app = getApp()
    app.globalData.currentCity = e.markerId
    wx.switchTab({
      url: '/page/index/index',
    })

我們回到天氣詳情頁面，我們需要在 index.js 做下修改，當頁面載入時，判斷是否有指定城市，如果有則獲取指定城市的天氣信息

onShow: function(option){
this.reloadData()
}

map.js完整代碼如下：

const locData = require('./loc.js')
var markers = locData.map(loc=>{
  let latlng = loc.latlng.split(',')
  return {
    id: loc.name,
    latitude: parseFloat(latlng[1]),
    longitude: parseFloat(latlng[0]),
    name: loc.name,
    iconPath:'/image/location.png',
  }
})
Page({
  data: {
    latitude: markers[0].latitude,
    longitude: markers[0].longitude,
    markers: markers,
  },
  switchCity(e){
    //console.log(e)
    var app = getApp()
    app.globalData.currentCity = e.markerId
    wx.switchTab({
      url: '/page/index/index',
    })
  }
})

至此，我們就完成了一個天氣查詢的小程序了。

相關閱讀

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

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