electron实现桌⾯应⽤
1. 简介
Electron是由GitHub开发，使⽤ JavaScript，HTML 和 CSS 构建跨平台的桌⾯应⽤程序
Electron 可以让你使⽤纯 调⽤丰富的原⽣ APIs 来创造桌⾯应⽤。你可以把它看作是专注于桌⾯应⽤
在PC端混合app开发中，nwjs和electron都是可选的⽅案，它们都是基于Chromium和Node的结合体, ⽽electron相对⽽⾔是更好的选择⽅案，它的社区相对⽐较活跃，bug⽐较少，⽂档先对利索简洁。
electron 相对来说⽐ 靠谱。有⼀堆成功的案例：Atom 编辑器 2. Slack (那个独⾓兽公司）3. Visual Studio Code 4. WordPress 等等。。
Node. js 的所有 都在Electron中可⽤， 第三⽅ node 模块中也完全⽀持 (包括 )。
Electron 还为开发原⽣桌⾯应⽤程序提供了⼀些额外的内置模块。 某些模块仅在主进程中可⽤, 有些仅在渲染进程 (web 页) 中可⽤,⽽有些在这两个进程中都可以使⽤。
2. 五分钟快速上⼿
2.1 安装electron
npm init
cnpm I electron –S
npx electron
2.2 配置为⼊⼝⽂件
{
"name":"electron-demo",
"version":"1.0.0",
"description":"",
"main":"main.js",
"scripts":{
"test":"echo \"Error: no test specified\" && exit 1",
"start":"electron ."
},
"author":"",
"license":"ISC",
"dependencies":{
"electron":"^8.3.0"
}
}
2.3 创建main.js⽂件
const electron =require('electron')
const app = electron.app
<('ready',()=>{
new electron.BrowserWindow({
width:800,
height:300
})
})
electron vue教程2.4创建窗⼝
<('ready',()=>{
const mainWindow =new BrowserWindow({
width:800,
height:500
})
mainWindow.loadFile('./index.html')
})
3. 主进程和渲染进程
Electron 运⾏ package.json 的 main 脚本的进程被称为主进程。 在主进程中运⾏的脚本通过创建web页⾯来展⽰⽤户界⾯。 ⼀个Electron 应⽤总是有且只有⼀个主进程。
由于 Electron 使⽤了 Chromium 来展⽰ web 页⾯，所以 Chromium 的多进程架构也被使⽤到。 每个 Electron 中的 web 页⾯运⾏在它的叫渲染进程的进程中。
在普通的浏览器中，web页⾯⽆法访问操作系统的原⽣资源。 然⽽ Electron 的⽤户在 Node.js 的 API ⽀持下可以在页⾯中和操作系统进⾏⼀些底层交互。
ctrl+shift+i打开渲染进程调试
<('ready',()=>{
const mainWindow =new BrowserWindow({
width:800,
height:500
})
mainWindow.loadFile('./index.html')
const mainWindow2 =new BrowserWindow({
width:800,
height:500
})
mainWindow2.loadFile('./index2.html')
})
4. ⾃定义原⽣菜单
4.1 ⾃定义菜单
const electron =require('electron')
const{ app, Menu }= electron
const template =[
{
label:'⽂件',
submenu:[
{
label:'新建窗⼝'
}
]
},
{
label:'编辑',
submenu:[
{
label:'新建窗⼝'
}
]
}
]
const menu = Menu.buildFromTemplate(template) Menu.setApplicationMenu(menu)
4.2 给菜单定义点击事件
1、点击打开新窗⼝
submenu:[
{
label:'新建窗⼝',
click:()=>{
const newMainWindow =new BrowserWindow({ width:300,
height:300
})
newMainWindow.loadFile('./new.html')
}
}
]
2、点击打开浏览器
const{ BrowserWindow, Menu, shell }=require('electron') const template =[
{
label:'⽂件',
submenu:[
{
label:'⽂件1',
click(){
/
/ 点击打开新窗⼝
const mainWindow2 =new BrowserWindow({
width:600,
height:600
})
mainWindow2.loadFile('./index.html')
}
}
]
},
{
label:'csdn',
click(){
// 点击打开浏览器
shell.openExternal('www.csdn/')
}
}
]
4.3 抽离菜单定义
const{ BrowserWindow, Menu}=require('electron') const template =[
{
label:'⽂件',
submenu:[
{
label:'新建窗⼝',
click:()=>{
const newMainWindow =new BrowserWindow({
width:300,
height:300
})
newMainWindow.loadFile('./new.html')
}
}
]
},
{
label:'编辑',
submenu:[
{
label:'新建窗⼝'
}
]
}
]
const menu = Menu.buildFromTemplate(template) Menu.setApplicationMenu(menu)
require('./menu')
打开调式
mainWindow.webContents.openDevTools() 4.4 ⾃定义顶部菜单
通过frame创建⽆边框窗⼝
const mainWindow =new electron.BrowserWindow({
frame:false
})
⾃定义窗⼝
<div class="header" >
</div>
icon
const mainWindow =new electron.BrowserWindow({
width:1000,
height:600,
webPreferences:{
nodeIntegration:true
},
frame:false,
icon:'./hm.ico'
})
backgroundColor
4.5 定义右键菜单
js>index.js
const{ remote }=require('electron')
const template =[
{
label:'粘贴'
},
{
label:'赋值'
}
]
const menu = remote.Menu.buildFromTemplate(template)
window.addEventListener('contextmenu',(e)=>{
console.log(123)
e.preventDefault()
menu.popup({ window: CurrentWindow()}) })
在index.html中引⼊
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论