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')

})

})

资料

electronjs官方文档

2020Electron-HTML+CSS+JS构建跨平台桌面应用程序

解决electron打包成应用程序问题总结（详细）