javascript 一、入门指南

一、入门指南

本章将带您收集本书所需的所有硬件和软件，并在微控制器上运行您的第一个 JavaScript 应用程序。同时，本章还展示了如何使用 JavaScript 源代码级调试器xsbug的有用特性。

安装所有的软件工具和设置您的开发环境需要一点时间，但是一旦您可以运行一个示例，您就可以运行本书中的任何示例了。您还将拥有开始使用可修改的 SDK 编写自己的应用程序所需的一切。

硬件要求

本书中的大多数示例只需要很少的硬件，但您至少需要以下内容:

带有 USB 端口的电脑(macOS Sierra 版本 10.12 或更高版本、Windows 7 Pro SP1 或更高版本，或者 Linux)
微型 USB 电缆(高速、支持数据同步)
ESP32 节点 MCU 模块或 ESP8266 节点 MCU 模块

Note

所有的例子都在 ESP32 或 ESP8266 上运行，除了在第 4 章中讨论的使用蓝牙低能量(BLE)的例子只在 ESP32 上运行，因为 ESP8266 不支持 BLE。如果你对本书中的 BLE 例子感兴趣，你需要使用 ESP32。

如图 1-1 所示，使用 ESP32 和 ESP8266 模块对示例进行了测试。

img/474664_1_En_1_Fig1_HTML.jpg

图 1-1

ESP32(左)和 ESP8266(右)

使用传感器和致动器的示例(第 6 章和第 7 章)需要一些额外的组件:

触觉按钮
三色 LED(共阳极)
三个 330 欧姆电阻
微型伺服系统
TMP36 温度传感器
TMP102 温度传感器
迷你金属扬声器(8 欧姆，0.5W)
跳线

这些硬件组件如图 1-2 所示。在讨论它们的章节中提供了关于在哪里可以买到它们的更多信息。

img/474664_1_En_1_Fig2_HTML.jpg

图 1-2

章节 6 和 7 的硬件部件

使用 Poco 渲染器(第 9 章)或 Piu 用户界面框架(第 10 章)的示例可以在您计算机上的硬件模拟器上运行，但是强烈建议您使用实际的显示器并在您的 ESP32 或 ESP8266 上运行它们。如果您喜欢在试验板上将元件连接在一起，以下是您需要的:

img/474664_1_En_1_Fig3_HTML.jpg

图 1-3

ILI9341 QVGA 触摸显示器

ILI9341 QVGA 触摸显示屏(图 1-3 )，可在易贝和其他地方在线购买；搜索“spi display 2.4 touch”，你应该会找到几个不贵的选项。请注意，尽管这种显示效果很好，但还有许多其他选择。可修改的 SDK 包括对其他几种不同成本和质量的显示器的内置支持；有关更多信息，请参见可修改 SDK 的documentation/displays目录。
一块试验板。
公母跳线。

如果你不想自己布线，你可以从可修改的网站上购买一个可修改的或两个可修改的。可修改的是一个 ESP8266 有线电容触摸屏；Moddable Two 是一个连接到同一个触摸屏的 ESP32。两者都是紧凑外形的现成开发套件。图 1-4 显示了一个可修改的。

img/474664_1_En_1_Fig4_HTML.jpg

图 1-4

可修改的

可修改的 SDK 还支持基于 ESP32 的开发套件，带有内置屏幕。一个流行的选择是 M5Stack FIRE，如图 1-5 所示。有关支持的开发工具包的更多信息，请参见 GitHub 上的可修改的 SDK 库。

img/474664_1_En_1_Fig5_HTML.jpg

图 1-5

M5 栈火灾

软件需求

您需要以下软件:

代码编辑器
示例代码文件
可修改的 SDK
ESP32 和/或 ESP8266 的构建工具

您可以选择自己喜欢的代码编辑器。有许多 JavaScript 友好的编辑器，包括 Visual Studio 代码、Sublime Text 3 和 Atom。

接下来的部分将解释如何下载示例代码文件，以及如何为您的设备设置可修改的 SDK 和构建工具。

下载示例代码

