Electron
介绍:允许使用web技术开发桌面应用
- Electron = Chromium(谷歌内核,渲染兼容性强大)+node.js(可以使用很多包加入功能)+Native API(跨平台原生的能力)
运行流程:需要3个文件,index.html, main.js, package.json
- 首先进入package.json寻找main方法,这里记录了主进程,也就是入口文件,有且只有一个
{
"name": "electronDemo1",
"version": "1.0.0",
"description": "",
//找这里,主进程是main.js
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
- 进入main.js以后,mainWindow.loadFile设置渲染文件,创建渲染进程,一个窗口就是一个
// 主进程
var electron = require('electron')
var app = electron.app //引用electron下面app
var BrowserWindow = electron.BrowserWindow //控制窗口引用
var mainWindow = null; //声明要打开的主窗口
//创建应用,ready是当应用开始的标识
app.on('ready', () => {
//设置窗口大小
mainWindow = new BrowserWindow({ width: 300, height: 300 })
//设置页面渲染的加载的文件
mainWindow.loadFile('index.html')
//当页面关闭时候,释放内存
mainWindow.on('closed', () => {
mainWindow = null
})
})
- 进入index.html:读取页面的布局和样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Electron</title>
</head>
<body>
Hello Electron
</body>
</html>
使用IPC在主进程执行任务并获取信息:我们要用到remote模块,他提供了一种在渲染进程(网页)和主进程之间进行进程通讯(ipc)的简便途径,通俗说就是渲染进程中使用主进程的方法或者对象,我们没办法直接调用,但是使用remote我么可以间接调用他们
这要注意写两个属性,webPreferences: { nodeIntegration: true, enableRemoteModule: true }
第一个是允许node里所有模块使用,第二个是允许使用remote,一定要做设置再使用
//首先我们在index页面引入一个js文件,用作调用主进程
<script src="render/demo2.js></script>
//然后我们看demo2.js里
//这里选中html文件中的btn按钮
const btn = this.document.querySelector('#btn')
//这里使用remote间接调用BrowserWindow
const BrowserWindow = require('electron').remote.BrowserWindow;
//这里添加新弹框,实现在渲染进程操作主进程中的方法
window.onload = function() {
btn.onclick = () => {
console.log('点击按钮了')
newWin = new BrowserWindow({
width: 500,
height: 500
})
newWin.loadFile('yellow.html')
console.log('渲染结束了')
newWin.on('close', () => {
newWin = null
})
}
}
菜单的创建及其绑定事件
首先来看创建菜单:我们现在主进程中引入我们创建菜单的js文件,然后再文件中创建引入menu和browserWindow,,然后编写菜单的模板,注册点击事件,然后构建模板,设置模板
//引入菜单文件
require('./main/menu.js')
//引入electron中的方法
const { Menu, BrowserWindow } = require('electron')
//菜单模板,label是菜单标题,submenu是菜单选项
var template = [{
//第一层里的label是最大的菜单,直接显示在窗口上方的,
label: '吃饭咯',
//选项栏允许套娃,就是每一个label下面都允许有一个submenu,但是设置了submenu就不能添加点击事件
submenu: [{
label: '玩游戏咯',
submenu: [{
label: 'CSGO'
}, {
label: 'LOL',
}],
click: () => {
var win = new BrowserWindow({
width: 500,
height: 500,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('yellow.html')
win.on('close', () => {
win = null
})
}
},
{ label: '听个咯' }
]
},
{
label: '睡觉咯',
submenu: [
{ label: '做梦' },
{ label: '做两个梦' }
]
}
]
//构建模板
var m = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)
小结:创建菜单标题就是用模板, Menu.buildFromTemplate(template),构建模板,然后再Menu.setApplicationMenu(m)设置,即可,注意的地方在于模板中的写法,和事件的绑定,以及引入
右键菜单制作以及快捷键
快捷键 : accelerator: 'ctrl+w', 直接在label下面加一行这个,就可以设置成快捷键执行点击操作
右键菜单制作:首先建立模板,然后注册末班,并且放进点击事件中,用popup控制模板弹出
//引入remote
const { remote } = require('electron')
//菜单模板
var rightTemplate = [
{ label: '复制', accelerator: 'ctrl+c' },
{ label: '粘贴', accelerator: 'ctrl+v' }
]
//构建菜单模板
var m = remote.Menu.buildFromTemplate(rightTemplate)
window.addEventListener('contextmenu', function(e) {
//浏览器不要执行与事件关联的默认动作
e.preventDefault()
//弹窗
m.popup({ window: remote.getCurrentWindow() })
})
通过链接打开浏览器
- 首先直接使用a标签跳转,会直接在electron中打开网址,如果想在浏览器中打开,
var { shell } = require('electron')
var aHref = document.querySelector('#aHref')
aHref.onclick = function(e) {
e.preventDefault();
var href = this.getAttribute('href')
shell.openExternal(href)
}
小结:首先引入shell属性,然后获取元素并绑定点击事件,然后关闭默认行为,然后绑定浏览器打开事件
在应用中嵌入一个网页
//引入
var BrowserView = electron.BrowserView
//创建
var view = new BrowserView()
//挂载
mainWindow.setBrowserView(view)
//设置位子
view.setBounds({ x: 0, y: 120, width: 1000, height: 500 })
//载入的网页
view.webContents.loadURL('https:baidu.com')
小结:在主进程引入,设置,然后挂载,效果图如上
打开子窗口:window.open
子窗口向父窗口通信
window.opener.postMessage('我是子窗口传递的信息',targetOrange),没第二参数则传全部
window.addEventListener('message',(msg)=>{
let msg = JSON.stringify(msg.data);
})