Electron 简单入门

莫小峰sky
176 阅读4分钟

Electron 简单入门

Electron是什么？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium和 Node.js到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

1.基本要求

在使用Electron进行开发之前，您需要安装 Node.js。建议使用最新的LTS版本

要检查 Node.js 是否正确安装，请在您的终端输入以下命令：

# 查看node版本
node -v
# 查看npm版本
npm -v

这两个命令应输出了 Node.js 和 npm 的版本信息。

注意： 因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。

2.初始化

# 新建一个应用，打开cmd/powserShell 都可以
# 新建工程文件夹，并进入
mkdir my-first-electron-app && cd my-first-electron-app
# npm进行初始化，init初始化命令会提示您在项目初始化配置中设置一些值
npm init
# 可以一直enter

Untitled.png

Untitled 1.png 可以使用vscode打开工程，

# 安装 electron ，注意切换npm源
npm install --save-dev electron

# 增加启动配置
{
  "scripts": {
    "start": "electron ."
  }
}

# 启动
npm run start

3.配置项目

3.1index.js

  • [app](https://www.electronjs.org/zh/docs/latest/api/app) 模块，它控制应用程序的事件生命周期。
  • [BrowserWindow](https://www.electronjs.org/zh/docs/latest/api/browser-window) 模块，它创建和管理应用程序 窗口。
const { app, BrowserWindow } = require('electron')
const path = require('path')

const 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('window-all-closed', () => {
	  if (process.platform !== 'darwin') app.quit()
	})
	
	app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

3.2 index.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'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

4.打包分发

# 安装 Electron Forge
npm install --save-dev @electron-forge/cli
npx electron-forge import

# 脚本
"scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },

# 打包分发
npm run make

Untitled 2.png

Untitled 3.png

5.可分发文件格式

// If you have set config.forge to a JavaScript file path in package.json:
// Only showing the relevant configuration for brevity
module.exports = {
    makers: [
        {
            name: '@electron-forge/maker-zip',
            platforms: ['darwin', 'linux'],
            config: {
                // Config here
            }
        }
    ]
}

6.创建和添加应用程序图标

module.exports = {
  // ...
  packagerConfig: {
    icon: '/path/to/icon' // no file extension required
  }
  // ...
}

7.其他打包 electron-builder（推荐）

# 安装
npm install --save-dev electron-builder

# 运行打包
npm run dist

Untitled 4.png

Untitled 5.png

{
  "build": {
    "appId": "electrontest",
    "productName": "Electron-test",
    "copyright": "仅用于测试",
    "compression": "maximum",
    "win": {
      "icon": "src/img/icon.ico"
    }
  }
}

下面是配置信息说明：
appId ： 软件的一个标识符。
productName ： 软件名称。
copyright ： 版权信息。
compression ： 打包的压缩级别，压缩级别从低到高是 store 、normal 、maximum ，maximum 需要的时间会长一些。
win ： Windows 相关的打包配置
icon ： ico 格式的图标。
上面是一小部分配置信息的说明。

制作安装包

在不配置 build 信息的情况下输入 npm run dist 也能生成一个安装包，但是这个安装包运行后会自动安装到 C:/Users/当前用户/AppData/Local/Programs 目录，也无法手动设置安装位置。

如果要显示安装选项还需要配置安装包信息，下面是一个简单的配置：

{
  "build": {
    "appId": "electrontest",
    "productName": "Electron-test",
    "copyright": "仅用于测试",
    "compression": "maximum",
    "win": {
      "icon": "src/img/icon.ico",
      "target": "nsis",
      "legalTrademarks": "Changbin1997"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": false
    }
  }
}

因为我使用的是 Windows，所以只配置了 Windows 的安装包信息。

下面是上面用到的一些配置说明：

win ： Windows 相关的打包配置
target ： 封装类型，nsis exe 安装包，nsis-web Web 安装程序，portable 无需安装的便携式应用，msi msi 格式的安装包，7z、zip、tar.xz、tar.gz、tar.bz2 都是不同格式的压缩包。appx Win10 应用商店专用的软件包。
legalTrademarks ： 公司或商标名称。
nsis ： 配置 nsis 安装包的信息
oneClick ： 一键安装，设置为 true 时 运行安装程序就会自动安装，无法手动设置安装位置之类的。
perMachine ： 为这台计算机上的所有用户安装，也就是安装到 Program Files 目录，默认为 false ，也就是为当前用户安装。
allowToChangeInstallationDirectory ： 是否允许更改安装位置。
createDesktopShortcut ： 是否创建桌面快捷方式。
*createStartMenuShortcut* ： 是否创建开始菜单快捷方式。

Untitled 6.png

Untitled 7.png

处理静态文件

静态文件默认是直接打包到软件中的，运行的时候才会释放加载，而且打包到软件中的静态文件是只读的，不能修改。如果只需要放到软件目录，不需要打包到软件中也可以单独配置。

下面配置把 src/log.txt 直接打包到软件目录：

{
  "build": {
    "appId": "electrontest",
    "productName": "Electron-test",
    "copyright": "仅用于测试",
    "extraFiles": [
      {
        "from": "src/log.txt",
        "to": "log.txt"
      }
    ]
  }
}

其中 extraFiles 中的内容就是文件配置，from 要配置的目标文件，to 是打包后的文件位置。配置后 from 中的文件就不会被打包到软件中。

如果需要获取 Electron exe 程序的所在目录可以使用 process.cwd() 。

除了 extraFiles 外 electron-builder 还提供了一个 extraResources 选项，extraResources 中配置的文件会打包到 Electron 软件目录下的 resources 目录中。

extraResources 的配置和 extraFiles 是差不多的，如下：

{
  "build": {
    "extraResources": [
      {
        "from": "src/log.txt",
        "to": "log.txt"
      }
    ]
  }
}

src/log.txt 会打包到软件目录下的 resources 目录中。以上就是 electron-builder 的简单使用记录。

avatar
文章
阅读
粉丝