所有的例子都可以在 https://github.com/Moddable-OpenSource/iot-product-dev-book 找到。您可以使用git命令行工具下载示例代码。

Note

在本书中，您在命令行上输入的命令前面有一个>符号。该符号不是命令的一部分；包含它只是为了阐明每个单独的命令从哪里开始。

在 macOS/Linux 上，使用终端:

> cd ~/Projects
> git clone https://github.com/Moddable-OpenSource/    iot-product-dev-book

在 Windows 上，使用命令提示符(将<username>改为您的用户名):

> cd C:\Users\<username>\Projects
> git clone https://github.com/Moddable-OpenSource/    iot-product-dev-book

您还需要设置EXAMPLES环境变量来指向示例存储库的本地副本，如下所示:

在 macOS/Linux 上:

```js

export EXAMPLES=~/Projects/iot-product-dev-book

```
在 Windows 上:

```js

set EXAMPLES=C:\Users\\Projects\ iot-product-dev-book

```

设置您的构建环境

在构建和运行示例之前，请遵循可修改 SDK 的documentation目录中的“可修改 SDK–入门”文档中的说明。本文档提供了安装、配置和构建适用于 macOS、Linux 和 Windows 的可修改 SDK 的分步说明，以及安装使用 ESP32 和 ESP8266 所需工具的说明。

使用`xsbug`

xsbug调试器提供运行在 XS JavaScript 引擎上的 JavaScript 代码的源代码级调试。它通过 USB 连接到设备，并具有图形用户界面(如图 1-6 所示)以使其易于使用。

img/474664_1_En_1_Fig6_HTML.jpg

图 1-6

xsbug调试器

与其他调试器类似，xsbug支持设置断点和浏览源代码、调用栈和变量。它还提供实时工具来跟踪内存使用情况，并分析应用程序和资源消耗。

当您为微控制器开发时，在目标设备上启动应用程序之前，构建系统会自动打开xsbug。

当开发桌面模拟器时，您需要自己打开xsbug，方法是双击它的应用程序图标或从命令行打开它，如下所示:

在 macOS 上:

```js

open $MODDABLE/build/bin/mac/release/xsbug.app

```
在 Windows/Linux 上:

```js

xsbug

```

本书中示例的重要特征

这本书不经常参考xsbug，因为例子都已经调试好了。然而，在您创建自己的应用程序时，xsbug是一个非常有价值的工具。本书中使用的最重要的xsbug特征如下:

img/474664_1_En_1_Fig7_HTML.jpg

图 1-7

xsbug机器标签和控制按钮

机器选项卡–连接到xsbug的每个 XS 虚拟机在窗口的左上角都有自己的选项卡(如图 1-7 中虚线边框所突出显示的)。单击选项卡会将左侧窗格切换到 machine 选项卡视图，您可以在其中查看仪器、使用控制按钮等。
控制按钮–这些位于机器选项卡视图顶部的图标按钮(在图中用虚线边框突出显示)控制虚拟机。从左到右分别是杀、破、跑、步、进、步。
控制台–能够在应用程序执行期间查看诊断信息通常很有用。trace函数将消息写入xsbug右下角的调试控制台。

关于xsbug所有特性的完整文档，请参见可修改 SDK 的documentation/xs目录下的xsbug文档。

运行示例

本书存储库中的例子是按章节组织的，每一章都有几个例子。为了更快地构建和启动示例，每个章节都有自己的主机，它包含运行该章节的示例所需的软件环境；主机是 JavaScript 模块、配置变量和其他可供应用程序使用的软件的集合。因为微控制器的空间非常有限，所以不可能有一台主机包含本书示例中使用的所有模块。

您可以将主机视为基本的应用程序。在 web 浏览器中运行 JavaScript 时，web 浏览器是主机；在 web 服务器上运行 JavaScript 时，Node.js 是主机。

单独安装主机，而不是将主机和示例一起安装，通过最大限度地减少需要下载的软件数量，大大加快了开发速度。在您的设备上安装主机通常需要 30 到 90 秒。完成后，您可以在几秒钟内安装大多数示例，因为主机已经包含了示例所需的设备固件和 JavaScript 模块。

