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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{
"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')
})
})