Electron（2）electron-quick-start
序言
electron-quick-start
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运行应用
$ npm start
界面
electron-react-boilerplate
使用VScode调试Electron（包含单步调试）
新建 electron/.vscode/launch.json
{
"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" : ["."]
}
]
}
// 配置完直接F5即可启动electron，可以在vscode中直接设置断点调试
Electron应用打包
一、打包流程
1.定位到当前项目目录下，输入命令：
npm install --save-dev electron-packager
将electron-package包安装到在项目下面， 在package.json文件中查看是否安装成功，如下所示：
2.开始打包
方式一（直接打包）：
项目目录下输入命令：
electron-packager <应用目录和名称> <打包平台种类> --out <输出目录> <架构> <electron版本>
方式二（推荐）：
在package.json下进行相应配置：
"scripts": {
"start": "electron .",
"package": "electron-packager ./ --all --out ./OutApp --electron-version 8.2.0 --overwrite --icon=./static/img/logo.ico"
}
配置成功后输入命令：
npm run-script package
查看打包成功结果：
二、过程问题总结：
问题一：
解决：
配置package.json时要带上--ignore=node_modules 即可解决问题**
注意事项：
./代表的是当前目录，当前目录代表本项目的当前目录。
--win代表打包成windows当前类型
--all代表打包成所有类型
../App输出路径代表打包输出到与项目名称同级别的目录文件夹下
其他
主进程
渲染进程
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
const {app, BrowserWindow,globalShortcut } = require('electron')
app.whenReady().then(() => {
globalShortcut.register('CommandOrControl+X', () => {
console.log('CommandOrControl+X is pressed')
})
})
