一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

文件对象

引入node模块中的fs

const fs =require ('fs');

绑定对应的事件，阻止默认事件行为和防止事件传播

//绑定DOM对象监听
document.getElementById('XXX').οnclick=hello;
//ie中监听的方法
[object].attachEvent(“事件类型”,“处理函数”)//绑定
[object].detachEvent(“事件类型”,“处理函数”)//解绑
//标准Dom事件监听
e.addEventListener(“事件类型”,“处理函数”,“冒泡事件或捕获事件”)//绑定
e.removeEventListener(“事件类型”,“处理函数”,“冒泡事件或捕获事件”)//解绑
//默认事件行为
e.preventDefault()//取消浏览器对当前事件的默认行为
e.stopPropagation()//阻止事件在DOM中继续传播

事件处理函数

  fs.readFile('文件名包含后缀',(err,data)=>{
      //对应一些操作
    }

Dialog模块传送门

我使用的Electron18.0.4版本，在渲染进程中使用这个模块的时候出现控制台报错的问题，在这里总结下我的踩坑之道。报错信息当然还有很多，这里就不一一列举........

TypeError: Cannot read properties of undefined (reading 'XXX')

首先我检查一下看看是不是我的Remote模块是否安装成功（版本13禁用了Remote模块，所以要用下面方式下载新的包）

//安装失败的话就多试几次，国外所以......
yarn add @electron/remote

然后就是在主进程文件中引入并初始化

require("@electron/remote/main").initialize();

再之后就是在引入读取渲染进程的代码前初始化

 require("@electron/remote/main").enable(mainWindow.webContents);//这里的mainWindow不是固定的根据自己项目设置

最后在子进程中引入并使用引入

  const remote = require("@electron/remote")

使用

   //弹出信息框（配置对象中不止有type、title、buttons，还有很多具体可看文档）
    remote.dialog.showMessageBox({
      type: 'info',//可选
      title: '新增成功',//标题
      buttons:['YES','No']//按钮
    }).then((result)=>{
      console.log(result);//回调
    })

效果如下：

系统右下角通知消息传送门

引入（不多说）
使用

let option={
      title: '通知',
      body:'新建成功'
    }
 new window.Notification(option.title,option).show()

效果如下：

异步任务&清除异步任务

有一种情况，我们在主线程中创建了一个窗口（非立即创建而是需要调用这个方法后的一段时间创建这个窗口）然后我们创建完了之后又想立即把它给删除了，不想让他在延时一段时间后显示，这时我们应该怎么做呢？实际上就需要我们在创建这个延时的窗口的时候传递过去一个参数，这个参数表示这个延时器（即这个延时串口的唯一标识）然后我们清除这个延时器就可以了

先来封装一个创建新窗口的函数

// 创建一个新的窗口
function createNewWindow (remindWindow) {//remindWindow为窗口名字的参数
  remindWindow = new BrowserWindow({
    height: 450,
    width: 360,
    resizable: false,//是否可以改变窗口尺寸默认ture
    frame: false,
    show: false,
    webPreferences:{
      nodeIntegration:true,
      contextIsolation: false,
    }
  })
  //窗口是否总是显示在其他窗口之前
  remindWindow.setAlwaysOnTop(true)//默认false
  remindWindow.loadURL(`file://${__dirname}/render/remind.html`)//新窗口的渲染进程（html文件）
  remindWindow.show()//显示这个窗口

接收子进程发送的消息，创建一个异步的任务（异步的窗口）

//main.js文件
const { BrowserWindow, ipcMain,  Menu } =require('electron') 
const { app, BrowserWindow,ipcMain } = require('electron')
// in the main process:  主进程引入并初始化，然后声明全局变量
require('@electron/remote/main').initialize()
// 部分 api 在 ready 事件触发后才能使用。
app.on('ready', () => {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    // 启用node下面的所有进程都可被使用
    webPreferences: {
      nodeIntegration: true,
      contextIsolation:false,//配合nodeIntegration加上整个控制台不会报require错误
      enableRemoteModule:true
    }
  })
  // 设置加载渲染的文件
  win.loadFile('index.html')
  // 打开开发者工具
  win.webContents.openDevTools()
})
//一段时间后创建窗口
ipcMain.on('setTaskTimer', (event, remindWindow,timeoutname) => {
  //5秒后创建
  timeoutname=setTimeout(() => {
    createRemindWindow(remindWindow)
  }, 5000)
})

//index.js
// 发送消息给主线程，让其创建一个延时的窗口
  const { ipcRenderer } = require('electron')
  ipcRenderer.send('setTaskTimer')

新创建的延时窗口渲染后我不能一直让他显示吧，该怎么办呢？

//main.js文件
  // 关闭提醒窗口
  remindWindow.on('closed', () => { remindWindow = null })
  // 设置提醒弹窗多久自动关闭
  setTimeout( () => {
    remindWindow && remindWindow.close()
  }, 2000)//延时2秒后关闭

新的延时窗口还未渲染前我不想让它渲染了，怎么搞？

子渲染进程.html创建一个按钮
子进程.js中获取节点绑定事件

 let mclear=this.document.querySelector('#clear')
   mclear.onclick = function () {
      ipcRenderer.send('clearNowtimeout')//给主进程发送消息立即删除异步未渲染的任务
    }

主进程main.js添加

  //如果在渲染弹出框之前删除，则清除此弹出框定时器，不再创建此弹出框
  ipcMain.on('clearNowtimeout',()=>{
    clearTimeout(timeoutname)
  })

结果展示（延时5秒创建一个remind窗口，渲染后2秒自动关闭）：

结果展示（延时创建的窗口，没有渲染前，我点立即关闭，不再渲染）

初学Electron