小明分享：8ms平台入门教程

www.8ms.xyz 入门教程,

[详细资料获取](http://doc.8ms.xyz/docs/gui-001/gui-001-1cinrj630tggq)

一、注册个人账号
1.点击主页的“开发中心”

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、烧录

四、工作区说明

1”菜单栏：按照平台所支持的功能分组排列。 “2”快捷选择区：提供常用的快捷按钮，例如：编译、下载 bin 等功能。
“3”项目场景和控件列表区：列出该项目所拥有的项目场景及当前场景下的所有控件。
“4”主题选择区：目前平台提供两种主题：浅色模式和暗色模式。
“5”控件选择区：平台所支持的所有控件（鼠标停留在控件处即可显示控件名称），点击控件即可在当前
场景创建该控件。
“6”控件编辑区：画布大小即对应硬件平台的显示大小，控件在画布的相对位置就是对应硬件平台的显示
位置。
“7”帐号项目分享、评论区：提供项目发布、分享、评论等功能。
“8”场景（或控件）属性区：选择场景（或控件）后，属性区出现对应的属性设置选择。
页面布局

“1”：页签切换
作用：选择页签切换场景的控件；

使用：创建页签切换之前需要创建场景，为添加页签对应场景做准备，页签和场景是一一对
应的，有多少个页签就有多少个场景。添加页签属性（b）可以添加页签和场景 ID。

“2”：滑动面板
作用：在硬件平台上实现界面滑动效果；

使用：点击滑动面板（b）创建到画布处，创建三个场景（a），在内容（c）选择滑动面板的
左中右屏幕内容。

“3”：页面
(待实现)
简单实现

“1”：文本
作用：添加文字内容

使用：点击“a”即可创建文本控件，在“c”处可以设置文本属性，例如：文本内容、背景颜色、
字体大小等。

“2”：图片
作用：添加图片
注意事项：
选取的图片名字不以中文名称并且像素大小不大于画布大小；添加动图的帧数不宜过多。

“3”：圆环（可以设置为“弧形滑动条”）

使用：点击圆环（“a”）即可创建该控件；在属性区可设置该控件的参数，如果想在硬件平
台实现滑动的圆环则需要将圆弧类型设置为：“弧形滑动条”。

“4”：文本域
作用：简单理解：平台输入用户和密码的区域就是一个文本域；

使用：点击文本域（“a”）即可创建该控件；在属性区(“b”)可设置该控件的参数。
动态显示

“1”：滑块
作用：当拖动按钮时对应的值会发生改变；

使用：点击滑块（“a”）即可创建该控件；在属性区(“b”)可设置该控件的参数。

“2”：复选框

使用：点击复选框（“a”）即可创建该控件；在属性区（“b”）可设置该控件的参数。

“3”开关
作用：普通开关不能添加图片作为开关的样式；

使用：点击开关（“a”）即可创建该控件；在属性区（“c”）可设置该控件的参数。

“4”进度条
作用：显示进程，主要由背景和指示组成；

使用：点击进度条（“a”）即可创建该控件；在属性区（“b”）可设置该控件的参数。

“5”下拉框
作用：下拉显示文本内容

使用：点击下拉框（“a”）即可创建该控件；在属性区（“c”）可设置该控件的参数。

“6”对话框

使用：点击对话框（“a”）即可创建该控件；在属性区（“c”）可设置该控件的参数

“7”预加载提示

使用：点击预加载显示（“a”）即可创建该控件；在属性区（“b”）可设置该控件的参数。

“8”选择器

使用：点击选择器（“a”）即可创建该控件；在属性区（“b”）可设置该控件的参数。
人机交互

“1”按钮
作用：开发者可以自定义显示样式（支持图片）；

使用：点击按钮（“a”）即可创建该控件；在属性区（“b”）可设置该控件的参数。
“2”列表

使用：点击列表（“a”）即可创建该控件；在属性区（“b”）可设置该控件的参数

“3”折线
注意：需要两个及以上的坐标，否则看不到线；

使用：点击折线（“a”）即可创建该控件；在属性区（“b”）可设置该控件的参数。

功能控件

“1”日历

使用：点击日历（“a”）即可创建该控件；在属性区（“b”）可设置该控件的参数

“2”仪表盘

使用：点击仪表盘（“a”）即可创建该控件；在属性区（“b”）可设置该控件的参数。

“3”LED

使用：点击 LED（“a”）即可创建该控件；在属性区（“b”）可设置该控件的参数。

五、功能积木

“1”菜单栏
“2”快捷选择区
“3”积木功能区
“4”积木/代码区
“5” “6”
流程/事件区

UI

“1” 当“i”按钮发生–修改“i”为按钮控件的 id 即可绑定该控件。
“2” 选择框“i”值发生改变–修改“i”为选择框控件的 id 即可绑定该控件。
“3” 下拉列表“i”值发生改变时–修改“i”为下拉列表控件的 id 即可绑定该控件。
“4” 列表框“i”被点击–修改“i”为列表框控件的 id 即可绑定该控件。
“5” 当点击对话框“i”按钮–修改“i”为对话框控件的 id 即可绑定该控件。
“6” 滑块“i”值发生改变–修改“i”为滑块控件的 id 即可绑定该控件。
“7” 滑块“i”值发生改变–修改“i”为滑块控件的 id 即可绑定该控件。
“8” 开关“i”按钮发生改变–修改“i”为开关控件的 id 即可绑定该控件。
“9” 当文本框“i”内容发生改变–修改“i”为文本框控件的 id 即可绑定该控件。
提示：点击“Code”即可查看对应控件生成的代码。
Demo
功能：点击按钮，进度条显示的值为 1-100 的随机值；
控件选择：人机交互中的按钮和动态显示的进度条；
布局（混合）–积木实现过程：
注意：按钮和进度的控件需要提前在画布存在，否则没有 id 选择。
当按钮被点击时：流程/事件–UI—选择当“i”按钮发生（“1”）–绑
定控件 id：将“i”修改为实际工程的按钮 id；
进度条：UI 控件—进度条—设置进度条（“2”）-选择控件（绑定进度
条 id）–基本功能—选择“4”覆盖进度条中的“50”；

如下图所示：

通信/IOT

“1” http 响应回调
“2” 当 wifi 连接成功
Demo：参考“智能天气”
（配合 2、基本功能—解编码和 4、通信/IOT 使用）

硬件
（待实现）
基本功能
编解码

“1” 销毁 json
“2” 通过键“ ”获取 json 的值
“3” 初始化 json
“4” 如果键“”在 json 内
循环

“1” 跳出循环
“2” 变量“i”从“1”数到“10”每次增加“1”
“3” 重复“10”次执行
“4” 当条件满足时重复执行
数学

积木里面的数值均可修改
“1”“1”+“1”
“2” 取“64”÷“10”的余数
“3” “123”
“4” 从“1”到“100”范围内的随机整数
“5” 四舍五入 3.1
“6” “平方根”9
“7” “sin” 45
文本

在文本积木里面可以添加自定义文本，例如“8ms.xyz”
逻辑

“1” 如果-执行
“2” “真”
“3” “=”
“4” “非”
“5” “空”
“6” “并且”
“7” 比较字符串与
“8” 断言如果为真如果为假

**UI 控件**

控件实例

“1”“2”等控件实例数量的多少取决于设计器存在的控件和场景的数量。
基础

“1”设置控件可点击“选择 UI 控件”——点击“选择 UI 控件”修改对应的控件 id 即可
绑定该控件；
状态为“真”或“假”看实际需求。
“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 即可绑定该控件；点击“ ”可自定义添加
文本内容。
“2” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。

图片

“1” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。
“2” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。

对话框

开关

“1” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。
“2” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。

滑块

“1” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。
“2” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件；修改“50”中的数值即
可设置滑块控件的数值。

下拉列表

“1” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。
“2” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件；修改第“1”个中的数值
即可设置列表框的顺序。

控件动画

“1” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。
“2” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。
“3” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。

选择框

“1” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。
“2” 提供“选中”“取消选中”；点击“选择 UI 控件”修改对应的控件 id 即可绑定该控
件。

列表框

“1” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。

进度条

“1” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件。
“2” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件；数值可以点击“50”修
改该值且范围在 0-100。

LED

“1” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件；状态提供“真”、“假”
选择。
“2” 点击“选择 UI 控件”修改对应的控件 id 即可绑定该控件；亮度可以修改为 0-255
中的任意整数值。
“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 需要搭配使用，如有需求可参考应用集市中的智能天气。

基础硬件
蓝牙

串口
（功能待实现）
GPIO

PWM

ADC

WIFI

拓展配件
红外
存储
系统信息

其它

小明分享：8ms平台入门教程相关推荐

小明分享|8ms平台下工程源码分析
今天小明为大家分享的是开发工具平台-8ms(www.8ms.xyz)工程源码分析 1.打开"8ms平台",创建工程制作完UI后,选中"编译"一栏,等待结束后,选 ...
微信小程序云开发初学者入门教程二
微信小程序云开发初学者入门教程二-前端操作数据库模块如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的 ...
小明分享|sigmstar SSD201/SSD202 针对MIPI的LCD屏配置操作说明分享,更多Sigmastar相关技术文档及沟通讨论,可以给小明留言,小明邀请你进入我们的技术沟通群
小明会定期分享SigmastarSSD201/202相关芯片技术文档!我们也有一个Sigmastar技术沟通群聊!有感兴趣的开发小伙伴也可以留言给小明,小明邀请你进入! SSD20X 平台 LCD ...
微信小程序云开发简单入门教程
文章目录 ###开场白: 云开发顾名思义就是后端开发,应该是微信上周才推出的开放能力,现在这让我想起了以前的leancloud,和更早的bmob了,而leancloud一早就开始支持微信小程序开发了 ...
最新《小甲鱼C++编程快速入门教程》
这套教程一共40讲,内容真心不错,其实大家看看目录也就能得出结论了 ===============课程目录=============== <鱼C论坛小甲鱼C++编程快速入门培训系列教程> ...
小明分享：SSD201/202系统烧录篇,多种烧录方式,小明都做了分享,有需要的小伙伴拿走不谢哈!更多资料需求可以关注我,我是启明云端的小明MM!
一.ISP 烧录当 flash 没有烧过系统或系统损坏时,可以先通过 ISP 烧录 boot,然后再通过 eth.usb 或 sd 烧录完整的系统. 下载并解压 tools/ssd201_ISP_5 ...
小明分享|分享8ms平台sigmastar SSD201/SSD202 开源框架的github
开源主题:8ms sigmastar SSD201/SSD202 开源地址: https://github.com/wireless-tag-com/8ms-sstar 地址:www.8ms.xyz ...
mpvue微信小程序动画_微信小程序框架之mpvue(入门教程)
本文章主要用于接触一段时间的微信小程序的开发者或者开发团队,当然,今天主要给大家分享一下,近期研究的mpvue,属于美团小程序框架,本期主要做基础的安装及配置说明,好了,我们首先还是简单了解一下mpv ...
【教程分享】Jmeter入门教程
好!回归学长每周的教程分享! PART2 >今天又来分享Jmter 因为最近好像有相关工作内容提前准备资修一下分享仅供参考- JMeter的作用对软件做压力测试 1.能够对HTTP和FTP服 ...

小明分享：8ms平台入门教程

小明分享：8ms平台入门教程相关推荐

最新文章

热门文章