HTML一鍵打包EXE軟件(HTML轉(zhuǎn)EXE) 支持將Web前端項(xiàng)目轉(zhuǎn)換為Windows平臺(tái)下的獨(dú)立可執(zhí)行程序（EXE），適用于Windows 7及以上系統(tǒng)，無需額外配置系統(tǒng)環(huán)境, 軟件包含多種內(nèi)核, 包括IE內(nèi)核, Chrome內(nèi)核, 以及WebView2(永久免費(fèi)), 適用于不同的使用場(chǎng)景.
本文主要對(duì)串口API進(jìn)行介紹, 詳細(xì)說明如何使用HTML一鍵打包EXE文件支持串口連接等功能。
什么是串口
首先簡(jiǎn)單介紹下串口, 首先串口（Serial Port）是一種非常經(jīng)典的數(shù)據(jù)通信接口。它的核心特點(diǎn)是一位一位地順序傳輸數(shù)據(jù)（串行傳輸），這與同時(shí)傳輸多位數(shù)據(jù)的并行接口不同。雖然速度通常不快，但串口以其簡(jiǎn)單、可靠、成本低的優(yōu)勢(shì)，在特定領(lǐng)域一直扮演著重要角色。
最常見的串口類型是異步串口（比如電腦上曾經(jīng)的COM口）。它不需要專門的時(shí)鐘線，通信雙方依靠事先約定好的速度（波特率）和數(shù)據(jù)格式（如起始位、停止位）來同步數(shù)據(jù)。RS-232是早期最普及的標(biāo)準(zhǔn)，而RS-485則因其使用差分信號(hào)，抗干擾能力強(qiáng)、傳輸距離遠(yuǎn)（可達(dá)上千米），成為工業(yè)環(huán)境中的主力。
串口在我們?nèi)粘Ｉ钪凶畛Ｒ姷氖褂贸Ｒ姳闶且恍┧⒖ㄔO(shè)備, 通常使用串口連接計(jì)算機(jī)進(jìn)行通信, 可以方便的進(jìn)行用戶認(rèn)證等場(chǎng)景。
HTML轉(zhuǎn)EXE內(nèi)部支持了串口API, 如果需要使用, 可以在打包時(shí)勾選上 啟用API：
勾選后, 打包的網(wǎng)頁(yè)即可以使用串口相關(guān)的API了, 下面是一個(gè)完整的串口通信的HTML的例子, 它可以進(jìn)行串口連接, 發(fā)送數(shù)據(jù):
<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 += '端口關(guān)閉失敗！' + err.message + "\n"; return; } }
port.on('error', err => { document.getElementById("textArea").value += '發(fā)生錯(cuò)誤: ' + err.message + "\n"; });
port.on('data', data => { document.getElementById("textArea").value += '收到數(shù)據(jù): ' + 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 += '發(fā)送數(shù)據(jù)成功\n'; } catch (err) { document.getElementById("textArea").value += '發(fā)送數(shù)據(jù)失敗: ' + 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()">發(fā)送數(shù)據(jù)</button> <input id="data" type="text"></input></body></html>
把上面的文件保存到一個(gè)單獨(dú)的文件夾中, 然后用HTML一鍵打包EXE工具進(jìn)行打包, 打包生成的EXE文件如下:
此時(shí), 我們可以在打包生成的EXE中, 先點(diǎn)擊顯示所有串口信息, 即可列出當(dāng)前系統(tǒng)中的所有串口名稱, 此時(shí)我們?cè)诖虬蒃XE的下方, 輸入串口名稱(例如COM4), 然后點(diǎn)擊連接串口, 即可對(duì)窗口進(jìn)行連接, 此時(shí)我們便可以發(fā)送數(shù)據(jù)了.
API詳解
打包的時(shí)候勾選啟用API, 即可在HTML頁(yè)面的任意位置調(diào)用串口通信API，進(jìn)行串口通信。示例代碼如下：
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串口，并添加監(jiān)聽事件，用于接收串口發(fā)到上位機(jī)的數(shù)據(jù)const port = new SerialPort({ path: "COM1", baudRate: 9600, autoOpen: false });
port.on('error', err => { console.log('發(fā)生錯(cuò)誤: ' + err.message + "\n");});
port.on('data', data => { console.log('收到數(shù)據(jù): ' + data + "\n");});
port.open(function (err) { if (err) { console.log('端口打開失敗: ' + err.message + "\n");return; } console.log('打開端口成功' + "\n");});
向COM1串口發(fā)送數(shù)據(jù)
try { port.write("你好"+ "\n");}catch (err) { console.log('發(fā)送數(shù)據(jù)失敗: ' + err.message+'\n');}
閱讀原文：原文鏈接
該文章在 2025/6/24 10:48:34 編輯過
400 186 1886
