超好用的打包跨平台应用-Electron

时尚IT男

已于 2024-03-13 14:23:51 修改

阅读量734

点赞数 5

文章标签： electron javascript 前端

于 2024-03-13 14:21:35 首次发布

本文链接：https://blog.csdn.net/sinat_35773915/article/details/136677800

版权

Electron 是一个开源的桌面应用程序开发框架，让你可以使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用程序。在开发完 Electron 应用后，你需要将其打包成可执行文件以便用户安装和运行。

以下是一个简单的 Electron 应用打包教程：

确保你已经安装 Node.js 和 npm。
在项目目录下运行以下命令安装 electron-packager：
```
npm install electron-packager --save-dev
```

克隆项目：

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

打包需要使用fotge：

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

在 package.json 文件中添加打包脚本：

"scripts": {
  "package": "electron-packager . YourAppName --platform=windows --arch=x64 --out=dist --overwrite"，
  "package2": "electron-packager . YourAppName --platform=linux --arch=x64 --out=dist --overwrite",
}

其中，YourAppName 是你的应用名称，yourPlatform 是目标平台（如 windows、macos、linux），yourArch 是目标架构（如 x64、ia32）。

运行打包脚本：
```
npm run package
```
打包完成后，在 dist 目录下会生成相应平台的可执行文件，用户可以通过这些文件安装和运行你的 Electron 应用。
遇到错误“An unhandled rejection has occurred inside Forge:
Error: Cannot find module ‘@electron-forge/plugin-fuses’”
```
npm install @electron-forge/plugin-fuses --save-dev
```

这是一个简单的 Electron 应用打包过程，你也可以根据自己的需求选择其他打包工具或配置参数。

要在 Electron 应用中去除窗口上的功能栏（标题栏）以及创建一个无窗口，充满屏幕的应用

修改main.js文件：

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    // show: false, // 设置窗口不显示
    frame: false, // 隐藏窗口标题栏
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('./dist/index.html');
  //加载URL
  mainWindow.loadURL('http://127.0.0.1');
  // 在适当的时机调用 maximize() 方法
  // mainWindow.maximize();
    // 在适当的时机调用 setFullScreen(true) 方法设置全屏
  mainWindow.setFullScreen(true);

  // 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', 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()
  })
})

// 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', function () {
  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.