electron基础

Electron

一、安装electron

1、全局安装
npm install -g electron  // 安装
electron .     // //启动命令
2.单独文件内安装
npm install electron --save-dev  //安装
./node_modules/.bin/electron   //启动命令

二、创建主窗口

创建’main.js‘文件

var electron = require('electron')
// 新版本引入remote的方式,先在主线程中初始化remote
require('@electron/remote/main').initialize()
var app = electron.app

var browerWindow = electron.BrowserWindow

var mainWindow = null

app.on('ready', () => {
  mainWindow = new browerWindow({
    width: 600,
    height: 600,
    webPreferences: { 
        nodeIntegration: true, 
        enableRemoteModule: true, 
        contextIsolation: false
    }
  })
  mainWindow.loadFile('./demo.html')  // 此处为引入主窗口文件
  mainWindow.on('close', () => {
    mainWindow = null
  })
})

三、渲染其他窗口(渲染进程)

// 新版本引入remote的方式,先在主线程中初始化remote。
// require(’@electron/remote/main’).initialize()

// 调用是 引入require(‘electron/remote’)

const { BrowserWindow } = require('@electron/remote')

let newWin = null
window.onload = () => {
  btn.onclick = () => {
    newWin = new BrowserWindow({
      width: 500,
      height: 500
    })

    newWin.loadFile('yellow.html')
    newWin.on('close', () => {
      newWin = null
    })
  }
}

四、配置菜单

1.先新建一个menu.js文件来管理菜单

const {Menu} = require('electron')

var template = [
	{
		label:'一级菜单',
		submenu:[
			{
				label:'二级菜单',
				click:()=>{
					//可以给二级菜单配置点击事件
					var win = new BrowserWindow({
                            width: 400,
                            height: 400,
                            webPreferences: { 
                                nodeIntegration: true,
                                enableRemoteModule: true, 
                                contextIsolation: false 
                                }
                          })

                          win.loadFile('yellow.html')
                          win.on('close', () => {
                            win = null
                          })
				}
			}
		]
	}，
	{
		label:'一级菜单'，
		submenu:[
			{}
		]
	}

]
// 使用这两个api
var m = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(m)

2.在主线程main.js中引入

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 600,
    height: 600,
    webPreferences: { nodeIntegration: true, enableRemoteModule: true, contextIsolation: false }
  })

  //引入配置的菜单！！！！menu.js
  require('./main/menu')

  mainWindow.loadFile('./demo2.html')
  mainWindow.on('close', () => {
    mainWindow = null
  })
})

五、菜单Menu的快捷键以及鼠标右键菜单

​ 1、首先是设置菜单快捷键：accelerator：'快捷键’

{
    label: '菜单',
    accelerator: 'ctrl+v'  // ctrl+v即为快捷键
  },

​ 2.配置主窗口的鼠标右键菜单

1、首先需要在主线程的页面中监听鼠标右键事件,并阻止默认事件

windoo.addEventListener('contextmenu',function(e){
	e.preventDefault()
})

2.在remote方法中取出需要用到的api
 只要不是直接配置主线程的，都在渲染进程中来进行。
 即：
 const {BrowserWindow,Menu,getCurrentWindow} = require('@electron/remote')
3.配置右键菜单模板
let rightTemplate = [
	{xxxxxxx}   // 和配置菜单一样
]
4.使用菜单
var r = Menu.buildFromTemplate(rightTemplate)
window.addEventListener('contextmenu', function (e) {
  e.preventDefault()
  r.popup({ window: getCurrentWindow() })
})

六、a链接使用默认浏览器打开

如何不进行处理，a链接点击是默认在主窗口打开

配置在默认浏览器打开

var {shell} = require('electron')
var aHref = document.querySelector('#aHref')
aHref.onclick = function (e) {
  e.preventDefault()
  var href = this.getAttribute('href')  
  shell.openExternal(href)    //调用shell方法
}

