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 打开项目工程
- 官方demo
- 自己的工程项目
打开控制终端安装依赖
- Ctrl+~ 打开终端控制台在主目录执行下面命令
- 输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 输入
cnpm install
- 输入
npm start
启动项目
VScode Electron Debug配置
- 点击菜单
Debug
→Add 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"
}
]
} - 点击需要断点的行号左边,出现
小红点
断点标识 - 点击
Debug
→Start Debugging
或者F5
启动程序进入断点位置进行调试 - 对于前端页面需要使用前端的调试工具通过命令
mainWindow.webContents.openDevTools()
打开调试工具栏1
2
3const { 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 | Load Windows 7 |
有几条命令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 | exec('infotech.exe a b', (err, stdout, stderr) => { |
如果提供了 callback,则调用时传入参数 (error, stdout, stderr)。 当成功时,则 error 将会为 null。 当出错时,则 error 将会是 Error 的实例。 error.code 属性将会是子进程的退出码, error.signal 将会被设为终止进程的信号。 除 0 以外的任何退出码都被视为出错。
执行完命令也可以通过echo查看返回码,正常c
程序退出都是会return 0
linux下一般使用exit(0)
,错误情况各种返回码都可能比如1,2,3,4…
1 | ## windows |
ChildProcess类还提供了,close事件(stdio流关闭触发),error事件(发生错误后触发,比如无法杀死进程,无法向子进程发消息),exit事件(子进程结束触发)等多种方法