electron開發桌面應用實現串口通信，看完你就學會了

么是electron

使用 JavaScript，HTML 和 CSS 構建跨平臺的桌面應用程序

只要你會javascript html css 就可以構建自己想要做的PC桌面和MACos app 應用，是不是很強大。

今天的重點是通過它來實現串口通信的功能，想要實現這部分功能不得不做些準備工作

下面跟我一步一步的來操作吧

electron串口通信實現步驟

安裝環境

想構建electron 必須要有支持的基礎環境，node 和 npm

node想必大家并不陌生，前端的小伙伴太熟悉不過了，Node.js 就是運行在服務端的 JavaScript

檢測你的電腦環境中是否安裝了node.js

檢測是否安裝node，的命令是

node -v

我這里是win10 開發環境

打開命令行工具

我這里已經安裝過了，看到有版本信息v10.16.1 說明已經安裝成功

接下來再檢查下是否安裝了npm 工具

npm -v

我這里也已經安裝了npm ,顯示版本6.9.0

有的同學小伙伴不知道npm是什么

PS：是nodejs內置的軟件包管理器, 在項目開發中，需要用到說明包就拿這個下載就行了，下面有介紹

好了，有了基礎的環境，我們就開始構建一個桌面程序吧

在工作的根目錄創建一個文件夾eletest

在創建一個普通的index.html 文件，這樣就有了一個基本的前端界面,electron 在node.js基礎上構建的，下面是應用的基本目錄結構，我們已經創建了index.html

eletest/
├── package.json
├── main.js
└── index.html

mian.js文件也是electron的入口文件

const electron = require('electron')
    // Module to control application life.
const app = electron.app
    // Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({
         width: 1920,
        height: 1080,
        frame:false,
        resizable: false,
        fullscreen:true,
        webPreferences: {
            nodeIntegration: true,
            // preload: path.join(__dirname, 'preload.js')
        }
    })

    // and load the index.html of the app.
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))

    // Open the DevTools.
    mainWindow.webContents.openDevTools()

    // Emitted when the window is closed.
    mainWindow.on('closed', function() {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null
    })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    app.quit()
})

app.on('activate', function() {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) {
        createWindow()
    }
})

這里的方法函數不在過多的解釋了，復制代碼到你創建的main.js中去就可以了，也可以去electron文檔中查看對應的API

package.json 這是一個包構建信息的文件在eletest文件下運行命令

npm init -y

就會自動生成package.json文件，是不是很簡單啊

要想運行你寫的hml界面打開這個文件修改一處

"scripts": {
    "start": "electron ."
  },

這樣就完成了幾個基本的配置

下面安裝electron 包了運行命令

npm i --save-dev electron

你的運行結果和上面的圖片里的信息說明就成功安裝了electron 默認安裝的最新穩定的依賴包

前期的工作都做完了，來運行它，看看是否出現我們想要的界面

運行命令

npm start

hello world! 是不是很熟悉，很驚喜，很意外。

出現了平時我們打開windows應用窗口

以上步驟都是構建一個electron的桌面應用的，串口是如何實現的呢？

如果你不熟悉串口是說明，先去補補串口的基本概念和相關信息

串口、COM口是指的物理接口形式(硬件)

你也可以打開設備管理器看到相應的串口，我這里有COM11和COM10 ，串口是成對出現的

了解了說明是串口后，來實現我們的應用串口通信吧

運行命令

npm install serialport

出現serialport 的版本信息說明已經安裝成功

electron 通信或者一些交互都是在node上完成的

查看了文檔后我們可以在html頁面上

引入serialport包

設置要監聽的串口端口比如COM11

配置寫端口基本信息

serialPost.on 接收發過來的信息，如果在控制臺上打印出信息，就說明串口通信成功

再次運行electron npm start

打印控臺看到信息：打印端口成功，正在監聽數據中，就說明實現了串口的通信最重要一部打開通道

為了驗證是否能通信，我們找個串口精靈發送一寫信息，再次看控制臺收到了發送的信息

如圖在測試串口工具中輸入aaaa, 運行的控制臺收到了aaaa ，說明已經成功實現串口通信。

