electron关于应用功能之旅(五)|七日打卡

已注销
1,338 阅读5分钟

微信公众号：[猫十二的日常]，欢迎留言和指出问题a

应用

我将对electron提供的基础功能过一遍，这些是一个应用软件的基本功能，也是跟用户一些操作关系密切，这个主要是针对和os系统的一些底层交互，electron进行了一系列的封装，所以我们直接调api，这个文章主要用来学习，这个只适合初学者，说明一下。欢迎各位一起来学习electron。（我的电脑是mac，可能win有问题，可能覆盖不到，童鞋见谅）还有linux也是。

通知

对于渲染进程，Electron 方便地允许开发者使用 HTML5 通知 API 发送通知，然后使用当前运行中的系统的原生通知 API 来进行显示。

#renderer.js
const myNotification = new Notification("我是标题", {
  body: "这个是来自渲染进程的通知",
});

myNotification.onclick = () => {
  console.log("我的点击事件被触发了");
};
console.log(121);

//我的点击事件被触发了
//121

image-20210114102550782

要在主进程中显示通知，您需要使用 Notification 模块。

#main.js
function showNotification() {
  if (Notification.isSupported()) { //检测系统是不是支持
    const notification = {
      title: "基础通知",
      body: "来自主进程的通知",
    };
    let notice = new Notification(notification);
    setTimeout(() => {
      notice.show();
    }, 3000);
    return;
  } //不加延迟的话，出不来，可能是异步的问题
  return console.log("系统不支持");
}
app.whenReady().then(createWindow).then(showNotification);

image-20210114110911498

由于这个通知在各个平台的实现有差异，就有人将他们的差异封装在一起，做成一个通用的npm包，我们可以跨系统的去调用方法，不用单独处理，这个就是node-notifier，来试试吧

#rendeer.js
const { ipcRenderer } = require("electron");
ipcRenderer.send("notice");
#main.js
const notifier = require("node-notifier");
ipcMain.on("notice", (event, arg) => {
  setInterval(() => {
    console.log(223, notifier);
    notifier.notify({
      title: "通知",
      message: "收到了",
    });
  }, 1000);
});
//好像不工作

不知道是不是升级到了big Sur 的原因，这个包似乎是失效了，轮询也没得用，我将这个包放在了渲染进程，但是依旧是坏的，也没有报错这是挺难受的一件事，所以暂时先放弃这个问题。

更多关于通知的APi可以看看这个api文档 类: Notification

最近文档

Windows 和 macOS 分别通过打开跳转列表和dock菜单使应用程序能够快速的访问最近打开的文档列表。

添加文档列表

#main.js

const { app } = require('electron')
name ='xxx' //自己的机器
app.addRecentDocument(`/Users/${name}/Desktop/work.type`)

image-20210114121537184

清除最近文档列表

#main.js
const { app } = require('electron')
app.clearRecentDocuments()

image-20210114141624404

任务栏进度条

设置任务栏的进度条，这个可以用作下载东西或者app升级，在windows每个窗口都会有一个进度条，而macos和linux只有一个进度条

win.setProgressBar(0.5); //表示进度条为50%，将参数设置-1则会移除这个进度条，默认值是0-1

main.js

let win;
function createWindow() {
  win = new BrowserWindow({
    width: 600,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      webviewTag: true, //需要设置webview来启用这个
    },
  });
  const contents = win.webContents;
  contents.openDevTools(); //打开调试工具
  // win.loadFile("index.html");
  win.setFullScreen(true); //全屏幕
  win.setProgressBar(0.5); //设置进度条
  win.loadURL("http://127.0.0.1:5500/2020-01-14/index.html");
}

macOS Dock

这个只能用在mac上面，添加一些菜单项，方便快速的启动

const dockMenu = Menu.buildFromTemplate([
  {
    label: "标签1",
    click() {
      console.log("标签1");
    },
  },
  {
    label: "标签菜单",
    submenu: [{ label: "标签1" }, { label: "标签2" }],
  },
  { label: "新菜单。。。" },
]);

function createWindow() {
  ....
  app.dock.setMenu(dockMenu); //设置自定义的dock菜单
  ...
}

image-20210114150931462

上面两个是关于window和linux菜单的行为，我没有电脑涉及不到，麻烦各位看客自己去尝试了

键盘快捷键

该功能允许你为 Electron 应用程序配置应用和全局键盘快捷键。

本地的快捷键

应用键盘快捷键仅在程序被聚焦才会被触发

process.platform === "darwin" ? "Alt+Cmd+I" : "Alt+Shift+I", 这个我们需要针对os平台进行设置

main.js

const { app, BrowserWindow, ipcMain, Menu, MenuItem } = require("electron");
const menu = new Menu();
menu.append(
  new MenuItem({
    label: "Electron",
    submenu: [
      {
        role: "help",
        accelerator:
          process.platform === "darwin" ? "Alt+Cmd+I" : "Alt+Shift+I",
        click: () => {
          console.log("Electron rocks!");
        },
      },
    ],
  })
);

这一操作好像覆盖了默认的操作。

之前

image-20210114182544552

之后

image-20210114182120726

全局快捷键

要配置全局键盘快捷键， 您需要使用 globalShortcon 模块来检测键盘事件，即使应用程序没有获得键盘焦点。

main.js

const { app, BrowserWindow, ipcMain, Menu, MenuItem,globalShortcut } = require("electron");

app.whenReady().then(createWindow).then(()=>{
  globalShortcut.register("Alt+CommandOrControl+I", () => {
    console.log("electron 全局监听者呢");
  });
});
//electron 全局监听者呢

在浏览器窗口内的快捷方式

对于浏览器来说，是可以监听到键盘的操作的，类似于这种方式,你可以在渲染进程中使用 addEventListener() API来监听 kepup 和 keydown DOM事件。

window.addEventListener('keyup', doSomething, true)

拦截主进程的事件

在调度页面中的keydown和keyup事件之前，会发出before-input-event事件。 它可以用于捕获和处理在菜单中不可见的自定义快捷方式。

main.js

function createWindow() {
  win = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      nodeIntegration: true,
      webviewTag: true, //需要设置webview来启用这个
    },
  });
  const contents = win.webContents;
  contents.openDevTools(); //打开调试工具
  win.loadURL("http://127.0.0.1:5500/2020-01-14/index.html");
  contents.on("before-input-event", (event, input) => { //看到没这个事件
    if (input.control && input.key.toLowerCase() === "i") {
      console.log("触发Control+I");
      event.preventDefault();
    }
  });
}

//触发Control+I

使用第三方库

如果您不想手动进行快捷键解析，可以使用一些库来进行高级的按键检测。例如 mousetrap.

首先需要装

cnpm i -S mousetrap

安装完成后，我们需要再渲染进程处理

renderer.js

var Mousetrap = require("mousetrap");
Mousetrap.bind("4", function () {
  console.log("4");
});
Mousetrap.bind("?", function () {
  console.log("show shortcuts!");
});
Mousetrap.bind(
  "esc",
  function () {
    console.log("escape");
  },
  "keyup"
);

今天主要写了 通知、最近文档，底部dock，菜单栏、以及快捷键的用法，其实都比较简单，看文档都能看明白，但是实际操作也会有一些意想不到的问题，自己运行一遍其实会更踏实点。

如果觉得我的文章还可以，点个赞或者关注一下下，还有精彩的故事等着你哦，还可以云撸猫

avatar
文章
阅读
粉丝