【Electronjs基础】-环境搭建与简单程序创建发布

家了叭叭

已于 2023-07-03 10:24:23 修改

阅读量447

点赞数

分类专栏：前端文章标签：前端 electron

于 2023-07-03 10:18:38 首次发布

本文链接：https://blog.csdn.net/weixin_44558408/article/details/131510391

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Electronjs框架创建桌面应用，包括设置开发环境，解决npm安装问题，编写主进程和渲染进程代码，以及使用electron-builder进行打包和发布。文章详细阐述了从初始化项目到添加外部文件并打包的整个流程。

摘要由CSDN通过智能技术生成

Electronjs笔记

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。

官网/入门文档

环境

开发环境：windows10 + vscode

首先要保证你的环境中安装了Node.js，命令：

node -v  
npm -v

以下是我环境中的版本：

PS D:\electronjs\my-electron-app> node -v
v16.18.1
PS D:\electronjs\my-electron-app> npm -v
8.19.2

创建一个简单桌面程序

开发依赖安装

mkdir my-electron-app
cd my-electron-app
npm init

npm init下发后，需要填写一些配置信息

entry point填写成main.js（因为接下来的主进程文件名叫main.js）
author 与 description 可为任意值，但对于应用打包是必填项。

npm init后会生成package.json文件，内容如下：

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

然后，将 electron 包安装到应用的开发依赖中。

npm install --save-dev electron

**注：**执行npm install --save-dev electron 失败，错误信息如下

npm ERR! code 1
npm ERR! path D:\xxx\my-electron-app\node_modules\electron
npm ERR! command failed
npm ERR! RequestError: read ECONNRESET
npm ERR!     at ClientRequest.<anonymous> (D:\xxx\electronjs\test\my-electron-app\node_modules\got\dist\source\core\index.js:970:111)
npm ERR!     at Object.onceWrapper (node:events:628:26)
npm ERR!     at ClientRequest.emit (node:events:525:35)
npm ERR!     at ClientRequest.origin.emit (D:\xxx\my-electron-app\node_modules\@szmarczak\http-timer\dist\source\index.js:43:20)
npm ERR!     at TLSSocket.socketErrorListener (node:_http_client:494:9)
npm ERR!     at TLSSocket.emit (node:events:513:28)
npm ERR!     at emitErrorNT (node:internal/streams/destroy:157:8)
npm ERR!     at emitErrorCloseNT (node:internal/streams/destroy:122:3)
npm ERR!     at processTicksAndRejections (node:internal/process/task_queues:83:21)
npm ERR!     at TLSWrap.onStreamRead (node:internal/stream_base_commons:217:20)

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\xxx\AppData\Local\npm-cache\_logs\2023-06-27T01_30_01_122Z-debug-0.log

解决办法：更换镜像源

npm config set registry http://registry.npmmirror.com
npm install
npm install --save-dev electron

编写程序

开发依赖安装完成后，会生成一个node_modules目录和一个package-lock.json文件

最后，您希望能够执行 Electron 如下所示，在您的 package.json配置文件中的scripts字段下增加一条start命令：

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

start命令能让您在开发模式下打开您的应用

npm start

当然此时程序是无法正常启动的，会报无法找到要运行的应用的错误

请添加图片描述

如下提供了一套基础的程序代码：

main.js

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

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

  win.loadFile('index.html')
}

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

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']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

然后再运行应用：npm start

请添加图片描述

打包

npm run make

官方给出的打包命令是npm run make

安装依赖：

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"!!!

然后使用 Forge 的 make 命令来创建可分发的应用程序：

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

Electron-forge会创建out文件夹

// Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

electron-builder

安装依赖

npm install electron-builder --save-dev

安装完electron-builder后，package.json文件中会自动同步 "electron-builder"字段：

{
  "devDependencies": {
    "electron-builder": "^24.4.0" 
  }
}

打包

npx electron-builder

默认情况下，会在项目根目录下生成一个dist文件夹，结构如下：

请添加图片描述

my-electron-app Setup 1.0.0.exe 是程序的安装包，双击后自动安装执行，安装目录(windows10)：C:\Users\XXX\AppData\Local\Programs\my-electron-app\my-electron-app.exe
win-unpacked是my-electron-app Setup 1.0.0.exe执行安装后生成的目录结构，如下

请添加图片描述

如何将项目外文件打包发布出去

例如：将test.exe二进制文件一同编译到前端发布的包中（我这里test.exe是一个golang编译生成的二进制可执行程序）

请添加图片描述

在上面的打包操作中，xxx/dist/win-unpacked/resources/目录中有一个app.asar文件，这个是electron非常有代表性的一个文件，它可以通过安装工具：npm install asar -g，然后解压：asar e app.asar ./app

app.asar 内容如下：

请添加图片描述

可以看出，里面存的就是工程文件

我们可以通过修改package.json文件，在文件中加入build属性，控制electron-builder打包到app.asar中的内容；并且可以通过将"asar"字段置为false，这样xxx/dist/win-unpacked/resources/ 目录下的将会是一个app目录，而不用asar命令解压，但这样做极容易通过逆向来做恶意程序。

package.json

{
    ...
    "build": {
    "asar": false,  
    "files": [
      "main.js",
      "index.html",
      "preload.js",
      "test.exe"
    ]
  },
    ...
}

参数说明

asar: 这个设置成false，my-electron-app\dist\win-unpacked\resources\ 目录下会生成app文件夹，files打包的文件默认会放到app目录下
- 如果没有设置asar参数或者设置成true，my-electron-app\dist\win-unpacked\resources\ 目录下将会生成app.asar文件
- 如果想要解压app.asar文件，需要安装工具：npm install asar -g，然后解压：asar e app.asar ./app
files: 打包文件内容
- 注：files切片中，一定要把工程执行所需文件包含完全，否则安装的程序无法正常运行。

最后的package.json内容如下：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "test",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "build": {
    "asar": false,  
    "files": [
      "main.js",
      "index.html",
      "preload.js",
      "test.exe"
    ]
  },
  "author": "jialebaba",
  "license": "ISC",
  "devDependencies": {
    "electron": "^25.2.0",
    "electron-builder": "^24.4.0"
  }
}