背景

關于esp8266制作氣象小站的想法，其實好幾個月之前就有了，但是由于本地環(huán)境配置問題，arduino代碼一直編譯不成功，一直也不想搞。

上周趁著周末疫情封控在家，沒啥事，花了兩天時間，總算把arduino環(huán)境搞好了，當然這個過程也踩了很多坑，內(nèi)容已經(jīng)梳理了，后面我再調(diào)整下下分享給大家。

我覺得整個過程還是特別有意義，至少讓我搞明白了arduino的環(huán)境是怎么一回事，這一點我相信好多小伙伴都沒搞明白，特別是arduino剛?cè)腴T的小白（比如我，當然我現(xiàn)在算是明白了）。

今天的這個項目對于有arduino和esp8266（或者其他開發(fā)板）基礎的小伙伴來說，難度基本為零，當然唯一我覺得有難度的點就是和風天氣的數(shù)據(jù)解析優(yōu)化，這塊我已經(jīng)優(yōu)化完了，各位小伙伴可以直接用，好了，話不多說，讓我們直接開始吧。

制作過程

硬件準備

首先，你需要如下材料：

• OLE屏幕：這個是必須的，沒有這個天氣沒法顯示，某寶上十幾塊錢一塊。這里我用的是一塊0.96英寸的小屏幕

• 一個esp8266開發(fā)板：其他開發(fā)板也可以，但是環(huán)境記得切換，代碼層面需要優(yōu)化，沒有基礎的小伙伴建議直接上8266開發(fā)板，這樣你就可以閉著眼睛按照我的操作搞了。

• 連接導線：連接屏幕和開發(fā)板。

環(huán)境準備

開發(fā)環(huán)境

這里你要確保自己本地arduino開發(fā)環(huán)境正常，同時安裝了8266的編譯環(huán)境，沒有基礎的小伙伴可以稍等兩天，這塊的內(nèi)容這兩天也會同步。

天氣接口

這里建議大家直接去和風官方網(wǎng)站注冊自己的開發(fā)者賬號，免費賬號會送1000次/日的調(diào)用次數(shù)，滿足個人使用需求。注冊地址如下：

https://dev.qweather.com/

輸入賬號和密碼直接下一步就可以，注冊成功后直接登錄，然后進入控制臺：

在項目管理菜單下，創(chuàng)建我們的項目：

一個賬號只能創(chuàng)建一個免費訂閱的項目，適用平臺選擇web API：

之后復制保存我們的key，在代碼中這個key用于同步天氣信息（接口鑒權）:

至此，接口注冊完畢，下面開始擼代碼。

擼代碼

這里我們參考了gitee的一個開源項目，地址如下：

https://gitee.com/taijichuangke/bilibili_weather_clock

但是由于該項目已經(jīng)兩年沒有更新了，所以代碼層面需要優(yōu)化，有基礎的小伙可以直接去看源碼，可以自己動手修改，沒有基礎的小伙伴建議直接看我的代碼，代碼開源地址如下：

https://github.com/Syske/esp8266-clock-weather

庫文件

首先，我們要把項目依賴的庫文件復制到arduino的libraries目錄下，主要有三個庫：

修改代碼

基本配置

然后修改Esp8266_Clock_Weather.ino的相關配置，主要是和風天氣的key和wifi的相關配置：

這里可以看到需要配置wifi密碼、?B站的id、和風天氣的key和城市信息。

其中，wifi就直接填寫名稱和密碼即可，當然代碼中也提供了網(wǎng)頁端的配網(wǎng)方式，我覺得這個方式不好用，所以采用了硬編碼的方式，想用配網(wǎng)方式的小伙伴可以去看下源碼（目前該方式被注釋掉了）；

和風天氣的key就是我們前面說的key，城市信息可以通過下面的地址進行查詢：

# 官方提供的查詢接口好像沒啥用，還是直接從文件中搜索更方便https://github.com/qwd/LocationList/blob/master/China-City-List-latest.csv

B站id配置主要是獲取B站的粉絲數(shù)，不需要的小伙伴可以刪除相關邏輯。B站的id點擊自己的頭像就可以看到：

olde引腳配置

