1. 物理计算与Web IDE为什么选择MakeCode Maker如果你对用代码点亮一盏LED灯、让电机转动或者制作一个能感知温度并自动通风的小装置感兴趣那么“物理计算”就是你正在寻找的钥匙。简单来说物理计算就是用软件代码去感知和控制物理世界硬件。它的核心魅力在于你写的每一行逻辑都能立刻在现实世界中得到反馈这种“所见即所得”的成就感是纯软件编程难以比拟的。过去要踏入这个领域门槛可不低。你需要安装复杂的IDE如Arduino IDE、配置开发板驱动、理解烧录工具链光是环境搭建就能劝退不少初学者。更别提不同操作系统Windows、macOS、Linux下的兼容性问题了。而MakeCode Maker的出现正是为了解决这些痛点。它是一个完全基于浏览器的物理计算编程平台你只需要一个现代浏览器Chrome、Edge、Firefox等打开maker.makecode.com就能开始编程没有任何安装步骤。这对于教育场景、工作坊或者只是想快速验证一个想法的开发者来说简直是福音。它的设计哲学非常明确降低门槛但不牺牲能力。平台提供了两种编程界面一种是类似Scratch的块编程通过拖拽彩色代码块来构建逻辑直观易懂特别适合编程新手和青少年另一种是完整的JavaScript文本编辑器为有经验的开发者提供了灵活的代码控制能力。最妙的是这两种视图是实时同步的——你在块编辑器中拖拽出的逻辑可以一键切换到JavaScript代码查看其等效实现反之亦然。这就像一个内置的“代码翻译器”能帮助初学者理解抽象语法背后的具体代码平滑地从图形化编程过渡到文本编程。我选择并推荐MakeCode Maker不仅仅是因为它的便捷性。经过多个实际项目验证我发现它在几个关键点上做得非常扎实真正的离线工作一旦页面加载完毕所有编译器、模拟器资源都缓存在浏览器中断网后依然可以编写、调试代码这对于移动开发或网络不稳定的环境至关重要。硬件仿真的深度它的模拟器不仅能运行代码逻辑还能根据你编写的程序动态生成对应的面包板接线图。你在点击“下载”之前就能在浏览器里完整地测试LED闪烁频率、传感器读数逻辑是否正确极大减少了硬件损耗和调试时间。对Adafruit生态的深度优化虽然它支持多厂商开发板但对Adafruit的Express系列如Feather M0 Express, Metro M0 Express, Trinket M0等支持最为成熟。从板载资源NeoPixel、按钮、加速度计的封装到UF2烧录流程的无缝集成体验非常流畅。注意很多人会混淆makecode.adafruit.com和maker.makecode.com。前者是专为Adafruit Circuit Playground Express这一款开发板定制的旧版编辑器。而后者Maker是新一代通用平台支持包括Circuit Playground Express在内的所有Adafruit Express系列板卡以及其他厂商的板卡并且强化了对面包板扩展项目的支持。对于新项目请直接使用maker.makecode.com。1.1 核心组件与工作流解析要高效使用MakeCode Maker理解其核心组件和标准工作流是关键。整个平台可以看作一个在浏览器中运行的微型集成开发环境其架构非常清晰。核心组件包括块/代码编辑器这是创作空间。左侧是功能分类的积木抽屉中间是编程画布右侧是实时模拟器。点击顶部的“Blocks/JavaScript”按钮可以切换视图。实时模拟器位于编辑器右侧。它不仅仅是一个逻辑模拟器更是一个交互式硬件模拟器。当你编写控制某个引脚的代码时模拟器会可视化该引脚的状态如高低电平对于支持的项目它甚至会显示一个虚拟的面包板上面有LED、电阻等元件并展示正确的接线方式。这是学习电路原理的绝佳工具。项目浏览器管理你的所有代码文件。对于简单项目通常只有一个主文件main.ts或main.blocks。但当你创建扩展包或复杂项目时可以在这里添加多个TypeScript/JavaScript文件。设置与扩展菜单齿轮图标里藏着重要功能。你可以在这里切换目标开发板、管理扩展包、查看项目属性如唯一的分享ID以及进行GitHub集成设置。标准开发工作流如下创建与编码访问maker.makecode.com点击“New Project”选择你的开发板例如Adafruit Feather M0 Express。随后在块编辑器或JavaScript编辑器中编写程序逻辑。仿真调试编写代码的同时右侧模拟器会自动重启并运行。你可以点击虚拟按钮、摇晃模拟设备来测试事件响应观察虚拟LED的闪烁是否符合预期。这一步完全在浏览器中完成无需连接任何硬件。硬件连接与烧录当仿真测试通过后用USB线将开发板连接至电脑。通常开发板会作为一个名为MAKECODE的U盘出现。如果没出现可能需要快速双击板载的RESET按钮使其进入UF2 Bootloader模式此时会出现一个以BOOT结尾的驱动器如FEATHERBOOT。一键下载在MakeCode编辑器中点击“Download”按钮会生成一个.uf2格式的文件。你只需将这个文件拖拽或复制到刚才出现的MAKECODE或xxxBOOT驱动器里。板载的LED会闪烁指示传输过程传输完成后开发板会自动复位并运行你的新程序。迭代与分享你可以继续修改代码重复步骤2-4。任何项目都可以通过点击“Share”按钮生成一个短链接其他人打开链接就能看到完整的、可编辑的代码。你甚至可以将这个链接嵌入博客或教程中读者可以直接在网页里与你的代码交互。这个工作流将传统嵌入式开发中复杂的“编译-烧录-调试”循环简化为了“编码-模拟-拖拽”极大地提升了原型开发的速度和体验。2. 从零开始你的第一个MakeCode Maker项目理论说了不少现在让我们动手创建一个实际项目。我选择了一个经典入门项目——可交互的呼吸灯。这个项目不仅涵盖了数字输出控制LED还会引入模拟输出PWM来制造亮度渐变效果并加上一个物理按钮作为输入控制非常适合展示MakeCode Maker的事件驱动特性。2.1 项目初始化与开发板选择首先打开浏览器访问maker.makecode.com。你会看到一个清爽的界面上面有示例项目和创建新项目的按钮。点击蓝色的“New Project”按钮。这时会弹出一个对话框让你选择目标硬件。Adafruit的Express系列板卡通常都在列表前列。对于这个呼吸灯项目我推荐使用Adafruit Feather M0 Express因为它板载了一个可编程的彩色NeoPixel LED可以作为呼吸灯和一个用户按钮我们无需外接任何元件就能完成所有功能。当然如果你手头是Metro M0 Express或Trinket M0也完全没问题只是可能需要外接一个LED和按钮到指定的引脚。选择“Feather M0 Express”后点击确认你就进入了主编辑器界面。界面主要分为三块左侧深色区域这是积木工具箱。所有可用的编程积木按功能分类存放如“Loops”循环、“Logic”逻辑、“Variables”变量等。最关键的是“Feather M0 Express”这个硬件专属类别里面包含了控制这块板子所有特有硬件如板载LED、按钮、NeoPixel、引脚的积木。中间白色区域这是编程画布。我们把积木从左边拖拽到这里进行组合。右侧区域这是实时模拟器。它会立即显示一块Feather M0 Express开发板的图片并且板载的红色LED标记为D13和彩色NeoPixel都已经在模拟器中可以交互了。实操心得即使你手头没有硬件也强烈建议在项目初期花时间与模拟器互动。尝试从“Basic”类别中拖出一个forever循环和一个show leds积木看看模拟器上的LED阵列如何反应。这能帮你快速建立代码与硬件行为之间的直觉联系。2.2 使用块编程实现呼吸灯我们的目标是让板载的NeoPixel LED实现呼吸灯效果亮度平滑地由暗到亮再到暗循环并且当按下板载按钮时切换呼吸灯的颜色。第一步设置NeoPixel在积木工具箱中找到并点击“Feather M0 Express”类别。你会看到一组以on start开头的积木。这个积木块中的代码只会在设备启动或复位时运行一次非常适合进行初始化设置。将on start积木拖到画布上。从同一个类别中找到set built-in neopixel to积木将它拖入on start积木的内部。这个积木用于初始化板载的NeoPixel。通常我们保持默认设置即可它已经正确指向了板载的那个LED。第二步创建呼吸动画呼吸灯的本质是使用PWM脉冲宽度调制来模拟模拟输出不断改变LED的亮度。在MakeCode中我们可以通过循环和变量来轻松实现。从“Variables”类别中点击“Make a Variable...”创建一个名为brightness的变量用来存储当前的亮度值。从“Loops”类别中拖出一个forever积木到画布上。forever循环内的代码会一直重复执行类似于Arduino中的loop()函数。在forever循环内我们来实现亮度递增的部分从“Variables”类别中拖出set brightness to积木。从“Math”类别中拖出0数字积木将其值改为0。这样第一行就是set brightness to 0。从“Loops”类别中拖出一个for循环积木。点击齿轮图标可以增加循环变量。我们将循环变量命名为index并从0循环到255PWM的亮度范围通常是0-255。在for循环内部 a. 拖入set brightness to积木。 b. 从“Variables”类别中将brightness变量积木拖到to后面。 c. 从“Math”类别中拖出加法积木将brightness和1相加。这样亮度就会每次循环增加1。紧接着我们需要设置NeoPixel的亮度并显示。从“Feather M0 Express”类别中找到set built-in neopixel color to积木。点击颜色方块可以选择颜色比如红色。但我们需要将亮度值应用上去。所以先点击颜色方块选择任意颜色然后从“Neopixel”更高级的类别中可能需要添加扩展但Feather基础库已包含找到set brightness积木。更简单的方法是直接使用set built-in neopixel to积木并配合颜色选择器和一个乘法运算来混合颜色和亮度。一个更直接且常用的方法是使用rgb积木来合成颜色。从“Neopixel”或“Math”相关类别中找到rgb积木。将红、绿、蓝三个值分别设置例如 255, 0, 0 代表纯红。但我们需要应用亮度所以实际应该用brightness值来替代其中一个颜色通道或者使用set brightness。对于呼吸灯更简单的做法是只改变亮度颜色固定。我们可以使用set built-in neopixel brightness to积木如果存在或者通过HSV颜色模式来控制亮度。在MakeCode中一个更清晰的方法是使用hsv积木其中亮度Value参数可以直接用brightness变量。实现亮度递减部分在第一个for循环之后再添加一个for循环让brightness从255递减到0。逻辑与递增类似只是步长为-1。最后在两个for循环内在设置完颜色/亮度后都必须添加一个pause (ms) 100积木来自“Basic”类别。这个暂停决定了呼吸速度100毫秒是一个比较平滑的值。没有这个暂停变化会太快人眼无法感知。第三步添加按钮控制我们希望按下板载按钮时切换NeoPixel的颜色例如在红、绿、蓝之间循环。从“Input”类别中拖出一个on button A click积木。对于Feather M0 Express板载按钮通常映射为Button A。我们需要一个变量来记录当前颜色状态。创建一个名为colorIndex的变量。在on start积木中初始化set colorIndex to 0。在on button A click积木内部拖入change colorIndex by 1积木。添加一个if逻辑判断来自“Logic”类别如果colorIndex 2那么set colorIndex to 0。这样颜色索引就在0,1,2之间循环。再添加一个if...else if逻辑链如果colorIndex 0则在forever循环中使用的颜色设为红色。否则如果colorIndex 1设为绿色。否则设为蓝色。 如何让forever循环知道该用哪个颜色我们需要将颜色值也存储为一个变量或者根据colorIndex在forever循环中实时判断。更优雅的做法是在on button A click中只更新colorIndex而在forever循环中根据colorIndex的值来动态选择hsv积木的色相Hue参数。例如色相0是红色85是绿色170是蓝色。至此一个完整的、可交互的呼吸灯项目就通过块编程完成了。你可以立即在右侧模拟器中测试点击虚拟按钮观察NeoPixel颜色是否切换同时呼吸灯效果应该一直在运行。2.3 切换到JavaScript视图块编程的优势是直观但当你需要更复杂的逻辑、函数或数组时文本代码会更高效。点击编辑器顶部的“JavaScript”按钮你会立刻看到刚才所有积木逻辑对应的JavaScript代码。let brightness 0 let colorIndex 0 let hue 0 // 初始化NeoPixel let strip light.createBuiltInNeoPixelStrip() // 按钮A按下事件 input.buttonA.onEvent(ButtonEvent.Click, function () { colorIndex (colorIndex 1) % 3 // 循环0,1,2 if (colorIndex 0) { hue 0 // 红 } else if (colorIndex 1) { hue 85 // 绿 } else { hue 170 // 蓝 } }) // 主循环 forever(function () { // 亮度递增 for (let i 0; i 256; i) { brightness i strip.setAll(light.hsv(hue, 255, brightness)) pause(100) } // 亮度递减 for (let i 255; i 0; i--) { brightness i strip.setAll(light.hsv(hue, 255, brightness)) pause(100) } })对比块编程JavaScript代码更加紧凑。你可以在这里直接修改代码比如将pause(100)改为pause(50)让呼吸更快或者添加更复杂的颜色过渡算法。当你切回“Blocks”视图时你会发现积木也同步更新了只要你的JavaScript代码在积木的表达能力范围内。注意事项并非所有JavaScript语法都能完美映射回积木。如果你使用了积木系统不支持的高级语法如某些ES6特性、自定义类切换回块视图时这些代码可能会被包裹在一个灰色的“无法显示为积木”的代码块中。但这不影响功能只是提醒你这部分无法用图形化方式编辑。3. 核心环节代码烧录与UF2详解代码在模拟器中运行完美后下一步就是将其部署到真实的硬件上。MakeCode Maker采用了一种极为用户友好的方式UF2文件格式。理解这个过程能让你在遇到问题时从容应对。3.1 UF2文件格式微软的“魔法”容器UF2全称USB Flashing Format是微软专为微控制器设计的文件传输格式。它的设计目标就一个让烧录固件像拷贝文件一样简单。为什么需要它因为直接拷贝原始的二进制.bin或十六进制.hex文件到U盘在不同操作系统尤其是Windows上会遇到各种问题比如文件系统对齐、缓存刷新等导致烧录失败。UF2文件巧妙地在文件数据中嵌入了额外的元数据例如目标地址告诉Bootloader这段数据应该写入芯片闪存的哪个位置。文件大小和校验确保数据在传输过程中完整无误。家族ID标识这个固件适用于哪一类芯片如SAMD21防止刷错设备。当你从MakeCode点击“Download”时编译器会在你的浏览器中直接将你的JavaScript/Blocks代码编译为机器码然后打包成一个带有.uf2扩展名的文件。这个文件的核心就是你的程序二进制码但被包装成了操作系统友好、Bootloader能识别的格式。3.2 详细烧录步骤与故障排查烧录过程看似简单——拖拽文件但细节决定成败。标准操作流程连接硬件使用一条质量可靠的USB数据线将你的Adafruit开发板连接到电脑。好的数据线必须包含数据线而不仅仅是电源线。进入Bootloader模式正常情况下开发板通电后会自动运行你上次烧录的程序并在电脑上显示为一个名为MAKECODE的U盘。如果看不到MAKECODE盘符或者你是第一次使用该板子或者之前刷过Arduino/CircuitPython你需要手动进入Bootloader模式。找到板子上的RESET按钮在约半秒内快速双击它。此时板载的红色LED通常是电源LED会呈现呼吸灯效果缓慢明暗变化并且电脑上会出现一个以BOOT结尾的新驱动器如FEATHERBOOT、METROBOOT等。下载与拖拽在MakeCode编辑器中点击紫色的“Download”按钮。浏览器会下载一个诸如project-name.uf2的文件。找到这个下载的文件将其复制或拖拽到刚才出现的MAKECODE或xxxBOOT驱动器根目录。等待完成文件开始复制后板子上通常会有一个LED可能是NeoPixel开始快速闪烁非呼吸。切勿在闪烁完成前断开USB线或弹出驱动器复制完成后驱动器会自动消失在Windows/Mac上可能会弹出“未安全弹出”的警告可忽略板子会自动复位并运行你的新程序。常见问题与排查技巧问题现象可能原因解决方案电脑完全无法识别到U盘盘符1. USB线仅供电无数据。2. 电脑USB口或线缆损坏。3. 板载Bootloader损坏极罕见。1.更换一条已知良好的USB数据线这是最常见的原因。2. 尝试电脑上不同的USB端口。3. 重启电脑。能看到MAKECODE盘但拖入UF2文件后程序不运行1. 文件未完全写入缓存问题。2. UF2文件损坏或不兼容。1. 等待文件复制进度条完全走完系统提示“复制完成”后再等待几秒。2. 尝试重新在MakeCode中编译下载一次。确保选择的开发板型号与实际硬件一致。双击RESET后出现xxxBOOT盘但拖入文件后立刻弹出程序未运行1. UF2文件格式错误或目标地址不对。2. Bootloader版本过旧尤其是Mac用户。1. 确认是从MakeCode官网为对应板卡生成的文件而非从别处获取的通用固件。2.对于Mac用户这是一个已知问题。某些新版macOS对USB存储协议更严格需要更新Bootloader。去Adafruit的GitHub发布页找到对应你板子的update-bootloader.uf2文件先将其拖入BOOT盘更新Bootloader然后再烧录你的程序。程序运行不正常如LED不亮但烧录过程顺利1. 代码逻辑错误。2. 引脚配置错误例如代码控制的是D13但LED接在D5。3. 硬件连接问题。1. 首先回到MakeCode模拟器确认代码在模拟器中运行正常。2. 仔细检查代码中使用的引脚编号与硬件实际连接是否一致。参考开发板引脚图。3. 使用万用表检查电路连通性。实操心得养成“先模拟后硬件”的习惯。MakeCode的模拟器非常强大绝大部分逻辑错误和引脚配置错误都能在模拟阶段发现。这不仅能节省时间也能避免因频繁烧录而对开发板闪存造成不必要的磨损。另外建议为你的每个项目建立一个独立的文件夹保存下载的.uf2文件。这样即使网络连接丢失你也有本地备份可以重新烧录。3.3 高级话题手动使用BOSSAC命令行工具虽然UF2拖拽式烧录是主流但作为开发者了解备选方案是有必要的。Adafruit的UF2 Bootloader同时也兼容BOSSAC工具这是Arduino IDE用于SAMD系列芯片的标准烧录工具。什么情况下会用到BOSSAC当你需要烧录的不是MakeCode生成的UF2而是原始的.bin或.hex文件时例如直接烧录CircuitPython的固件。当UF2 Bootloader本身出现故障无法进入拖拽模式时此时可能需要通过SWD接口先恢复Bootloader。进行自动化脚本烧录。使用BOSSAC的基本步骤安装驱动与工具确保你的系统已安装Adafruit SAMD开发板的驱动Windows或识别了串口macOS/Linux。然后从ShumaTech或Arduino分支下载对应你操作系统的bossac命令行工具。进入Bootloader模式与UF2方式相同双击RESET让板子显示为xxxBOOT盘。但注意对于BOSSAC你需要知道板子对应的串行端口号如Windows的COM3macOS的/dev/cu.usbmodemXXXX。执行命令打开终端或命令提示符导航到bossac所在目录。关键点在于偏移量offset参数对于M0系列板卡如Feather M0Bootloader占用前8KB空间程序从0x2000地址开始存放。命令示例# Windows示例端口号需替换 bossac.exe -p COM3 -e -w -v -R --offset0x2000 your_firmware.bin对于M4系列板卡如Feather M4Bootloader占用前16KB偏移量为0x4000。bossac.exe -p COM3 -e -w -v -R --offset0x4000 your_firmware.bin参数解释-e擦除芯片-w写入文件-v校验-R重置并运行。重要提示使用BOSSAC 1.9及以上版本时必须指定--offset参数否则会因默认偏移量错误导致“Verify Failed”。如果你使用Arduino IDE它内部集成了正确版本的BOSSAC并自动处理了偏移量因此无需担心。4. 扩展能力自定义积木与GitHub集成当你熟练掌握了基础项目后可能会发现内置的积木库无法满足特定需求比如你想驱动一个特殊的传感器或者封装一套常用的算法。这时MakeCode Maker的扩展Extensions和GitHub集成功能就派上用场了。这让你不仅能“消费”代码还能“生产”和分享可复用的代码库。4.1 创建与使用扩展包扩展包本质上就是一个封装好的代码库它可以提供新的积木块和对应的JavaScript API。MakeCode社区有大量用户贡献的扩展从OLED显示屏驱动到物联网协议MQTT应有尽有。添加现有扩展在项目编辑器中点击底部或设置齿轮中的“Extensions”按钮。你会看到一个搜索框和热门扩展列表。例如搜索“neopixel”你会找到用于控制多条NeoPixel灯带的扩展。点击它这个扩展的积木就会被添加到你的工具箱中。这极大地扩展了硬件支持范围。创建自己的扩展高级这是将你的代码模块化、产品化的关键。假设你为某个传感器写了一套稳定的驱动函数希望在所有项目中复用。初始化GitHub仓库你需要一个GitHub账户。在MakeCode的设置中链接你的GitHub账户它会引导你生成一个访问令牌。创建新扩展项目回到主页点击“New Project”但这次在项目选择界面关注“Import”或“Extensions”部分选择“Create New Extension”或“Import from GitHub”。你需要为扩展起一个名字例如my-sensor-driver。编写核心代码MakeCode会自动创建一个包含基本结构的新项目。关键文件是main.tsTypeScript主文件和pxt.json扩展的配置文件。在main.ts中你可以使用TypeScriptJavaScript的超集来定义函数并使用特殊的JSDoc注释来告诉MakeCode如何生成对应的积木块。例如//% color#ff8000 weight90 icon\uf085 namespace sensors { /** * 读取MySensor的温度值。 * param pin 传感器连接的引脚 eg: DigitalPin.P0 */ //% blockIdread_my_temp block读取MySensor温度在引脚 %pin //% blockGap8 export function readMyTemperature(pin: DigitalPin): number { // 这里是你实际的读取传感器数据的代码 pins.digitalReadPin(pin); // 示例 return 20 Math.random() * 10; // 返回模拟值 } }注释//% block...就是定义积木显示文本的魔法标记。测试与发布你可以在一个浏览器标签页编辑扩展在另一个标签页新建一个测试项目并通过“Extensions”添加你正在开发的扩展通过GitHub URL来实时测试积木效果。代码稳定后使用编辑器顶部的GitHub同步按钮将代码提交并推送到你的GitHub仓库。4.2 版本控制与协作开发通过GitHub集成你的MakeCode项目获得了完整的版本控制能力。每次点击同步按钮都会在GitHub上创建一个提交Commit。你可以编写有意义的提交信息如“修复了在低温下读数不准的问题”。处理冲突当多人协作时可能会遇到代码冲突。MakeCode的处理机制很智能如果你们修改了文件的不同部分它会自动合并。如果修改了同一部分导致自动合并失败MakeCode会在GitHub上为你创建一个拉取请求。你需要到GitHub网站上手动解决冲突选择保留谁的更改然后合并这个请求。解决后回到MakeCode同步一下就能获取到合并后的最新代码。版本号管理在提交时你可以选择“bump version”提升版本号如从1.0.0到1.1.0。这标记了一个稳定版本。当其他用户引用你的扩展时默认会使用最新的已发布bumped版本。这为你的代码库提供了清晰的发布管理。经验之谈创建扩展时从解决一个具体的、小而美的问题开始。良好的文档在JSDoc注释中和清晰的积木设计颜色、图标、参数命名至关重要。在发布前务必在不同类型的项目中进行充分测试。利用GitHub的Issues功能来收集用户反馈和Bug报告这能让你的扩展越来越健壮。5. 项目实战构建一个环境监测数据记录器现在让我们综合运用所学知识构建一个更复杂的项目一个基于Feather M0 Express和温湿度传感器的环境监测数据记录器。这个项目将涉及传感器读取、数据存储模拟、状态显示以及多任务处理。5.1 硬件选型与电路连接所需元件清单Adafruit Feather M0 Express 主控DHT22 温湿度传感器 数字信号精度较好一块小型OLED显示屏I2C接口128x64像素面包板、跳线若干电路连接Feather M0 Express的引脚排列清晰。我们将这样连接DHT22VCC- Feather3.3VGND- FeatherGNDDATA- Feather 引脚D5任何数字引脚均可代码中需对应OLED显示屏VCC- Feather3.3VGND- FeatherGNDSCL- FeatherSCLI2C时钟线固定位置SDA- FeatherSDAI2C数据线固定位置注意事项DHT22的数据引脚需要接一个4.7K - 10KΩ的上拉电阻到3.3V以确保信号稳定。许多DHT22模块已经内置了这个电阻购买时请注意。如果没有请务必在面包板上添加。5.2 软件设计与代码实现这个项目需要同时做几件事定期读取传感器、更新显示屏、响应按钮事件。MakeCode的事件驱动模型非常适合这种多任务场景。第一步添加必要的扩展由于要驱动DHT22和OLED我们需要添加社区扩展。点击“Extensions”。搜索“dht22”添加由社区维护的DHT/DHT22扩展。搜索“oled”添加“oled-ssd1306”扩展这是最常见的OLED驱动芯片。第二步初始化与全局变量在on start积木中我们需要初始化OLED屏幕并设置一些全局变量来存储数据。let temp 0 let humidity 0 let logCount 0 // 初始化OLEDI2C地址通常是0x3C let screen oled.createSSD1306(128, 64, 0x3C) screen.clear() screen.showString(Env Logger Ready, 1, 1)同时我们需要设置一个定时事件来定期读取传感器。使用every积木在“Loops”类别中可以很方便地实现。第三步定时读取传感器并更新显示创建一个每5秒运行一次的事件循环。every(5000, function () { // 读取DHT22假设数据引脚接在D5 temp dht22.readTemperature(DigitalPin.P5) humidity dht22.readHumidity(DigitalPin.P5) logCount 1 // 在OLED上显示数据 screen.clear() screen.showString(Temp: temp C, 1, 1) screen.showString(Humi: humidity %, 1, 2) screen.showString(Log#: logCount, 1, 3) screen.showString(---, 1, 4) // 简单数据记录在串口输出用于调试 console.log(Log logCount : T temp , H humidity) })这里使用了console.log在MakeCode中这些日志信息会输出到浏览器的开发者控制台F12对于调试非常有用。第四步添加交互功能我们可以用板载按钮A来切换显示模式比如显示最大值/最小值用按钮B来重置记录计数器。let displayMode 0 let maxTemp -100 let minTemp 100 input.buttonA.onEvent(ButtonEvent.Click, function () { displayMode (displayMode 1) % 2 if (displayMode 0) { screen.showString(Mode: Current, 1, 5) } else { screen.showString(Mode: Min/Max, 1, 5) screen.showString(MaxT: maxTemp, 1, 6) screen.showString(MinT: minTemp, 1, 7) } }) input.buttonB.onEvent(ButtonEvent.Click, function () { logCount 0 maxTemp temp // 重置为当前值 minTemp temp screen.showString(Log Reset!, 1, 5) pause(1000) // 清空提示行 screen.drawRect(0, 40, 128, 24, 0, true) // 用黑色矩形覆盖 })同时需要在every循环中更新最大值和最小值if (temp maxTemp) maxTemp temp if (temp minTemp) minTemp temp5.3 模拟测试与硬件部署在将代码烧录到硬件之前充分利用模拟器。虽然模拟器无法模拟真实的DHT22传感器数据但我们可以修改代码在模拟阶段使用随机数来模拟传感器读数从而测试整个程序的逻辑流、显示更新和按钮响应是否正常。// 模拟模式下注释掉真实的dht22读取使用模拟数据 // temp dht22.readTemperature(DigitalPin.P5) // humidity dht22.readHumidity(DigitalPin.P5) temp 20 Math.random() * 10 humidity 30 Math.random() * 40在模拟器中运行点击虚拟按钮观察OLED屏幕上的显示是否按预期变化。确认逻辑无误后再将代码中的模拟部分切换回真实的传感器读取代码。最后按照第3章所述的流程将代码下载为UF2文件并烧录到Feather M0 Express中。连接好硬件上电后你应该能在OLED屏幕上看到实时温湿度数据并通过按钮进行交互。避坑技巧I2C设备如OLED不显示首先检查接线SDA、SCL是否接反然后确认扩展中添加的OLED库是否支持你屏幕的确切型号和I2C地址。常用的SSD1306地址是0x3C或0x3D你可以尝试在初始化时更改这个地址参数。使用console.log输出调试信息是定位硬件问题的重要手段。