electron基础篇(模块)

shell(打开网页)

1. electron5.x中建议使用iframe替代webview

2. electronic的webview标签基于Chromium的webview，后者正在经历巨大的架构变化。这将影响webview的稳定性，包括呈现、导航和事件路由。我们目前建议不使用webview标签，并考虑其他替代方案，如iframe、electronic的BrowserView或完全避免嵌入内容的体系结构。

调用shell

var { shell } = require('electron')

var aDom = document.querySelector('#adom')
aDom.onclick = function(e) {
  e.preventDefault()
  var href = this.getAttribute('href')
  shell.openExternal(href)
}

主进程通知渲染进程打开

主进程

function openWebview(url) {
  var win = BrowserWindow.getFocusedWindow()

  win.webContents.send('openWebview', url)
}

渲染进程

var { ipcRenderer } = require('electron')

ipcRenderer.on('openWebview', function(event, data) {
  myWebviewDom.src = data
})

dialog(弹框)

消息提示框

var {remote}=require('electron');

var errorDom=document.querySelector('#error');
errorDom.onclick=function(){ 
    remote.dialog.showErrorBox('警告','操作有误');

}

确认框

mesageBoxDom.onclick=function(){
    remote.dialog.showMessageBox({
        type:'info',
        title:'提示信息',
        message:'内容',
        buttons:['ok','no']
    },function(index){
        console.log(index)
    })
}

打开文件/文件夹框

openDialogDom.onclick = function() {
  remote.dialog.showOpenDialog(
    {
      properties: ['openDirectory', 'openFile']
      // properties: ['openFile']
    },
    function(data) {
      console.log(data)
      //["C:\Users\Administrator\Desktop\新建文件夹\js\index.js"]
    }
  )
}

保存文件框

saveDialogDom.onclick = function() {
  remote.dialog.showSaveDialog(
    {
      title: 'save file',
      defaultPath: 'aaa.jpg',
      filters: [
        { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
        { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
        { name: 'Custom File Type', extensions: ['as'] },
        { name: 'All Files', extensions: ['*'] }
      ]
    },
    function(path) {
      console.log(path)

      // C:\Users\Administrator\Desktop\新建文件夹\js\aaa.jpg

      //保存以后会打印保存的路径  , 但是不会实现真的保存功能  （具体保存什么数据可以写在nodejs里面）
    }
  )
}

系统托盘

var {Menu,Tray,BrowserWindow,app}=require('electron');

var path=require('path');


var iconTray=new Tray(path.join(__dirname,'../static/favicon2.ico'));



//绑定右键菜单

var trayMenu=Menu.buildFromTemplate([

    {

      label:'设置',
      click:function(){

        console.log('setting')
      }
    },
    {

        label:'升级',
        click:function(){
  
          console.log('update')
        }
      },
    {

        label:'退出',
        click:function(){
            if (process.platform !== 'darwin') {
                app.quit();
              }
        }
    }
]);

iconTray.setContextMenu(trayMenu);

iconTray.setToolTip('electron应用');



//实现点击关闭按钮让应用保存在托盘里面 ，双击托盘打开应用


var win=BrowserWindow.getFocusedWindow();


win.on('close',(e)=>{


        console.log(win.isFocused());

        if(!win.isFocused()){
                win=null;
        }else{
            e.preventDefault();  //阻止窗口的关闭事件
            win.hide();

        }
    
})




//监听任务栏图标的点击事件
iconTray.on('double-click',function(){
   
    win.show();
})





//闪烁图标

var count=0;

var timer=setInterval(function(){
    count++;

    if(count%2==0){

         iconTray.setImage(path.join(__dirname,'../static/favicon2.ico'))

    }else{

        iconTray.setImage(path.join(__dirname,'../static/empty.ico'))
    }

},500)

系统消息通知

openWinMessage.onclick = function() {
  var option = {
    title: 'electron 通知',
    body: 'electron跨平台软件开发教程更新了'
  }

  var myNotification = new window.Notification(option.title, option)

  myNotification.onclick = function() {
    console.log('点击了')
  }
}

监听网络断开，连接

window.addEventListener('online', function() {
    //
})

window.addEventListener('offline', function() {
    //
})

全局快捷键

var { globalShortcut, app } = require('electron')

app.on('ready', function() {
  //注册全局快捷键

  globalShortcut.register('ctrl+e', function() {
    console.log('ctrl+e')
  })

  globalShortcut.register('ctrl+d', function() {
    console.log('ctrl+d registed')
  })

  //检测快捷键是否注册功能

  console.log(globalShortcut.isRegistered('ctrl+e'))
})

app.on('will-quit', function() {
  //注销全局快捷键的监听

  globalShortcut.unregister('ctrl+e')

  globalShortcut.unregister('ctrl+d')
})

主进程引入

require('./main/globalShortcart.js')

//监听应用准备完成
app.on('ready', function() {

})