提示：啟明云端從2013年起就作為Espressif（樂鑫科技）大中華區合作伙伴，我們不僅用心整理了你在開發過程中可能會遇到的問題以及快速上手的簡明教程。同時也用心推出了基于樂鑫的相關應用方案！希望你能第一時間了解并快速用上好的方案和產品！

---

先欣賞一下成果哈

一小時快速做完86盒UI

一、創建工程

創建項目有兩種方法，分別如下：
1、 從空白項目創建
先打開 8ms.xyz開發工具平臺，登陸成功后會直接進入應用中心，點擊右上角的 “進入工作臺”。

1.2、點擊新建項目，會彈出新建向導：

a)選擇芯片類型，輸入項目名稱，選擇相應的硬件型號，也可添加描述和標簽，點擊確定即可完成新建
b)項目新建好后，可在我的項目中進入項目工作區。目前硬件主要關系到不同的屏幕尺寸，所以不同的硬件對應的畫布尺寸也是不一樣的

---

2、 從推薦項目克隆 ，可獲取源碼，這樣可以加快開發進度

2.1、點擊推薦項目里的克隆圖標，可把推薦項目里的項目克隆到我的項目里。

2.2、點擊克隆圖標之后，會彈出復制成功字樣，表示克隆成功，可在我的項目中查看。

2.2、把項目克隆下來后，可在自己的工作臺對項目進行修改或者預覽，也可下載源碼在工程中修改，前提是需要安裝esp-idf和下載好86盒的工程模板，模板工程下載地址：https://github.com/wireless-tag-com/8ms-esp32/tree/ESP32S2。
①：可在線編譯并且預覽操作
②：如果對克隆項目修改，編譯后可下載源碼

后面將下載的源碼main文件夾的所有文件復制到模板8ms-esp32-ESP32S2–main文件夾內- - - 替換目標中的文件

使用VS Code打開8ms-esp32-ESP32S2文件夾進行修改或者直接編譯下載到自己的86盒上

---

三、頁面設計

1、 工作區說明：

① 菜單欄：按照平臺所支持的功能分組排列。
② 項目場景和控件列表區：列出該項目所擁有的項目場景及當前場景下的所有控件。
③ 控件選擇區：目前平臺有二十幾種控件，平臺所支持的所有控件（鼠標停留在控件處即可顯示控件名稱），點擊控件即可在當前場景創建所選控件。
④ 快捷選擇區：提供常用的快捷按鈕，例如：編譯、下載bin等功能。
⑤ 控件編輯區：畫布大小即對應硬件平臺的顯示大小，控件在畫布的相對位置就是對應硬件平臺的顯示位置。
⑥ 帳號項目分享、評論區：提供項目發布、分享、評論功能。
⑦ 場景（或控件）屬性區：選擇場景（或控件）后，屬性區出現對應的屬性設置選擇。
2、 示例講解（以ESP32彩色86盒為例可直接在應用中心克隆修改或編譯下載，僅供參考）：
本示例控件只用到了8個，分別是 “文本控件”、“圖片控件”、“按鈕控件”、“開關控件”、“列表控件”、“滑動面板控件”、“折線控件”、“滑塊控件”，控件的使用可參考8ms文檔（http://doc.8ms.xyz/docs/gui/gui-1bv10ne2i2u7q）。本示例demo設計了8個界面，分別為，如下圖所示：
2.1、歡迎使用界面制作（首界面）

本界面點擊“開始使用”進入“home”界面，主要使用到兩個圖片控件和兩個文本控件。
圖片控件可自適應圖片大小，可先按需求設計好圖片大小再上傳添加。
文本控件可按需求設置大小和顏色等屬性并添加點擊行為。
3.2、home系列界面制作
home系列界面制作主要用到三個場景，分別是 “home”、“home1”和“home2_clock”。
3.2.1、 home界面制作
“home”界面使用到了“滑動面板控件”控件，該控件功能可使界面實現滑動功能，左邊場景添加了home2_clock，中間場景添加了home1，如下圖所示。