是不是很簡單，是不是很驚喜，是不是你在今后項目當中有需要串口通信的就可以復制粘貼了。

、準備工作

本文將使用 nodejs 的 SerialPort 包來實現串口通訊功能。 Node SerialPort 是一個 JavaScript 庫，用于連接到在 NodeJS 和 Electron 中工作的串行端口，以下是準備環境：

Electron 開發環境
電腦有串口通訊能力，一般使用USB-串口轉接板
windows 操作系統

本文操作過程來自： https://girishjoshi.io/post/access-serialport-from-electron-application-and-creating-gui-for-micropython-repl-on-esp8266/

二、 SerialPort 介紹

文檔地址： https://serialport.io/docs/

1. 核心軟件包

(1) serialport

主對象，使用流式傳輸支持跨平臺的串行端口訪問。

(2) @serialport/stream

為綁定提供的流式接口。

(3) @serialport/bindings-cpp

為nodejs、electron提供跨平臺的綁定支持。

(4) @serialport/binding-mock

為測試實現模擬綁定功能。

(5) @serialport/bindings-interface

一個typescript 接口用來實現自己的綁定時使用。

2. 解析器包

解析器用來對原始的二進制數據轉換成自己需要的消息格式。包含以下解析器包，這里不進行詳解： - @serialport/parser-byte-length - @serialport/parser-cctalk - @serialport/parser-delimiter - @serialport/parser-inter-byte-timeout - @serialport/parser-packet-length - @serialport/parser-readline - @serialport/parser-ready - @serialport/parser-regex - @serialport/parser-slip-encoder - @serialport/parser-spacepacket

3. 命令行工具

比較有用的命令行工具，包括： - @serialport/list - @serialport/repl - @serialport/terminal

三、創建一個demo程序

1. 創建 electron 項目

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install the dependencies and run
$ npm install && npm start

2. 安裝 serialport

npm install --save serialport

3. 安裝 electron-rebuild

因為選擇npm版本不同，這里要對庫進行重編譯，要先安裝 electron-rebuild 工具。

npm install --save-dev electron-rebuild  
.\node_modules\.bin\electron-rebuild
npm rebuild

注意原文路徑中用的 / ，我在windows 系統，改用 \。

4. 使用 node-gyp 編譯庫

npm install node-gyp electron electron-rebuild serialport --build-from-source
./node_modules/.bin/electron-rebuild
npm start

5. 修改 main.js 配置

修改 WebPreferences 如下：

webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false
}

8. 寫測試程序

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron test serialport</title>
</head>
<body>
<h1>Serial terminal</h1>


<script>
  //load serialport module
  const {SerialPort} = require('serialport');

  SerialPort.list().then(_=>{console.info(_);});
  const serialPort = new SerialPort({path:'COM3', baudRate: 115200}, function (err) {
    if(err) {
      console.error(err);
    }
  });
  console.info(serialPort);
  serialPort.write("abc", (err)=>{
    if (err) {
      return console.log('Error on write: ', err.message)
    }
    console.log('message written')
  });
  serialPort.on('error', function(err) {
    console.log('Error: ', err.message)
  });

  serialPort.on('data', function (data){
    console.info('data', data);
  });

</script>
<script>
  require('./renderer.js')
</script>
</body>
</html>

7. 運行程序

npm start

項目結構：

在這里插入圖片描述

四、問題處理

在執行electron-rebuild時，可能需要安裝windows-build-tools。新版本的windows-build-tools支持Python3.*版本，但使用Python2.7比較保險。

1. 安裝python2.7虛擬環境

如果本機沒有Python2.7，則可以使用MiniAnaconda配置虛擬環境。先下載安裝MiniAnaconda工具，然后用命令行創建虛擬環境：

conda create -n py27 python=2.7
conda activate py27

2. 安裝windows-build-tools

直接安裝windows-build-tools大概率會失敗，可按以下流程操作：

在執行npm install -g node-gpy后使用命令：

npm install -g --production windows-build-tools@4.0.0

當命令行界面開始不動時，打開任務管理器，把Build Tools結束任務；
再打開.windows-build-tools文件夾中的build-tools-log.txt，添加Variable: IsInstalled = 1，保存，關閉；解決方案參考：https://blog.csdn.net/web15085181368/article/details/123192964

