Electron断网，消息通知，快捷键，复制功能「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」

1，Electron中，BrowserView首次加载页面总是不显示

因为版本的缘故，这两天在学习electron的过程中，总是遇到各种问题，有的时候，一个问题都折腾好久，不过，还好，结局都是好的

问题描述：

在主进程中，加载BrowserView, 设置页面的高度和宽度之后，页面总是不显示，改变窗口大小之后，页面才出来

代码main.js

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

  // BrowserView
  var view = new BrowserView()
  mainWindow.setBrowserView(view)
  view.setBounds({ x: 0, y: 100, width: 800, height: 700, horizontal: true })
  view.setAutoResize({ width: true, height: true })
  view.webContents.loadURL('https://electronjs.org')

解决方法

在BrowserWindow中设置 useContentSize：true 属性

const { app, BrowserWindow, BrowserView } = require('electron')
var mainWindow = null;  // 什么要打开的主窗口

app.on('ready', () => {
  mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 800,
    useContentSize: true, 
    webPreferences: { 
      nodeIntegration: true,// 启用node功能
      contextIsolation: false, // 防止require 未定义
      enableRemoteModule:true, // 开启remote
    } 
  })
  require('./src/menu.js')
  mainWindow.loadFile('render.html') // 加载html网页
  require('@electron/remote/main').initialize()  //添加语句
  require('@electron/remote/main').enable(mainWindow.webContents)  //添加语句
  // mainWindow.webContents.openDevTools()

  // BrowserView
  var view = new BrowserView()
  mainWindow.setBrowserView(view)
  view.setBounds({ x: 0, y: 100, width: 800, height: 700, horizontal: true })
  view.setAutoResize({ width: true, height: true })
  view.webContents.loadURL('https://electronjs.org')

  mainWindow.on('close', () => {
    mainWindow = null;
  })
})

2，断网提醒

原理：监听事件，对online 和 offline事件的监听

online: 在网络断开，然后又连接上的时候触发

offline: 在网络断开的时候触发


window.addEventListener('online', function() {
    this.alert('网络连接正常')
})
window.addEventListener('offline', () => {
   this.alert('网络连接异常，请检查网络')
})

3，消息通知

原理：通过window.Notification对象来实现，

var notifyBtn = document.querySelector('#notifyBtn')

var option = {
      title: '你有新消息来了',
      body: '消息查看'
        }
      notifyBtn.onclick = function() {
      new window.Notification(option.title, option)
    }

效果如下图：

4，注册全局快捷键

原理：主线程中引入globalShortcut对象

main.js中

const {  globalShortcut } = require('electron')

globalShortcut.register('ctrl+e', function() {
    mainWindow.loadURL('https://www.jsbbmm.top')
  })

如何想判断出快捷键是否绑定成功，可以通过三步运算

let isRegister = globalShortcut.isRegistered('ctrl+e') ? 'Success': "fail"

最后，关闭窗口，为了不影响全局的快捷键，需要在窗口即将关闭的事件中，取消快捷键的绑定

app.on('will-quit', function(){
  // 注销全局注册的快捷键
  globalShortcut.unregister('ctrl+e')
  globalShortcut.unregisterAll()
})

5，剪切板功能

原理：通过clipboard对象实现

复制功能，可以在主进程和渲染进程中使用

如果是在主进程

const { dialog, clipboard } = require('electron')

如果是在渲染进程

const { dialog, clipboard } = require('@electron/remote')

    const copyBtn = document.querySelector('#copyBtn') 
    const code = document.querySelector('#code')
          copyBtn.onclick = function() {
            clipboard.writeText(code.innerHTML)
            alert('复制成功')
          }

如下图：

6，项目地址

项目代码地址和文档中的截图都是同步的，都已经实现

[持续更新中]

gitee.com/jamiedawn/e…