接下来的小节将带您完成安装主机的整个过程，然后是一个示例，从helloworld开始。请注意，在本书的上下文中，安装应用程序会导致该应用程序在设备上运行。

安装主机

第一步是刷新设备以安装主机。如果你好奇的话，可以在host目录中找到每一章主机的源代码。要使用主机，您真正需要知道的是，它包含了相应示例所需的所有模块。

您使用mcconfig命令行工具来刷新设备。

`mcconfig`

mcconfig命令行工具在微控制器或模拟器上构建和安装应用程序。这里提供了用于在每个支持的平台上安装本章主机的命令。

在 ESP32 上，使用以下命令:

在 macOS/Linux 上:

```js

cd $EXAMPLES/ch1-gettingstarted/host mcconfig -d -m -p esp32

```
在 Windows 上:

```js

cd %EXAMPLES%\ch1-gettingstarted\host mcconfig -d -m -p esp32

```

在 ESP8266 上，使用以下命令:

在 macOS/Linux 上:

```js

cd $EXAMPLES/ch1-gettingstarted/host mcconfig -d -m -p esp

```
在 Windows 上:

```js

cd %EXAMPLES%\ch1-gettingstarted\host mcconfig -d -m -p esp

```

确认主机已安装

一旦主机安装完毕，它会将图 1-8 所示的消息写入调试控制台。

img/474664_1_En_1_Fig8_HTML.jpg

图 1-8

xsbug中来自主机的消息

安装`helloworld`

helloworld示例只包含三行 JavaScript 代码:

debugger;
let message = "Hello, World";
trace(message + "\n");

这个例子使用了两个重要的特性:

debugger语句，它停止执行并中断到xsbug。
trace函数，它将消息写入调试控制台。注意trace不会自动在消息末尾添加一个换行符(\n)。这使您能够使用几个trace语句来生成一行的输出。确保在行尾包含换行符，以便文本在xsbug中正确显示。

您使用mcrun来安装示例。

`mcrun`

mcrun命令行工具构建并安装额外的 JavaScript 模块和资源，改变微控制器或模拟器上可修改应用的行为或外观。mcconfig和mcrun都构建脚本和资源。与mcrun不同，mcconfig也构建本地代码。用 JavaScript 术语来说，mcconfig构建主机。

使用mcrun安装示例后，设备会重新启动。这将重新启动主机，主机将运行您安装的示例。

使用以下命令安装helloworld示例。确保您将<platform>更改为适合您设备的正确平台，无论是esp32还是esp。

在 macOS/Linux 上:

```js

cd $EXAMPLES/ch1-gettingstarted/helloworld mcrun -d -m -p

```
在 Windows 上:

```js

cd %EXAMPLES%\ch1-gettingstarted\helloworld

mcrun -d -m -p

```

收尾工作

一旦安装了应用程序，您应该立即进入xsbug。点击运行按钮，可以看到写入调试控制台的消息Hello, World，如图 1-9 所示。

img/474664_1_En_1_Fig9_HTML.jpg

图 1-9

Hello、World写入xsbug中的控制台

如果一切顺利，如果您使用的是裸 NodeMCU 板，那么您可以进入本章的“结论”部分。如果您想要添加显示器(强烈建议),请继续“添加显示器”一节。

如果您遇到了问题，请参阅下一节。

解决纷争

当你试图安装一个应用程序时，你可能会遇到错误或警告形式的障碍；本节解释了一些常见问题以及如何解决这些问题。

设备未连接/未识别

错误消息

error: cannot access /dev/cu.SLAB_USBtoUART

意味着该设备未连接到您的电脑，或者电脑无法识别该设备。发生这种情况有几个原因:

您的设备没有插入计算机。运行构建命令时，请确保它已接通电源。
您有一根 USB 电缆，只能通电。确保您使用的是支持数据同步的 USB 电缆。
计算机无法识别您的设备。要解决此问题，请参阅您的操作系统下面的说明。

macOS/Linux

