一、前期準備

打開串口工具，以XCOM V2.6為例，驗證AT指令。如圖表 1?1所示。

如果未識別串口，請按下面的步驟安裝相應的驅動。

1.檢查并安裝串口驅動程序

PC打開“控制面板” ，進入“硬件和聲音”，選擇“設備管理器”，如圖表 1?2所示。

2.進入“設備管理器”，可以看到設備對應的端口號，如果有多個端口請注意區分，如圖表 1?3所示。

二、單連接 TCP Client

1、配置WiFi模式為Station+SoftAP模式，如圖表 2?1所示。

2、E103-W10連接至WiFi名稱為"E880-IR01",密碼為"JSZXE880"的路由器，根據您的路由器名稱和密碼替換AT指令的參數即可。如圖表 2?2所示。

3、PC與E103-W10連接至同一路由器，即WiFi名稱為E880-IR01,如圖表 2?3所示。

4、查看PC端WiFi IP地址

windows 10桌面左下角“開始”按鈕處右鍵，進入“運行（R）”，如圖表 2?4所示。

輸入“cmd”進入 “命令提示符”界面，如圖表 2?5所示。

在“命令提示符”界面中輸入ipconfig，在按下“Enter”鍵，找到 “無線局域網適配器 WLAN”中的IPv4地址。如圖表 2?6所示。

往下找到“無線局域網適配器 WLAN:”中的IP地址，如圖表 2?7所示。

5、在PC端使用網絡調試工具，以“TCP&UDP測試工具”為例，建立一個TCP服務器。

打開“TCP&UDP測試工具”，選中“服務器模式”，鼠標右鍵選擇“創建服務器”，如圖表 2?8所示。

PC創建IP地址為192.168.1.156，即上述步驟查到的IP地址,端口為8080的服務器。如圖表 2?9所示。

選中創建的的服務器，點擊“啟動服務器”，此時服務器已進入“監聽狀態”了。如圖表 2?10所示。

6、連接到上述步驟中創建的服務器

E103-W10作為TCP Client，相關指令AT+CIPSTART="TCP","192.168.1.156",8080 指令的參數分別表示：協議，服務器IP地址和端口號。與PC端“TCP&UDP測試工具”建立TCP連接。如圖表 2?11和圖表 2?12所示。

7、E103-W10向服務器發送數據

首先，設置想要發送的數據長度，例如5字節，如圖表 2?13所示。

然后輸入發送數據，例如“ABCDE”，如圖表 2?14所示。

PC端接收到數據，如圖表 2?15所示。

8、當E103-W10接收到服務器發來的數據，將提示如下信息:

+IPD,n:xxxxxxxxx //接收n個字節，數據為: xxxxxxxxx

如圖表 2?16所示。

什么是electron

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

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

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

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

electron串口通信實現步驟

1. 安裝環境

想構建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 ，說明已經成功實現串口通信。

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