Electron桌面应用开发入门

Electron通过WEB技术开发桌面应用,Electron 基于 Chromium 和 Node.js, 我们可以使用 HTML, CSS 和 JavaScript 构建桌面应用。Electron 兼容 Mac, Windows 和 Linux。VSCode就是基于Electron开发。有完善的官方开发文档。使WEB开发人员可以开发桌面应用成为可能,降低桌面应用开发成本,提升开发效率

安装

下载程序包

安装VSCode

安装SVN

  • Ctrl+Shift+X 打开EXTENSIONS 输入 SVN
  • 安装第一个SVN插件
  • 打开带有SVN的工程目录,VSCode会出现S大图标显示SVN的操作记录
  • Source Control(Ctrl+Shift+G)进行文件SVN控制,VSCode左边第三个图标

安装JS 代码跳转工具

  • Ctrl+Shift+X 打开EXTENSIONS 输入 Go To Method
  • 安装第一个插件,打开js代码右键菜单出现对应跳转功能

VSCode 打开项目工程

打开控制终端安装依赖

  • Ctrl+~ 打开终端控制台在主目录执行下面命令
  • 输入 npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 输入 cnpm install
  • 输入 npm start 启动项目

VScode Electron Debug配置

  • 点击菜单DebugAdd Configuration...
  • 增加官方配置configurations部分配置,官方Debug文档

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {
    "version": "0.2.0",
    "configurations": [
    {
    "name": "Debug Main Process",
    "type": "node",
    "request": "launch",
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
    "windows": {
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
    },
    "args": [
    "."
    ],
    "outputCapture": "std"
    }
    ]
    }
  • 对于win10操作系统vscode环境使用下面配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    {
    "version": "0.2.0",
    "configurations": [

    {
    "name": "Debug Main Process",
    "type": "node",
    "request": "launch",
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
    "windows": {
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-forge-vscode-win.cmd"
    },
    "args" : ["."],
    "outputCapture": "std"
    }
    ]
    }
  • 点击需要断点的行号左边,出现小红点断点标识

  • 点击DebugStart Debugging 或者F5 启动程序进入断点位置进行调试
  • 对于前端页面需要使用前端的调试工具通过命令mainWindow.webContents.openDevTools()打开调试工具栏
    1
    2
    3
    const { BrowserWindow } = require('electron')
    let win = new BrowserWindow()
    win.webContents.openDevTools()

通过yarn管理项目

  • 下载安装yarn程序
  • 删除原先的node_modules
  • 进入工程主目录执行yarn
  • 执行yarn start 启动项目
  • "package": "electron-forge package --arch=ia32",调整脚本打CPU32X架构的包
  • 执行yarn package 打包项目或者yarn run make --platform=win32 --arch=ia32

三种常见打包方式:

  • electron-forge
  • electron-builder
  • electron-packager

官方提供的打包教程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Load Windows 7
Install latest version of Node 4 (4.4.7 at the time of this comment)
Download zip of electron-quick-start (mostly because I didn't feel like trying to install Git)
Unzip electron-quick-start
Open a `cmd.exe` window
cd to your unzipped electron-quick-start
Run `npm install`
Run `node_modules\.bin\electron .` (the final space then period is important) - an Electron window should show up with Node/Chromium/Electron versions and a devtools pane.
Close that window.
Run `npm install --save-dev electron-packager`
Run `SET DEBUG=electron-packager`
Run `node_modules\.bin\electron-packager . --platform=win32 --arch=ia32 --app-version=0.0.1 --out=dist `(the --app-version=0.0.1 flag isn't necessary, but it was in your screenshot)
Run explorer `dist\electron-quick-start-win32-ia32`. It should open up a new folder view of your bundled example app.
Double click on electron-quick-start (possibly electron-quick-start.exe depending on your folder settings). You should see the same thing as in step 8.

有几条命令npm最好换成cnpm

1
cnpm install --save-dev electron-packager

脚手架介绍

  • cnpm install -g electron-forge Electron-forge 是一个类似于傻瓜开发包的Electron工具整合项目
  • electron-forge init notepad 初始化一个项目

问题

  • 不兼容部分win7操作系统,还是不太稳定
  • 不兼容winXP操作系统
  • 打出来的程序包非常大,动不动就是几百M
  • 用户体验不如原生应用
  • 目前该技术还不够成熟
  • 没有足够的技术储备谨慎使用该技术

具体应用

通过子进程启动exec调用系统脚本或者程序child_process

调用的程序不在同级目录可以通过 && 进行多条语句合并,把目录合并进去。还可以通过把目标程序路径配置到系统环境变量的方式直接调用

1
2
3
exec('infotech.exe a b', (err, stdout, stderr) => {
// ...
});

如果提供了 callback,则调用时传入参数 (error, stdout, stderr)。 当成功时,则 error 将会为 null。 当出错时,则 error 将会是 Error 的实例。 error.code 属性将会是子进程的退出码, error.signal 将会被设为终止进程的信号。 除 0 以外的任何退出码都被视为出错。

执行完命令也可以通过echo查看返回码,正常c程序退出都是会return 0linux下一般使用exit(0),错误情况各种返回码都可能比如1,2,3,4…

1
2
3
## windows
git --version
echo %errorlevel%

ChildProcess类还提供了,close事件(stdio流关闭触发),error事件(发生错误后触发,比如无法杀死进程,无法向子进程发消息),exit事件(子进程结束触发)等多种方法

参考