要测试您的计算机是否识别您的设备，请拔下设备并输入以下命令:

> ls /dev/cu*

然后插入设备并重复相同的命令。如果没有新内容出现，则设备未被检测到。确保您安装了正确的 VCP 驱动程序。

如果看到了，您现在就有了设备名称，并且需要编辑UPLOAD_PORT环境变量。输入以下命令，用系统上的设备名称替换/dev/cu.SLAB_USBtoUART:

> export UPLOAD_PORT=/dev/cu.SLAB_USBtoUART

Windows 操作系统

检查设备管理器中的 USB 设备列表。如果您的设备显示为未知设备，请确保您安装了正确的 VCP 驱动程序。

如果您的设备出现在 COM3 以外的 COM 端口上，您需要编辑UPLOAD_PORT环境变量。输入以下命令，将COM3替换为适合您系统的设备 COM 端口:

> set UPLOAD_PORT=COM3

不兼容的波特率

以下警告消息是正常的，不必担心:

warning: serialport_set_baudrate: baud rate 921600 may not work

但是，有时上传开始但没有完成。当跟踪到控制台的进度条达到 100%时，您可以判断上传完成。例如:

...................................................... [ 16% ]
...................................................... [ 33% ]
...................................................... [ 49% ]
...................................................... [ 66% ]
...................................................... [ 82% ]
...................................................... [ 99% ]
..                                                    [ 100% ]

上传可能中途失败有几个原因:

你的 USB 线有问题。
您的 USB 电缆不支持更高的波特率。
您使用的主板要求的波特率低于可修改 SDK 使用的默认波特率。

要解决最后两个问题，您可以更改为较慢的波特率，如下所示:

如果您正在使用 ESP32，请打开moddable/tools/mcconfig/make.esp32.mk；如果是 ESP8266，打开moddable/tools/mcconfig/make.esp.mk。
找到这一行，它将上传速度设置为 921，600:

UPLOAD_SPEED ?= 921600

将速度设置为较小的数值。例如:

UPLOAD_SPEED ?= 115200

设备不处于引导加载模式

如果您使用某些基于 ESP32 的主板，这个问题并不罕见。当您尝试刷新设备时，会短暂停止跟踪状态消息，几秒钟后您会收到以下错误消息:

A fatal error occurred: Failed to connect to ESP32: Timed out waiting for packet header

如果设备不处于引导加载程序模式，则不能刷新设备。如果您使用的是 NodeMCU 模块，请在每次刷新时遵循以下步骤:

img/474664_1_En_1_Fig10_HTML.jpg

图 1-10

ESP32 上的启动按钮

拔下设备插头。
按住开机按钮(图 1-10 中圈出)。
将设备插入电脑。
输入mcconfig命令。
等待几秒钟，然后松开启动按钮。

添加显示器

虽然本书中的大多数示例都不需要显示器，但在 ESP32 或 ESP8266 中添加显示器可以极大地改善用户体验。它使您能够执行以下操作:

显示比几个闪烁的灯更多的信息
创建现代用户界面
添加功能

本书中的示例是为分辨率为 240 x 320 或 320 x 240 的显示器设计的(例如，QVGA)。这些显示器的尺寸通常在 2.2 英寸到 3.5 英寸之间，在早期的智能手机中很常见。其他尺寸的显示器也可以连接到这些微控制器，但这个尺寸与这些微控制器的性能非常匹配。

以下部分说明如何将 ILI9341 QVGA 触摸显示器连接到 ESP32 或 ESP8266。如果您使用的是 Moddable One 或 Moddable Two 这样的开发板，您可以跳到“安装 helloworld-gui”一节。

将显示器连接到 ESP32

表 1-1 和图 1-11 显示了如何将显示器连接到 ESP32。

img/474664_1_En_1_Fig11_HTML.jpg

图 1-11

将显示器连接到 ESP32 的接线图

表 1-1

将显示器连接到 ESP32 的接线

ILI9341 显示器

ESP32

