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。