Electron的学习 --- day1

最新推荐文章于 2024-06-18 12:29:21 发布

cp3_hxl

最新推荐文章于 2024-06-18 12:29:21 发布

阅读量96

点赞数

文章标签：前端 electron

本文链接：https://blog.csdn.net/cp3_hxl/article/details/134926009

版权

什么是Electron？
Electron是由github开发的,它允许我们使用我们的web技术来开发桌面应用.
Electron = Chromium + Node.js + Native API.
Electron的环境搭建.
下载nodejs以后，使用npm install Electron --save-dev的命令来进行安装.
安装结束以后使用npx electron -v的命令来进行查看是否安装成功.
第一个Electron应用
注意; package.json里面的内容如下;

{
"name": "my-electron-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
  "electron": "^28.0.0"
}
}

index.html里面的内容如下;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    Hello World
</body>
</html>

main.js 里面的内容如下；在这里需要注意，如果你没在package.json里面写配置main那个属性，那么electron就会自动加载index.js

let electron = require('electron');

let app = electron.app;// 引用app
let BrowserWindow = electron.BrowserWindow; // 窗口引用

let mainWindow = null; // 声明要打开的窗口

app.on('ready', () => {
    mainWindow = new BrowserWindow({height: 800, width: 800 });
    mainWindow.loadFile('index.html');
    mainWindow.on('close',() => {
        mainWindow = null;
    })
})

Electron的运行流程
1)读取package.json中的入口文件,我们这里是main.js. 2) main.js 主进程中创建渲染进程. 3) 读取应用页面的布局和样式 4) 使用IPC在主进程执行任务并获取信息.
Electron 的主进程和渲染进程
我们可以理解package.json中定义的入口文件就是主进程，那一般一个程序只有一个主进程，而我们可以利用一个主进程，打开多个字窗口.
由于Electron 使用了Chromium 来展示web页面，所以chromium的多进程架构也被使用到。每个electron 中的web 页面运行在它自己的渲染进程中，也就是我们说的渲染进程.
也就是说主进程控制渲染进程，一个主进程可以控制多个渲染进程.
Electron Remote 模块的使用
electron有主进程和渲染进程之分，主进程可以简单理解为main.js ，也就是主程序运行后的窗体，而渲染进程则是main.js中所创建的窗体通过loadFile()加载的HTML页面的进程，在渲染进程中可以通过按钮单机创建新的窗体，但是无法直接使用BrowserWindow,而是需要使用remote. remote本来是用于在渲染进程中打开新窗体的。但是新版本的electron和旧版本的electron用法存在差异.
以下是新版本的使用方式;
1. 安装:
```
npm install --save @electron/remote
```
1. 在主程序中引入和初始化：
  安装好remote之后，我们需要在主进程和渲染进程中进行相应的设置才能使用。
  首先是在主程序中引入和初始化remote
```
const remote = require("@electron/remote/main")
remote.initialize()
//....
remote.enable(mainWindow.webContents)
```
1. 在渲染进程中require
```
//以前的写法
const {BrowserWindow} = require("electron").remote
//现在的写法
const {BrowserWindow} = require("@electron/remote")
```
实例:
本例实在在窗口加载的页面中单击按钮打开新窗体
注意; webPreferences的两个属性必须写上，否则渲染进程将无法使用nodejs.

main.js:

const { app,BrowserWindow,ipcMain,shell} = require("electron")
const remote = require("@electron/remote/main") //1 
remote.initialize()//2

let mainWindow = null

// require("./menu.js")

app.on("ready",()=>{
 mainWindow = new BrowserWindow({
     width:300,
     height:300,
     webPreferences:{
         nodeIntegration:true,//允许渲染进程使用nodejs
         contextIsolation:false//允许渲染进程使用nodejs
     }
 })
 mainWindow.loadFile("index.html")
 mainWindow.on("closed",()=>{
     mainWindow = null
 })
 remote.enable(mainWindow.webContents)//3
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击页面按钮打开新窗口</title>
</head>
<body>

<input type="button" value="打开新窗口" id = "btn1">
<script src="remote.js"></script>
</body>
</html>

romote.js

const {BrowserWindow} = require("@electron/remote")

const btn1 = document.querySelector("#btn1")

const baidu_site = "https://www.baidu.com"

window.onload = ()=>{
    btn1.onclick = ()=>{
        win = new BrowserWindow({
            width:500,
            height:500,
        })
        win.loadFile("page2.html")
    }
}

cp3_hxl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron的学习 --- day1

electron有主进程和渲染进程之分，主进程可以简单理解为main.js ，也就是主程序运行后的窗体，而渲染进程则是main.js中所创建的窗体通过loadFile()加载的HTML页面的进程，在渲染进程中可以通过按钮单机创建新的窗体，但是无法直接使用BrowserWindow,而是需要使用remote. remote本来是用于在渲染进程中打开新窗体的。每个electron 中的web 页面运行在它自己的渲染进程中，也就是我们说的渲染进程.也就是说主进程控制渲染进程，一个主进程可以控制多个渲染进程.
复制链接

扫一扫