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标签,但是它的解析能力远不如传统浏览器,所以我们需要浏览器打开链接

这里我们是在渲染进程中点击的,所以,代码要写在渲染进程中

1. 引入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,让它用浏览器打开
}