Electron

什么是electron

Electron是一個使用 JavaScript、HTML 和 CSS 構建桌面應用程式的框架，嵌入Chromium和 node到二進制的 Electron 允許您保持一個 JavaScript 代碼代碼庫并創建在Windows上運行的跨平臺應用 macOS和Linux——不需要本地開發經驗，

簡單來說能把你的前端應用頁面打包成一個exe可執行檔案，雙擊便可運行，同時支持跨平臺，原本的前端一系列css、html、js代碼在Chromium上運行，實際上Electron也是用Chromium的內核運行，但是出于用戶使用層面會更加方便些，

一、簡單搭建實體

創建一個空檔案夾目錄my-electron-app

終端輸入命令

node init

根據官網上的闡述，生成的package.json檔案需要遵循以下幾個規則

entrt point 即入口檔案應設定成main.js
若要將electron打包則author與description則需要配置

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "First Electron Demo",
  "main": "main.js",
  "scripts": {
    "start":"electron ."
  },
  "author": "Ye_XuanWei",
  "devDependencies": {
    "electron": "^13.1.4"
  }
}

安裝electron

npm install --save-dev electron

package.json中加入start指令

 "scripts": {
    "start":"electron ."
  },

創建main.js檔案

由于package.json檔案中設定了入口檔案為main.js檔案，main.js將運行在一個完整的Node.js環境中，負責控制應用的生命周期，顯示原生界面，執行特殊操作并管理渲染器行程，這里由于是簡單搭建demo所以先創建一個空的main.js檔案

創建頁面

在可以為我們的應用創建視窗前，我們需要先創建加載進該視窗的內容，在 Electron 中，每個視窗中無論是本地的HTML檔案還是遠程URL都可以被加載顯示，這里根據官網的案例在專案根目錄下創建一個名為index.html的檔案：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1>第一個Electron應用!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

創建好頁面后需要呼叫Electron的兩個模塊將頁面加載進應用視窗中，這兩個模塊為：

app：控制應用程式的事件生命周期
BrowserWindow:負責創建和管理應用程式視窗

撰寫main.js檔案

const { app, BrowserWindow } = require("electron")
//創建一個視窗，可定義視窗寬高
function createWindow(){
    const win = new BrowserWindow({
        width:900,
        height:700
    })
    //視窗加載內容，可以加載外部網路資源也可以加載本地檔案
    // win.loadFile('index.html');
    win.loadURL('http://www.baidu.com');
}

//定義視窗后必須在app事件中呼叫創建視窗的函式
app.whenReady().then(() =>{
    createWindow();
})

終端運行npm run start便可啟用Electron應用

當然Electron可以將js添加到您的網頁內容，即頁面中引入額外的js檔案，這里為index.html新增一個按鈕用于訪問Node.js的process變數

這里有兩個需要注意的地方，會導致報錯

如果你的index.html這么寫：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <title>Hello Electron!</title>
</head>

<body>
  <h1>第一個Electron應用!</h1>
  We are using Node.js <span id="node-version"></span>,
  Chromium <span id="chrome-version"></span>,
  and Electron <span id="electron-version"></span>.
  <button onclick="getProcess()">獲取系統引數資訊</button>
</body>
<script>
  function getProcess() {
    console.log("getCPUUsage: ", process.getCPUUsage());
    console.log('env', process.env);
    console.log('arch', process.arch);
    console.log('arch', process.platform);
    console.log('arch', process.versions);
  }
</script>

</html>

那么控制臺會報錯：Refused to execute inline script because it violates the following Content Security Policy directive

解決：
新建一個renderer.js檔案,index.html中button添加id

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1>第一個Electron應用!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
    <button id="myButton">獲取系統引數資訊</button>
    <script src="https://www.cnblogs.com/cxddxg/p/renderer.js"></script>
  </body>
</html>

/*
renderer.js
為button添加onclick事件	
*/
const myButton = document.getElementById('myButton');
myButton.onclick = () => {
    console.log("getCPUUsage: ", process.getCPUUsage());
    console.log('env', process.env);
    console.log('arch', process.arch);
    console.log('arch', process.platform);
    console.log('arch', process.versions);
}

重新啟動后發現還有另外一個報錯：Uncaught ReferenceError: process is not defined，依舊無法訪問process物件

解決：

創建BrowserWindow時添加以下引數物件，網上找到的解決方法中很多沒有提到contextIsolation這個引數

webPreferences:{
    nodeIntegration : true,
    contextIsolation: false
}

完整代碼

<!-- main.js -->
const { app, BrowserWindow,dialog } = require("electron")
const path = require('path');
//創建一個視窗，可定義視窗寬高
function createWindow(){
    const win = new BrowserWindow({
        width:900,
        height:700,
        webPreferences:{
            nodeIntegration : true,
            contextIsolation: false
        }
    })
    win.loadFile('index.html');
    win.webContents.openDevTools();
}

app.on('ready',() => {
    createWindow();
})

app.on('window-all-closed',() => {
    app.quit();
})

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

標籤：其他

上一篇：測驗架構師如何解讀介面測驗平臺的各種爭議

下一篇：隱藏在水印的秘密

Electron入門學習筆記

Electron

一、簡單搭建實體