Electron 开始运行及示例项目简要介绍

Electron 是基于 Chromium 和 Node.js 的开源项目, 让你可以使用 HTML, CSS 和 JavaScript 构建桌面应用程序，兼容 Mac、Windows 和 Linux。

一、运行项目

Electron官网：https://www.electronjs.org/

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
$ cd electron-quick-start

# 安装依赖
$ cnpm install

# 运行项目
npm start

如需使用更多桌面原生 API，可参考 https://www.electronjs.org/#get-started

二、快捷键

• 打开调试工具：Ctrl + Shift + I
• 刷新页面：Ctrl + R
• 强制刷新页面：Ctrl + Shift + R

---

• 页面放大：Ctrl + Shift + =
• 页面缩小：Ctrl + -
• 还原页面大小：Ctrl + 0

---

• 全屏：F11
  

三、项目目录

3.1 package.json 包描述文件

package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

常用的命令就是 script 标签下面的两个命令：

# 启动项目
npm start
# 打包项目
# build 命令其实就是转为了 script 标签下面的 electron-packager 打包命令
npm run build
# 使用全局 electron 命令启动项目，等同于第一种方式
electron .

3.2 main.js 主进程文件

启动渲染进程，并监听消息，用于调用原生方法。比如跨域、全屏、下载、打开浏览器、开机启动等方法都是写在这里。
① 监听打开文件方法示例：

const { shell } = require('electron');
ipc.on('open-file', function (event, params) {
    console.log('open-file : ', params.path);
    // var path = "d:\\code\\export_2020-03-02.xlsa";
    shell.openItem(params.path);
});

② 跨域设置示例：

app.on('ready', createWindow);
function createWindow() {
    // Create the browser window.
    // 隐藏菜单栏
    // Menu.setApplicationMenu(null)
    mainWindow = new BrowserWindow({
        width: 430,
        height: 490,
        frame: false,
        minWidth: 430,
        minHeight: 490,
        maximizable: true,
        minimizable: true,
        resizable: true,
        // thickFrame: false,
        // transparent: true,
        webPreferences: {
            webSecurity: false,
            nodeIntegration: true,
            preload: path.join(__dirname, 'preload.js')
        }
    });
}

3.3 package-lock.json 锁定包版本文件

package-lock.json 是在 npm install时候生成一份文件，用来记录当前状态下实际安装的各个 npm package 的具体来源和版本号。
npm 最新的版本就开始提供自动生成 package-lock.json 功能，为的是让开发者知道只要你保存了源文件，到一个新的机器上、或者新的下载源，只要按照这个 package-lock.json 所标示的具体版本下载依赖库包，就能确保所有库包与你上次安装的完全一样。

3.4 preload.js 预加载文件

实现网页资源预加载，在主进程创建渲染进程时指定，可以进行一些预处理操作

3.5 renderer.js 渲染进程文件

示例页面 index.html 中引用了该 JS 文件，渲染进程调用 Node 的 API，因此可以像上述 HTML 代码一样直接使用 Node 的 API。