devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

禹神electron学习~_electron 禹神

作者：小桥流水78 | 2024-07-04 19:37:59

赞

踩

electron 禹神

最近时间比较富裕  咱们浅浅来学习下electron 

视频在这禹神：一小时快速上手Electron，前端Electron开发教程_哔哩哔哩_bilibili

 先看下流程模型

 先决条件

 首先第一步 查看你的node和npm版本 

创建你的应用

 创建一个文件夹  我创建的名称为my-electron-app

搭建项目脚手架

然后打开vscode

npm init

交互式 init 命令将提示你在配置中设置一些字段。出于本教程的目的，需要遵循一些规则：

  • entry point 应该是 main.js。

  • author（名字创建者） 和 description（描述） 可以是任何值，但对于 应用打包 是必需的。

你的 package.json 文件应如下所示：

  1. {
  2.   "name": "my-electron-app",
  3.   "version": "1.0.0",
  4.   "description": "Hello World!",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "author": "zhou",
  10.   "license": "ISC"
  11. }

 划重点！！！！必填必填！！！打包要用到！！

然后，将 electron 包安装到应用的 devDependencies 中。 

npm install --save-dev electron

 最后，你希望能够执行 Electron。在 package.json 配置的 scripts 字段中，添加 start 命令，如下所示：

  1. {
  2.   "scripts": {
  3.     "start": "electron ."
  4.   }
  5. }

此 start 命令将允许你在开发模式下打开应用。

npm start

 注意：该脚本告诉 Electron 在项目的根文件夹上运行。在此阶段，你的应用将立即抛出错误，告诉你它找不到要运行的应用。如下：

运行主进程 

 

这是什么意思呢就是main是一个主入口  而现在没有这个主入口  它找不到   所以就报错了  那怎么解决这个问题呢  也很好解决  加上就是了吗（package.json里边别忘记修改哦）

 创建网页

在项目的根文件夹中创建pages文件夹在下边创建 index.html和index.css 文件：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <!-- https://web.nodejs.cn/en-US/docs/Web/HTTP/CSP -->
  7.     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  8.     <title>Hello World!</title>
  9.     <link rel="stylesheet" href="./index.css">
  10. </head>
  11.  
  12. <body>
  13.     <h1>欢迎学习Electron开发！！！</h1>
  14. </body>
  15.  
  16. </html>

 在浏览器窗口中打开网页

现在你已经有了一个网页，将其加载到应用窗口中。为此，你需要两个 Electron 模块：

  • app 模块，控制应用的事件生命周期。

  • BrowserWindow 模块，用于创建和管理应用窗口。

由于主进程运行 Node.js，因此你可以将它们作为 CommonJS 模块导入到 main.js 文件的顶部：

 

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

然后，添加一个 createWindow() 函数，将 index.html 加载到新的 BrowserWindow 实例中。

  1. const createWindow = () => {
  2.   const win = new BrowserWindow({
  3.     width: 800,
  4.     height: 600,
  5.   });
  6.  
  7.   win.loadFile("./pages/index.html");
  8. };

接下来，调用此 createWindow() 函数来打开窗口。