更多關于serialport的功能可參考官方文檔。

串口調試助手是最核心的當然是串口數據收發與顯示的功能，pzh-py-com借助的是pySerial庫實現串口收發功能，今天痞子衡為大家介紹pySerial是如何在pzh-py-com發揮功能的。

一、pySerial簡介

　　pySerial是一套基于python實現serial port訪問的庫，該庫的設計者為Chris Liechti，該庫從2001年開始推出，一直持續更新至今，pzh-py-com使用的是pySerial 3.4。

　　pySerial的使用非常簡單，可在其官網瀏覽一遍其提供的API： https://pythonhosted.org/pyserial/pyserial_api.html，下面痞子衡整理了比較常用的API如下：

class Serial(SerialBase):

# 初始化串口參數

def __init__(self, *args, **kwargs):

# 打開串口

def open(self):

# 關閉串口

def close(self):

# 獲取串口打開狀態

def isOpen(self):

# 設置input_buffer/output_buffer大小

def set_buffer_size(self, rx_size=4096, tx_size=None):

# 獲取input_buffer（接收緩沖區）里的byte數據個數

def inWaiting(self):

# 從串口讀取size個byte數據

def read(self, size=1):

# 清空input_buffer

def reset_input_buffer(self):

# 向串口寫入data里所有數據

def write(self, data):

# 等待直到output_buffer里的數據全部發送出去

def flush(self):

# 清空output_buffer

def reset_output_buffer(self):

　　pySerial常用參數整理如下，需要特別強調的是任何運行時刻對如下參數進行修改，均是直接應用生效的，不需要重新調用open()和close()去激活，因為參數的修改在pySerial內部是通過與參數同名的方法實現的，而這些方法均調用了Serial里的一個叫_reconfigure_port()的方法實現的。

參數名

功能解釋

備注/可設值

port

設備名

/dev/ttyUSB0 on GNU/Linux or COM3 on Windows

baudrate (int)

波特率

bytesize

數據位bit個數

FIVEBITS, SIXBITS, SEVENBITS, EIGHTBITS

stopbits

停止位

STOPBITS_ONE, STOPBITS_ONE_POINT_FIVE, STOPBITS_TWO

parity

奇偶校驗位

PARITY_NONE, PARITY_EVEN, PARITY_ODD PARITY_MARK, PARITY_SPACE

timeout (float)

接收超時

None：blocking mode

0: non-blocking mode

x: 超時時間x秒

write_timeout (float)

發送超時

同timeout

二、JaysPyCOM串口功能實現

　　串口功能代碼實現主要分為三大部分：配置功能實現、接收功能實現、發送功能實現。在實現這些功能之前首先需要import兩個module，分別是serial、threading，serial就是pySerial庫；threading是python自帶線程庫，其具體作用下面代碼里會介紹。

　　除此以外還定義兩個全局變量，s_serialPort和s_recvInterval，s_serialPort是串口設備object實例，s_recvInterval是線程間隔時間。

import serial

import threading

s_serialPort = serial.Serial()

s_recvInterval = 0.5

2.1串口配置功能

　　串口配置里主要就是實現GUI界面上"Open"按鈕的回調函數，即openClosePort()，軟件剛打開時所有可用Port默認是Close狀態，如果用戶選定了配置參數（串口號、波特率...），并點擊了"Open"按鈕，此時便會觸發openClosePort()的執行，在openClosePort()里我們需要配置s_serialPort的參數并打開指定的串口設備。

class mainWin(win.com_win):

def setPort ( self ):

s_serialPort.port = self.m_textCtrl_comPort.GetLineText(0)

def setBaudrate ( self ):

index = self.m_choice_baudrate.GetSelection()

s_serialPort.baudrate = int(self.m_choice_baudrate.GetString(index))

def setDatabits ( self ):

# ...

def setStopbits ( self ):

# ...

def setParitybits ( self ):

# ...

def openClosePort( self, event ):

if s_serialPort.isOpen():

s_serialPort.close()

self.m_button_openClose.SetLabel('Open')

