Electron 主进程和渲染进程都可使用的模块
2022/2/12 7:16:28
本文主要是介绍Electron 主进程和渲染进程都可使用的模块，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
shell模块
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>shell 与 iframe</h2>
<a id="openUrl" href="https://kaiwu.lagou.com/">打开URL</a>
<br><br>
<button id="openFolder">打开目录</button>
<script src="index.js"></script>
</body>
</html>
index.js
const { shell } = require('electron')
const path = require('path')
window.addEventListener('DOMContentLoaded', () => {
const oBtn1 = document.getElementById('openUrl')
const oBtn2 = document.getElementById('openFolder')
oBtn1.addEventListener('click', (e) => {
e.preventDefault()
const urlPath = oBtn1.getAttribute('href')
shell.openExternal(urlPath) // 使用默认浏览器打开链接
})
oBtn2.addEventListener('click', () => {
shell.showItemInFolder(path.resolve(__filename))
})
})
iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
}
</style>
</head>
<body>
<h2>shell 与 iframe</h2>
<iframe src="https://kaiwu.lagou.com/" frameborder="0" id="webview"></iframe>
<script src="index.js"></script>
</body>
</html>
自定义菜单使用shell
main.js
const { app, BrowserWindow, Menu, shell } = require('electron')
console.log(process.platform)
// 定义全局变量存放主窗口 id
let mainWinId = null
// 创建窗口
function createWindow () {
console.log('ready')
// 创建主进程
const mainWin = new BrowserWindow({
title: '自定义菜单',
show: false, // true：显示窗体，false: 不显示窗体
width: 800,
height: 400,
webPreferences: {
nodeIntegration: true, // 允许浏览器环境使用Node API
enableRemoteModule: true, // 允许页面使用 remote
}
})
let tmp = [
{
label: '菜单',
submenu: [
{
label: '关于',
click() {
shell.openExternal('https://kaiwu.lagou.com/')
}
},
{
label: '打开',
click() {
BrowserWindow.getFocusedWindow().webContents.send('openUrl')
}
},
]
}
]
let menu = Menu.buildFromTemplate(tmp)
Menu.setApplicationMenu(menu)
// 在当前窗口中加载指定界面让它显示具体的内容
mainWin.loadFile('index.html')
mainWinId = mainWin.id
mainWin.on('ready-to-show', () => {
mainWin.show() // 在窗体完全加载完成后，显示窗体，避免白页现象
})
mainWin.on('close', () => {
console.log('close')
//mainWin = null
})
}
// 当 app 启动之后，执行窗口创建等操作
app.on('ready', createWindow)
app.on('window-all-closed', () => {
console.log('window-all-closed')
app.quit()
})
消息通知
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <h2>基于 H5 实现消息通知</h2> <button id="btn">触发消息</button> <script src="index.js"></script> </body> </html>
index.js
window.addEventListener('DOMContentLoaded', () => {
const oBtn = document.getElementById('btn')
oBtn.addEventListener('click', () => {
const option = {
title: '通知消息123',
body: '消息内容abc',
icon: './msg.png',
}
const myNotification = new window.Notification(option.title ,option)
myNotification.onclick = function() {
console.log('点击了消息页卡')
}
})
})
1
快捷键注册
main.js
const { app, BrowserWindow, globalShortcut } = require('electron')
console.log(process.platform)
// 定义全局变量存放主窗口 id
let mainWinId = null
// 创建窗口
function createWindow () {
console.log('ready')
// 创建主进程
const mainWin = new BrowserWindow({
title: '自定义菜单',
show: false, // true：显示窗体，false: 不显示窗体
width: 800,
height: 400,
webPreferences: {
nodeIntegration: true, // 允许浏览器环境使用Node API
enableRemoteModule: true, // 允许页面使用 remote
}
})
// 在当前窗口中加载指定界面让它显示具体的内容
mainWin.loadFile('index.html')
mainWinId = mainWin.id
mainWin.on('ready-to-show', () => {
mainWin.show() // 在窗体完全加载完成后，显示窗体，避免白页现象
})
mainWin.on('close', () => {
console.log('close')
//mainWin = null
})
}
// 当 app 启动之后，执行窗口创建等操作
app.on('ready', createWindow)
// 注册快捷键
app.on('ready', () => {
const ret = globalShortcut.register('ctrl + q', () => {
console.log('快捷键注册')
})
if (!ret) {
console.log('注册失败')
}
console.log(globalShortcut.isRegistered('ctrl + q'))
console.log(ret)
})
app.on('will-quit', () => {
// 取消注册的快捷键
globalShortcut.unregister('ctrl + q')
// 取消所有注册的快捷键
globalShortcut.registerAll()
})
app.on('window-all-closed', () => {
console.log('window-all-closed')
app.quit()
})
剪切板模块
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <h2>剪切版</h2> <input type="text" placeholder="输入需要复制的内容"> <button>复制</button> <br><br> <input type="text" placeholder="将内容粘贴至此处"> <button>粘贴</button> <br><br> <button id='clipImg'>将图片拷贝至剪切版再粘贴至界面</button> <br><br> <script src="index.js"></script> </body> </html>
index.js
const { clipboard, nativeImage } = require('electron')
window.addEventListener('DOMContentLoaded', () => {
const aBtn = document.getElementsByTagName('button')
const aInput = document.getElementsByTagName('input')
const oBtn = document.getElementById('clipImg')
let ret = null
aBtn[0].addEventListener('click', () => {
// 复制内容到剪切板
ret = clipboard.writeText(aInput[0].value)
})
aBtn[1].addEventListener('click', () => {
// 粘贴剪切板内的内容
aInput[1].value = clipboard.readText(ret)
})
oBtn.addEventListener('click', () => {
// 将图片放置于剪切板当中的时候要求图片类型属于 nativeImage 实例
const oImage = nativeImage.createFromPath('./msg.png')
clipboard.writeImage(oImage)
// 将剪切板中的图片做为 DOM 元素显示在界面上
const oImg = clipboard.readImage()
const oImgDom = new Image()
oImgDom.src = oImg.toDataURL()
document.body.append(oImgDom)
})
})
1
这篇关于Electron 主进程和渲染进程都可使用的模块的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议，共探开源教育未来
- 2024-05-13PingCAP 戴涛：构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性：Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准（DoD）与验收条件（AC）究竟有什么不同？
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起，轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持，CodeGeeX的@repo功能效果提升
