Electron快速入手,拥有自己的第一个桌面应用

409 阅读3分钟

前言

Electron是什么?

Electron 是一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。

支持 Web 技术开发桌面应用,其本身是基于 C++ 开发的,GUI 核心来自于 Chrome,而 JavaScript 引擎使用 v8。

这使得我们使用前端技术就可以开发出属于自己的第一个桌面应用。

目前市场上很多成熟的桌面端应用都是使用Electron开发的。例如:VScode有道云飞书等。

Electron解决了什么?

1、一套代码可以在多个平台运行。 Electron 兼容 Mac、Windows 和 Linux,一套代码可以构建出三个平台的应用程序。

2、开发简单便捷,而且前端人员自己就可以独立开发。 Electron 基于 Chromium 和 Node.js, 可以使用 HTML、CSS、JavaScript 便捷开发并构建应用。

3、混合开发,降低开发难度,减少开发时间。 系统底层 C++ 插件可以编译成 Node 文件供 Electron 直接使用。

涉及到的技术栈

使用Electron开发桌面应用,会用到哪些技术栈呢?

1、Electron:提供桌面端应用能力。

2、Nodejs:用于本地文件系统和操作系统,或提供 server 能力。

3、html、css、javascript:可以使用 React、Vue 等编译后的文件。

4、打包工具:webpack、vite 等。

都是前端技术栈,唯一不同的是,需要学习 Electron。

废话不多说,直接 hello world!

本地环境

搭建 Node 环境即可

node -v
npm -v

注意:ElectronNodejs的各自版本必须要对应,具体两者对应版本见版本发布

image.png

我们用 Electron 官方提供的最新稳定版本进行演示。

Electron 19.0.8
Node 16.14.2

Hello World

克隆运行代码

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

这样项目就启动成功了。。。

代码解析

main.js 是应用的入口文件。里面包含了应用启动完成、窗口创建等。

入口文件的路径配置在 package.json 中。

const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html')
  // mainWindow.webContents.openDevTools()
}

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

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

页面的入口文件 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'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>窗口创建成功</p>
    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

以上就是一个简单桌面端应用的代码。

桌面端开发,核心是开发独立窗口。 那么如何开发独立窗口呢?

BrowserWindow

BrowserWindow 是用来创建、管理窗口的 Native API

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
})

mainWindow.loadFile('index.html')

可以自定义设置窗口的宽度,实现窗口尺寸的调整(位置也可以调整,详见 setBounds、setPosition)。

loadFile 用于加载本地文件,也可以直接加载网络地址,如:

mainWindow.loadURL('https://github.com');

如果想像浏览器那样可以查看、调试运行的代码,就打开 DevTools。

mainWindow.webContents.openDevTools()

页面html是不能直接使用端的能力的,所以Electron提供了 preload

Preload

preload 可以通过加载调用端能力的 Api 文件,从而使用端的能力。

端的能力是由 Nodejs、Electron 提供的,如下方 process。

// preload.js
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    // 通过getElementById赋值process信息
    replaceText(`${type}-version`, process.versions[type])
  }
})

《快速拥有自己的第一个Electron桌面应用》就介绍到这里。

结语

感谢您的阅读!希望本文带给您有价值的信息。

如果对您有帮助,请「点赞」支持,并「关注」我的主页获取更多后续相关文章。同时,也欢迎「收藏」本文,方便以后查阅。

写作不易,我会继续努力,提供有意义的内容。感谢您的支持和关注!

下一篇分享

Electron从0到1构建跨平台应用