else:

# 獲取GUI配置面板里的輸入值賦給s_serialPort

self.setPort()

self.setBaudrate()

self.setDatabits()

self.setStopbits()

self.setParitybits()

# 打開s_serialPort指定的串口設備

s_serialPort.open()

self.m_button_openClose.SetLabel('Close')

s_serialPort.reset_input_buffer()

s_serialPort.reset_output_buffer()

# 開啟串口接收線程（每0.5秒定時執行一次）

threading.Timer(s_recvInterval, self.recvData).start()

　　上述代碼里需要特別講一下的是串口接收線程，我們知道串口設備s_serialPort一旦打開之后，只要該串口設備的RXD信號線上有數據傳輸，pySerial底層會自動將其存入s_serialPort對應的input_buffer里，但并不會主動通知我們。那我們怎么知道input_buffer里有沒有數據？此時就需要我們開啟一個定時執行的線程，線程里會去查看input_buffer里是否有數據，如果有數據便顯示出來，因此在串口設備打開的同時我們需要創建一個串口接收線程recvData()。

2.2串口接收功能

　　串口接收功能其實在串口配置里已經提到了，主要就是串口接收線程recvData()的實現，recvData()實現很簡單，只有一個注意點，那就是threading.Timer()的用法，這是個軟件定時器，它只能超時觸發一次任務的執行，如果想讓任務循環觸發，那么需要在任務本身里添加threading.Timer()的調用。

def clearRecvDisplay( self, event ):

self.m_textCtrl_recv.Clear()

def setRecvFormat( self, event ):

event.Skip()

def recvData( self ):

if s_serialPort.isOpen():

# 獲取input_buffer里的數據個數

num = s_serialPort.inWaiting()

if num != 0:

# 獲取input_buffer里的數據并顯示在GUI界面的接收顯示框里

data = s_serialPort.read(num)

self.m_textCtrl_recv.write(data)

# 這一句是線程能夠定時執行的關鍵

threading.Timer(s_recvInterval, self.recvData).start()

2.3串口發送功能

　　串口發送功能相比串口接收功能就簡單多了，串口發送主要就是實現GUI界面上"Send"按鈕的回調函數，即sendData()，代碼實現比較簡單，不予贅述。

def clearSendDisplay( self, event ):

self.m_textCtrl_send.Clear()

def setSendFormat( self, event ):

event.Skip()

def sendData( self, event ):

if s_serialPort.isOpen():

# 獲取發送輸入框里的數據并通過串口發送出去

lines = self.m_textCtrl_send.GetNumberOfLines()

for i in range(0, lines):

data = self.m_textCtrl_send.GetLineText(i)

s_serialPort.write(str(data))

else:

self.m_textCtrl_send.Clear()

self.m_textCtrl_send.write('Port is not open')

　　目前串口收發與顯示實現均是基于字符方式，即發送輸入框、接收顯示框里僅支持ASCII碼字符串，關于Char/Hex顯示轉換的功能（setRecvFormat()/setSendFormat()）并未加上，后續優化里會進一步做。

　　至此，串口調試工具pzh-py-com誕生之串口功能實現便介紹完畢了

在線咨詢

上一篇：HTML的pre標簽
下一篇：用html代碼編寫的免費軟件下載和安裝教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

electron開發桌面應用實現串口通信，看完你就學會了

么是electron

electron串口通信實現步驟

、準備工作

二、 SerialPort 介紹

1. 核心軟件包

(1) serialport

(2) @serialport/stream

(3) @serialport/bindings-cpp

(4) @serialport/binding-mock

(5) @serialport/bindings-interface

2. 解析器包

3. 命令行工具

三、創建一個demo程序

1. 創建 electron 項目

2. 安裝 serialport

3. 安裝 electron-rebuild

4. 使用 node-gyp 編譯庫

5. 修改 main.js 配置

8. 寫測試程序

7. 運行程序

四、問題處理

1. 安裝python2.7虛擬環境

2. 安裝windows-build-tools

一、pySerial簡介

二、JaysPyCOM串口功能實現

2.1串口配置功能

2.2串口接收功能

2.3串口發送功能

您的項目需求