Electron初探

最新推荐文章于 2024-05-28 08:23:58 发布

某某某-燕青

最新推荐文章于 2024-05-28 08:23:58 发布

阅读量224

点赞数

分类专栏：架构公开信息文章标签： electron v8.2.0 java es6

本文链接：https://blog.csdn.net/yxxy_bobo/article/details/107284672

版权

架构公开信息专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Electron初探

electron是github开发的，用来开发桌面应用的一款前端框架

开发环境

安装node.js

nodejs下载地址

为了避免网络问题对Node工作时的影响，我们安装国内的node镜像cnpm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装electron

npm install --save-dev electron

或者全局安装

npm install -g electron

开发工具

VSCode

其实vscode就是electron开发的

开发一个简易的electron

Electron 应用使用JavaScript开发，其工作原理和方法与Node.js 开发相同。 electron模块包含了Electron提供的所有API和功能，引入方法和普通Node.js模块一样：

const electron = require('electron')

electron 模块所提供的功能都是通过命名空间暴露出来的。比如说： electron.app负责管理Electron 应用程序的生命周期， electron.BrowserWindow类负责创建窗口。下面是一个简单的main.js文件，它将在应用程序准备就绪后打开一个窗口：

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

function createWindow () {   
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

创建你想展示的 index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    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>.
  </body>
</html>

启动

我们在package.json中已经写好了启动命令，所以这里直接用node启动命令npm start就可以了，如果没有配，也可以用electron .命令启动。

资料获取找：lezijie007

主进程和渲染进程

我们可以理解package.json中定义的入口文件就是主进程,那一般一个程序只有一个主进程,而我们可以利用一个主进程,打开多个子窗口.

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中,也就是我们说的渲染进程.

也就是说主进程控制渲染进程,一个主进程可以控制多个渲染进程.
在这里插入图片描述

您应当在 main.js 中创建窗口，并处理程序中可能遇到的所有系统事件。下面我们将完善上述例子，添加以下功能：打开开发者工具、处理窗口关闭事件、在macOS用户点击dock上图标时重建窗口，添加后，main. js 就像下面这样：

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

function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 并且为你的应用加载index.html
  win.loadFile('index.html')

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

app.whenReady().then(createWindow)

// 当所有窗口都关闭时触发此事件.
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

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

// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件，然后用 require 导入。

git上面的demo示例

# 克隆这仓库
git clone https://github.com/electron/electron-quick-start
# 进入仓库
cd electron-quick-start
# 安装依赖库
npm install
# 运行应用
npm start

electron-forge构建项目

# 全局安装electron-forge
npm install electron-forge -g

#用electron-forge初始化一个项目
electron-forge init demo02

# 进入到项目目录
cd demo02

#启动项目
npm start

某某某-燕青

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron初探

Electron初探electron是github开发的，用来开发桌面应用的一款前端框架开发环境安装node.jsnodejs下载地址为了避免网络问题对Node工作时的影响，我们安装国内的node镜像cnpm。npm install -g cnpm --registry=https://registry.npm.taobao.org安装electronnpm install --save-dev electron或者全局安装npm install -g electron开发工具VS
复制链接

扫一扫