這里oled屏幕的引腳我連接的是4和5和開發(fā)板的對應關系如下，接線方式需要調(diào)整的小伙伴記得修改代碼：

這里再貼一下8266的引腳圖，方便各位小伙伴對照：

DHT溫濕度傳感器

因為我在代碼中增加了DHT11溫濕度傳感器的相關代碼，不需要的小伙伴可以刪除掉：

注意修改頁面數(shù)量和頁面數(shù)組：

刪除相關頁面繪制實現(xiàn)：

DHT11傳感器我用的是14號引腳，對應GPIO14--D5，接線如果不一樣，記得調(diào)整引腳：

完成以上代碼修改和連線操作之后，我們就可以燒錄代碼了，如果代碼層面沒有問題，一次正常點亮，預覽視頻如下：

至此，項目算是分享完了，下面我們分享下本次項目的修改過程和遇到的問題。

項目的修改范圍

前面我們說本次項目是基于bilibili_weather_clock修改的，為了讓想研究源碼的小伙伴清楚我們的修改范圍，下面我們對本次修改的內(nèi)容做一個簡單的說明。

wifi連接

這塊前面已經(jīng)說過了，原項目是基于配網(wǎng)方式實現(xiàn)的，默認情況下需要手機連接esp8266的wifi，然后進行配網(wǎng)，因為8266本身性能不是特別好，在配網(wǎng)過程中特別卡，反應很慢(當然可能和原作者使用了一個base64圖片有關)，所以我直接采取了硬編碼的方式，所以代碼中需要配置wifi的名稱和密碼，好處當然是配網(wǎng)更快，缺點嘛，如果你要換wifi就比較麻煩，需要重新燒錄代碼。

增加頁面

因為增加了DHT11的顯示，所以增加了一個頁面，這里有兩個改動點，一個是修改了頁面的數(shù)量和頁面frames的數(shù)組，另一個是增加了DHT11的數(shù)據(jù)讀取和顯示邏輯，這里需要注意的是，frames數(shù)組中增加的方法的參數(shù)必須和之前的方法保持一致，既必須是

OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y

方法的實現(xiàn)也很簡單，就是簡單的數(shù)據(jù)獲取和展示：

和風天氣解析邏輯

這塊應該是本次項目修改最大的地方，因為一開始頁面數(shù)據(jù)顯示都是異常的，最后發(fā)現(xiàn)有兩個問題，一個是接口地址和返回結果問題，和風天氣最新版本調(diào)整和接口地址和返回值，導致數(shù)據(jù)解析失敗，另一個問題是因為參數(shù)問題，導致返回結果亂碼，這也影響了第一個問題的排查。
首先是接口地址發(fā)生了變化，原代碼的接口地址是：

https://free-api.heweather.net/s6/weather/

而新的接口地址變成了：

https://devapi.qweather.com/v7/weather/

而且接口默認返回的數(shù)據(jù)是Gzip壓縮的，直接解析返回結果會亂碼：

需要在請求參數(shù)中增加gzip=n，這個參數(shù)的意思是不需要gzip壓縮，有了這個參數(shù)，數(shù)據(jù)就可以正常解析：

json數(shù)據(jù)發(fā)生變化，直接修改解析代碼即可：

這里給大家分享一個好用的json在線工具，可以根據(jù)我們提供的json數(shù)據(jù)自動生成解析代碼：

https://arduinojson.org/v6/assistant/

選擇開發(fā)板和入?yún)㈩愋?，這里需要注意版本，默認是v6，根據(jù)自己的庫版本選擇

輸入json數(shù)據(jù)：

第四步直接生成代碼：

總結

本次項目的難點其實就在于json數(shù)據(jù)的獲取和解析，因為剛好我是做web開發(fā)，所以json解析這塊沒有太大的壓力，但是還是被默認gzip壓縮這個坑了一把，導致返回解析異常，所以我在這里卡了好久，好在最終問題解決了，這里參考了csdn的一篇文章：

https://blog.csdn.net/weixin_42880082/article/details/111861897

當然這塊也給我提了個醒，后期如果在調(diào)用三方接口解析報錯，可以考慮看是否是類似問題。

整體來說，本項目難度還算適中，感興趣的小伙伴趕快動手自己試試吧！