chunk的博客地址

一、實驗目標

1、掌握服務器域名配置和臨時服務器部署；
2、掌握 wx.request 接口的用法。

二、實驗步驟

（一）準備工作

1. 申請API密鑰

   • 選擇可以提供全球氣象數據服務s接口得和風天氣API，首先進入官方網址，輸入郵箱免費注冊；
     
   • 注冊完成后訪問控制臺查看賬號信息，依據官方文檔成功生成API KEY，記錄該key。（API KEY可以用于在小程序發出網絡請求時作為身份識別的標識一起發送給和風天氣的第三方服務器）
     

2. 調用API

   • 取出在和風天氣中的API KEY及API Host
   • 訪問https://mn5xmd96fj.re.qweatherapi.com//v7/weather/now?location=101010100&key=f40427d91c8c43a9a7db17aede262b09。

weather關鍵字代表獲取實況天氣，基于weather的接口有兩個必填參數，分別為city和key，其中，city表示要查詢的城市，此處選取城市ID為主要參數，key即為開發者的API KEY。

3. 服務器域名配置

   登錄微信公眾平臺，進入小程序管理員后臺，在“開發設置面板”的“服務器域名”中添加或修改所需要的網絡通信的服務器域名地址。此小程序主要需要添加的為request合法域名，即為開發者在和風天氣中的API Host。
   

（二）小程序開發

項目創建

在微信開發者工具新建空項目。

頁面配置

1. 創建頁面文件
   在根目錄下生成文件夾pages存放頁面文件，首頁默認為index。
   

2. 刪除和修改文件

   • 刪除utils文件夾及其所有內容；
   • 刪除pages文件夾下的logs目錄及其所有內容；
   • 刪除index.wxml、index.wxss和app.wxss的所有代碼；
   • 刪除index.js的全部代碼，輸入關鍵詞"page"自動補全函數；
   • 刪除的app.js的所有代碼，輸入關鍵詞"app"自動補全函數。
     
     

3. 創建其他文件
   本項目還需要一個文件夾用存放天氣圖標素材，素材均來自于和風天氣官網。在根目錄下新建images文件夾及其子文件夾weather_icon，將圖片文件全部復制進去。（需要注意的是，為了使圖片更加覆蓋各種天氣，這里下載的是和風天氣官網提供的完整zip，但圖片格式為.svg）
   

視圖設計

1. 導航欄設計
   更改app.json文件將導航欄標題和背景改為自定義顏色。
   圖中所示代碼改為藍色背景色，預覽效果如圖。
   

2. 頁面設計

   本小程序頁面主要包含4個區域：

   1. 區域1： 地區選擇器，用戶可以自行選擇查詢的省、市、區；
   2. 區域2： 顯示當前城市的溫度和天氣狀態的文字說明；
   3. 區域3： 顯示當前城市的天氣圖標；
   4. 區域4： 分多行顯示其他天氣信息，如濕度、氣壓、能見度和風向。
      具體使用的組件如下：

   • <view>

   • <picker>

   • <image>
     首先，定義頁面的容器container并在app.wxss中設置容器樣式，包括高度、布局、是否居中以及間距。
     
     接著，添加各種組件元素。

   • 區域1：使用<picker>組件完成，用戶可以點擊切換其他城市，組件內部隨意填寫一個城市名稱（相當于默認城市），當點擊城市名稱時會從底部彈出控件讓用戶進行省、市、區的選擇；
     

   • 區域2：主要是進行文字的設計，包括當前城市的溫度和天氣狀況；
     

   • 區域3：將天氣圖標導入（由于文件中下載的是.svg的圖標，因此在image組件內部必須注意要寫為：/images/weather_icon/1.svg)；
     

   • 區域4：展示多行天氣信息，使用detail，接著定義需要的單元行（bar），在每行內部定義單元格(box)。
     

邏輯實現

1. 更新省、市、區信息
   將picker組件中的具體省份改為{{region}}，接著為該組件追加自定義的bindchange事件，用于監聽選項變化；
   
   由于地區選擇器的返回結果是數組的形式，因此在JS文件的data中定義一個包含省、市、區三個項目的數組，初始信息由開發者自己定義。
   
2. 獲取實況天氣數據
   在JS文件中添加自定義getWeather函數進行實況天氣數據的獲取，后續的天氣查詢以城市作為查詢依據。
   
   將定義的getWeather函數在生命周期函數onLoad和regionChange中分別調用，表示當頁面加載時和切換城市時均主動獲取一次實況天氣數據。
   
   編譯后重新運行會在控制臺得到第三方服務器發揮的JSON數據，如圖所示。
   
3. 更新頁面天氣信息
   將WXML頁面上的所有零食數據都替換成{{now.屬性}}的形式，為了加快獲取數據的速度，最好在IS文件的data中為now規定初始數據，在獲取到實際數據之前可以臨時顯示這些數據。
   
   

三、程序運行結果

可以成功獲取動態獲取各城市天氣：

四、問題總結與體會

主要問題及解決方案

1. API配置問題

   • 問題：URL地址不完整，域名未加入白名單

   • 解決：配置完整API地址，在小程序后臺添加域名白名單

2. 參數格式錯誤

   • 問題：使用城市名稱而非城市代碼

   • 解決：建立城市名稱到代碼的映射關系

3. 數據字段不匹配

   • 問題：API返回字段與代碼期望字段不一致

   • 解決：修正字段映射關系

4. 圖標格式錯誤

   • 問題：代碼引用PNG格式，實際為SVG格式

   • 解決：修改圖標路徑為正確的SVG格式

5. 缺少動態更新

   • 問題：location參數硬編碼，無法動態切換城市

   • 解決：實現getCityCode函數，支持動態城市代碼獲取

主要收獲

1. 微信小程序開發技能
   • 學會了picker組件的多級聯動，支持省市區三級選擇
   • 理解了數據綁定機制和setData的使用方法
   • 更加熟悉小程序的生命周期函數（onLoad、onShow等）
2. 網絡編程與API集成
   • 學會了使用wx.request接口，了解API及服務器域名配置
   • 掌握了JSON數據的解析和字段映射技巧
3. 調試與問題解決能力
   • 熟練使用微信開發者工具的調試功能和網絡面板
   • 掌握了系統性的問題分析方法：問題定位→原因分析→解決方案→驗證測試
   • 提升了閱讀官方文檔和API文檔的能力