Electron 快速入门

2022-3-19

Electron 简介

Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。

安装

首先安装Node.js，安装之后打开命令提示符检查Node和npm

node -v
//显示 v18.15.0
npm -v
//显示 9.5.0

Electron安装

npm install electron@v26.1.0 --save-dev

npx electron -v
// 显示 v26.1.0

安装打包工具 electron-packager（生成应用）和 electron-builder（生成应用安装包）

npm install electron-packager@v17.1.2 --save-dev
npm install electron-builder@v24.6.3 --save-dev

npx electron-packager --version
// 显示 v17.1.2
npx electron-builder --version
// 显示 v24.6.3

创建应用

Electron 应用的目录结构如下：

hello/
├── package.json
├── main.js
├── preload.js
└── index.html

package.json

{
  "name": "hello",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Teroun",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^26.1.0",
    "electron-builder": "^24.6.3",
    "electron-packager": "^17.1.2"
  }
}

main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
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')
    }
  })

  // 加载 index.html
  mainWindow.loadFile('index.html')

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。

preload.js

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-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>.

    <!-- 您也可以此进程中运行其他文件 -->
    <script src="./renderer.js"></script>
  </body>
</html>

运行应用

首先打开项目所在目录，然后输入下面命令，回车即可运行

//进入目录
d:
cd electron\hello
//运行应用
npm run start
//运行应用
electron .

运行成功

electron-packager（生成应用）

electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>

修改 package.json的配置文件快捷指令

"scripts": {
    "package": "electron-packager . hello --win --out ../hello_package --arch=x64 --app-version=1.0.0 --electron-version=17.1.2  --icon=./logo.ico" 
  }

. // 当前目录
hello // 名称
--win // Windows平台
--out ../hello_package // 生成目录 上一级hello_packager目录
--arch=x64 // 64位
--arch=ia32 // 32位
--app-version=1.0.0 // 生成的APP版本
--electron-version=17.1.2 // 使用的electron版本
--icon=./logo.ico // icon图标
--app-copyright="Copyright © 2023 Your Company Name. All rights reserved." // 版权

//执行生成命令
cnpm run package

electron-builder（生成应用安装包）

"build": {
    "productName": "hello", //项目名 这也是生成的exe文件的前缀名
    "appId": "com.hello.hello", //包名 
    "copyright": "Copyright © 2022 hello. All rights reserved.", //版权  信息
    "directories": {
      "output": "../hello_build" // 输出文件夹
    },
    "asar": true, // 是否使用asar打包
    "win": {
      "icon": "./logo.ico", //图标路径
      "requestedExecutionLevel": "highestAvailable", //打开exe时请求权限  asinvoker 默认权限 highestAvailable 获取最高可能获取的权限  requireAdministrator  获取管理员权限
      "target": [
        {
          "target": "nsis", //使用nsis打包
          "arch": [
            "x64" //可选打包为 32位或64位    ia32  x64  
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false, // 一键安装
      "language": "2052", //安装语言(中文)
      "perMachine": true, //给机器上所有用户安装
      "allowToChangeInstallationDirectory": true, //让用户选择安装目录
	  "shortcutName": "你好" //图标名称 桌面快捷方式名称
    }
  }

修改 package.json的配置文件快捷指令

"scripts": {
    "build": "electron-builder --win"
}

//执行生成命令
npm run build

到此全部完成

作者：Teroun

链接：https://blog.bingxs.com/electronksrm.html

文章版权归作者所有，未经允许请勿转载。

THE END