Electron – 基礎學習(1): 環境安裝、創建專案及入門-有解無憂

這幾天到年底了，公司也沒啥事，閑著就到處瞅瞅，記得上一家公司的時候用 Electron+ng1 寫過專案，只是那個時候專案框架都是別人搭的，自己只負責寫功能，對Electron沒啥認識，這幾天想著反正閑著也是閑著，就撿起來自己玩玩，順便記錄一下，

一、環境安裝：

　　前端開發，現在不管是那個方向，都免不了使用NPM，所以node.js的安裝是必須的，也是最基礎的一步，

　　1、安裝node.js，從官網 https://nodejs.org/en/ 下載當前node.js LTS包(穩定版本)，下載完成后，雙擊執行，安裝完成后，通過CMD命令列可以看到當前node、npm版本號，

　　2、npm安裝完成后，接下來安裝electron，

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

　　注：npm安裝，由于資源服務器在國外，請求資源網速較慢，在node install.js 會卡很久(甚至下載失敗)，所以建議用 cnpm 安裝，

　　npm 終于安裝完成了(足足花了40分鐘)，

二、創建專案：

　　npm 和 electron 安裝完成后，接下來就可以創建專案了，創建專案有以下三種方式：Git拷貝、通過electron社群提供的命令列工具(CLI) electron-forge 創建專案、直接創建

　　(1)、Git拷貝：Git拷貝，實際就是復制官方 "嘗試此例" 代碼結構，然后根據自身專案需求進行修改，

　　　　復制并運行這個庫 electron/electron-quick-start

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

　　　　b：通過命令列(CMD)進入該專案檔案夾 electron-quick-start 或代碼編輯工具(vscode、webstorm)等直接打開該專案，

　　　　c：進入專案檔案夾或打開該專案后，需要安裝專案運行的依賴庫，直接執行命令： npm install

　　　　d：依賴庫安裝完成，就可以啟動該應用了，執行命令： npm start

　　 (2)、第二種是通過electron社群提供的命令列工具(CLI) electron-forge 創建專案，

　　　　electron-forge 官網：https://www.npmjs.com/package/electron-forge 或 https://www.worldlink.com.cn/osdir/electron-forge.html

　　　　這種方法，前提是先安裝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

三、入門：

　　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 匯入，

　　 package.json檔案

{
  "name": "electron-self-built",
  "version": "1.0.0",
  "description": "electronSelfBuilt",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-packager . myClient --win --out myClient --arch=x64 --electron-version=7.1.9"    // electron-packager 打包配置
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^7.1.9"
  },
  "private": true
}

　　檔案注釋很清楚，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/18269.html

標籤：HTML5

上一篇：html data-xx 及 data()注意事項

下一篇：vue常用插件之圖片預覽