一、electron简介
1、electron是由 Github开发的开源框架。
2、它允许开发者使用Web技术构建跨平台的桌面应用。
3、Electron = Chromium + Node.js + Native API。
二、运行流程
1、读取package.json中的入口文件。main.js
2、main.js主进程中创建渲染进程。
3、读取应用页面的布局和样式。
4、使用IPC在主进程执行任务并获取信息。
5、一个主进程可以控制多个渲染进程。
三、常用API
1、Node的 url.format()
url.format({
protocol: 'https',
hostname: 'example.com',
pathname: '/some/path',
query: {
page: 1,
format: 'json'
}
});
// => 'https://example.com/some/path?page=1&format=json'
2、主进程窗口加载网页内容
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 支持node.js在html中使用
}
});
win.loadURL(url.format({
protocol: 'file',
pathname:require('path').resolve(__dirname, './html/main.html')
slashes: true, }));
})
3、定义菜单
//菜单模板
const menuTemplate = [ {label: '文件'}]
const mainMenu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(mainMenu);
4、子窗口向父窗口发送传递信息
add.html
<script>
const electron = require('electron');
const { ipcRenderer } = electron;
const form = document.querySelector('form')
// submit 事件
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.querySelector('#name').value;
const ip = document.querySelector('#ip').value;
// 发送传递信息
ipcRenderer.send('info:add', { name, ip })
})
</script>
5、主进程中添加事件监听
main.js
const { app, BrowserWindow, Menu, ipcMain } = electron;
// 事件监听：监听事件信息的传递
const eventListener = () => {
// 主进程 监听新增窗口传递过来的信息项
ipcMain.on('info:add', (e, val) => {
win.webContents.send('info:add', val);
addWin.close();
})
}
eventListener();
6、主窗口添加接收 子窗口传递过来的信息
main.html
<script>
const electron = require('electron');
const { ipcRenderer } = electron;
// 主窗口接收 新增信息窗口传递过来的数据
ipcRenderer.on('info:add', (e, value) => {console.log(value);});
</script>
四、打包命令
"build-win": "electron-packager . info-list-app --out=dist --overwrite --platform=win32 --arch=x64 --prune=true --icon=icon/win/icon.ico",
"build-linux": "electron-packager . info-list-app --out=dist --overwrite --platform=linux --arch=x64 --prune=true --icon=icon/linux/icon.png",
"build-mac": "electron-packager . info-list-app --out=dist --overwrite --platform=darwin --arch=x64 --prune=true --icon=icon/mac/icon.icns"
打包工具：electron-packager； 当前打包环境：当前文目录.；打包名称：info-list-app；输出目录：dist；覆盖：overwrite；平台：win32；当前客户端位数：x64；精简打包：true；应用程序的图标：icon/win/icon.ico
五、案例：读取静态文件并在窗口中展示
1、创建txt文件并写入内容。
2、创建main.js文件，编写主进程中代码
var electron = require('electron') //引入electron模块
var app = electron.app // 创建electron引用
var globalShortCut = electron.globalShortcut
var BrowserWindow = electron.BrowserWindow; //创建窗口引用
var mainWindow = null; //声明要打开的主窗口
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 500,
height: 500,
// nodeIntegration: true 允许使用node.js
webPreferences: { nodeIntegration: true, enableRemoteModule: true, },
})
mainWindow.webContents.openDevTools()
globalShortCut.register('ctrl+e', () => {
mainWindow.loadURL('https://jspang.com');
})
let isRegister = globalShortCut.isRegistered('ctrl+e') ? 'success' : 'fail';
console.log(isRegister);
require('./main/menu.js');
mainWindow.loadFile('demo7.html') //加载页面
// 类似于ifrme内嵌页面
/*
var BrowserView = electron.BrowserView;
var view = new BrowserView()
mainWindow.setBrowserView(view);
view.setBounds({ x: 0, y: 120, width: 1200, height: 680 })
view.webContents.loadURL('https://jspang.com')
*/
//监听关闭事件，把主窗口设置为null
mainWindow.on('closed', () => {
mainWindow = null
})
})
app.on('will-quit', function () {
// 在将要推出应用之前，注销全局快捷键
globalShortCut.unregister('ctrl+e');
globalShortCut.unregisterAll();
})
3、创建index.html文件
主要代码
<body>
<Button id="btn">加载文本</Button><br />
<div id="mydiv"></div>
<script src='renderer/index.js'></script>
</body>
renderer.js代码
var fs = require('fs')
window.onload = function () {
var btn = this.document.querySelector('#btn')
var mydiv = this.document.querySelector('#mydiv')
btn.onclick = function () {
fs.readFile('xiaojiejie.txt', (err, data) => {
mydiv.innerHTML = data;
});
}
}
