Electron笔记(二)
一. remote模块
有时候,我们需要在渲染的窗口中打开新的窗口,也就需要在渲染进程中使用主进程中的方法.
当我们知道了Electron有主进程和渲染进程后，我们还要知道一件事，就是Electron的API方法和模块也是分为可以在主进程和渲染进程中使用。那如果我们想在渲染进程中使用主进程中的模块方法时，可以使用Electron Remote解决在渲染和主进程间的通讯。
const btn = this.document.querySelector('#btn01')
const BrowserWindow =require('electron').remote.BrowserWindow//用remote添加一个类对象
window.onload = function(){
btn.onclick = ()=>{
newWin = new BrowserWindow({ //实例化这个类对象,就是新窗口了!
width:500,
height:500,
//这里就不用启动node了
})
newWin.loadFile('yellow.html')
newWin.on('close',()=>{win=null})
}
}
上述代码我们执行会新建一个窗口,并渲染yellow.html页面.
注意: 我们在渲染进程中引入了主进程API,这是需要node支持的!!!!!!所以,main.js中相关的设置:webPreferences:{ nodeIntegration:true} 不可省略!!!
二. 菜单的创建和使用
1.菜单是需要模板的,我们需要新建一个对应的js文件
2.接下来,要使用menu,我们应该引入Menu组件
const Menu= require('electron').Menu
3.创建一个menu的模板
这个模板其实是一个数组,每个元素都是一个menu对象 每个对象都有label submenu等属性
submenu也是一个menu对象的集合,同时有click属性,可以传入方法对应的处理方法
var template = [
{
label: '菜单1',
submenu: [
{
label: '菜单1子项1:yellow',
click: () => {
var winForM1S1 = new BrowserWindow({
width: 300,
height: 300,
webPreferences: { nodeIntegration: true }
}
)
winForM1S1.loadFile('yellow.html')
winForM1S1.on('closed', () => {
winForM1S1 = null
})
}
},
{ label: '菜单1子项2' },
{
label: '菜单1子项3',
submenu: [
{ label: '菜单1子项3子子项1' },
{ label: '菜单1子项3子子项2' },
{ label: '菜单1子项3子子项3' }
]
}
]
},
{
label: '菜单2',
submenu: [
{ label: '菜单2子项1' },
{ label: '菜单2子项2' },
{ label: '菜单2子项3' },
{ label: '菜单2子项4' }
]
},
]
4. 设计完模板后,我们用Menu类的buildFromTemplate构造方法构造一个目录
var m = Menu.buildFromTemplate(template)
5.再把这个实例好的目录传给目录
Menu.setApplicationMenu(m)
6. 最后,在main.js中适合位置引入就可以了
require('./main/menu.js')
例:
main.js
var electron = require('electron')
var app = electron.app
var BrowserWindow = electron.BrowserWindow;
var mainWindow = null;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 500,
height: 500,
webPreferences: { nodeIntegration: true }//启用node功能
})
require('./main/menu.js')
mainWindow.loadFile('index.html')
mainWindow.on('closed', () => {
mainWindow = null
})
})
menu.js
const { Menu , BrowserWindow} = require('electron')
var template = [
{
label: '菜单1',
submenu: [
{
label: '菜单1子项1:yellow',
accelerator:'ctrl+n',
click: () => {
var winForM1S1 = new BrowserWindow({
width: 300,
height: 300,
webPreferences: { nodeIntegration: true }
}
)
winForM1S1.loadFile('yellow.html')
winForM1S1.on('closed', () => {
winForM1S1 = null
})
}
},
{ label: '菜单1子项2' },
{
label: '菜单1子项3',
submenu: [
{ label: '菜单1子项3子子项1' },
{ label: '菜单1子项3子子项2' },
{ label: '菜单1子项3子子项3' }
]
}
]
},
{
label: '菜单2',
submenu: [
{ label: '菜单2子项1' },
{ label: '菜单2子项2' },
{ label: '菜单2子项3' },
{ label: '菜单2子项4' }
]
},
]
var m = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)
打开菜单1子项1
写完菜单后我们发现,原先的调试菜单已被替换,那我们怎么调试呢?
我们需要在代码中打开调试窗口
mainWindow.webContents.openDevTools() //卸载主进程中,让主窗口打开调试窗口
三. 右键菜单
点击右键是在渲染进程中,所以我们应该在渲染进程中添加响应事件
不如我们先加一个点击事件:
在index.js(渲染进程中)
window.addEventListener("click",()=>{
alert('窗口被点击了!!')
})
现在我们开始正式添加右键菜单
1.添加右键点击事件
window.addEventListener("contextmenu",()=>{
//此处写右键单击事件
})
2.阻止默认响应事件
window.addEventListener("contextmenu",(e)=>{
e.preventDefault()
})
3.引入remote
因为是在渲染进程中写,所以应该引入remote
const {remote} =require('electron')
4.制作目录模板
const {remote} =require('electron')
var rightTemplate = [
{
label: "复制"},
{
label: "粘贴"
},
{
label: "选项3"
}
]
5.建立菜单
var m=Menu.buildFromTemplate(rightTemplate)
6.将目录绑定给事件监听器
window.addEventListener("contextmenu", (e) => {
//阻止当前窗口默认事件
e.preventDefault();
//把菜单模板添加到右键菜单
m.popup({ window: remote.getCurrentWindow() })
})
例子:index.js中
const { remote } = require('electron')
var rightTemplate = [
{
label: "复制"
},
{
label: "粘贴"
},
{
label: "选项3"
}
]
var m = remote.Menu.buildFromTemplate(rightTemplate)
window.addEventListener("contextmenu", (e) => {
//阻止当前窗口默认事件
e.preventDefault();
//把菜单模板添加到右键菜单
m.popup({ window: remote.getCurrentWindow() })
})
四. 通过链接打开浏览器
如果我们渲染的页面里有一个a标签,那electron会默认用自己的窗口打开A标签,但是它的解析能力远不如传统浏览器,所以我们需要浏览器打开链接
这里我们是在渲染进程中点击的,所以,代码要写在渲染进程中
- 引入shell
首先,要使用此功能,我们用到了electron 的一个 shell 模块
var { shell }= require('electron')
2. 获取a标签,并阻止其默认动作
var aHerf =document.querySelector('#aHerf')
aHerf.onclick=function (e) {
e.preventDefault()
}
3.在onclick事件中调用shell,并传入a标签链接
例子:
var { shell }= require('electron')
//引入shell
var aHerf =document.querySelector('#aHerf')
//获取A标签
aHerf.onclick=function (e) {
e.preventDefault()//禁用默认动作
var herf= this.getAttribute('href')//获取herf
shell.openExternal(herf)//将herf传给shell,让它用浏览器打开
}
