electron阻止应用关闭

更新日期: 2019-01-22阅读: 3.6k标签: electron

下载Quick start项目

这里为了便于演示,我们直接从GitHub上下载Quick start项目

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install

安装成功后,执行npm start运行项目。就可以看到hello world界面了。


阻止关闭方法一

这里直接监听onbeforeunload事件,每当页面刷新或关闭时,都会触发这个事件。在index.html中我们添加下面一段代码

    //index.html
    window.onbeforeunload = (e) => {
      console.log('I do not want to be closed')
      e.returnValue = false
    }

这样,我们无论点击关闭,还是使用alt+f4都无法将页面关闭。

chrome在如果没有任何键盘输入操作的情况下,执行该监听方法时会在console界面里抛出一个error,不必在意。

这么做虽然能够实现我们的需求,但同时存在一些问题:

  • 应用真的无法关闭,除非终止进程
  • 页面既无法关闭,也无法刷新


方法二

我们在main.js中监听close事件。定义一个flag标识是否可以关闭。如果不可以关闭,则阻止该事件。

  //main.js
  let canQuit = false;
  mainWindow.on('close', (event) => {
    if (!canQuit) {
      event.preventDefault();}
  });

我个人更推荐使用第二种方法,因为该方法可以自由的决定页面是否真的需要关闭,而且不会妨碍页面刷新。


那么如何关闭呢?

这里我们注册一个全局的快捷键,这个快捷键可以修改canQuit这个变量的值,从而可以让程序顺利退出。具体实现可参考下面代码。

const {app, BrowserWindow,globalShortcut,dialog} = require('electron') //这里需要引入globalShortcut和dialog
app.on('ready', () => {
  globalShortcut.register('CommandOrControl+Alt+K', () => {
    dialog.showMessageBox({
      type: 'info',
      title: 'Information',
      message: 'Do you really want to close the application?',
      buttons: ['Yes','No']
    },(index)=>{
      console.log('you chose',index)
      if(index===0){
        canQuit=true;
        app.quit();
      }
    })
  })
})


链接: https://www.fly63.com/article/detial/2487

使用 Electron 打包 Vue 项目

新建一个 Vue 项目,安装 electron-builder,Electron 的main进程和renderer进程分开进行开发,可以通过ipcMain和ipcRenderer进行通信,数据流清晰,开发简单。

如何在Electron中调用Dll

客户端有些硬件的接口需要调试,是在电脑上连了一些硬件的设备,比如打印机、扫描仪或者进行串口通信等等。单靠JS是完成不了了,我们决定通过把C++或者C#把这些功能打包成Dll

electron_pcMain模块、ipcRenderer模块

ipcMain模块是EventEmitter类的一个实例。 当在主进程中使用时,它处理从渲染器进程(网页)发送出来的异步和同步信息。 从渲染器进程发送的消息将被发送到该模块。

electron将web应用构建跨平台桌面应用

Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。

Electron怎么启动并行的子任务

有些场景下比如要处理一大堆文件内容的查找,字符串的替换,文件的修改等一系列耗时操作的时候,如果放在主进程执行那必然会导致渲染进程的阻塞

Electron Windows增加托盘悬浮框功能

在做Electron Windows 桌面应用时候,做鼠标悬浮到托盘图标上时显示一个悬浮框(例如做消息提醒),但因为Windows没有提供托盘mouse-enter/mouse-leave事件,无法直接做这个功能,考虑到还有mouse-move事件,弄个间接的方式实现。

Electron应用打包、自动升级

使用electron builder打包只需要在vue.config.js中配置即可,这里需要注意的是,默认情况下electron builder打包出来的安装程序是不能修改安装目录的,需要allowToChangeInstallationDirectory这个配置设置为true

基于Electron开发Hosts切换工具的“踩坑”之旅

用过好几个Hosts切换工具,但总是有点这样那样的问题。最讨厌的莫过于切换完后,键盘都快按坏了,浏览器里面的Hosts就是不变,网上找了好多方法,但是感觉都并不完美,于是就有了这篇文章。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!