03_Electron 主历程和渲染历程、点击（拖放）打开文件功能 ...

郭卫东  金牌会员 | 2024-8-9 07:59:30 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 565|帖子 565|积分 1695

一、Electron 主历程和渲染历程

主历程和渲染器历程：
package.json 中界说的入口被称为 主历程。在主历程 中实例化 BrowserWindow 创建的 Web 页面被称为渲染历程，一个 Electron 应用只有一个主历程，但是可以有多个渲染历程，每个 Electron 中的 web 页面运行在它本身的渲染历程中。
主历程利用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在本身的渲染历程里运行页面。当一个 BrowserWindow 实例被销毁后，相应的渲染历程也会被终止。
历程（了解）： 历程（process）是计算机中的程序关于某数据聚集上的一次运行活动，是系统进行资源分配的调度的基本单元，是操纵系统布局的基础。
线程（了解）：在一个程序里的一个执行门路就叫做 线程（thread）。更准确的界说是：线程是 “一个历程内部的控制序列”。
线程和历程（了解）：一个程序至少有一个历程，一个历程至少有一个线程。
我们 electron 启动以后就可以大概在 任务管理器中查看到主历程

创建另外一个 second.html 渲染历程，在 main.js 的 createWindow 中添加代码：
  1. const createWindow = ()=>{
  2.         const mainWindow = new BrowserWindow({
  3.                 width:800,
  4.                 height:600
  5.         })
  6.   // __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html
  7.         mainWindow.loadFile(path.join(__dirname, 'index.html'))
  8.   const secondWindow = new BrowserWindow({
  9.                 width:800,
  10.                 height:600,
  11.     parent: mainWindow
  12.         })
  13.   // __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html
  14.         secondWindow.loadFile(path.join(__dirname, 'second.html'))
  15. }
复制代码
运行效果如下

二、Electron 主历程和渲染历程中利用 Nodejs 以及 Nodejs 第三方模块

2.1、主历程中利用 Nodejs 模块

Electron 主历程中无需任何配置就可以利用 nodejs 模块。

2.2、渲染历程中 利用 Nodejs 模块

1、BrowserWindow 中通过 preload 加载 js 文件可以直接利用 nodejs 模块
2、假如不利用 preload 加载的 js ，Electron5.x 之后没法在渲染历程中直接利用 nodejs，
2.3、BrowserWindow 中通过 preload加载的js 文件可以直接利用nodejs 模块

在页面运行其他脚本之前预先加载指定的脚本， 无论页面是否集成 Node，此脚本都可以访问 所有 Node API 脚本路径为文件的绝对路径
main.js 主历程 代码：
  1. const createWindow = ()=>{
  2.         const mainWindow = new BrowserWindow({
  3.                 width:800,
  4.                 height:600,
  5.     webPreferences: {
  6.       preload: path.join(__dirname, 'render/preload.js')
  7.     }
  8.         })
  9.   // __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html
  10.         mainWindow.loadFile(path.join(__dirname, 'index.html'))
  11.   fs.readFile("package.json",(err, data)=>{
  12.     if(err) {
  13.       console.log(err);
  14.       return
  15.     }else {
  16.       console.log(data.toString())
  17.     }
  18.   })
  20. }
复制代码
2.4、渲染历程中直接利用 Nodejs 模块

假如不利用 preload 加载的 js ，Electron5.x 之后没法再渲染历程中直接利用 nodejs，假如我们想要再渲染历程中利用 nodejs 的话需要进行如下配置：
https://www.electronjs.org/docs/api/browser-window
  1. const mainWindow = new BrowserWindow({
  2.         width:800,
  3.         height:600,
  4.     webPreferences: {
  5.      nodeIntegration: true,
  6.      contextIsolation: false
  7.    }
  8. })
复制代码
主历程：

2.5 打开调试模式

不需要手动点击下面的选项就可以直接展示 调试窗口

  1. const createWindow = ()=>{
  2.         const mainWindow = new BrowserWindow({
  3.                 width:800,
  4.                 height:600,
  5.             webPreferences: {
  6.               nodeIntegration: true,
  7.               contextIsolation: false
  8.             }
  9.         })
  10.   // __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html
  11.         mainWindow.loadFile(path.join(__dirname, 'index.html'))
  12.   // 打开调试模式
  13.   mainWindow.webContents.openDevTools()
  14. }
