Electron的简单使用

最新推荐文章于 2024-06-07 15:28:37 发布

qq_27697737

最新推荐文章于 2024-06-07 15:28:37 发布

阅读量536

点赞数

文章标签： electron node.js javascript

本文链接：https://blog.csdn.net/qq_27697737/article/details/116456380

版权

Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行

1、环境安装及检查（Node.js 和 npm）

命令检查

node -v

npm -v

2、安装Electron

进入项目文件夹后输入命令或直接命令行创建文件夹并进入

mkdir my-electron-app && cd my-electron-app（创建文件夹并进入）

npm init -y //在根目录生成默认package.json配置文件

npm i --save-dev electron：//安装electron

3、添加应用程序入口（main.js）

主脚本指定了运行主进程的 Electron 应用程序的入口(对我们而言，是 main.js 文件)。通常，在主进程中运行的脚本控制应用程序的生命周期、显示图形用户界面及其元素、执行本机操作系统交互以及在网页中创建渲染进程。 Electron 应用程序只能有一个主进程。

脚本内容可以如下

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

function createWindow () {
  const win = new BrowserWindow({
    // width: 800,//设置宽度
    // height: 600,//设置高度
    autoHideMenuBar:true,//隐藏菜单栏
    fullscreen: true,//默认全屏
    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()
  }
})

代码注释说明：

第 1 行：为了管理应用程序的生命周期事件以及创建和控制浏览器窗口，您从 electron 包导入了 app 和 BrowserWindow 模块。
第 2 行: 导入 path 包，该包为操作文件路径提供了实用的功能。
第 4 行：在此之后，你定义一个方法用来创建一个带有预加载脚本的新的浏览器窗口，并加载index.html文件进入该窗口 (第 13 行，我们将在后面探讨这个文件)。
第 18 行：你通过调用 createWindow方法，在 electron app 第一次被初始化时创建了一个新的窗口。
第 20 行：您添加一个新的侦听器，只有当应用程序激活后没有可见窗口时，才能创建新的浏览器窗口。例如，在首次启动应用程序后或重启运行中的应用程序。
第 27 行：您添加了一个新的侦听器，当应用程序不再有任何打开窗口时试图退出。由于操作系统的窗口管理行为，此监听器在 macOS 上是禁止操作的

4、创建网页

<!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 style="background: white;">
    <h1>Hello World!</h1>
</body>
</html>

首页名称及内容可以使用html代码进行编辑，只要在上面的主入口程序进行加载即可

5、预加载脚本（这是copy官网教程的）

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])
  }
})

第 1 行：首先定义了一个事件监听器，当web页面加载完成后通知你。
第 2 行：接着您定义了一个功能函数用来为index.html中的所有placeholder设置文本。
第 7 行：接下来您遍历了您想展示版本号的组件列表。
第 8 行：最终，您调用 replaceText 来查找index.html中的版本占位符并将其文本值设置为process.versions的值。

6、修改开始生成的配置文件

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",//应用程序入口
    "scripts": {
        "start": "electron-forge start",
        "package": "electron-forge package",
        "make": "electron-forge make"
      },
      "repository": "https://github.com/electron/electron-quick-start"
}

7、打包并分发应用

7、1导入Electron Forge

cnpm install electron-packager -g

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

npx electron-forge import

可能出现的问题及解决方法

在配置文件中加入该行

"private": true,

7.2 创建一个分发版本：

npm run make

运行成功后会在项目根目录生成out文件夹中生成exe文件

双击exe文件运行则证明打包成功

7.3使用electron-forge打包

安装electron-forge

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

npm install electron-packager --save-dev

json配置

"package": "electron-packager . app --win --out demoapp --arch=x64 --electron-version 12.0.15 --overwrite --ignore=node_modules",

app：为应用名称

demoapp：为打包的目录名称

开始打包

npm run package

qq_27697737

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron的简单使用

Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行1、环境安装及检查（Node.js 和 npm）命令检查node -vnpm -v2、安装Electron进入项目文件夹后输入命令或直接命令行创建文件夹并进入mkdir my-electron-app && cd my-electron-app（创建文件夹并进入）npm
复制链接

扫一扫