在 Electron 中，浏览器窗口只能在 app 模块的 ready 事件被触发后创建。你可以使用 app.whenReady() API 等待此事件。在 whenReady() 解决其 Promise 后调用 createWindow()。或者是app.on("ready"）来  此处我喜欢用后者  因为他俩是一样的  用哪个无所谓哈

  1. const { app, BrowserWindow } = require("electron");
  2. const createWindow = () => {
  3.   const win = new BrowserWindow({
  4.     width: 800,
  5.     height: 600,
  6.   });
  7.  
  8.   win.loadFile("./pages/index.html");
  9. };
  10. // app.whenReady().then(() => {
  11. //   createWindow();
  12.  
  13. // });
  14. app.on("ready", () => {
  15.     createWindow();
  16. });

 然后运行一下npm start

一个桌面应用就出现了

  管理窗口的生命周期

尽管你现在可以打开浏览器窗口，但你将需要一些额外的样板代码，以使其感觉对每个平台更加原生。应用窗口在每个操作系统上的行为都不同，Electron 让开发者有责任在他们的应用中实现这些约定。

一般来说，你可以使用 process 全局的 platform 属性来运行专门针对某些操作系统的代码。

所有窗口关闭后退出应用（Windows 和 Linux）

在 Windows 和 Linux 上，退出所有窗口通常会完全退出应用。

要实现此目的，请监听 app 模块的 'window-all-closed' 事件，如果用户不在 macOS (darwin) 上，则调用 app.quit()。

  1. app.on('window-all-closed', () => {
  2.   if (process.platform !== 'darwin') app.quit()
  3. })
如果没有打开窗口，则打开一个窗口 (macOS)

Linux 和 Windows 应用在没有打开任何窗口时退出，而 macOS 应用通常即使没有打开任何窗口也会继续运行，并且在没有可用窗口时激活应用应该打开一个新窗口。

要实现此功能，请监听 app 模块的 activate 事件，如果没有打开浏览器窗口，则调用现有的 createWindow() 方法。

由于无法在 ready 事件之前创建窗口，因此你应该仅在应用初始化后监听 activate 事件。通过从现有 whenReady() 回调中附加事件监听器来执行此操作。

  1. app.on("ready", () => {
  2.   createWindow();
  3.   app.on("activate", () => {
  4.     if (BrowserWindow.getAllWindows().length === 0) createWindow();
  5.   });
  6. });

如果你不想要上边那些个小标题  就加个属性 autoHideMenuBar:true

效果是这样的

 

看好进程  有主进程和渲染进程  我们还没看见渲染进程  不怕 我们在pages里写一个render.js，那怎么引入js呢  就很简单呀在html直接引入就好了

render.js与index。html的交互

  1. const btn1 = document.getElementById("btn1");
  2. btn1.onclick = () => {
  3.   alert("你点我了");
  4. };

  点击效果图如下

 

 那他俩是隔离开的  怎么通信呢

就比如我想要alert弹窗的时候我想要拿到node的版本怎么拿呢

在主进程我是可以拿到的

但是渲染进程就不行 控制器怎么调出来的ctrl+shift+i

为啥会报错 因为render.js是渲染环境  他没法拿到node的process方法 那怎么办

使用预加载脚本从渲染器访问 Node.js

现在，最后要做的是将 Electron 的版本号及其依赖打印到你的网页上。

在主进程中通过 Node 的全局 process 对象访问此信息很简单。但是，你不能只从主进程编辑 DOM，因为它无法访问渲染器的 document 上下文。他们处于完全不同的进程！

这时将预加载脚本附加到渲染器就派上用场了。预加载脚本在加载渲染器进程之前运行，并且可以访问渲染器全局变量（例如 window 和 document）和 Node.js 环境。

需要个预加载脚本通信  在根目录下新建个preload.js文件

使preload能进行打印 main.js需要加上这段代码

  1.     webPreferences: {
  2.       preload: path.resolve(__dirname, "./preload.js"),
  3.     },

然后npm start运行下

就能看到是preload先执行 然后执行的render

那我现在想要在渲染进程里边打印process 我就得通过perload（它虽然是运行在渲染进程的，但是它可以使用部分node语法 就比如process）尝试下

打印出来了   

那么 预加载文件如何把process传给渲染进程render.js呢

需要个属性

  1. const { contextBridge } = require("electron");
  2.  contextBridge.exposeInMainWorld("abc", {
  3.   xyz: 100,
  4.  });

先看这是没有写

// contextBridge.exposeInMainWorld("abc", {

//   xyz: 100,

// });

注释掉了  所以不执行  我们在控制台打印window  可见里边没有这个属性 

那我把注释打开看下 可见能在window里拿到这个abc了  

同理  如果我要是想拿process的话

渲染进程像主进程通信（单向）

概述：在渲染进程中 ipcRenderer.send发送消息 ，在主进程中使用ipcMain.on接收消息

常用于  在web中使用主进程的API,例如下边这个需求

点击按钮 在用户的D盘创建一个hello.text文件  文件内容来自于用户输入

看下效果：

是可以拿到输入的值的  那么怎么传给主进程呢 敲重点！！！

预加载脚本引入ipcRenderer .send使用

  1. console.log("preload", process.version);
  2. const { contextBridge,ipcRenderer } = require("electron");
  3. contextBridge.exposeInMainWorld("myAPI", {
  4.   process: process.version,
  5.   saveFile:(data)=>{
  6.     ipcRenderer.send('file-save',data)
  7.   }
  8. });

渲染进程点击按钮传值

  1. const btn1 = document.getElementById("btn1");
  2. const btn2 = document.getElementById("btn2");
  3. const input = document.getElementById("input");
  4. console.log("render");
  5.  
  6. btn1.onclick = () => {
  7.   alert(window.myAPI.process);
  8. };
  9.  
  10.  
  11. btn2.onclick = () => {
  12. myAPI.saveFile(input.value)
  13. };

主进程使用 ipcMain.on接收

  1. const { app, BrowserWindow,ipcMain } = require("electron");
  2. const path = require("path");
  3. const fs=require('fs')
  4.  
  5. function writeFile(event,data){
  6.     fs.writeFileSync('D://hello.text',data)
  7.  
  8. }
  9. const createWindow = () => {
  10.   const win = new BrowserWindow({
  11.     width: 800,
  12.     height: 600,
  13.     autoHideMenuBar: true,
  14.     webPreferences: {
  15.       preload: path.resolve(__dirname, "./preload.js"),
  16.     },
  17.   });
  18.   ipcMain.on("file-save",writeFile);
  19.  
  20.   win.loadFile("./pages/index.html");
  21. };
  22. // app.whenReady().then(() => {
  23. //   createWindow();
  24.  
  25. // });
  26. app.on("ready", () => {
  27.   createWindow();
  28.   app.on("activate", () => {
  29.     if (BrowserWindow.getAllWindows().length === 0) createWindow();
  30.   });
  31. });
  32.  
  33. app.on("window-all-closed", () => {
  34.   if (process.platform !== "darwin") app.quit();
  35. });

画一下重点

然后运行下npm start 

 

总结下  就是在preload里边使用ipcRenderer.send方法然后render里边点击按钮调用这个方法然后在主进程里边使用 ipcMain.on进行接收  然后进行操作

渲染进程和主进程双向通信怎么通信呢（双向） 

例子：读取D盘里边hello.text

预加载里边写一个方法readFile 用invoke

  1. console.log("preload", process.version);
  2. const { contextBridge, ipcRenderer } = require("electron");
  3. contextBridge.exposeInMainWorld("myAPI", {
  4.   process: process.version,
  5.   saveFile: (data) => {
  6.     ipcRenderer.send("file-save", data);
  7.   },
  8.   readFile: () => {
  9.    return  ipcRenderer.invoke("file-read");
  10.   },
  11. });

然后html里边写个按钮 读取hello.text

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <!-- https://web.nodejs.cn/en-US/docs/Web/HTTP/CSP -->
  7.     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  8.     <title>Hello World!</title>
  9.     <link rel="stylesheet" href="./index.css">
  10. </head>
  11.  
  12. <body>
  13.  
  14.     <button id="btn3" >读取D盘中的hello.text</button>
  15.  
  16.  
  17.     <script  src="./render.js"></script>
  18. </body>
  19.  
  20. </html>

render.js里编写 调用预加载脚本的方法

  1.  
  2. const btn3 = document.getElementById("btn3");
  3.  
  4.  
  5.  
  6. btn3.onclick =() => {
  7. myAPI.readFile();
  8. };
  9.

然后主进程使用 ipcMain.handle进行接收

  1. const { app, BrowserWindow, ipcMain } = require("electron");
  2. const path = require("path");
  3. const fs = require("fs");
  4.  
  5. function writeFile(event, data) {
  6.   fs.writeFileSync("D://hello.text", data);
  7. }
  8. // readFile;
  9. function readFile() {
  10.   let res = fs.readFileSync("D://hello.text").toLocaleString();
  11.   console.log(res, "res");
  12.   return res
  13. }
  14. const createWindow = () => {
  15.   const win = new BrowserWindow({
  16.     width: 800,
  17.     height: 600,
  18.     autoHideMenuBar: true,
  19.     webPreferences: {
  20.       preload: path.resolve(__dirname, "./preload.js"),
  21.     },
  22.   });
  23.   ipcMain.on("file-save", writeFile);
  24.   ipcMain.handle("file-read", readFile);
  25.  
  26.   win.loadFile("./pages/index.html");
  27. };
  28. // app.whenReady().then(() => {
  29. //   createWindow();
  30.  
  31. // });
  32. app.on("ready", () => {
  33.   createWindow();
  34.   app.on("activate", () => {
  35.     if (BrowserWindow.getAllWindows().length === 0) createWindow();
  36.   });
  37. });
  38.  
  39. app.on("window-all-closed", () => {
  40.   if (process.platform !== "darwin") app.quit();
  41. });

划重点

读取完毕之后 需要返回给预加载脚本 用return 预加载脚本也直接return  然后就是render里边进行接收

因为是异步 所以接收到的是个pending状态 我们用await来接收下

就可以拿到了   总结下  就是在preload里边使用ipcRenderer.invoke方法然后render里边点击按钮调用这个方法然后在主进程里边使用 ipcMain.handle进行接收  接收完之后要使用render给他return出去 在预加载脚本里边也要return出去 然后在render.js里边使用async和await进行接收就行了

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/788031
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号