七、在窗口中嵌入网页以及window.open()打开子窗口

页面中嵌入网页步骤：
const {BrowserView,BrowserWindow} = require('electron')

app.on('ready',()=>{
	mainWindow = new BrowserWindow({xxxxxxx})
	mainWindow.loadFile('index.html')
	
	let view = new BrowserView()
	mainWindow.setBrowserView(view)
	view.setBounds({
		x: 0,
        y: 120,
        width: 400,
        height: 800
	})
	view.webContents.loadURL('https://xxxxxx')
	
	
})

window.open()直接打开子窗口
在页面中直接写方法。

八、父子窗口之间的通信

子窗口向父窗口传递信息

//父：
window.open(popPage.html)  // 打开子窗口


// 父窗口接收信息
window.addEventListener('message',(msg)=>{
	console.log(msg)
	// JSON.stringify(msg.data)
})

//子popPage.html:
window.opener.postMessage('我是从子窗口传递的信息') //发送信息

九、选择文件对话框

//1. 先引入 dialog ，记住是从渲染进程remote中

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

//2. dialog.showOpenDialog 方法来打开文件对话框。

 	dialog.showOpenDialog({
        title:'请选择照片',   // 对话框顶部的标题
        defaultPath:'ma.png' , // 默认路径
        filters:[{    // 过滤器
          name:'img',
          extensions:['jpg','png']  // 要选择的文件格式
        }],
        buttonLabel:'打开图片'  // 对话框按钮的文字
      }).then((res) => {
          console.log(res,'res');
          // res.filePaths 为文件的路径
          let image = document.querySelector('#images')
          image.setAttribute('src',res.filePaths[0])
      }).catch(err=>{
          console.log(err)
      })

十、保存文件对话框

const { dialog } = require('@electron/remote')
const fs = require('fs')
dialog.showSaveDialog({
	title:'xxx'
}).then(res=>{
	console.log(res)
	fs.writeFileSync(res.filePath,'要写入的内容')
}).catch(err=>{
	console.log(err)
})

十一、消息对话框（确认对话框）

 dialog.showMessageBox({
        type:'warning',
        title:'这是标题',
        message:'是不是要去',
        buttons:['去','不去']  // 根据下标来选择
      }).then(res=>{
        console.log(res)
        // res.response 是数组buttons下标，来决定是选择了那个按钮
      })

十二、 网络断开与重新连接的监听

//1 online 监听网络连接事件
//2 offline 监听网络断开事件

  window.addEventListener('online',function(){
      alert('网络连接成功')
    })
    window.addEventListener('offline',() => {
      alert('网络中断了')
    })

十三、桌面通知消息


 let notifyBtn = document.querySelector('#notifyBtn')
 let option = {
    title:'来消息了',
    body:'这是消息内容'
  }
  notifyBtn.onclick = function (){
     new window.Notification(option.title,option)
  }
  

十四、全局快捷键的注册和注销

// 在主线程main.js中进行处理

const { golbalShortcut ,app} = require('electron')

// 注册快捷键要写在 app的ready事件中
app.on('ready',function(){
	// 注册ctrl+e,  golbalShortcut.register
	
	golbalShortcut.register('ctrl+e',()=>{
		// 快捷键要进行的操作
		mainWindow.loadURL('xxxx')
	})
	// 判断快捷键是否注册成功。globalShortcut.isRegistered
	// true  or  false
	let isRegister = globalShortcut.isRegistered('ctrl+e')
})

//注销快捷键
// 在app的will-quit事件中注销
app.on('will-quit',function(){
	globalShortcut.unregister('ctrl+e') //注销某个快捷键
	globalShortcut.unregisterAll() //  注销所有快捷键
})

十五、剪贴板的使用

const {clipboard} = reuqire('@electron/remote')

btn.onclick=function(){
	clipboard.writeText('xxx')
	alert('copy success!')
}