1、安装(需要node环境node -v npm -v 自行测试)
初始化命令：npm init （package.json设置入口文件为main.js）
安装 electron（这里使用的是最新版本16.0.3）：npm install electron --save-dev
查看是否安装成功npx electron -v
或 .\node_modules\.bin\electron 打开正常
设置启动命令
{
"scripts": {
"start": "electron ."
}
}
2.第一个helloword程序！
main.js
- app 模块，它控制应用程序的事件生命周期
- BrowserWindow 模块，它创建和管理应用程序 窗口。
const { app, BrowserWindow } = require('electron')
function createWindow () {
//创建一个新的BrowserWindow实例
const win = new BrowserWindow({
width: 800,
height: 600
})
//在您的项目根目录下创建一个名为index.html的文件(先不要添加js)
//加载文件
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
//关闭所有窗口时退出应用(Windows & Linux)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 您可以通过使用 app.whenReady() API来监听此事件。 在whenReady()成功后调用createWindow()。
测试 npm run start如下图：
3、通过预加载脚本从渲染器访问Node.js
预加载(preload)脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。
main.js
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
根目录下preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
// 访问 Node.js process.versions 对象 输出Electron等的版本号
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
4、第二种办法直接在index.html添加一个 <script> 标签
renderer.js内容和preload.js相同
<script src="./renderer.js"></script>
main.js改成
webPreferences: {
// preload: path.join(__dirname, 'preload.js'),
nodeIntegration:true,// 集成 Nodejs
contextIsolation: false
}
4.利用remote模块在index.html打开另外一个窗口
main.js 创建BrowserWindow时webPreferences添加
webPreferences: {
preload: path.join(__dirname, './render/index.js'),
contextIsolation: false,//没这个输不出
enableRemoteModule: true//没有设置这个remote会变成undefined
}
以及
require('@electron/remote/main').initialize()
win.loadFile('index.html')
require("@electron/remote/main").enable(win.webContents)
index.html
btn点击读取suibian.txt文件
open点击
<button id="btn">读取文件</button>
<div id="text"></div>
<button id="open">打开新窗口</button>
./render/index.js
var fs=require('fs')
window.onload=function(){
var btn =this.document.querySelector('#btn');
var text =this.document.querySelector('#text');
var open =this.document.querySelector('#open');
const {BrowserWindow} =require('@electron/remote')
open.onclick=function(){
newWin=new BrowserWindow({
width:300,
heigth:300
})
newWin.loadFile('index2.html')
newWin.on('close',()=>{
newWin=null
})
}
btn.onclick=function(){
fs.readFile('suibian.txt',function(err,data){
text.innerHTML=data
})
}
}
5.自定义顶部菜单栏
main.js
app.on('ready',()=>{
//省略
})
//设置菜单
require('./main/menu.js')
require('@electron/remote/main').initialize()
mainWindow.loadFile('index.html')
require("@electron/remote/main").enable(webContents) to enable it.
// 监听关闭事件
mainWindow.on('closed',()=>{
mainWindow=null;
})
})
menu.js
const {Menu,BrowserWindow} =require('electron')
var template=[
{
label:'菜单一',
submenu:[
{
label:'子菜单一',
//设置子菜单点击事件
click:()=>{
var win =new BrowserWindow({
width:500,
height:5000,
webPreferences:{
nodeIntegration:true,// 是否集成 Nodejs
contextIsolation: false,//没这个输不出
enableRemoteModule: true//没有设置这个remote会变成undefined
}
})
win.loadFile('index2.html')
win.on('closed',()=>{
win=null
})
}
},
{
label:'子菜单二'
}
]
},
{
label:'菜单二',
submenu:[
{
label:'子菜单一'
}
]
}
]
var m=Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)
设置完菜单后，不可直接使用ctrl+shift+i进入调试模式，可以通过代码手动打开
在main.js中设置
const win = new BrowserWindow({
//....省略
})
win.webContents.openDevTools()
6.设置右键菜单栏
这里用<script src="./render/index.js"></script> 导入到index.html
或在main.js加载预加载脚本也可 preload: path.join(__dirname, './render/index.js'),
var remote =require('@electron/remote')
var rigthTemplete=[
{
label:'复制'
},{
label:'黏贴'
}
]
var m=remote.Menu.buildFromTemplate(rigthTemplete)
window.addEventListener('contextmenu',(e)=>{
e.preventDefault()
m.popup({window:remote.getCurrentWindow()})
})
7、点击链接，跳转到浏览器
<a id="aHref" href="https://www.hao123.com/?tn=57028281_7_hao_pg">跳转到浏览器</a>
const {shell}= require('electron')
var aHref=document.querySelector('#aHref')
aHref.onclick=function(e){
e.preventDefault();
var href=this.getAttribute('href')
shell.openExternal(href)
}
8、嵌套子窗口
main.js
多引入BrowserView
const { app, BrowserWindow,BrowserView } = require('electron')
在createWindow 函数（创建窗口对象实例）添加如下代码
const view = new BrowserView()
win.setBrowserView(view) //将子窗口view嵌入到父窗口win中
view.setBounds({ x: 0, y: 200, width:200 , height: 400 })
view.webContents.loadURL("http://www.baidu.com")
//不知道为什么没有这个不会显示
view.setAutoResize({ width: true, height: true }) //视图的宽度与窗口一起增长和缩小
区别使用window.open（打开的是新窗口）
window.open('url')
9.父窗口和子窗口传递信息
父窗口
<div id="text"></div>
window.addEventListener('message',(msg)=>{
let text=document.querySelector('#text')
text.innerHTML=JSON.stringify(msg.data);
})
子窗口
<button id="popbtn">向父窗口传递信息</button>
var popbtn=document.querySelector('#popbtn')
popbtn.onclick=function(e){
window.opener.postMessage('我是子窗口传递过来的')
}
1760
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
