Electron上手指南

前置


配置代理,解决网络问题:


npm set electron_mirror https://npm.taobao.org/mirrors/electron/ # electron 二进制包镜像
npm set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron/ # electron 二进制包镜像

安装:


npm install electron --save-dev

使用


和开发 Web 应用非常类似。


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'">
  <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>.
</body>
</html>

main.js


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

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

win.loadFile('index.html')
}

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

甚至可以直接加载一个现成的线上应用:


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

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

win.loadURL('https://www.baidu.com/')
}

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

package.json


{
"name": "electron-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
  "start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
  "electron": "^13.1.7"
}
}

执行:


npm start

打包构建


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

npm run make

流程模型


Electron 与 Chrome 类似采用多进程架构。作为 Electron 应用开发者,可以控制着两种类型的进程:主进程和渲染器。


主进程


每个 Electron 应用都有一个单一的主进程,作为应用程序的入口点。 主进程在 Node.js 环境中运行,这意味着它具有 require 模块和使用所有 Node.js API 的能力。


窗口管理


主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。
BrowserWindow 类的每个实例创建一个应用程序窗口,且在单独的渲染器进程中加载一个网页。 可从主进程用 window 的 webContent 对象与网页内容进行交互。


const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://github.com')

const contents = win.webContents
console.log(contents)
复制代码

应用程序生命周期


主进程还能通过 Electron 的app 模块来控制应用程序的生命周期。 该模块提供了一整套的事件和方法,可以添加自定义的应用程序行为 ( 例如:以编程方式退出您的应用程序、修改程序坞或显示关于面板 ) 。


// 当 macOS 无窗口打开时退出应用
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})

渲染器进程


每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程。


预加载脚本


预加载(preload)脚本包含了那些执行于渲染器进程中,且先于网页内容开始加载的代码 。


预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。


const { BrowserWindow } = require('electron')
//...
const win = new BrowserWindow({
preload: 'path/to/preload.js'
})
//...

由于预加载脚本与渲染器共享同一个全局 Window 接口,并且可以访问 Node.js API,因此它通过在 window 全局中暴露任意的网络内容来增强渲染器。



链接:https://juejin.cn/post/6987310547133792286

0 个评论

要回复文章请先登录注册