复制代码
2.6、点击按钮展示 文件内容

目次布局：

preload.js 代码：
  1. const fs = require('fs')
  2. window.onload=()=>{
  3.   let openFileDom = document.getElementById("btnFile")
  4.   let contentDom = document.getElementById("content")
  5.   openFileDom.onclick = ()=>{
  6.     fs.readFile("package.json",(err, data)=>{
  7.       if(err) {
  8.         console.log(err);
  9.         return
  10.       }else {
  11.         console.log(data.toString())
  12.         contentDom.innerHTML = data.toString()
  13.       }
  14.     })
  16.   }
  17. }
复制代码

index.html 代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       #content {
  9.         width: 300px;
  10.         height: 300px;
  11.         border: 1px solid red;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <h1>这是一个 electron 的项目</h1>
  17.     <button id="btnFile">打开</button>
  18.     <div id="content"></div>
  19.   </body>
  20.   <script src="render/preload.js"></script>
  21. </html>
复制代码
三、Electron 调用 h5 的拖放 api 结合 Nodejs fs 模块实现拖放打开文件功能

1、H5 的拖放 api

https://www.w3cschool.cn/jsref/event-ondragover.html
ondragover 事件在可拖动元素或选取的文本正在拖动到放置目标时触发。
默认环境下，数据/元素不能放置到其他元素中。 假如要实现改功能，我们需要防止元素的默认处理方法。我们可以通过调用 event.preventDefault() 方法来实现 ondragover 事件
留意： 为了让元素可拖动，需要利用 HTML5draggable 属性。
提示： 链接和图片默认是可拖动的，不需要 draggable 属性。
在拖放的过程中会触发以下事件：
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
留意： 在拖动元素时，每隔 350 毫秒会触发 ondragover 事件。
2、实现效果


3、完整代码

目次布局：

main.js 中的代码：
  1. const {app, BrowserWindow} = require('electron')
  2. const path = require('path')
  4. const createWindow = ()=>{
  5.         const mainWindow = new BrowserWindow({
  6.                 width:800,
  7.                 height:600,
  8.     webPreferences: {
  9.       nodeIntegration: true,
  10.       contextIsolation: false
  11.     }
  12.         })
  13.   // __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html
  14.         mainWindow.loadFile(path.join(__dirname, 'index.html'))
  15.   // 打开调试模式
  16.   mainWindow.webContents.openDevTools()
  17. }
  18. // 监听 electron ready 事件创建窗口
  19. app.on('ready', createWindow);
  20. // 监听窗口关闭的事件，关闭的时候退出应用， macOs 需要排除
  21. app.on('window-all-closed', ()=>{
  22.         if(process.platform !=='darwin') {
  23.                 app.quit();
  24.         }
  25. })
  27. // Macos 中点击 dock 中的应用图标的时候重新创建窗口
  28. app.on('activate', ()=>{
  29.   if(BrowserWindow.getAllWindows().length === 0) {
  30.     createWindow()
  31.   }
  32. })
复制代码
index.html 代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       #content {
  9.         width: 100%;
  10.         height: 400px;
  11.         overflow-y: auto;
  12.         background-color: orange;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <h1>这是一个 electron 的项目</h1>
  18.     <div id="content"></div>
  19.   </body>
  20.   <script src="render/preload.js"></script>
  21. </html>
复制代码
preload.js 代码
  1. /**
  2. * ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  3. ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  4. ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  5. ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
  6. */
  7. let fs = require("fs")
  8. window.onload=()=>{
  9.   let contentDom = document.getElementById("content")
  10.   // 阻止默认行为
  11.   contentDom.ondragenter = contentDom.ondragover= contentDom.ondragleave = function(){
  12.     return false
  13.   }
  14.   contentDom.ondrop=(e)=>{
  15.     let path = e.dataTransfer.files[0].path
  16.     console.log(e,  e.dataTransfer.files[0].path)
  17.     fs.readFile(path, (err, data)=>{
  18.       if(err) {
  19.         console.log(err)
  20.         return false
  21.       }
  22.       contentDom.innerHTML = data
  24.     })
  25.   }
  26. }
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

郭卫东

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表