www.8ms.xyz 入門教程,

[詳細資料獲取](http://doc.8ms.xyz/docs/gui-001/gui-001-1cinrj630tggq)

一、 注冊個人賬號
1.點擊主頁的“開發(fā)中心”

2.跳轉到登錄/注冊界面

3．點擊“沒有帳號？去注冊”

4．輸入帳號后進入選擇硬件平臺界面

二、 快速入門（克隆應用集市工程）
注意：直接在應用集市編譯工程會提示無權限，需要克隆后再編譯

進入硬件平臺界面–點擊“1”進入應用集市

點擊“1”選擇克隆

克隆成功后的提示：“復制成功”

查看克隆的項目–我的項目查看

點擊克隆的項目（本次以“點點點”為例）進行編譯
點擊“1”中的編譯—>點擊“2”中的編譯編譯

判斷工程是否編譯成功

燒錄工程到硬件平臺
點擊下載 bin 文件（文件如“3”所示）

使用燒錄工具燒錄 bin 文件
燒錄工具下載地址：
https://www.espressif.com/sites/default/files/tools/flash_download_tool_v3.8.5_1.zip

成功下載到硬件平臺

三、 以 ESP32 為例新建一個工程
1、 點擊 ESP32（“ 1 ”）進入應用集市

點擊“我的項目

點擊“新建項目”

4、進入設計頁面

5、 點擊編譯

6、 下載 bin 文件

7、燒錄

四、 工作區(qū)說明

1”菜單欄：按照平臺所支持的功能分組排列。 “2”快捷選擇區(qū)：提供常用的快捷按鈕，例如：編譯、下載 bin 等功能。
“3”項目場景和控件列表區(qū)：列出該項目所擁有的項目場景及當前場景下的所有控件。
“4”主題選擇區(qū)：目前平臺提供兩種主題：淺色模式和暗色模式。
“5”控件選擇區(qū)：平臺所支持的所有控件（鼠標停留在控件處即可顯示控件名稱），點擊控件即可在當前
場景創(chuàng)建該控件。
“6”控件編輯區(qū)：畫布大小即對應硬件平臺的顯示大小，控件在畫布的相對位置就是對應硬件平臺的顯示
位置。
“7”帳號項目分享、評論區(qū)：提供項目發(fā)布、分享、評論等功能。
“8”場景（或控件）屬性區(qū)：選擇場景（或控件）后，屬性區(qū)出現(xiàn)對應的屬性設置選擇。
頁面布局

“1”：頁簽切換
作用：選擇頁簽切換場景的控件；

使用：創(chuàng)建頁簽切換之前需要創(chuàng)建場景，為添加頁簽對應場景做準備，頁簽和場景是一一對
應的，有多少個頁簽就有多少個場景。添加頁簽屬性（b）可以添加頁簽和場景 ID。

“2”：滑動面板
作用：在硬件平臺上實現(xiàn)界面滑動效果；

使用：點擊滑動面板（b）創(chuàng)建到畫布處，創(chuàng)建三個場景（a），在內(nèi)容（c）選擇滑動面板的
左中右屏幕內(nèi)容。

“3”：頁面
(待實現(xiàn))
簡單實現(xiàn)

“1”：文本
作用：添加文字內(nèi)容

使用：點擊“a”即可創(chuàng)建文本控件，在“c”處可以設置文本屬性，例如：文本內(nèi)容、背景顏色、
字體大小等。

“2”：圖片
作用：添加圖片
注意事項：
選取的圖片名字不以中文名稱并且像素大小不大于畫布大小；添加動圖的幀數(shù)不宜過多。

“3”：圓環(huán)（可以設置為“弧形滑動條”）

使用：點擊圓環(huán)（“a”）即可創(chuàng)建該控件；在屬性區(qū)可設置該控件的參數(shù)，如果想在硬件平
臺實現(xiàn)滑動的圓環(huán)則需要將圓弧類型設置為：“弧形滑動條”。

“4”：文本域
作用：簡單理解：平臺輸入用戶和密碼的區(qū)域就是一個文本域；

使用：點擊文本域（“a”）即可創(chuàng)建該控件；在屬性區(qū)(“b”)可設置該控件的參數(shù)。
動態(tài)顯示

“1”：滑塊
作用：當拖動按鈕時對應的值會發(fā)生改變；

使用：點擊滑塊（“a”）即可創(chuàng)建該控件；在屬性區(qū)(“b”)可設置該控件的參數(shù)。

“2”：復選框

使用：點擊復選框（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“b”）可設置該控件的參數(shù)。

“3”開關
作用：普通開關不能添加圖片作為開關的樣式；

使用：點擊開關（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“c”）可設置該控件的參數(shù)。

“4”進度條
作用：顯示進程，主要由背景和指示組成；

使用：點擊進度條（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“b”）可設置該控件的參數(shù)。

“5”下拉框
作用：下拉顯示文本內(nèi)容

使用：點擊下拉框（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“c”）可設置該控件的參數(shù)。

“6”對話框

使用：點擊對話框（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“c”）可設置該控件的參數(shù)

“7”預加載提示

使用：點擊預加載顯示（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“b”）可設置該控件的參數(shù)。

“8”選擇器

使用：點擊選擇器（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“b”）可設置該控件的參數(shù)。
人機交互

“1”按鈕
作用：開發(fā)者可以自定義顯示樣式（支持圖片）；

使用：點擊按鈕（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“b”）可設置該控件的參數(shù)。
“2”列表

使用：點擊列表（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“b”）可設置該控件的參數(shù)

“3”折線
注意：需要兩個及以上的坐標，否則看不到線；

使用：點擊折線（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“b”）可設置該控件的參數(shù)。

功能控件

“1”日歷

使用：點擊日歷（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“b”）可設置該控件的參數(shù)

“2”儀表盤

使用：點擊儀表盤（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“b”）可設置該控件的參數(shù)。

“3”LED

使用：點擊 LED（“a”）即可創(chuàng)建該控件；在屬性區(qū)（“b”）可設置該控件的參數(shù)。

五、 功能積木

“1”菜單欄
“2”快捷選擇區(qū)
“3”積木功能區(qū)
“4”積木/代碼區(qū)
“5” “6”
流程/事件區(qū)

UI

“1” 當“i”按鈕發(fā)生–修改“i”為按鈕控件的 id 即可綁定該控件。
“2” 選擇框“i”值發(fā)生改變–修改“i”為選擇框控件的 id 即可綁定該控件。
“3” 下拉列表“i”值發(fā)生改變時–修改“i”為下拉列表控件的 id 即可綁定該控件。
“4” 列表框“i”被點擊–修改“i”為列表框控件的 id 即可綁定該控件。
“5” 當點擊對話框“i”按鈕–修改“i”為對話框控件的 id 即可綁定該控件。
“6” 滑塊“i”值發(fā)生改變–修改“i”為滑塊控件的 id 即可綁定該控件。
“7” 滑塊“i”值發(fā)生改變–修改“i”為滑塊控件的 id 即可綁定該控件。
“8” 開關“i”按鈕發(fā)生改變–修改“i”為開關控件的 id 即可綁定該控件。
“9” 當文本框“i”內(nèi)容發(fā)生改變–修改“i”為文本框控件的 id 即可綁定該控件。
提示：點擊“Code”即可查看對應控件生成的代碼。
Demo
功能：點擊按鈕，進度條顯示的值為 1-100 的隨機值；
控件選擇：人機交互中的按鈕和動態(tài)顯示的進度條；
布局（混合）–積木實現(xiàn)過程：
注意：按鈕和進度的控件需要提前在畫布存在，否則沒有 id 選擇。
當按鈕被點擊時：流程/事件–UI—選擇當“i”按鈕發(fā)生（“1”）–綁
定控件 id：將“i”修改為實際工程的按鈕 id；
進度條：UI 控件—進度條—設置進度條（“2”）-選擇控件（綁定進度
條 id）–基本功能—選擇“4”覆蓋進度條中的“50”；

如下圖所示：

通信/IOT

“1” http 響應回調(diào)
“2” 當 wifi 連接成功
Demo：參考“智能天氣”
（配合 2、基本功能—解編碼和 4、通信/IOT 使用）

硬件
（待實現(xiàn)）
基本功能
編解碼

“1” 銷毀 json
“2” 通過鍵“ ”獲取 json 的值
“3” 初始化 json
“4” 如果鍵“”在 json 內(nèi)
循環(huán)

“1” 跳出循環(huán)
“2” 變量“i”從“1”數(shù)到“10”每次增加“1”
“3” 重復“10”次執(zhí)行
“4” 當條件滿足時重復執(zhí)行
數(shù)學

積木里面的數(shù)值均可修改
“1”“1”+“1”
“2” 取“64”÷“10”的余數(shù)
“3” “123”
“4” 從“1”到“100”范圍內(nèi)的隨機整數(shù)
“5” 四舍五入 3.1
“6” “平方根”9
“7” “sin” 45
文本

在文本積木里面可以添加自定義文本，例如“8ms.xyz”
邏輯

“1” 如果-執(zhí)行
“2” “真”
“3” “=”
“4” “非”
“5” “空”
“6” “并且”
“7” 比較字符串與
“8” 斷言如果為真如果為假

**UI 控件**

控件實例

“1”“2”等控件實例數(shù)量的多少取決于設計器存在的控件和場景的數(shù)量。
基礎

“1”設置控件可點擊“選擇 UI 控件”——點擊“選擇 UI 控件”修改對應的控件 id 即可
綁定該控件；
狀態(tài)為“真”或“假”看實際需求。
“2”“顯示”或“隱藏看實際需求” ；“選擇 UI 控件”——點擊“選擇 UI 控件”修改對
應的控件 id 即可綁定該控件。
“3” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“4” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件；x 坐標、y 坐標的值可以
點擊“50”修改為自己所需要的值，但不要超過畫布大小。
“5” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件；寬度、高度的值可以點
擊“50”修改為自己所需要的值，但不要超過畫布大小。
“6” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。

文本框

示例：在設計器處選擇簡單顯示/文本；在 Blockly 選擇文本框，點擊“選擇 UI 控件”修
改 對 應 的 label 控 件 id 即 可 綁 定 該 控 件 。 如 下 圖 所 示 ：

按鈕

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件；點擊“ ”可自定義添加
文本內(nèi)容。
“2” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。

圖片

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“2” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。

對話框

開關

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“2” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。

滑塊

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“2” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件；修改“50”中的數(shù)值即
可設置滑塊控件的數(shù)值。

下拉列表

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“2” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件；修改第“1”個中的數(shù)值
即可設置列表框的順序。

控件動畫

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“2” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“3” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。

選擇框

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“2” 提供“選中”“取消選中”；點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控
件。

列表框

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。

進度條

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“2” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件；數(shù)值可以點擊“50”修
改該值且范圍在 0-100。

LED

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件；狀態(tài)提供“真”、“假”
選擇。
“2” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件；亮度可以修改為 0-255
中的任意整數(shù)值。
“3” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。

儀表盤

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“2” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件；該值需要配合設計器處
的儀表盤使用。

選擇器

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“2” 提供“上”“下”進行選擇；點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控
件。

輸入框

“1” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“2” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。
“3” 點擊“選擇 UI 控件”修改對應的控件 id 即可綁定該控件。

通訊/IOT
HTTP

該 Blockly 需要搭配使用，如有需求可參考應用集市中的智能天氣。

基礎硬件
藍牙

串口
（功能待實現(xiàn)）
GPIO

PWM

ADC

WIFI

拓展配件
紅外
存儲
系統(tǒng)信息

其它

總結

以上是生活随笔為你收集整理的小明分享：8ms平台入门教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。