Electron - 跨平台桌面应用程序开源库简单介绍

介绍

Electron 是由Github开发，用HTML，CSS和Javascript来构建跨平台桌面应用程序的一个开源库。

Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

官网

Electron

代码

官网例子

运行

git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start
npm install
# 如果下载慢  npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
npm start

代码调式

Electron分为渲染进程和主进程。

渲染进程
用户所看到的web界面就是由渲染进程描绘出来的。包括 HTML、CSS、JS。

调试方法
Ctrl+Shirt+i

主进程
Electron运行package.json的main脚本的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个Electron应用总是有且只有一个主进程。

浏览器调试方法
修改package.json中的”electron .”为”electorn –inspect=5858 .”
打开浏览器输入：chrome://inspect
点击Configure，添加localhost:5858
重启程序，在chrome://inspect页面的Remote Target中点击inspect
在Sources中Ctrl+p找到main.js，可以点击行标进行设置断点

VS Code 调试方法
点击VS Code的Debug按钮，创建launch.json
写入如下配置，然后main.js文件断点Debug

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args": ["."],
      "outputCapture": "std"
    }
  ]
}