一 安装electron环境
1.安装 npm install electron --save-dev
npm install -g electron
2.检测版本号 npx electron -v
3.启动 ./node-modules/.bin/electron
二 简易创建electron项目
1.创建主入口文件 main.js,可设置主浏览器大小样式和选择所要渲染的html页面
var electron = require("electron"); //引用electron
var app = electron.app; //引用app
const BrowserWindow = electron.BrowserWindow; //窗口引用
var mainWindow = null; //声明要打开的主窗口
app.on("ready", () => { //ready 生命周期
mainWindow = new BrowserWindow(
{
width: 800,
height: 800,
webPreferences:{
nodeIntegration:true,
contextIsolation: false,
enableRemoteModule:true,
}
}); //设置html页面属性
mainWindow.webContents.openDevTools()//打开控制台
require('./main/main.js')//生成目录
mainWindow.loadFile("index.html"); //加载的html页面
mainWindow.on("closed", () => {
mainWindow = null;
}); //关闭浏览器监听 减少内存
});
2.创建主渲染文件 index.html,可在html的script标签中引入所需的js文件
<body>
hello world
<button id="btn">content按钮</button>
<div id="content"></div>
<script src="render/index.js"></script> //可进行dom js操作等
</body>
3.npm init 生成package.json文件
{
"name": "electron01",
"version": "1.0.0",
"description": "",
"main": "main.js",//可修改主入口文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "yogi",
"license": "ISC"
}
4.生成render/index.js 进行渲染
三 生成目录
1.引用electron中的Menu
2.生成以数组为格式的数据结构作为目录内容
3.使用该方法生产目录
var m = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m);
var template = [
{
label: "菜单1",
submenu: [
{
label: "子菜单1-1",
accelerator: "ctrl + n", //快捷键操作
click: () => {
//点击菜单的方法
var win = new BrowserWindow({
width: 500,
height: 500,
webPreferences: {
nodeIntegration: true,
},
});
win.loadFile("open.html");
win.on("closed", () => {
win = null;
});
},
},
{
label: "子菜单1-2",
},
],
},
]