树莓派Pico W网页服务器：如何解决变量无法插入HTML格式化字符串问题

问题分析 #

你的代码主要有三个问题导致温度变量无法正确插入HTML：

• HTML字符串未做格式化替换：你用了{SensTemp}占位，但没有通过Python字符串格式化方法将变量值填充进去。
• 网络与服务器逻辑位置错误：把网络连接、Socket绑定监听的代码放在了外层while True循环内部，导致每次循环都会重复执行网络初始化，且服务器只会使用第一次读取的旧温度值。
• I2C重复初始化冲突：先后初始化两次I2C并覆盖了变量，会导致传感器或显示屏的I2C通信异常。

解决步骤 #

1. 修复I2C初始化：给两个I2C实例起不同名称，避免变量覆盖，比如i2c_sensor和i2c_display。
2. 调整代码结构：把网络连接、Socket初始化逻辑移到外层循环之前，仅执行一次；将温度读取和HTML格式化放在服务器请求处理循环内部，确保每次客户端请求都能获取最新温度。
3. 正确格式化HTML字符串：使用MicroPython支持的f-string语法，直接将SensTemp变量插入HTML模板中。

修正后的完整代码 #

# 导入库
from machine import Pin, I2C
import time
import mcp9808
import ssd1306
import network
import socket

# 初始化温度传感器专用I2C
i2c_sensor = I2C(1, scl=Pin(3), sda=Pin(2), freq=10000)
mcp = mcp9808.MCP9808(i2c_sensor)

# 初始化显示屏专用I2C
i2c_display = I2C(0, sda=Pin(20), scl=Pin(21))
display = ssd1306.SSD1306_I2C(128, 64, i2c_display)

# 初始化板载LED
led = machine.Pin("LED", machine.Pin.OUT)
led.on()

ssid = 'SSID'
password = 'WIFI_PASSWORD'

# 网络连接逻辑（仅执行一次）
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect(ssid, password)

max_wait = 10
while max_wait > 0:
    if wlan.status() < 0 or wlan.status() >= 3:
        break
    max_wait -= 1
    print('等待连接中...')
    time.sleep(1)

if wlan.status() != 3:
    raise RuntimeError('网络连接失败')
else:
    print('已连接')
    status = wlan.ifconfig()
    print('IP地址 = ' + status[0])

# Socket服务器初始化（仅执行一次）
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.bind(addr)
s.listen(1)
print('监听地址:', addr)

# 服务器主循环
while True:
    # 获取最新温度并格式化
    SensTemp = mcp.get_temp()
    SensTemp = "{:.2f}".format(SensTemp)
    
    # 更新OLED显示屏
    display.fill(0)
    display.text(SensTemp, 0, 0, 1)
    display.text("C", 42, 0, 1)
    display.show()
    
    # 使用f-string插入温度变量到HTML
    html = f"""<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temperature Display</title>
    <!-- 可选：添加自动刷新，每5秒更新一次 -->
    <meta http-equiv="refresh" content="5">
    </head>
    <body>
    <h1>Current Temperature:</h1>
    <p id="temperature">{SensTemp}°C</p>
    </body>
    </html>
    """
    
    try:
        cl, addr = s.accept()
        print('客户端连接:', addr)
        cl_file = cl.makefile('rwb', 0)
        # 读取HTTP请求头直到空行
        while True:
            line = cl_file.readline()
            if not line or line == b'\r\n':
                break
        # 发送响应
        cl.send('HTTP/1.0 200 OK\r\nContent-type: text/html\r\n\r\n')
        cl.send(html)
        cl.close()
    except OSError as e:
        cl.close()
        print('连接已关闭')

额外说明 #

• 简化了HTML中的JavaScript部分，直接在Python端完成温度值插入，降低前端复杂度，适合你对JS不熟悉的场景。
• 如果需要网页自动刷新最新温度，可以保留代码中注释的<meta http-equiv="refresh" content="5">，数字5代表刷新间隔（单位：秒）。

内容的提问来源于stack exchange，提问作者Dark Picture