当前位置:首页 > HTML打包EXE > 正文内容

HTML一键打包EXE串口API介绍

HTML打包EXE(HTML2EXE, HTML转EXE) 工具可以一键打包生成EXE可执行文件。可以打包任意HTML项目或者是一个网址为单个EXE文件,直接打开即可运行。支持KRPano全景VR项目、WebGL游戏项目、视频播放、,课件打包、网址打包等。

 

下载地址:

最新版HTML打包EXE(HTML2EXE)最新下载地址(已包含免费内核, 无需登录注册, 永久无广告, 适合教育用户, 学生用户, 公益用户使用)

 

长期支持老版本下载地址 (支持Flash, 可以打包Flash动画和游戏等内容, 无需额外安装Flash插件)

长期支持老版本HTML一键打包工具(HTML2EXE)下载地址

 

官方网址


点击打开官方网址


image.png


本文主要对串口API进行介绍, 详细说明如何使用HTML一键打包EXE文件支持串口连接等功能. 如果你想了解其他关于HTML打包EXE功能, 可以参考我们之前的文章:

HTML转EXE最新版本2.1.0新功能介绍(包含永久免费内核)

HTML打包EXE 最新版 多内核全功能版介绍


首先简单介绍下串口, 首先串口(Serial Port)是一种非常经典的数据通信接口。它的核心特点是一位一位地顺序传输数据(串行传输),这与同时传输多位数据的并行接口不同。虽然速度通常不快,但串口以其简单、可靠、成本低的优势,在特定领域一直扮演着重要角色。

最常见的串口类型是异步串口(比如电脑上曾经的COM口)。它不需要专门的时钟线,通信双方依靠事先约定好的速度(波特率)和数据格式(如起始位、停止位)来同步数据。RS-232是早期最普及的标准,而RS-485则因其使用差分信号,抗干扰能力强、传输距离远(可达上千米),成为工业环境中的主力。

串口在我们日常生活中最常见的使用常见便是一些刷卡设备, 通常使用串口连接计算机进行通信, 可以方便的进行用户认证等场景.


HTML转EXE内部支持了串口API, 如果需要使用, 可以在打包时勾选上 启用API

image.png


勾选后, 打包的网页即可以使用串口相关的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文件如下:


Screenshot 2025-06-20 183612.png


此时, 我们可以在打包生成的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');
}

 


扫描二维码推送至手机访问。

版权声明:本文由H5开发工具网站发布,如需转载请注明出处。

本文链接:https://www.h5pack.com/post/html2exe-serial-port.html