Electron入门学习笔记

2023-11-24 15:53:10

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="./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();
})

码农公寓

Electron

一、简单搭建实例

相关文章