由于在index.js中還沒有設定初始化資料，是以在界面中看不到具體的資料，進而也導緻界面的效果沒達到設定的要求。
接下來就編寫邏輯層代碼index.js，為了檢查界面設計效果，首先編寫初始資料，然後再逐漸深入地編寫其他相關業務邏輯代碼。
在index.wxml中編寫了很多資料，是以需要在index.js中先把這些資料進行初始化，然後在開發工具的模拟器中就可預覽結果。
打開index.js檔案，删除原來的内容，重新編寫以下代碼：
編寫好以上初始化資料之後，儲存index.js，在開發工具左側預覽區域可看到如下的界面效果。
以上代碼很長，主要是由于模拟了5天的天氣資料，實際上，在小程式運作時，應該在打開小程式之後就馬上通過api擷取天氣資料，是以上面的初始化資料代碼中，隻需要用以下語句将weather初始化為一個空對象即可，而上面添加在weather中的屬性資料都可以删除。
根據本案例的要求，當使用者打開本案例之後，首先要擷取使用者目前所在城市的天氣資訊，這就需要擷取使用者目前所在城市的名稱。要完成這個功能，需要經過幾個轉折。
首先，可以使用微信小程式的擷取目前地理位置經緯度的api（就是wx. getlocation），通過該api即可擷取使用者所在位置的經緯度。
有了使用者所在的經緯度，還需要查詢該經緯度對應的城市名稱。這可以使用百度地圖的接口來實作，百度地圖geocoding api服務位址如下：
調用該接口需要傳遞以下幾個參數。
output：設定接口傳回的資料格式為json或者xml。
ak：這是必須設定的一個參數，是使用者在百度申請注冊的key，自v2開始參數修改為“ak”，之前版本參數為“key”。
sn：若使用者所用ak的校驗方式為sn校驗時該參數必須啟用。
callback：一個回調函數，将json格式的傳回值通過callback函數傳回以實作jsonp功能。
例如，在浏覽器中輸入以下位址：
傳回的json格式如下所示：
在以上json資料中，通過result.addresscomponent.city可擷取傳入經緯度對應的城市名稱。是以，在本案例中可通過這種方式擷取使用者目前所在城市的名稱。
根據以上分析，在index.js的onload事件處理函數中編寫如下所示代碼：
以上代碼中，第1行使用require導入工具方法，用來格式化日期。
擷取了城市名稱，接下來就可使用以下接口擷取指定城市名稱的天氣預報資訊：
在上面的接口中，城市名稱中不包含“市”這個字，如“成都市”隻需要傳入“成都”。
在本節前面介紹該接口時，隻檢視了接口執行成功後傳回的json資料，如果傳入的城市名稱有誤，則傳回如下所示json資料：
在程式中可通過status判斷資料查詢是否成功。
由于根據城市名稱查詢天氣預報資訊的代碼需要重複調用，是以，單獨編寫成一個函數，友善在查詢時調用。
在上面代碼中，擷取的date中儲存的是“19日星期六”這種格式的字元串，為了使日期和星期分别顯示在兩行中，這裡使用了一種小技巧，就是在日期字元串中添加了2個全角狀态的空格，這樣在顯示這個字元串時自動斷行。
編寫好以上這些代碼之後，儲存，在開發工具左側可看到已經擷取目前的天氣資料，而不是前面初始化的資料了。
這樣，本案例的主要代碼就算編寫完成了。不過，還隻能顯示使用者目前所在地的天氣資訊，如果要檢視其他城市的天氣，還需要繼續編寫相應的查詢代碼。
查詢代碼的編寫很簡單，隻需要擷取使用者輸入的城市名稱，然後傳入searchweather函數即可。具體的代碼如下：
儲存以上代碼之後，在開發工具左側模拟器中輸入查詢的城市名稱，如輸入“三亞”，單擊“查詢”按鈕，界面中即可顯示“三亞”的天氣資訊。
如果在下方輸入框輸入一個不存在的城市名稱，将顯示下面的提示資訊。
本文選自《從零開始學微信小程式開發》，點此連結可在博文視點官網檢視此書。
想及時獲得更多精彩文章，可在微信中搜尋“博文視點”或者掃描下方二維碼并關注。