Electron – 基礎學習(1): 環境安裝、建立項目及入門

時間 2020-01-16

標籤 electron 基礎學習環境安裝建立項目入門简体版

原文原文鏈接

這幾天到年末了，公司也沒啥事，閒着就處處瞅瞅。記得上一家公司的時候用 Electron+ng1 寫過項目，只是那個時候項目框架都是別人搭的，本身只負責寫功能，對Electron沒啥認識。這幾天想着反正閒着也是閒着，就撿起來本身玩玩，順便記錄一下。html

1、環境安裝：

　　前端開發，如今不論是那個方向，都免不了使用NPM，因此node.js的安裝是必須的，也是最基礎的一步。前端

　　一、安裝node.js，從官網 https://nodejs.org/en/ 下載當前node.js LTS包(穩定版本)，下載完成後，雙擊執行。安裝完成後，經過CMD命令行能夠看到當前node、npm版本號。 node

　　二、npm安裝完成後，接下來安裝electron。git

   npm install -g electron 或 cnpm install -g electron (不會cnpm 自行度娘cnpm)

　　注：npm安裝，因爲資源服務器在國外，請求資源網速較慢，在node install.js 會卡好久(甚至下載失敗)，因此建議用 cnpm 安裝。github

　　npm 終於安裝完成了(足足花了40分鐘)。web

2、建立項目：

　　npm 和 electron 安裝完成後，接下來就能夠建立項目了。建立項目有如下三種方式：Git拷貝、經過electron社羣提供的命令行工具(CLI) electron-forge 建立項目、直接建立chrome

　　(1)、Git拷貝：Git拷貝，實際就是複製官方 "嘗試此例" 代碼結構，而後根據自身項目需求進行修改。

　　　　複製並運行這個庫 electron/electron-quick-startnpm

　　　　a：新建一個文件夾(路勁中不能含有中文) 克隆這個倉庫：https://github.com/electron/electron-quick-start.gitjson

　　　　b：經過命令行(CMD)進入該項目文件夾 electron-quick-start 或代碼編輯工具(vscode、webstorm)等直接打開該項目。數組

　　　　c：進入項目文件夾或打開該項目後，須要安裝項目運行的依賴庫，直接執行命令： npm install

　　　　d：依賴庫安裝完成，就能夠啓動該應用了，執行命令： npm start

　　 (2)、第二種是經過electron社羣提供的命令行工具(CLI) electron-forge 建立項目。

　　　　這種方法，前提是先安裝CLI工具 electron-forge。因爲是CLI工具，便於之後使用，建議全局安裝(和安裝electron同樣，只需首次安裝便可)。

　　   npm install -g electron-forge 或 cnpm install -g electron-forge

　　　　electron-forge安裝完成後，經過執行命令：electron-forge init XXXXXX建立項目，其中XXXXXX 既是新建項目的項目名稱，同時會新建XXXXXX文件夾以存放項目源文件。

　　   electron-forge init electronTest

　　，Installing NPM Dependencies 和安裝electron同樣，會比較久，耐心等候。

　　注：安裝模塊過程當中，若安裝失敗則刪掉node_modules文件夾，從新進入到項目文件夾或打開項目執行npm install 或 cnpm install 便可。

　　等待 Installing NPM Dependencies 執行完成後，進入到項目文件夾XXXXXX(是該項目的文件夾，不是建立該項目的文件夾，建立該項目的文件夾是該項目的父級文件夾)或打開項目XXXXXX 執行命令： npm start 啓動當前項目(經過 electron-forge 建立的項目，在 npm start 啓動項目時或項目打包時，會優先檢測系統環境 Checking your system)。

　　(3)、第三種是新建各類文件，直接建立項目。

　　　　a：新建一個文件夾（該文件夾既是項目名稱，同時用以存放項目源文件。注：文件夾名稱不能含有中文）

　　　　b：經過命令行(CMD)進入該新建文件夾或代碼編輯工具(vscode、webstorm)等直接打開該新建文件夾新建一個 index.html 和一個main.js 文件。同時將下面入門內的代碼分別複製到對應的文件。

　　　　c：初始化 package.json 文件（用以存放項目配置參數），執行命令 npm init，而後根據提示進行參數填寫。（注： package.json文件能夠本身新建，也能夠不新建。npm init 命令執行完畢後，會自動生成。特注：package.json裏面配置項 entry point ： 對應的JS文件(此處爲main.js)必須是入口 JS (主進程所在JS文件)）

　　　　npm init

　　　　d：index.html 和 main.js 新建完成，package.json配置初始化完成，接下來局部安裝 electron (以前是全局安裝的)，執行命令：npm install --save-dev electron(安裝時間仍是一如既往的長) 或 cnpm install --save-dev electron。

　　　　npm install --save-dev electron 或 cnpm install --save-dev electron

　　　　安裝項目依賴包：npm install 或 cnpm install

　　　　npm install 或 cnpm install

　　　　e：文件新建完成，依賴包正常安裝完成。最後一步啓動當前項目：npm start

3、入門：

　　index.html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
        <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
    </head>
    <body>
        <h1>Hello World!</h1>
        We are using node
        <script>document.write(process.versions.node)</script>, Chrome
        <script>document.write(process.versions.chrome)</script>, and Electron
        <script>document.write(process.versions.electron)</script>.
    </body>
</html>

　　main.js文件

const {app, BrowserWindow} = require('electron');

// 保持對window對象的全局引用，若是不這麼作的話，當JavaScript對象被
// 垃圾回收的時候，window對象將會自動的關閉
let win;

function createWindow() {
    // 建立瀏覽器窗口。
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    // 加載index.html文件
    win.loadFile('index.html');

    // 打開開發者工具
    win.webContents.openDevTools();

    // 當 window 被關閉，這個事件會被觸發。
    win.on('closed', () => {
        // 取消引用 window 對象，若是你的應用支持多窗口的話，
        // 一般會把多個 window 對象存放在一個數組裏面，
        // 與此同時，你應該刪除相應的元素。
        win = null;
    });
}

// Electron 會在初始化後並準備
// 建立瀏覽器窗口時，調用這個函數。
// 部分 API 在 ready 事件觸發後才能使用。
app.on('ready', createWindow);

// 當所有窗口關閉時退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用戶用 Cmd + Q 肯定地退出，
    // 不然絕大部分應用及其菜單欄會保持激活。
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    // 在macOS上，當單擊dock圖標而且沒有其餘窗口打開時，
    // 一般在應用程序中從新建立一個窗口。
    if (win === null) {
        createWindow();
    }
});

// 在這個文件中，你能夠續寫應用剩下主進程代碼。
// 也能夠拆分紅幾個文件，而後用 require 導入。