HTML一键打包EXE软件(HTML转EXE) 支持将Web前端项目转换为Windows平台下的独立可执行程序（EXE），适用于Windows 7及以上系统，无需额外配置系统环境, 软件包含多种内核, 包括IE内核, Chrome内核, 以及WebView2(永久免费), 适用于不同的使用场景.
CSDN免积分下载地址:
【免费】HTML转EXE最新2.1.0版本(包含免费内核)-解压密码1234资源-CSDN文库
本文主要对串口API进行介绍, 详细说明如何使用HTML一键打包EXE文件支持串口连接等功能. 如果你想了解其他关于HTML打包EXE功能, 可以参考我们之前的文章:
WebView2与Chrome内核的区别和使用场景详细介绍-CSDN博客
HTML打包EXE中Webview2内核介绍和使用说明_webview2使用教程-CSDN博客
HTML(网页)打包EXE, 添加网络验证(卡密)详解_html打包exe-CSDN博客
首先简单介绍下串口, 首先串口（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');
}