• 从零开始学Electron笔记(七)


    在之前的文章我们介绍了一下Electron中的对话框 Dialog和消息通知 Notification,接下来我们继续说一下Electron中的系统快捷键及应用打包。

    全局快捷键模块就是 globalShortcut,意思就是我们打开软件以后,按键盘上的快捷键,就可以实现用快捷键实现特定的功能,相当于用键盘快捷键触发某些事件。

    globalShortcut 官方地址:https://www.electronjs.org/docs/api/global-shortcut

    globalShortcut 模块可以在操作系统中注册/注销全局快捷键, 以便可以为操作定制各种快捷键。

    注意: 快捷方式是全局的; 即使应用程序没有键盘焦点, 它也仍然在持续监听键盘事件。 在应用程序模块发出 ready  事件之前, 不应使用此模块。

    我们的目录结构如下:

    globalShortcut 模块存在于主进程中,我们先来通过代码来看一下 globalShortcut 的注册及调用,代码主要在 index.js 中,如下:

     1 const {app, BrowserWindow, globalShortcut, dialog} = require('electron')
     2 
     3 function createWindow() {
     4     // 创建浏览器窗口
     5     const win = new BrowserWindow({
     6          800,
     7         height: 600,
     8         webPreferences: {
     9             nodeIntegration: true
    10         }
    11     })
    12 
    13     //引入 menu.js
    14     require('./menu');
    15     // 并且为你的应用加载index.html
    16     win.loadFile('index.html');
    17 
    18     // 打开开发者工具
    19     win.webContents.openDevTools()
    20 }
    21 
    22 // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
    23 // 部分 API 在 ready 事件触发后才能使用。
    24 app.whenReady().then(createWindow);
    25 
    26 app.on('ready', () => {
    27     // 注册一个 'CommandOrControl+X' 的全局快捷键
    28     const ret = globalShortcut.register('Command+X', () => {
    29         dialog.showMessageBox({
    30             message: 'Command+X 快捷键调用成功!'
    31         }).then(() => {
    32         });
    33     });
    34 
    35     if (!ret) {
    36         dialog.showMessageBox({
    37             message: 'Command+X 快捷键调用失败!'
    38         }).then(() => {});
    39     }
    40 
    41     // 检查快捷键是否注册成功
    42     dialog.showMessageBox({
    43         message: 'Command+X 快捷键注册 ' + globalShortcut.isRegistered('Command+X')
    44     }).then(() => {});
    45 });
    46 
    47 app.on('will-quit', () => {
    48     // 注销快捷键
    49     globalShortcut.unregister('Command+X');
    50 
    51     // 注销所有快捷键
    52     globalShortcut.unregisterAll()
    53 });

    在上面的代码中可以看出,我们注册了一个 Command+X 的快捷键,并且弹出一个 dialog 的对话框。

    我们在注册系统快捷键的时候要先使用 globalShortcut.isRegistered() 方法,来检测快捷键是否注册成功,因为你可能同时打开很多软件,它们已经占用了一些快捷键的组合,所以并不是你100%可以注册成功的。

    在关闭程序的时候要注销所有的快捷键,因为我们注册的是全局的快捷键,所以当我们关闭软件或者窗口时,记得一定要注销我们的快捷键。防止关闭后打开其他软件和他们的快捷键冲突。

    当我们使用了Electron开发完应用后,一定想着如何打包成exe文件,打包的方式有很多,甚至根据你使用不同的前端框架,打包方式也会有所不同。这里我们用原汁原味的打包方式,用electron-package 打包。

    首先我们先通过 npm 来下载 electron-package 包,

    npm install electron-packager --save

    然后在控制台输入

    electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

    其中我们需要输入6个参数,这6个参数意思分别是:

    • location of project : 项目所在路径
    • name of project : 打包的项目名称
    • platform : 确定了你要构建哪个平台的应用(Windows、Mac还是Liux)
    • architecture: 决定了使用x86还是x64还是两个架构都需要
    • electron version: electron 的版本
    • optional options: 可选选项

    为了打包方便我们可以在 package.json 的 scripts 中添加如下代码,相当于快捷方式的作用:

    "packager": "electron-packager ./ myElectron --all --out ./dist  --overwrite --icon=./img/icon/icon.ico"

    在项目中新建 dist 文件夹。

    使用 npm run packager 就可以进行打包了,打包的时间会非常长,而且如果你安装了一些安全软件,还要时刻看着安全软件的禁止操作,如果不小心被禁止掉了,可能会造成打包的失败。

    最后我们来看一下运行打包的结果:

     双击 myElectron 就可以运行我们打包的程序来。

  • 相关阅读:
    沙盒解决方案part1:沙盒解决方案的用途和好处
    session定义使用和丢失问题小结(20120101有更新&&20121026又更)
    普通pc检测维修的一个特例:检测\换板\电源\IDE信道\声卡驱动
    用户sa登录失败,该用户与可信sql server连接无关联
    trycatchfinally(C# 简单学习)
    按钮只能一次提交:ajax页面中调用ascx控件,如何设置ascx中按钮为false
    开始学习:Ajax的全称是:AsynchronousJavaScript+XML
    ajax学习的第一次亲密接触.(虽然还有一点模糊)
    .net2.0 在应用程序级别之外使用注册为 allowDefinition='MachineToApplication' 的节是错误的
    创建可重复使用的控件ascx-一页只能有一个服务器端 Form 标记?
  • 原文地址:https://www.cnblogs.com/weijiutao/p/13198866.html
Copyright © 2020-2023  润新知