Electron⽤前端技术开发桌⾯应⽤ ⼀、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',
pathname: '/some/path',
query: {
page: 1,
format: 'json'
}
});
// => 'example/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 = () => {
// 主进程 监听新增窗⼝传递过来的信息项
<('info:add', (e, val) => {
win.webContents.send('info:add', val);
addWin.close();
})
}
eventListener();
6、主窗⼝添加接收 ⼦窗⼝传递过来的信息
main.html
<script>
const electron = require('electron');
nodeselector
const { ipcRenderer } = electron;
// 主窗⼝接收 新增信息窗⼝传递过来的数据
<('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 --pru
ne=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;  //声明要打开的主窗⼝
<('ready', () => {
mainWindow = new BrowserWindow({
width: 500,
height: 500,
//  nodeIntegration: true 允许使⽤node.js
webPreferences: { nodeIntegration: true, enableRemoteModule: true, },
})
mainWindow.webContents.openDevTools()
mainWindow.loadURL('jspang');
})
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('jspang')
*/
//监听关闭事件，把主窗⼝设置为null
<('closed', () => {
mainWindow = null
})
})
<('will-quit', function () {
// 在将要推出应⽤之前，注销全局快捷键
globalShortCut.unregister('ctrl+e');
globalShortCut.unregisterAll();
})
3、创建index.html⽂件
主要代码
<body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。