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

Electron是什么？

Electron是用来搭建跨平台桌面(PC)端应用程序的框架。

例如：VScode、有道云。。。很多都是基于Electron开发的。

Electron解决了什么？

1、一套代码可以运行多个平台。

Electron 兼容 Mac、Windows 和 Linux，一套代码可以构建出三个平台的应用程序。

2、开发简单便捷，前端人员就可以独立开发。

Electron 基于 Chromium 和 Node.js, 可以使用 HTML、CSS、JavaScript 便捷开发并构建应用。

3、系统底层C++插件可以编译成nodejs供Electron直接使用，非常方便。

Electron会用到哪些技术栈？

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

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

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

4、打包工具：webpack、vite......

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

废话不多说，直接上代码

本地环境

搭建Node环境即可

node -v
npm -v

注意：Electron与Nodejs的各自版本必须要对应，具体两者对应版本见版本发布。

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

image.png

main.js

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()
})

index.html

页面的入口文件，按照前端的正常开发就可以。



  
    
    
    
    
    Hello World!
  
  
    Hello World!
    窗口创建成功

BrowserWindow

桌面端开发主要呈现的是独立窗口，用于加载页面。而BrowserWindow就是用来窗口的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()

也可以直接在preload加载的文件中调用原生的能力（node.js与electron等）。

// 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从0到1构建跨平台应用