likes
comments
collection
share

Electron 网页应用桌面化 -- A Hello World Demo

作者站长头像
站长
· 阅读数 4

本文测试基于CentOS 9,且均是在联网环境中操作!!!

内网环境注意配置yum、npm等代理!!!

安装X11(如果已经安装了图形化界面可跳过该步)

1.  查看X11-forwarding是否打开,如已打开,则跳过该步。

Electron 网页应用桌面化 -- A Hello World Demo

2.  编辑/etc/ssh/sshd_config

Electron 网页应用桌面化 -- A Hello World Demo

编辑保存后,重启sshd服务。

3.  安装X11

yum install xorg-x11-xauth

4.  重新登录ssh,检查X11-forwarding是否开启

Electron 网页应用桌面化 -- A Hello World Demo

安装node,npm

# installs NVM (Node Version Manager)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# download and install Node.js

nvm install 20

# verifies the right Node.js version is in the environment

node -v # should print `v20.12.1`

# verifies the right NPM version is in the environment

npm -v # should print `10.5.0`

内网需下载安装包,注意高版本node.js需要匹配更高的GLIBC版本!出现兼容性问题,可参考下面这篇文章(不保证能解决): node: /lib64/libm.so.6: version `GLIBC_2.27‘ not found问题解决方案 - xiao智 - 博客园

创建应用

创建应用脚手架

mkdir my-electron-app && cd my-electron-app

npm init

其中,npm init会弹出一个交互式命令行,提示你一步一步创建应用,创建完成后你可以在package.json文件中查看刚刚创建的应用属性。

Electron 网页应用桌面化 -- A Hello World Demo

安装electron

npm install --save-dev electron

添加main.js

// main.js

// Modules to control application life and create native browser window

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

const path = require('node:path')

const createWindow = () => {

  // Create the browser window.

  const mainWindow = new BrowserWindow({

    width800,

    height600,

    webPreferences: {

      preload: path.join(__dirname, 'preload.js')

    }

  })

  // and load the index.html of the app.

  mainWindow.loadFile('index.html')

  // Open the DevTools.

  // mainWindow.webContents.openDevTools()

}

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

// Some APIs can only be used after this event occurs.

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

  createWindow()

  app.on('activate'() => {

    // 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 === 0createWindow()

  })

})

// Quit when all windows are closed, except on macOS. There, it's common

// for applications and their menu bar to stay active until the user quits

// explicitly with Cmd + Q.

app.on('window-all-closed'() => {

  if (process.platform !== 'darwin') app.quit()

})

// In this file you can include the rest of your app's specific main process

// code. You can also put them in separate files and require them here.

启动应用

npm start

此时,可以看到弹出一个应用窗口,如下:

Electron 网页应用桌面化 -- A Hello World Demo

生成应用

安装打包工具

对于RPM打包,需要安装rpm-build

dnf install rpm-build

如果要打其他类型的包,请参考文档Makers | Electron Forge

安装electron-forge

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

npx electron-forge import

✔ Checking your system

✔ Initializing Git Repository

✔ Writing modified package.json file

✔ Installing dependencies

✔ Writing modified package.json file

✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

生成发布包

npm run make

> my-electron-app@1.0.0 make /my-electron-app

> electron-forge make

✔ Checking your system

✔ Resolving Forge Config

We need to package your application before we can make it

✔ Preparing to Package Application for arch: x64

✔ Preparing native dependencies

✔ Packaging Application

Making for the following targets: zip

✔ Making for target: zip - On platform: darwin - For arch: x64

如果不想生成deb包,可以把forge.config.js中的相应配置去掉,如下图,然后再执行make命令。

Electron 网页应用桌面化 -- A Hello World Demo

生成的发布包路径为out/make/rpm/x64/my-electron-app-1.0.0-1.x86_64.rpm

Trouble Shooting

启动electron时报缺少动态链接库

解决方法:yum安装相应的包

动态库RPM包
libnss3.sonss
libatk-1.0.so.0atk
libatk-bridge-2.0.so.0at-spi2-atk
libcups.so.2cups
libdrm.so.2libdrm
libgtk-3.so.0gtk3
swrast_drimesa-dri-drivers

Running as root without --no-sandbox is not supported

Electron 网页应用桌面化 -- A Hello World Demo

解决方法:修改package.json,在启动命令上加上--no-sandbox参数

Exiting GPU process due to errors during initialization

Electron 网页应用桌面化 -- A Hello World Demo

解决方法:修改package.json,在启动命令上加上--disable-gpu参数

Cannot find module '@electron-forge/plugin-fuses'

执行npm run make时报错:

Electron 网页应用桌面化 -- A Hello World Demo 解决方法:手动安装plugin-fuses再执行make:

npm install --save-dev @electron-forge/plugin-fuses