HTML一鍵打包EXE軟件(HTML轉EXE) 支持將Web前端項目轉換為Windows平臺下的獨立可執行程序（EXE），適用于Windows 7及以上系統，無需額外配置系統環境, 軟件包含多種內核, 包括IE內核, Chrome內核, 以及WebView2(永久免費), 適用于不同的使用場景.
本文主要對串口API進行介紹, 詳細說明如何使用HTML一鍵打包EXE文件支持串口連接等功能。
什么是串口
首先簡單介紹下串口, 首先串口（Serial Port）是一種非常經典的數據通信接口。它的核心特點是一位一位地順序傳輸數據（串行傳輸），這與同時傳輸多位數據的并行接口不同。雖然速度通常不快，但串口以其簡單、可靠、成本低的優勢，在特定領域一直扮演著重要角色。
最常見的串口類型是異步串口（比如電腦上曾經的COM口）。它不需要專門的時鐘線，通信雙方依靠事先約定好的速度（波特率）和數據格式（如起始位、停止位）來同步數據。RS-232是早期最普及的標準，而RS-485則因其使用差分信號，抗干擾能力強、傳輸距離遠（可達上千米），成為工業環境中的主力。
串口在我們日常生活中最常見的使用常見便是一些刷卡設備, 通常使用串口連接計算機進行通信, 可以方便的進行用戶認證等場景。
HTML轉EXE內部支持了串口API, 如果需要使用, 可以在打包時勾選上 啟用API：
勾選后, 打包的網頁即可以使用串口相關的API了, 下面是一個完整的串口通信的HTML的例子, 它可以進行串口連接, 發送數據:
<html>
<head> <script> const SerialPort = HTMLPackHelper.getSerialPort().SerialPort; let port; let isOpened; async function showPorts() { let ports = await SerialPort.list(); document.getElementById("textArea").value += ports.map(port => port.path + ":" + port.friendlyName).join("\n") + "\n"; } async function openPort() { const portName = document.getElementById("portName").value; port = new SerialPort({ path: portName, baudRate: 9600, autoOpen: false }); if (port.isOpened) { try { await port.close() } catch (err) { document.getElementById("textArea").value += '端口關閉失敗！' + err.message + "\n"; return; } }
port.on('error', err => { document.getElementById("textArea").value += '發生錯誤: ' + err.message + "\n"; });
port.on('data', data => { document.getElementById("textArea").value += '收到數據: ' + data + "\n"; });
port.open(function (err) { if (err) { document.getElementById("textArea").value += '端口打開失敗: ' + err.message + "\n"; return; } isOpened = true; document.getElementById("textArea").value += '打開端口成功' + "\n"; });
} async function sendData() { const data = document.getElementById("data").value; try { port.write(data + "\n"); document.getElementById("textArea").value += '發送數據成功\n'; } catch (err) { document.getElementById("textArea").value += '發送數據失敗: ' + err.message+'\n'; } } </script></head>
<body> <button onclick="showPorts()">顯示所有串口信息</button> <div> <textarea id="textArea" style="width: 800px;height: 600px;"></textarea> </div> <br> <button onclick="openPort()">連接串口</button> <label>串口名稱</label> <input id="portName" type="text"></input> <button onclick="sendData()">發送數據</button> <input id="data" type="text"></input></body></html>
把上面的文件保存到一個單獨的文件夾中, 然后用HTML一鍵打包EXE工具進行打包, 打包生成的EXE文件如下:
此時, 我們可以在打包生成的EXE中, 先點擊顯示所有串口信息, 即可列出當前系統中的所有串口名稱, 此時我們在打包生成EXE的下方, 輸入串口名稱(例如COM4), 然后點擊連接串口, 即可對窗口進行連接, 此時我們便可以發送數據了.
API詳解
打包的時候勾選啟用API, 即可在HTML頁面的任意位置調用串口通信API，進行串口通信。示例代碼如下：
const SerialPort = HTMLPackHelper.getSerialPort().SerialPort;
獲得串口列表代碼：
const ports = await SerialPort.list();console.log(ports.map(port => port.path + ":" + port.friendlyName).join("\n"));
上面的代碼可以打印出類似如下的串口信息
COM1:Electronic Team Virtual Serial Port (COM1->COM2)COM2:Electronic Team Virtual Serial Port (COM2->COM1)
打開COM1串口，并添加監聽事件，用于接收串口發到上位機的數據const port = new SerialPort({ path: "COM1", baudRate: 9600, autoOpen: false });
port.on('error', err => { console.log('發生錯誤: ' + err.message + "\n");});
port.on('data', data => { console.log('收到數據: ' + data + "\n");});
port.open(function (err) { if (err) { console.log('端口打開失敗: ' + err.message + "\n");return; } console.log('打開端口成功' + "\n");});
向COM1串口發送數據
try { port.write("你好"+ "\n");}catch (err) { console.log('發送數據失敗: ' + err.message+'\n');}
閱讀原文：原文鏈接
該文章在 2025/6/24 10:48:34 編輯過
400 186 1886
