Electron从零开始学习01

最新推荐文章于 2023-10-30 16:33:23 发布

林小鹅

最新推荐文章于 2023-10-30 16:33:23 发布

阅读量188

点赞数

分类专栏： react 文章标签： react reactjs npm 前端 node.js

本文链接：https://blog.csdn.net/xiaolingshi_/article/details/111322121

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简介

Electron 是 GitHub 发布的跨平台桌面应用开发工具，支持 Web 技术开发桌面应用，其本身是基于 C++ 开发的，GUI 核心来自于 Chrome，而 JavaScript 引擎使用 v8

下载electron

查看自己的node版本，并对照文档下载对应的electron版本和chromium

创建基本应用程序

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

创建main.js文件

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

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

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 style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using node <script>document.write(process.versions.node)</script>,
        Chrome <script>document.write(process.versions.chrome)</script>,
        and Electron <script>document.write(process.versions.electron)</script>.
    </p>
</body>
</html>

修改package.json文件

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "description": "My Electron app",
    "main": "main.js"
}

npm start 命令将以 Node.js 运行主脚本。要使用 Electron 运行脚本，您需要将其更改为这样：

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

然后运行

npm start

然后结果出来

将在桌面系统上看见这个图标，代表启动成功

Electron的组成和详细介绍

主进程 通过创建 浏览器窗口 实例来创建 个网页。每一个 浏览窗口 实例在其渲染过程中运行网页. 当一个 BrowserWindow 实例被摧毁时，对应的渲染过程也被终止。
主进程 管理所有 个网页及其对应的渲染过程。

渲染进程 只能管理 个相应的网页。在一个渲染过程中崩溃不会影响其他渲染过程。
渲染进程 通过IPC 与主进程通信 在网页上执行GUI操作。由于安全考虑和可能的资源泄漏，直接从渲染器过程中调用与本地GUI有关的API受到限制。

APIs

Electron API

Electron API是根据流程类型分配的。这意味着某些模块可以从主程序或渲染程序中使用，有些模块可以从两者中使用。 Electron 的 API 文档指明了每个模块可以使用的过程。

例如，要在两个进程中访问 Electron API，需要它包含的模块：

const electron = require('electron')
复制

若要创建一个窗口，请调用 浏览窗口 类，只能在主进程中使用：

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
复制

若要从渲染器调用主流程，请使用 IPC 模块：

// 在主进程中
const { ipcMain } = require('electron')

ipcMain.handle('exper-action', (evidence, ...args) =>
  // ... 代表渲染器操作
})
复制
// 在渲染过程中
const { ipcRenderer } = require('electron')

ipcRender.invotrake('exper-action', ...args)
复制

注意：由于渲染过程可能会运行不受信任的代码(特别是第三方的代码)，重要的是要认真验证主要进程中提出的请求。

Node.js API

注意：要从渲染过程中访问Node.js API，您需要设置 nodeIntegration 选项为 true。

Electron 在主流程和渲染流程中显示对 Node.js API及其模块的完全访问权限。例如，您可以从根目录读取所有文件：

const fs = require('fs')

const root = fs.readdirSync('/')

console.log(root)
复制

要使用Node.js模块，您首先需要安装它作为依赖：

npm install --save aws-sdk
复制

然后，在您的 Electron 应用程序中，需要模块：

const S3 = require('aws-sdk/clients/s3')

林小鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Electron从零开始学习01

简介Electron 是 GitHub 发布的跨平台桌面应用开发工具，支持 Web 技术开发桌面应用，其本身是基于 C++ 开发的，GUI 核心来自于 Chrome，而 JavaScript 引擎使用 v8下载electron查看自己的node版本，并对照文档下载对应的electron版本和chromium创建基本应用程序mkdir my-electron-app && cd my-electron-appnpm init -ynpm i --save-dev elect
复制链接

扫一扫

专栏目录