3.2.2、 home1界面制作
“home1”界面主要實現兩個LED燈亮滅的控制，時間顯示和進入菜單界面。

2.2.3、 home2_clock界面制作
添加鬧鐘界面

3.1、菜單界面制作
菜單界面使用了圖片控件，設置了四個可點擊圖片跳轉選項，分別是首頁，房間1，鬧鐘和設置。

4.1、設置界面制作
設置界面，本界面使用了，label、折線和列表控件，列表控件可通過行來添加文本內容和圖片。

5.1、房間1界面制作
房間1界面使用到了label和圖片控件，主要實現4個LED燈的亮滅控制。

6.1、wifi連接界面制作
wifi界面使用到了label、圖片、折線和開關控件，通過開關控制搜索附近的wifi熱點，搜索期間圖片不斷旋轉。

7.1、添加設備界面制作
添加設備界面使用了label、圖片和折線控件，主要實現搜索期間圖片不斷旋轉。

---

四、邏輯編輯

1、 積木頁面工作區分布

積木頁面工作區主要有五大類（以ESP32為例）,分別：
① 流程/事件，主要存放定時器、UI事件和代碼片段等積木塊。
② 基本功能，主要存放if、for邏輯、數學運算和自定義代碼等積木塊。
③ UI控件，主要存放對控件和場景操作的積木塊，里面都對不同的控件進行分類存放。
④ 通信/IOT，主要存放操作HTTP/MQTT的積木塊。
⑤ 基礎硬件，主要存放對硬件的基礎操作，例如GPIO、串口等。
說明：可通過點擊Code查看已搭建的代碼，詳細內容可參考8ms積木文檔（http://doc.8ms.xyz/docs/gui/gui-1bv13q5igoveh）。

2、積木邏輯搭建，通過積木進行邏輯搭建，降低開發難度，使程序邏輯更加清晰（以ESP32彩色86盒為例）。

事件閃爍邏輯，通過自定義標志變量，使用定時器定時判斷標志實現閃爍。

圖片旋轉邏輯，使用定時器，定時旋轉圖片角度實現。

場景切換邏輯，添加UI事件，判斷點擊時跳轉到相應的頁面。

LED狀態控制邏輯，通過UI事件，判斷點擊時，讀取文本內容比較控制LED狀態。

列表點擊邏輯，通過UI事件，判斷讀取的按鈕文本進行比較實現頁面跳轉。

---

五、這時再來個在線預覽

在線模擬預覽，執行相同的代碼，預覽效果與實機一致，方便開發者進行調試。

相應的UI設計和積木搭建完成后點擊編譯（在線預覽），編譯成功后點擊預覽即可。

---

六、上傳自定義代碼

1、編寫自定義代碼

①test.c 內容

②test.h 內容

2、上傳自定義代碼到工程
通過自定義代碼，可以在本地先將對應的代碼邏輯編寫好，然后通過自定義上傳到平臺。

① 點擊文件展開文件列表。
② 點擊上傳自定義代碼，選擇編寫好的自定義代碼。
③ 點擊資源，可查看上傳的自定義代碼（如下圖所示）。

點擊刪除可刪除上傳的自定義代碼。
3、頭文件引用和函數調用

① 點擊基本功能->自定義代碼段->段外代碼積木添加test.h頭文件。
② 點擊基本功能->自定義代碼段->調用自定義函數積木調用funtion函數，可點擊積木藍色設置按鈕添加參數。

---

注意了，如果你不習慣用積木的方式，可以下載源碼后，繼續自己C來碼就好！啟明有做好項目的SDK封裝，在GITHUB上也有開源，挺好的！自己隨意想怎碼啥就弄啥！

喜歡我們，記得關注我們CSDN哈!

總結

以上是生活随笔為你收集整理的启明云端分享| 手把手教你基于DEMO源码快速进行86盒应用开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。