Electron桌面应用开发入门

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

安装

下载程序包

安装VSCode

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 打开项目工程

官方demo
自己的工程项目

打开控制终端安装依赖

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

VScode Electron Debug配置

点击菜单Debug→Add Configuration...

增加官方配置configurations部分配置，官方Debug文档

{
    "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环境使用下面配置

{
  "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"
        }
  ]
}

点击需要断点的行号左边，出现小红点断点标识
点击Debug→Start 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

官方提供的打包教程

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事件（子进程结束触发）等多种方法

参考

Electron官网

安装