Electron基本使用

502 阅读8分钟

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({
                            width500,
                            height500,
                            webPreferences: {
                                nodeIntegrationtrue
                            }
                        })
                        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属性,然后获取元素并绑定点击事件,然后关闭默认行为,然后绑定浏览器打开事件

在应用中嵌入一个网页

1607258955428
1607258955428
       //引入
    var BrowserView = electron.BrowserView
        //创建
    var view = new BrowserView()
        //挂载
    mainWindow.setBrowserView(view)
        //设置位子
    view.setBounds({ x0, y120, width1000, height500 })
        //载入的网页
    view.webContents.loadURL('https:baidu.com')

小结:在主进程引入,设置,然后挂载,效果图如上

打开子窗口:window.open

子窗口向父窗口通信

 window.opener.postMessage('我是子窗口传递的信息',targetOrange),没第二参数则传全部

 window.addEventListener('message',(msg)=>{
 let msg = JSON.stringify(msg.data);
  })