Electron主进程和渲染进程

南山隐士 2022年06月25日 27 0

electron的运行流程

electron 首先会运行主进程, 一般为background.js的文件, 如果你使用的是脚手架, 或者是main.js的文件, 在主进程中会创建一个 BrowserWindow 实例, 这个实例就是一个渲染进程, 会展示相应的页面

进程和线程

进程: 是计算机中的程序关于某数据集合上的一次运行活动,是 系统进行资源分配和调度的基本单位,是操作系统结构的基础

线程: 在⼀一个程序里的一个执行路线就叫做线程(thread)

线程和进程的关系: 一个程序至少有一个进程,一个进程至少有一个线程

Electron 渲染进程读取文件

平时我们开发web项目,无法使用nodeAPI,除非在webpack中,可是Electron 可以帮到我们, 例如如下读取文件

varfs=require('fs'); 
varcontent=document.getElementById('content'); 

varbutton=document.getElementById('button'); 

button.addEventListener('click',function(e){ fs.readFile('package.json','utf8',function(err,data){ content.textContent=data; console.log(data); }); }); 

Electron 开启调试模式

mainWindow.webContents.openDevTools();

拖动展示文件

var fs = require('fs')
/*
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
*/
const content = document.querySelector('#content')
content.ondragenter = content.ondragover = content.ondragleave = function() {
  return false /* 阻止默认行为 */
}
content.ondrop = function(e) {
  // 阻止默认行为
  e.preventDefault()
  console.log(e.dataTransfer.files[0])
  var path = e.dataTransfer.files[0].path
  fs.readFile(path, 'utf-8', (err, data) => {
    if (err) {
      console.log(err)

      return false
    }
    content.innerHTML = data
  })
}
Last Updated: 2022/06/25 19:02:02
Electron安装及初始项目 Electron remote模块