| | --- | --- | | SDO/MISO | GPIO12 | | 发光二极管 | 3.3V | | 血清肌酸激酶 | GPIO14 | | SDI/MOSI | GPIO13 | | 特许测量员 | GPIO15 | | 直流电 | GPIO2 | | 重置 | 3.3V | | 地线 | 地线 | | VCC | 3.3V | | 唐岛 | GPIO12 | | T_DIn | GPIO13 | | S7-1200 可编程控制器 | GPIO14 | | T_IRQ | GPIO23 | | S7-1200 可编程控制器 | GPIO18 |

将显示器连接到 ESP8266

表 1-2 和图 1-12 显示了如何将显示器连接到 ESP8266。

img/474664_1_En_1_Fig12_HTML.jpg

图 1-12

将显示器连接到 ESP8266 的接线图

表 1-2

将显示器连接到 ESP8266 的接线

ILI9341 显示器

ESP8266

安装`helloworld-gui`

helloworld-gui示例是在屏幕上显示文本的helloworld的一个版本。如果您自己将显示器连接到设备，使用helloworld-gui应用程序刷新设备是测试连接是否正确的好方法。

要使用的命令与用于安装helloworld的命令非常相似。唯一的区别是平台标识符。平台标识符告诉构建系统包括适当的显示和触摸驱动程序。如果您使用的是可修改的，平台标识符是esp/moddable_one；对于一个可修改的二，它是esp32/moddable_two。如果您根据前面章节的说明添加了一个显示器，平台标识符为esp32/moddable_zero或esp/moddable_zero。

使用以下命令安装helloworld-gui示例。确保将<platform>更改为适合您设备的正确平台。

在 macOS/Linux 上:

```js

cd $EXAMPLES/ch1-gettingstarted/helloworld-gui mcconfig -d -m -p

```
在 Windows 上:

```js

cd %EXAMPLES%\ch1-gettingstarted\helloworld-gui mcconfig -d -m -p

```

如果您指定了正确的平台并且您的接线正确，您将看到如图 1-13 所示的屏幕。

img/474664_1_En_1_Fig13_HTML.jpg

图 1-13

图形helloworld应用程序

结论

既然您的开发环境已经设置好，并且您已经熟悉了在您的设备上安装本章示例的过程，那么您已经准备好尝试更多的示例了！

此时，你已经掌握了跟随第 2 章到第 10 章的所有材料和技能。这些章节彼此独立，所以你可以按任何顺序阅读。当您开始使用某一章中的示例时，一定要安装该章的主机，否则在启动示例时会遇到错误。一旦你对可修改的 SDK 的 API 感到满意，你就可以进入第 11 章了，这一章涵盖了更高级的主题。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/2100.html

javascript 查看更多书籍

《JavaScript ESP32 和 ESP8266 物联网开发教程》

分类

最近更新

javascript 一、入门指南

一、入门指南

硬件要求

软件需求

下载示例代码

设置您的构建环境

使用`xsbug`

本书中示例的重要特征

运行示例

安装主机

`mcconfig`

确认主机已安装

安装`helloworld`

`mcrun`

收尾工作

解决纷争

设备未连接/未识别

macOS/Linux

Windows 操作系统

不兼容的波特率

设备不处于引导加载模式

添加显示器

将显示器连接到 ESP32

将显示器连接到 ESP8266

安装`helloworld-gui`

结论

留言

联系客服

数据知识

系统公告

开发文档

javascript查看更多书籍

《JavaScript ESP32 和 ESP8266 物联网开发教程》

javascript 一、入门指南

一、入门指南

硬件要求

软件需求

下载示例代码

设置您的构建环境

使用xsbug

本书中示例的重要特征

运行示例

安装主机

mcconfig

确认主机已安装

安装helloworld

mcrun

收尾工作

解决纷争

设备未连接/未识别

macOS/Linux

Windows 操作系统

不兼容的波特率

设备不处于引导加载模式

添加显示器

将显示器连接到 ESP32

将显示器连接到 ESP8266

安装helloworld-gui

结论

留言

联系客服

javascript 查看更多书籍

使用`xsbug`

`mcconfig`

安装`helloworld`

`mcrun`

安装`helloworld-gui`