| 【實驗目的】
PART I 準備工作
本小節(jié)主要介紹如何申請獲得開源API的密鑰。這里選擇了可以提供全球氣象數(shù)據(jù)服務接口的和風天氣API，其官方網(wǎng)址為https://www.heweather.com/（如圖1所示）。 官方網(wǎng)址現(xiàn)已改為https://www.qweather.com/
? 圖1?“和風天氣”官方主頁（訪問時間：2018.10.27?10:26） 點擊“天氣API”，跳轉到https://dev.qweather.com/。用戶選擇 “免費用戶”類型然后使用郵箱進行注冊并激活后，可以獲取三天之內全球各地區(qū)的實時天氣，免費接口調用流量為1000次/天、頻率為200次/分鐘，該數(shù)據(jù)基本可以滿足讀者的開發(fā)學習需求。 注冊完畢之后，點擊“控制臺”按鈕，可以訪問https://id.qweather.com/#/login?redirect=https%3A%2F%2Fconsole.qweather.com來查看賬號信息，用戶登陸后即可看到開發(fā)者申請到的個人認證key，如圖2所示。
? 圖2個人認證key查詢頁面（訪問時間：2018.10.27?10:27） 開發(fā)者需記錄上述頁面中的個人認證key，該信息在小程序發(fā)出網(wǎng)絡請求時會作為身份識別的標識一并發(fā)送給和風天氣的第三方服務器。至此，開源API的密鑰申請就已經順利完成，讀者可以進行下一節(jié)的學習，了解如何調用API獲取氣象數(shù)據(jù)。
目前免費用戶可以調用的最新版接口地址為：https://dev.qweather.com/docs/api/weather/weather-now/，其服務器節(jié)點在中國境內。該接口地址后面追加不同的關鍵詞將獲取不同種類的氣象數(shù)據(jù)信息，例如alarm為天氣自然災害預警、讀者可以訪問官方文檔開發(fā)文檔 | 和風天氣開發(fā)平臺，以及https://dev.qweather.com/docs/api/，了解各類關鍵詞的使用方法。 本示例將選用關鍵詞weather/now進行實況天氣數(shù)據(jù)的獲取。實況天氣即為當前時間點的天氣狀況以及溫濕風壓等氣象指數(shù)，具體包含的數(shù)據(jù)：體感溫度、實測溫度、天氣狀況、風力、風速、風向、相對濕度、大氣壓強、降水量、能見度等。目前該接口允許查詢的城市覆蓋范圍為全球任意一個城市。 基于關鍵詞weather/now的接口具有兩個必填參數(shù)和兩個可選參數(shù)，如表1所示。 表1?weather接口參數(shù)一覽表
其中與unit參數(shù)相關公制和英制單位對比如表2所示。 表2?度量衡單位一覽表
注：部分數(shù)據(jù)項無論選擇何種單位均會使用公制單位。 https://devapi.qweather.com/v7/weather/now?location=101010200&key=58cde137c76f44f5bc7885fc1e711aa9 開發(fā)版 https://devapi.qweather.com/v7/weather/now?location=101010100&key=你的KEY 以前強調過：音頻、視頻、圖片，若是網(wǎng)絡地址，一定要在瀏覽器中打開試一試。 現(xiàn)在又增加了一條：網(wǎng)絡服務，一定要在瀏覽器中打開試一試。 免費用戶調用接口的常見語法格式如下：
其中[parameters]需要替換成使用到的參數(shù)，多個參數(shù)之間使用&符號隔開。 https://free-api.heweather.com/s6/weather/now?location=shanghai&key=58cde137c76f44f5bc7885fc1e711aa9 ????例如，使用拼音查詢上海市天氣數(shù)據(jù)的寫法如下：
注：其中key的值1234abcd為隨機填寫的內容，請在實際開發(fā)中將其替換為真實的個人認證key，否則接口將無法獲取數(shù)據(jù)。key=58cde137c76f44f5bc7885fc1e711aa9。 可以直接將這段地址輸入到瀏覽器地址欄中測試數(shù)據(jù)返回結果，如圖3所示。
? 圖3免費天氣查詢接口返回結果頁面（訪問時間：2018.10.27?10:59） 由上圖可見，指定城市的天氣數(shù)據(jù)返回結果是json數(shù)據(jù)格式的文本內容，其中包含的數(shù)據(jù)是以“名稱:值”的形式存放。 為方便用戶查看，將圖3返回的數(shù)據(jù)內容整理格式后如下：
返回的字段說明如表3所示。 表3?實況天氣返回字段說明
其中參數(shù)status的狀態(tài)碼及錯誤碼如表4所示。 表4?接口狀態(tài)碼及錯誤碼說明
????如果接口無法正確獲取數(shù)據(jù)可以根據(jù)狀態(tài)碼對比上表查詢原因。 用戶可以根據(jù)指定的名稱找到對應的數(shù)據(jù)值，例如在實況天氣數(shù)據(jù)now中可以查到當前城市的溫度，對應的字段節(jié)選如下：
上述代碼表示當前城市的溫度為19攝氏度。
每一個小程序在與指定域名地址進行網(wǎng)絡通信前都必須將該域名地址添加到管理員后臺白名單中。因此本示例需要對域名地址https://free-api.heweather.com進行服務器配置。 小程序開發(fā)者登陸mp.weixin.qq.com進入管理員后臺，選擇【設置】—【開發(fā)設置】—【服務器域名】即可進行添加或修改需要進行網(wǎng)絡通訊的服務器域名地址，如圖4所示。
? 圖4?服務器域名配置 將當前需要使用的接口添加到【request合法域名】欄目中，配置完成后再登陸小程序開發(fā)工具就可以允許小程序與指定的服務器域名地址之間的網(wǎng)絡通訊了，注意每個月只可以申請修改5次服務器域名配置。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| PART II 小程序項目的新建（必做） 本次項目創(chuàng)建選擇空白文件夾weatherDemo，注意請取消勾選“建立普通快速啟動模板”選項，以免自動生成代碼影響手動編寫。效果如圖5所示。
? 圖5小程序項目填寫效果示意圖 單擊“確定”按鈕完成項目創(chuàng)建，然后準備手動創(chuàng)建頁面配置文件。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| PART III?頁面配置
首先進行app.json文件的創(chuàng)建，并在app.json文件中輸入一對{}符號，然后Ctrl+S快捷鍵進行保存。后面用同樣的方法新建app.js和app.wxss文件，這兩個文件暫時保持內容空白關閉即可。全部完成后的目錄結構如圖6所示。
? 圖6應用文件創(chuàng)建完成
應用文件創(chuàng)建完畢后，在根目錄中創(chuàng)建自定義文件夾pages用于存放頁面文件。本次項目只有一個頁面文件，因此只需要在pages目錄下創(chuàng)建index文件夾和其內部的wxml、wxss、js以及json四個同名文件。完成后的目錄結構如圖7所示。
? 圖7頁面文件創(chuàng)建完成 此時app.json會自動生成頁面配置代碼，如圖8所示。
圖8?app.json自動生成頁面配置代碼
接下來創(chuàng)建其他自定義文件，本項目主要還需要一個文件夾用于存放天氣圖標素材。文件夾名稱由開發(fā)者自定義（例如images），創(chuàng)建方式與pages文件夾創(chuàng)建方式完全相同。 本項目用到的圖標素材共計75個，均來源于和風天氣官網(wǎng)，圖標合集如圖9所示。
圖9?天氣圖標素材展示 其中圖標文件名為對應的天氣代碼，后綴名均為.png。需要注意的是，部分圖標文件名帶有字母n表示夜間天氣圖標，例如100n.png。 對目錄結構中的images文件夾右擊，選擇“硬盤打開”，在該文件夾中新建二級目錄weather_icon，然后將圖標文件全部復制粘貼進去。完成后的目錄結構如圖10所示。 ? ? ? 圖10頁面文件創(chuàng)建完成 此時文件配置就全部完成，下一節(jié)將正式進行頁面布局和樣式設計。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| PART IV 視圖設計（必做）
小程序默認導航欄是黑底白字的效果，因此需要在app.json中自定義導航欄標題和背景顏色。更新后的app.json文件代碼如下：
上述代碼可以更新所有頁面的導航欄標題文本為“今日天氣”、背景顏色為藍色（#3883FA）。預覽效果如圖11所示
? 圖11自定義導航欄效果
頁面上主要包含4個區(qū)域，具體內容解釋如下：
面板之間需要有一定的間隔距離，設計圖如圖12所示。
? 圖12頁面設計圖 計劃使用組件如下：
首先定義頁面容器<view>，WXML（pages/index/index.wxml）代碼片段如下：
在app.wxss中設置容器樣式，代碼片段如下：
當前效果如圖13所示。 圖13頁面預覽效果 由于還沒添加組件元素，因此尚看不出來flex布局模型效果。
區(qū)域1需要使用<picker>組件來實現(xiàn)一個省市區(qū)選擇器，用戶點擊可切換選擇其他城市。 WXML（pages/index/index.wxml）代碼片段修改如下：
在<picker>組件內部是開發(fā)者任意填寫的一個城市名稱，當前效果如圖14所示。
圖14區(qū)域1預覽效果 由圖可見，點擊城市名稱時會從底部彈出控件，用戶可以進行省市區(qū)選擇。
區(qū)域2需要使用<text>組件實現(xiàn)一個單行天氣信息，包括當前城市的溫度和天氣狀況。 WXML（pages/index/index.wxml）代碼片段修改如下：
WXSS（pages/index/index.wxss）代碼片段如下：
當前效果如圖15所示。
? 圖15區(qū)域2預覽效果 當前顯示的文本內容由開發(fā)者自定義，待查詢到實際數(shù)據(jù)后將動態(tài)更新文本內容。
區(qū)域3需要使用<image>組件展示當前城市的天氣圖標。 WXML（pages/index/index.wxml）代碼片段修改如下：
WXSS（pages/index/index.wxss）代碼片段如下：
當前效果如圖16所示。
? 圖16區(qū)域3預覽效果 “N/A”表示的天氣狀況為“未知”，待查詢到實況數(shù)據(jù)后將動態(tài)更新圖標內容。
區(qū)域4需要使用<view>組件展示多行天氣信息。 WXML（pages/index/index.wxml）代碼片段修改如下：
WXSS（pages/index/index.wxss）代碼片段如下：
當前效果如圖17所示。
? 圖17區(qū)域4預覽效果 當前為開發(fā)者自定義數(shù)據(jù)，待查詢到實況數(shù)據(jù)后將動態(tài)更新區(qū)域4的內容。此時頁面設計就全部完成了，接下來需要進行邏輯實現(xiàn)。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| PART V 邏輯實現(xiàn)（必做）
首先修改<picker>組件中的“北京市”為{{region}}，然后為<picker>組件追加自定義bindchange事件，用于監(jiān)聽選項變化。 WXML（pages/index/index.wxml）代碼片段修改如下：
由于省市區(qū)選擇器的返回結果是數(shù)組的形式，因此在JS文件的data中定義region為包含了省、市、區(qū)三個項目的數(shù)組，初始城市信息由開發(fā)者自定義。 JS（pages/index/index.js）代碼片段修改如下：
運行效果如圖18所示。
圖18更新省市區(qū)信息 由圖可見，當前已經可以自行切換到國內任意省市區(qū)。
在JS文件中使用自定義函數(shù)getWeather進行實況天氣數(shù)據(jù)的獲取。由于非直轄市無法查詢到具體的區(qū)，因此后續(xù)的天氣查詢以城市作為查詢依據(jù)。 JS（pages/index/index.js）代碼片段修改如下：
將上述函數(shù)在生命周期函數(shù)onLoad和自定義函數(shù)regionChange中分別進行調用，表示當頁面加載時和切換城市時均主動獲取一次實況天氣數(shù)據(jù)。 JS（pages/index/index.js）代碼片段修改如下：
在聯(lián)網(wǎng)狀態(tài)下保存后重新運行會在Console控制臺得到第三方服務器發(fā)回的JSON數(shù)據(jù)，如圖19所示。
? 圖19?Console控制臺獲取到服務器返回數(shù)據(jù) 由圖可見，實況天氣數(shù)據(jù)包含在HeWeather6[0].now屬性中。更新getWeather函數(shù)，將該屬性存入到JS文件的data中，JS（pages/index/index.js）代碼片段修改如下：
此時重新運行將在AppData面板查到已經被記錄的天氣數(shù)據(jù)，如圖20所示。
? 圖20?AppData面板獲取到數(shù)據(jù) 現(xiàn)在只需要將這些數(shù)據(jù)更新到頁面上即可顯示出來。
將WXML頁面上所有的臨時數(shù)據(jù)都替換成{{now.屬性}}的形式，例如溫度是{{now.tmp}}。 WXML（pages/index/index.wxml）代碼片段修改如下：
運行效果如圖21所示。
? 圖21?實況天氣數(shù)據(jù)顯示效果 需要注意的是，在網(wǎng)速受限的情況下可能不能立刻獲取到數(shù)據(jù)，因此最好在JS文件的data中為now規(guī)定自定義初始數(shù)據(jù)，獲取到實際數(shù)據(jù)前可以臨時顯示這些數(shù)據(jù)。 JS（pages/index/index.js）代碼片段修改如下：
在網(wǎng)速受限的狀態(tài)下，初始數(shù)據(jù)顯示效果如圖22所示。
? 圖22?初始數(shù)據(jù)顯示效果 ????此時項目就全部完成了。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| PART VI?課后思考文章來源：http://www.zghlxwxcb.cn/news/detail-419017.html 可以使用其他天氣接口制作更豐富的效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-419017.html | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
。
到了這里，關于【微信小程序項目】——十分鐘開發(fā)網(wǎng)絡API·天氣查詢小程序、天氣查詢，美觀簡約，簡單易上手的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
