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);
})
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！