Electron 是什么？

    使用Javascript、Html和Css构建桌面应用程序的框架。在Window上运行的跨平台应用MacOS和Linu—不需要本地开发经验。

Electron 快速入门(需要使用到Node.js环境)

使用脚手架进行应用创建

electron 应用程序遵循与其他Node.js项目相同的结构，

#npm 命令
#文件夹创建
mkdir my-electron-app
#初始化项目
npm init


#yarn
#文件夹创建
mkdir my-electron-app
#初始化项目
yarn init

intit初始化命令回在项目初始化时在配置项当中设置一些值，其中需要遵循的基本原则：

  • entry point 应该为 "main.js"
  • author 和 description 作者和描述可为任意值，对于打包应用则为必填项。

初始化后的package.json文件应该是这样的。

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "firsrt electron-app",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "juran",
  "license": "ISC"
}

然后，将electron安装到应用的开发依赖之中。

#npm
npm install --save-dev electron

#yarn
yarn add -dev electron

安装完成之后，在项目根目录package.json之中scripts字段下添加一条electron的stat指令。

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

完整package.json文件

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "firsrt electron-app",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron"
  },
  "author": "juran",
  "license": "ISC",
  "devDependencies": {
    "electron": "^21.0.1"
  }
}

命令添加完成之后，使用start命令启动electron 项目。

npm start

启动速度是非常的快

但是此时由于electron没能找到我们的应用程序，所以electron在成功启动并弹出后后抛出异常。

Error launching app

运行主进程

    任何Electron应用程序入口都是main.js文件，这个文件控制了 主进程，该main.js 运行在一个完整的node.js环境之中，其主要负责应用生命周期、原生界面显示、执行特殊操作并管理渲染器。

执行期间：Electron将依据package.json配置下main指令找到此文件。

对项目进行init初始化时，并不会对该文件进行创建，所以需要将main.js手动创建到main.js文件之中。

注意：再次运行start 后，应用程序不会抛出任何错误信息，然后，它也不会做任何事情，因为还没有对main.js文件中，添加任何代码。

创建页面

在创建应用程序前，需要创建加载进该窗口的内容。可以是Html文件，也可以是远程的URl

<!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'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</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>

该页面之中所预留的信息，都是为了后面使用JavaScript进行动态插入。

窗口中进行应用的打开

现在有一个界面了，需要将它加载到应用程序当中，那么需要做到这一点，需要使用到Electron两个模块：

  • app 该模块控制整个应用程序的事件生命周期。
  • BrowserWindow 创建和管理应用程序 窗口。

因为主程序运行着node.js，在Main.js文件头部引入它们作为CommonJS 模块：

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

添加createWindow()方法将index.html加载进一个新的BrowserWindow实例:

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    })
    win.loadFile('index.html')
}

紧接着，调用createWindow函数打开窗口。

在Electron中，只有在app模块的ready事件被激活后才能创建浏览器窗口。app.WhenReady()Api监听事件。在whenReady成功后调用careteWindow().

app.whenReady().then(() => {
    createWindow()
})

注意：次数，您的电子应用程序应成功 打开显示您页面的窗口。

管理窗口的生命周期

现在打开的可以说就是一个浏览器窗口，为了让这个浏览器窗口看起来更像是平台原生。应用程序在每个Os下有不同的行为，那么app实现这些约定的责任Electron交给开发者。

总而言之，你可以使用进程全局的platform属性来专门为某些操作系统的运行代码。

关闭所有窗口时退出应用(window&Linux)

在window和Linux上，关闭所有窗口通常为退出应用程序。

实现这一点，需要监听app模块的window-all-close事件，如果用户不是在macOs(darwin)上运行程序，则调用app.quit

app.on("window-all-close",() =>{
    if(process.platform !== 'darwin')app.quit()
})
如果没有窗口则打开一个窗口(MacOS)

    在Linux和Windows应用程序没有窗口则代表退出，MacOS在没有窗口打开的情况下也是继续运行的，并且没有窗口可用的情况下激活应用时会打开新窗口。

为实现这一特性，监听app模块中的activate事件。如果没有任何浏览器窗口是打开的，则调用createWindow()方法。

    因为窗口无法在ready中之前进行创建，所需需要在窗口初始化完成之后监听activate事件，通过whenReady()回调中附上您的事件监听器来完成这个操作。

app.whenReady().then(() => {
  
    createWindow()

    //MacOS特性，如果没有窗口打开则创建一个窗口。
    app.on('activate',()=>{
        if(BrowserWindow.getAllWindows.length === 0)createWindow();
    })
})

通过预加载脚本从渲染器访问Node.js

最后做的是将Electron的版本号和它的依赖项展示到web界面之中。

在主进程通过Node的全局process对象访问这个信息是微不足道的，但是，在Electron中不能直接操纵Dom，因为它无法访问渲染器文档上下文。他们存在于完全不同的进程！

如果要深入了解Electron进程，需要参阅进程模型 文档。

这是将 预加载 脚本连接到渲染器排上用场的地方。预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。

创建preload.js新脚本

window.addEventListener('DOMContentLoaded', () => {
    //创建一个替换函数
    const replaceText = (selector,text) =>{
        const element = document.getElementById(selector);
        if(element) element.innerText = text;
    }

    //循环获取进程版本号。
    for(const dependency of ['chrome','node','electron']){
        replaceText(`${dependency}-version`, process.versions[dependency]);
    }
})

    改段代码，主要通过process.versions对象，运行一个replaceText函数根据id替换文本，然后将该脚本附加到渲染器，在现有的BrowserWindow构造器中将路径的预加载脚本传入webPreference.preload选中之。

// include the Node.js 'path' module at the top of your file
const path = require('path')

// modify your existing createWindow() function
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}
// ...

这里使用Node.js中的两个概念:

  • __dirname字符串指向当前正在执行脚本的路径。
  • path.joinAPI将多个路径进行链接。

将功能添加到您的网页内容

    对于网页的内容交互，将脚本添加到渲染器进程之中 ，由于渲染器运行在正常的web之中，所以可以在index.html文件关闭</body>标签之前添加一个</script>标签。

<script src="./renderer.js"></script>

    这样基本上就是一个完整的且功能齐全的Electron程序。

总结

我们所要做的步骤实际上并不是很多！

  • 初始化一个Node.js项目，添加Electron依赖
  • 创建一个main.js脚本运行我们的主进程，它控制我们的应用程序并且在Node.js环境中运行，在此脚本中，我们的使用Electron中的app和BrowserWindow模块来进程引用程序窗口创建，在单独进程之中显示网页内容。
  • 为了访问渲染器中的Node.js的某些功能，在BrowserWindow的构造函数上附加一个预加载脚本。

打包并发布应用程序(Electron Forge。)

  1. 将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架:

    npm install --save-dev @electron-forge/cli
npx electron-forge import

  2. ·使用 Forge 的 make 命令来创建可分发的应用程序：

    npm run make

Electron-forge 会创建 out 文件夹，您的软件包将在那里找到：

// Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app
最后修改：2022 年 10 月 05 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