Electron入门教程1 —— 编写第一个桌面应用程序

最新推荐文章于 2024-05-04 04:08:52 发布

害恶细君

最新推荐文章于 2024-05-04 04:08:52 发布

阅读量1.3w

点赞数 25

分类专栏： Electron桌面应用开发系列文章标签：前端前端框架 electron vue

本文链接：https://blog.csdn.net/weixin_50216991/article/details/124188494

版权

Electron桌面应用开发系列专栏收录该内容

4 篇文章 42 订阅

订阅专栏

前言：最近临时起意，想开发桌面应用程序，但是我们肯定都先会想到微软的C#。而我又不想花时间去学习C#，而且就算学了C#，还是很难快速开发出好看的Windows桌面应用。所以此时我就想，既然移动app都能用vue来写，那Windows的桌面应用程序是不是也可以用Vue等web前端技术来开发呢？还真可以，那就是Electron这个框架。首先声明，我自己也在学习Electron这个框架，所以就有了这个系列教程。你的电脑里得安装好Node.js，并且你得对Node.js和npm包管理工具的使用有基本的了解，本教程不会讲解这些过于基础的知识。

关于Electron这个框架我就不多介绍，它说白了就是Node和Chromium内核的一种封装。用它开发出来的桌面应用程序其实就是套壳浏览器的应用，这就是为什么它可以用web前端技术来开发，并且可以跨平台的原因了。

✧ 安装Electron Fiddle工具

在开发第一个桌面应用之前，我要向大家推荐一款官方的工具，这个工具叫Electron Fiddle ，我们可以在这个工具里面调试代码，你可以更改里面的样例代码运行，或者把自己的项目代码添加进行运行，一般用来调试功能。
在这里插入图片描述

✧ 编写第一个桌面应用程序

1.创建一个项目文件夹，并cd到该文件夹下面。

mkdir my-electron-app

cd my-electron-app

2.初始化项目文件夹

npm init

注意： entry point应该是main.js , author和description可以是任何值，但对于应用程序打包是必需的。

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

3.安装electron

npm install --save-dev electron

4.配置electron项目的运行命令，在package.json中的scripts下添加start命令

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

5.在项目的根目录下创建index.html ，先添加如下的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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 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>

这个页面会显示Hello World ! 以及正在运行的 Chromium、Node.js 和 Electron 版本的信息。

6.在项目的根目录下创建一个名为main.js的文件,这个文件是整个应用程序的入口

// 我们需要导入两个electron模块
const { app, BrowserWindow } = require('electron')

// 创建一个createWindow()函数，用于将index.html加载到新BrowserWindow实例中
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    })

    let promise = win.loadFile('index.html');
}
// 调用这个createWindow()函数来打开你的窗口
app.whenReady().then(() => {
    createWindow()
})

运行npm start 就可以启动程序了。

下面对代码再做一下解释：
app模块是用于控制应用程序生命周期的模块。BrowserWindow模块是用于创建和管理应用程序窗口的模块。在 Electron 中，浏览器窗口只能在app模块的ready事件触发后才会创建。您可以使用app.whenReady()等待此事件。

通常，您可以使用process全局platform属性来运行专门针对某些操作系统的代码。platform属性返回一个字符串，该字符串标识编译Node.js二进制文件的操作系统平台。常见属性值有：win32、darwin（mac OS系统内核）、linux

关闭所有窗口后退出应用程序（Windows 和 Linux) , 退出所有窗口通常会完全退出应用程序。
要实现这一点，请监听app模块的'window-all-closed' 事件，如果用户不在 macOS ( darwin) 上则调用app.quit()。

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

Linux 和 Windows 应用程序在没有打开窗口时会退出，而 macOS 应用程序通常会在没有打开任何窗口的情况下继续运行，并且在没有可用窗口时激活应用程序应该打开一个新窗口。要实现此功能，请侦听app模块的activate事件，如果没有打开浏览器窗口，则调用您现有的createWindow()方法。因为不能在事件之前创建窗口，所以你应该只在你的应用程序ready之后。activate通过在现有whenReady()回调中附加事件侦听器来做到这一点。

// 调用这个createWindow()函数来打开你的窗口
app.whenReady().then(() => {
    createWindow()

// 监听窗口激活的事件
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0){
            createWindow()
        } 
    })
    
})

7.使用预加载脚本
现在，要做的最后一件事是打印出Electron的版本号和它的依赖关系到你的网页上。在主进程中通过Node的全局进程对象访问这些信息是很简单的。但是，您不能仅仅从主进程编辑DOM，因为它无法访问渲染器的文档上下文。它们处于完全不同的进程中! 关于这些进程相关的以后具体学习讲解。

预加载脚本在渲染进程被加载之前运行，并且可以访问渲染全局变量(例如窗口和文档)和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])
    }
})

上面的代码访问Node.js进程。版本对象，并运行replaceText函数，将版本号插入HTML文档。要将此脚本附加到渲染过程中，请将预加载脚本的路径传递到webPreferences。在main.js现有的BrowserWindow构造函数中的预加载选项。

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })
    let promise = win.loadFile('index.html');
}

下面是main.js的完整代码：

// 我们需要导入两个electron模块
const { app, BrowserWindow } = require('electron')
const path = require('path')

// 创建一个createWindow()函数，用于将index.html加载到新BrowserWindow实例中
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })
    let promise = win.loadFile('index.html');
}
// 调用这个createWindow()函数来打开你的窗口
app.whenReady().then(() => {
    createWindow()

// 监听窗口激活的事件
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0){
            createWindow()
        }
    })

})

// 监控窗口全部关闭的事件
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

8.自定义js脚本的添加
此时，您可能想知道如何向您的应用程序添加更多的功能。对于任何与你想要的其他功能，你都需要添加js脚本到你的渲染过程中。因为渲染器运行在正常的web环境中，你可以在index.html文件的结束</body>标签之前添加<script>标签来包含任何你想要的脚本:
如：

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

js中包含的代码可以使用与典型前端开发相同的JavaScript api，比如使用webpack来打包和缩小代码，或者使用Vue打包的代码。

9.打包发布您的应用程序
发布新应用的最快方式是使用Electron Forge
(1)添加Electron Forge作为你应用的开发依赖，并使用它的import命令来设置Forge的脚手架:

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

npx electron-forge import

在这里插入图片描述
(2)使用 Forge 的package命令打包发布成exe文件：

npm run package

out目录下面存放的是打包好的exe执行文件。
在这里插入图片描述

到这里，教程的第一节就结束了，后面会对Electron开发的更多功能知识点进行讲解，如果你想和我一起学习electron，关注我的专栏。最后，你的点赞是我更新的动力，谢谢路过的各位大牛！

害恶细君

关注

25
点赞
踩
119

收藏

觉得还不错? 一键收藏
打赏
12
评论
Electron入门教程1 —— 编写第一个桌面应用程序

最近临时起意，想开发Windows桌面应用程序，但是我们肯定都先会想到微软的C#。但是我又不想花时间去学习C#，而且就算学了C#，还是很难快速开发出好看的Windows桌面应用。所以此时我就想，既然移动app都能用vue来写，那Windows的桌面应用程序是不是也可以用Vue等web前端技术来开发呢？还真可以，那就是Electron这个框架。首先声明，我自己也在学习Electron这个框架，所以就有了这个教程。...
复制链接

扫一扫