一个基于浏览器的 MicroPython 在线集成开发环境
零安装、即开即用，通过 Web Serial API 直连开发板
一 🎯 项目简介
MicroPython Web IDE 是一个完全运行在浏览器中的 MicroPython 集成开发环境，由 立创开发板团队 开发维护。它通过 Web Serial API 直接与 MicroPython 开发板通信，无需安装任何驱动或客户端软件。
设计目标：
- 🚀 零安装 — 打开浏览器即可使用，无需安装 Python、Thonny 或任何 IDE
- 🎯 单文件部署 — 整个 IDE 是一个独立的 HTML 文件（约 2500 行），部署到任意 Web 服务器或本地打开即可
- 🔌 直连设备 — 通过浏览器原生串口 API 与 MicroPython 开发板实时交互
- 🌍 中英双语 — 内置中文和英文界面，一键切换
- 🎨 暗色/亮色主题 — 支持 GitHub Dark / GitHub Light 两套高对比度主题
适用场景：
- 嵌入式开发入门教学，学生无需配置开发环境
- 创客/Maker 快速原型开发
- 在任意电脑上临时编程，无需安装软件
- 嵌入到产品文档/Wiki 页面中，提供在线编程体验
二 ✨ 功能特性
| 功能 | 说明 |
|---|---|
| 串口连接 | 通过 Web Serial API 连接 MicroPython 设备，支持 9600 / 115200 / 230400 / 460800 波特率 |
| 代码编辑器 | 支持 Python 语法高亮、自动缩进、行号显示、括号配对 |
| 代码执行 | 支持 Raw REPL + Raw Paste 模式（参考 Thonny），传输速度快，大文件有进度条 |
| REPL 终端 | 交互式终端，直接输入 MicroPython 命令并实时查看输出 |
| 设备文件管理 | 递归列出设备上所有文件，支持下载、上传、删除操作 |
| 多标签页 | 同时打开多个文件，标签页显示修改状态 |
| 本地文件 | 打开本地 .py 文件进行编辑，保存为本地文件（UTF-8 编码） |
| 撤销/重做 | 完整的编辑历史管理，支持 Ctrl+Z / Ctrl+Y |
三 💻 环境要求
浏览器要求
| 浏览器 | 最低版本 | 说明 |
|---|---|---|
| Google Chrome | ≥ 89 | ✅ 推荐 |
| Microsoft Edge | ≥ 89 | ✅ 推荐 |
| Opera | ≥ 75 | ✅ 支持 |
| Firefox | - | ❌ 不支持 Web Serial API |
| Safari | - | ❌ 不支持 Web Serial API |
硬件要求
- 任何运行 MicroPython 固件的开发板，例如：
- 天空星 STM32F407（本项目主要适配对象，其他板子未进行测试过）
- ESP32 / ESP8266
- Raspberry Pi Pico
- pyboard
- 其他 MicroPython 兼容开发板
- USB 数据线（确保是数据线，不是仅充电线）
固件要求
- 开发板需已烧录 MicroPython 固件
- 固件需支持 REPL（Read-Eval-Print Loop）交互
- 推荐支持 Raw REPL 模式（大多数 MicroPython 固件默认支持）
四 🚀 快速开始
步骤 1：给天空星烧录固件
单击该链接，将该固件下载到本地。
参考天空星-筑基学习板教程的该章节，使用 STM32CubeProgrammer 将上面下载下来的固件烧录到天空星中： 
步骤 2：打开 IDE
单击此链接：https://wiki.lckfb.com/storage/html/micropython-web-IDE/
打开我们的在线IDE。
步骤 3：连接设备
- 用 USB 线将 MicroPython 开发板连接到电脑
- 点击工具栏 🔌 连接 按钮
- 在浏览器弹出的串口选择窗口中，选择对应的 COM 端口
- 等待连接成功，右上角状态指示灯变为 🟢 绿色
步骤 4：运行代码
编辑器中默认有一段 LED 闪烁示例代码，按 F5 或点击 ▶ 运行 即可在天空星上执行，此时可以看到天空星上面的绿灯会开始闪烁。
五 📝 天空星参考基础例程
5.1 GPIO 基础操作
天空星核心板引出了 PA0-PA15、PB0-PB15、PC0-PC15、PD0-PD15、PE0-PE15 共 80 个 GPIO 引脚。
STM32F407 的 GPIO 翻转速度可达 84MHz（AHB1 总线频率），MicroPython 中通过
pin.high()/pin.low()操作约能达到数百 kHz 的翻转频率。如果需要更高速的 IO 操作，可以使用stm模块直接操作寄存器，对速度有要求还是直接用c语言来控制吧，别难为 MicroPython 了。
5.1.1 数字输出
python
from pyb import Pin
# 配置 PE0 为推挽输出
p = Pin('PE0', Pin.OUT_PP)
# 输出高电平
p.high()
# 或
p.value(1)
# 输出低电平
p.low()
# 或
p.value(0)
# 翻转
p.high()
p.low()5.1.2 数字输入
python
from pyb import Pin
# 配置 PE1 为输入，内部上拉
p = Pin('PE1', Pin.IN, Pin.PULL_UP)
# 读取引脚电平
print(p.value()) # 返回 0 或 1
# 配置为下拉输入
p2 = Pin('PE2', Pin.IN, Pin.PULL_DOWN)
print(p2.value())
# 浮空输入（无上下拉，用于外部已有上下拉电阻的场景）
p3 = Pin('PE3', Pin.IN, Pin.PULL_NONE)5.1.3 开漏输出
python
from pyb import Pin
# 开漏模式（常用于 I2C 等总线，或需要线与逻辑的场景）
p = Pin('PE3', Pin.OUT_OD, Pin.PULL_UP)
p.low() # 拉低
p.high() # 释放（由上拉电阻拉高）5.1.4 GPIO 速度设置（工程师进阶）
python
from pyb import Pin
import stm
# 通过 stm 模块直接操作寄存器设置 GPIO 速度
# OSPEEDR 寄存器：00=低速 01=中速 10=快速 11=高速
# 例如设置 PE0 为高速输出
p = Pin('PE0', Pin.OUT_PP)
# PE0 = GPIOE pin 0, OSPEEDR bit[1:0]
stm.mem32[stm.GPIOE + stm.GPIO_OSPEEDR] |= (3 << 0)5.1.5 查询引脚复用功能（实用技巧）
STM32 的每个引脚都可以复用为多种外设功能（UART、SPI、I2C、TIM 等）。在 MicroPython 中，你可以直接在 REPL 里查询任意引脚支持哪些复用功能，不用翻数据手册。
python
from pyb import Pin
# 查询 PB8 支持的所有复用功能
p = Pin('PB8')
print(p.af_list())
# 输出类似: [Pin.AF2_TIM4, Pin.AF3_TIM10, Pin.AF4_I2C1]这在实际开发中非常有用。比如你想用某个引脚输出 PWM，先查一下它能挂到哪个定时器：
python
from pyb import Pin
# 想知道 PA1 能用哪些定时器？
p = Pin('PA1')
for af in p.af_list():
name = str(af)
if 'TIM' in name:
print(af)
# 输出类似:
# Pin.AF1_TIM2
# Pin.AF2_TIM5
# 说明 PA1 可以复用为 TIM2 或 TIM5 的通道批量扫描所有引脚的复用功能：
python
from pyb import Pin
ports = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
print("{:<6} {}".format("GPIO", "AF list"))
print("-" * 80)
for port in ports:
for num in range(16):
name = 'P{}{}'.format(port, num)
try:
p = Pin(name)
afs = p.af_list()
if afs:
af_str = ", ".join(str(af) for af in afs)
else:
af_str = "-"
print("{:<6} {}".format(name, af_str))
except (ValueError, OSError, TypeError):
pass查看引脚当前状态和配置：
python
from pyb import Pin
p = Pin('PB2')
print(p) # 打印引脚当前模式、速度、上下拉等信息
print(p.name()) # 'PB2'
print(p.pin()) # 2 (引脚编号)
print(p.port()) # 1 (端口编号, 0=A, 1=B, ...)
# 也可以通过 Pin.cpu 访问（不依赖 pins.csv 中的命名）
p2 = Pin(Pin.cpu.A7, Pin.IN)
print(p2.af_list())5.2 LED 控制（PB2）
天空星板载一颗 LED 连接在 PB2，高电平点亮。
5.2.1 使用 pyb.LED
python
import pyb
led = pyb.LED(1) # LED1 对应 PB2
# 点亮
led.on()
pyb.delay(1000) # 延时 1 秒
# 熄灭
led.off()
# 翻转状态
led.toggle()5.2.2 LED 闪烁
将以下代码保存为 main.py 上传到开发板：
python
import pyb
led = pyb.LED(1)
while True:
led.toggle()
pyb.delay(500) # 每 500ms 翻转一次5.2.3 使用 Pin 直接控制
python
from pyb import Pin, delay
led_pin = Pin('PB2', Pin.OUT_PP)
while True:
led_pin.high() # 点亮
delay(300)
led_pin.low() # 熄灭
delay(300)5.2.4 SOS 求救信号
python
import pyb
led = pyb.LED(1)
DOT = 150 # 短信号
DASH = 450 # 长信号
GAP = 150 # 信号间隔
LETTER_GAP = 450 # 字母间隔
def blink(duration):
led.on()
pyb.delay(duration)
led.off()
pyb.delay(GAP)
while True:
# S: ...
for _ in range(3):
blink(DOT)
pyb.delay(LETTER_GAP)
# O: ---
for _ in range(3):
blink(DASH)
pyb.delay(LETTER_GAP)
# S: ...
for _ in range(3):
blink(DOT)
pyb.delay(2000) # 重复间隔5.3 用户按键（PA0）
天空星板载用户按键连接在 PA0，内部下拉，按下时为高电平（MICROPY_HW_USRSW_PRESSED = 1）。
5.3.1 使用 pyb.Switch
python
import pyb
sw = pyb.Switch()
# 查询按键状态（True=按下, False=未按下）
while True:
if sw():
print("按键被按下")
else:
print("按键未按下")
delay(300)5.3.2 按键控制 LED
python
import pyb
sw = pyb.Switch()
led = pyb.LED(1)
while True:
if sw():
led.on()
else:
led.off()
pyb.delay(50) # 消抖延时5.3.3 按键回调（中断方式）
python
import pyb
sw = pyb.Switch()
led = pyb.LED(1)
# 注册回调函数，按键按下时自动调用
sw.callback(lambda: led.toggle())
# 主循环可以做其他事情，按下按键时 LED 会自动翻转5.3.4 使用 Pin + 外部中断（通用方法）
python
from pyb import Pin, LED, ExtInt
led = LED(1)
def btn_handler(line):
led.toggle()
# PA0 上升沿触发中断，内部下拉
ext = ExtInt('PA0', ExtInt.IRQ_RISING, Pin.PULL_DOWN, btn_handler)5.3.5 按键计数器（带软件消抖）
python
import pyb
sw = pyb.Switch()
led = pyb.LED(1)
count = 0
last_press = 0
while True:
if sw():
now = pyb.millis()
if now - last_press > 200: # 200ms 消抖
count += 1
last_press = now
led.toggle()
print("按键次数:", count)
pyb.delay(10)【TODO】待续，未来会继续做一些筑基学习板上的外设